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>
</div> </div>
<template v-if="appearNote.reply && appearNote.reply.replyId"> <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> </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"> <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/>

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

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