fix collapsed notifications incorrect styles

This commit is contained in:
Henry Jameson 2024-02-27 01:08:04 +02:00
parent adc47ad38a
commit d8827932bc
6 changed files with 18 additions and 26 deletions

View File

@ -247,7 +247,6 @@
/> />
<template v-else> <template v-else>
<StatusContent <StatusContent
:class="{ faint: !statusExpanded }"
:compact="!statusExpanded" :compact="!statusExpanded"
:status="notification.status" :status="notification.status"
/> />

View File

@ -60,20 +60,6 @@
padding: 0.6em; padding: 0.6em;
min-width: 0; min-width: 0;
.RichContent {
a {
--link: var(--linkFaint);
}
.greentext {
--funtextGreentext: var(--funtextGreentextFaint);
}
.cyantext {
--funtextCyantext: var(--funtextCyantextFaint);
}
}
.avatar-container { .avatar-container {
width: 32px; width: 32px;
height: 32px; height: 32px;

View File

@ -79,6 +79,12 @@ export default {
required: false, required: false,
type: Boolean, type: Boolean,
default: false default: false
},
// Faint style (for notifs)
faint: {
required: false,
type: Boolean,
default: false
} }
}, },
// NEVER EVER TOUCH DATA INSIDE RENDER // NEVER EVER TOUCH DATA INSIDE RENDER
@ -277,7 +283,7 @@ export default {
// DO NOT USE SLOTS they cause a re-render feedback loop here. // DO NOT USE SLOTS they cause a re-render feedback loop here.
// slots updated -> rerender -> emit -> update up the tree -> rerender -> ... // slots updated -> rerender -> emit -> update up the tree -> rerender -> ...
// at least until vue3? // at least until vue3?
const result = <span class="RichContent"> const result = <span class={['RichContent', this.faint ? '-faint' : '']}>
{ pass2 } { pass2 }
</span> </span>

View File

@ -1,6 +1,15 @@
.RichContent { .RichContent {
font-family: var(--font); font-family: var(--font);
&.-faint {
/* stylelint-disable declaration-no-important */
--text: var(--textFaint) !important;
--link: var(--linkFaint) !important;
--funtextGreentext: var(--funtextGreentextFaint) !important;
--funtextCyantext: var(--funtextCyantextFaint) !important;
/* stylelint-enable declaration-no-important */
}
blockquote { blockquote {
margin: 0.2em 0 0.2em 0.2em; margin: 0.2em 0 0.2em 0.2em;
font-style: italic; font-style: italic;

View File

@ -11,6 +11,7 @@
> >
<RichContent <RichContent
class="media-body summary" class="media-body summary"
:faint="compact"
:html="status.summary_raw_html" :html="status.summary_raw_html"
:emoji="status.emojis" :emoji="status.emojis"
/> />
@ -48,6 +49,7 @@
:html="status.raw_html" :html="status.raw_html"
:emoji="status.emojis" :emoji="status.emojis"
:handle-links="true" :handle-links="true"
:faint="compact"
:greentext="mergedConfig.greentext" :greentext="mergedConfig.greentext"
:attentions="status.attentions" :attentions="status.attentions"
@parseReady="onParseReady" @parseReady="onParseReady"

View File

@ -62,15 +62,5 @@
.StatusContent { .StatusContent {
flex: 1; flex: 1;
min-width: 0; min-width: 0;
&.faint {
.greentext {
color: var(--funtextGreentextFaint);
}
.cyantext {
color: var(--funtextCyantextFaint);
}
}
} }
</style> </style>