natty
/
magnetar
1
0
Fork 0
Code Issues 4 Pull Requests 1 Packages Projects Releases Wiki Activity

Frontend: Prettier notification groups

This commit is contained in:
Natty 2024-04-29 21:49:42 +02:00
parent bca16253af
commit 6c7e3d79e0
Signed by: natty
GPG Key ID: BF6CB659ADEE60EC
1 changed files with 16 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
fe_calckey/frontend/client/src/components/MagNotificationGroup.vue
View File

@ -69,11 +69,13 @@
<MagAvatar <MagAvatar
v-if="notif.type === 'Renote'" v-if="notif.type === 'Renote'"
class="icon" class="icon"
:class="{ 'is-read': notif.is_read }"
:user="notif.note.user" :user="notif.note.user"
/> />
<MagAvatar <MagAvatar
v-else-if="notif.type === 'Reaction'" v-else-if="notif.type === 'Reaction'"
class="icon" class="icon"
:class="{ 'is-read': notif.is_read }"
:user="notif.user" :user="notif.user"
/> />
<div class="sub-icon" :class="notif.type"> <div class="sub-icon" :class="notif.type">
@ -264,6 +266,11 @@ const hookTooltip = (
width: 100%; width: 100%;
height: 100%; height: 100%;
border-radius: 6px; border-radius: 6px;
&:not(.is-read) {
outline: 1px solid var(--accentDarken);
outline-offset: 2px;
}
} }
> .sub-icon { > .sub-icon {
@ -314,7 +321,7 @@ const hookTooltip = (
flex-wrap: wrap; flex-wrap: wrap;
align-items: baseline; align-items: baseline;
margin-inline-end: 10px; margin-inline-end: 10px;
gap: 0.2em; gap: 0.4em;
> .name { > .name {
text-overflow: ellipsis; text-overflow: ellipsis;
@ -322,10 +329,15 @@ const hookTooltip = (
overflow: hidden; overflow: hidden;
min-width: 0; min-width: 0;
flex: 0 1 auto; flex: 0 1 auto;
} max-width: 150px;
border: 1px solid var(--accentedBg);
border-radius: 20px;
padding-inline: 10px;
> .name:not(:last-child)::after { &:hover {
content: ","; background-color: var(--accentedBg);
border-color: var(--accent);
}
} }
} }