revert show more notification component
This commit is contained in:
parent
3cc7979aad
commit
505a0dfd9c
1 changed files with 13 additions and 34 deletions
|
@ -89,7 +89,7 @@
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="tail" :class="{ collapsed }">
|
<div class="tail">
|
||||||
<header>
|
<header>
|
||||||
<span v-if="notification.type === 'pollEnded'">{{
|
<span v-if="notification.type === 'pollEnded'">{{
|
||||||
i18n.ts._notification.pollEnded
|
i18n.ts._notification.pollEnded
|
||||||
|
@ -112,11 +112,11 @@
|
||||||
v-if="notification.type === 'reaction'"
|
v-if="notification.type === 'reaction'"
|
||||||
class="text"
|
class="text"
|
||||||
:to="notePage(notification.note)"
|
:to="notePage(notification.note)"
|
||||||
:title="summary"
|
:title="getNoteSummary(notification.note)"
|
||||||
>
|
>
|
||||||
<i class="ph-quotes ph-fill ph-lg"></i>
|
<i class="ph-quotes ph-fill ph-lg"></i>
|
||||||
<Mfm
|
<Mfm
|
||||||
:text="summary"
|
:text="getNoteSummary(notification.note)"
|
||||||
:plain="true"
|
:plain="true"
|
||||||
:nowrap="!full"
|
:nowrap="!full"
|
||||||
:custom-emojis="notification.note.emojis"
|
:custom-emojis="notification.note.emojis"
|
||||||
|
@ -142,10 +142,10 @@
|
||||||
v-if="notification.type === 'reply'"
|
v-if="notification.type === 'reply'"
|
||||||
class="text"
|
class="text"
|
||||||
:to="notePage(notification.note)"
|
:to="notePage(notification.note)"
|
||||||
:title="summary"
|
:title="getNoteSummary(notification.note)"
|
||||||
>
|
>
|
||||||
<Mfm
|
<Mfm
|
||||||
:text="summary"
|
:text="getNoteSummary(notification.note)"
|
||||||
:plain="true"
|
:plain="true"
|
||||||
:nowrap="!full"
|
:nowrap="!full"
|
||||||
:custom-emojis="notification.note.emojis"
|
:custom-emojis="notification.note.emojis"
|
||||||
|
@ -155,10 +155,10 @@
|
||||||
v-if="notification.type === 'mention'"
|
v-if="notification.type === 'mention'"
|
||||||
class="text"
|
class="text"
|
||||||
:to="notePage(notification.note)"
|
:to="notePage(notification.note)"
|
||||||
:title="summary"
|
:title="getNoteSummary(notification.note)"
|
||||||
>
|
>
|
||||||
<Mfm
|
<Mfm
|
||||||
:text="summary"
|
:text="getNoteSummary(notification.note)"
|
||||||
:plain="true"
|
:plain="true"
|
||||||
:nowrap="!full"
|
:nowrap="!full"
|
||||||
:custom-emojis="notification.note.emojis"
|
:custom-emojis="notification.note.emojis"
|
||||||
|
@ -168,10 +168,10 @@
|
||||||
v-if="notification.type === 'quote'"
|
v-if="notification.type === 'quote'"
|
||||||
class="text"
|
class="text"
|
||||||
:to="notePage(notification.note)"
|
:to="notePage(notification.note)"
|
||||||
:title="summary"
|
:title="getNoteSummary(notification.note)"
|
||||||
>
|
>
|
||||||
<Mfm
|
<Mfm
|
||||||
:text="summary"
|
:text="getNoteSummary(notification.note)"
|
||||||
:plain="true"
|
:plain="true"
|
||||||
:nowrap="!full"
|
:nowrap="!full"
|
||||||
:custom-emojis="notification.note.emojis"
|
:custom-emojis="notification.note.emojis"
|
||||||
|
@ -181,11 +181,11 @@
|
||||||
v-if="notification.type === 'pollVote'"
|
v-if="notification.type === 'pollVote'"
|
||||||
class="text"
|
class="text"
|
||||||
:to="notePage(notification.note)"
|
:to="notePage(notification.note)"
|
||||||
:title="summary"
|
:title="getNoteSummary(notification.note)"
|
||||||
>
|
>
|
||||||
<i class="ph-quotes ph-fill ph-lg"></i>
|
<i class="ph-quotes ph-fill ph-lg"></i>
|
||||||
<Mfm
|
<Mfm
|
||||||
:text="summary"
|
:text="getNoteSummary(notification.note)"
|
||||||
:plain="true"
|
:plain="true"
|
||||||
:nowrap="!full"
|
:nowrap="!full"
|
||||||
:custom-emojis="notification.note.emojis"
|
:custom-emojis="notification.note.emojis"
|
||||||
|
@ -196,11 +196,11 @@
|
||||||
v-if="notification.type === 'pollEnded'"
|
v-if="notification.type === 'pollEnded'"
|
||||||
class="text"
|
class="text"
|
||||||
:to="notePage(notification.note)"
|
:to="notePage(notification.note)"
|
||||||
:title="summary"
|
:title="getNoteSummary(notification.note)"
|
||||||
>
|
>
|
||||||
<i class="ph-quotes ph-fill ph-lg"></i>
|
<i class="ph-quotes ph-fill ph-lg"></i>
|
||||||
<Mfm
|
<Mfm
|
||||||
:text="summary"
|
:text="getNoteSummary(notification.note)"
|
||||||
:plain="true"
|
:plain="true"
|
||||||
:nowrap="!full"
|
:nowrap="!full"
|
||||||
:custom-emojis="notification.note.emojis"
|
:custom-emojis="notification.note.emojis"
|
||||||
|
@ -264,7 +264,6 @@
|
||||||
<span v-if="notification.type === 'app'" class="text">
|
<span v-if="notification.type === 'app'" class="text">
|
||||||
<Mfm :text="notification.body" :nowrap="!full" />
|
<Mfm :text="notification.body" :nowrap="!full" />
|
||||||
</span>
|
</span>
|
||||||
<xShowMoreButton v-if="isLong" v-model="collapsed"></xShowMoreButton>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
@ -275,7 +274,6 @@ import * as misskey from "calckey-js";
|
||||||
import XReactionIcon from "@/components/MkReactionIcon.vue";
|
import XReactionIcon from "@/components/MkReactionIcon.vue";
|
||||||
import MkFollowButton from "@/components/MkFollowButton.vue";
|
import MkFollowButton from "@/components/MkFollowButton.vue";
|
||||||
import XReactionTooltip from "@/components/MkReactionTooltip.vue";
|
import XReactionTooltip from "@/components/MkReactionTooltip.vue";
|
||||||
import XShowMoreButton from "./MkShowMoreButton.vue";
|
|
||||||
import { getNoteSummary } from "@/scripts/get-note-summary";
|
import { getNoteSummary } from "@/scripts/get-note-summary";
|
||||||
import { notePage } from "@/filters/note";
|
import { notePage } from "@/filters/note";
|
||||||
import { userPage } from "@/filters/user";
|
import { userPage } from "@/filters/user";
|
||||||
|
@ -301,19 +299,12 @@ const props = withDefaults(
|
||||||
const elRef = ref<HTMLElement>(null);
|
const elRef = ref<HTMLElement>(null);
|
||||||
const reactionRef = ref(null);
|
const reactionRef = ref(null);
|
||||||
|
|
||||||
const summary = getNoteSummary(props.notification.note);
|
|
||||||
|
|
||||||
const showEmojiReactions =
|
const showEmojiReactions =
|
||||||
defaultStore.state.enableEmojiReactions ||
|
defaultStore.state.enableEmojiReactions ||
|
||||||
defaultStore.state.showEmojisInReactionNotifications;
|
defaultStore.state.showEmojisInReactionNotifications;
|
||||||
const defaultReaction = ["⭐", "👍", "❤️"].includes(instance.defaultReaction)
|
const defaultReaction = ["⭐", "👍", "❤️"].includes(instance.defaultReaction)
|
||||||
? instance.defaultReaction
|
? instance.defaultReaction
|
||||||
: "⭐";
|
: "⭐";
|
||||||
const isLong = (summary.split("\n").length > 3 || summary.length > 200);
|
|
||||||
const collapsed = $ref(isLong);
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
let readObserver: IntersectionObserver | undefined;
|
let readObserver: IntersectionObserver | undefined;
|
||||||
let connection;
|
let connection;
|
||||||
|
@ -495,7 +486,6 @@ useTooltip(reactionRef, (showing) => {
|
||||||
}
|
}
|
||||||
|
|
||||||
> .tail {
|
> .tail {
|
||||||
position: relative;
|
|
||||||
flex: 1;
|
flex: 1;
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
|
|
||||||
|
@ -536,17 +526,6 @@ useTooltip(reactionRef, (showing) => {
|
||||||
margin-left: 4px;
|
margin-left: 4px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&.collapsed > .text {
|
|
||||||
display: block;
|
|
||||||
position: relative;
|
|
||||||
max-height: calc(4em + 50px);
|
|
||||||
overflow: hidden;
|
|
||||||
mask: linear-gradient(black calc(100% - 64px), transparent);
|
|
||||||
-webkit-mask: linear-gradient(
|
|
||||||
black calc(100% - 64px),
|
|
||||||
transparent
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
Loading…
Reference in a new issue