heartles/egirlskey
1
0
Fork 0
Code Issues 1 Pull requests Projects Releases Packages Wiki Activity

upd: only enable hover effect on SkNoteDetailed and replies

Browse source
This commit is contained in:
ShittyKopper 2024-02-03 15:22:12 +03:00
parent c61adcf61d
commit 5ef8e3123b
2 changed files with 9 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -40,9 +40,9 @@ SPDX-License-Identifier: AGPL-3.0-only
</div>
</div>
<template v-if="appearNote.reply && appearNote.reply.replyId">
<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" detailed/>
</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" detailed/>
<article :id="appearNote.id" ref="noteEl" :class="$style.note" tabindex="-1" @contextmenu.stop="onContextmenu">
<header :class="$style.noteHeader">
<MkAvatar :class="$style.noteHeaderAvatar" :user="appearNote.user" indicator link preview/>

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

@ -4,7 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only
-->
<template>
<div v-show="!isDeleted" v-if="!muted" ref="el" :class="[$style.root, { [$style.children]: depth > 1, [$style.replyRoot]: props.reply }]">
<div v-show="!isDeleted" v-if="!muted" ref="el" :class="[$style.root, { [$style.children]: depth > 1, [$style.replyRoot]: props.reply, [$style.detailed]: props.detailed }]">
<div v-if="!hideLine" :class="$style.line"></div>
<div :class="$style.main">
<div v-if="note.channel" :class="$style.colorBar" :style="{ background: note.channel.color }"></div>
@ -127,9 +127,11 @@ const props = withDefaults(defineProps<{
depth?: number;
reply?: boolean;
detailed?: boolean;
}>(), {
depth: 1,
reply: false,
detailed: false,
});
const el = shallowRef<HTMLElement>();
@ -474,7 +476,7 @@ if (props.detail) {
position: relative;
display: flex;
&::after {
:is(.detailed, .replyRoot) &::after {
content: "";
position: absolute;
top: -12px;
@ -488,8 +490,8 @@ if (props.detail) {
z-index: -1;
}
&:hover::after,
&:focus-within::after {
:is(.detailed, .replyRoot) &:hover::after,
:is(.detailed, .replyRoot) &:focus-within::after {
opacity: 1;
}
}