graphite/Sharkey
1
0
Fork 0
mirror of https://git.joinsharkey.org/Sharkey/Sharkey.git synced 2024-11-27 04:53:08 +02:00
Code Issues Projects Releases Packages Wiki Activity

Hover effect for conversation notes (like Firefish)

Browse source
This commit is contained in:
Volpeon 2024-01-03 14:42:51 +01:00
parent 43b3b5a34b
commit 1ca0cd727e
No known key found for this signature in database
2 changed files with 21 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
packages/frontend/src/components/SkNoteDetailed.vue
View file

@ -43,7 +43,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<SkNoteSub v-for="note in conversation" :key="note.id" :class="$style.replyToMore" :note="note" :expandAllCws="props.expandAllCws"/> <SkNoteSub v-for="note in conversation" :key="note.id" :class="$style.replyToMore" :note="note" :expandAllCws="props.expandAllCws"/>
</template> </template>
<SkNoteSub v-if="appearNote.reply" :note="appearNote.reply" :class="$style.replyTo" :expandAllCws="props.expandAllCws"/> <SkNoteSub v-if="appearNote.reply" :note="appearNote.reply" :class="$style.replyTo" :expandAllCws="props.expandAllCws"/>
<article ref="noteEl" :class="$style.note" tabindex="-1" @contextmenu.stop="onContextmenu"> <article :id="appearNote.id" ref="noteEl" :class="$style.note" tabindex="-1" @contextmenu.stop="onContextmenu">
<header :class="$style.noteHeader"> <header :class="$style.noteHeader">
<MkAvatar :class="$style.noteHeaderAvatar" :user="appearNote.user" indicator link preview/> <MkAvatar :class="$style.noteHeaderAvatar" :user="appearNote.user" indicator link preview/>
<div style="display: flex; align-items: center; white-space: nowrap; overflow: hidden;"> <div style="display: flex; align-items: center; white-space: nowrap; overflow: hidden;">

21
packages/frontend/src/components/SkNoteSub.vue
View file

@ -461,7 +461,26 @@ if (props.detail) {
} }
.main { .main {
display: flex; position: relative;
display: flex;
&::after {
content: "";
position: absolute;
top: -12px;
right: -12px;
left: -12px;
bottom: -12px;
background: var(--panelHighlight);
border-radius: var(--radius);
opacity: 0;
transition: opacity .2s, background .2s;
z-index: -1;
}
&:hover::after {
opacity: 1;
}
} }
.colorBar { .colorBar {