From 0150a41a0b53f6aaacb723bfedfd9cbd60ddc3c4 Mon Sep 17 00:00:00 2001 From: Freeplay Date: Fri, 28 Apr 2023 18:18:09 -0400 Subject: [PATCH] Add show more button to notifications + make show more button into its own component --- packages/client/src/components/MkCwButton.vue | 36 ++++++++++ .../client/src/components/MkNotification.vue | 47 +++++++++---- .../src/components/MkShowMoreButton.vue | 68 +++++++++++++++++++ .../src/components/MkSubNoteContent.vue | 54 +-------------- .../client/src/components/MkUserPreview.vue | 16 +---- 5 files changed, 143 insertions(+), 78 deletions(-) create mode 100644 packages/client/src/components/MkShowMoreButton.vue diff --git a/packages/client/src/components/MkCwButton.vue b/packages/client/src/components/MkCwButton.vue index 35af48874..659cb1fbb 100644 --- a/packages/client/src/components/MkCwButton.vue +++ b/packages/client/src/components/MkCwButton.vue @@ -66,5 +66,41 @@ const toggle = () => { background: var(--cwFg) !important; color: var(--cwBg) !important; } + + &.fade { + display: block; + position: absolute; + bottom: 0; + left: 0; + width: 100%; + > span { + display: inline-block; + background: var(--panel); + padding: 0.4em 1em; + font-size: 0.8em; + border-radius: 999px; + box-shadow: 0 2px 6px rgb(0 0 0 / 20%); + } + &:hover { + > span { + background: var(--panelHighlight); + } + } + } + &.showLess { + width: 100%; + margin-top: 1em; + position: sticky; + bottom: var(--stickyBottom); + + > span { + display: inline-block; + background: var(--panel); + padding: 6px 10px; + font-size: 0.8em; + border-radius: 999px; + box-shadow: 0 0 7px 7px var(--bg); + } + } } diff --git a/packages/client/src/components/MkNotification.vue b/packages/client/src/components/MkNotification.vue index c909873a5..2c7281dbe 100644 --- a/packages/client/src/components/MkNotification.vue +++ b/packages/client/src/components/MkNotification.vue @@ -89,7 +89,7 @@ /> -
+
{{ i18n.ts._notification.pollEnded @@ -112,11 +112,11 @@ v-if="notification.type === 'reaction'" class="text" :to="notePage(notification.note)" - :title="getNoteSummary(notification.note)" + :title="summary" > +
@@ -274,6 +275,7 @@ import * as misskey from "calckey-js"; import XReactionIcon from "@/components/MkReactionIcon.vue"; import MkFollowButton from "@/components/MkFollowButton.vue"; import XReactionTooltip from "@/components/MkReactionTooltip.vue"; +import XShowMoreButton from "./MkShowMoreButton.vue"; import { getNoteSummary } from "@/scripts/get-note-summary"; import { notePage } from "@/filters/note"; import { userPage } from "@/filters/user"; @@ -299,12 +301,19 @@ const props = withDefaults( const elRef = ref(null); const reactionRef = ref(null); +const summary = getNoteSummary(props.notification.note); + const showEmojiReactions = defaultStore.state.enableEmojiReactions || defaultStore.state.showEmojisInReactionNotifications; const defaultReaction = ["⭐", "👍", "❤️"].includes(instance.defaultReaction) ? instance.defaultReaction : "⭐"; +const isLong = (summary.split("\n").length > 3 || summary.length > 200); +const collapsed = $ref(isLong); + + + let readObserver: IntersectionObserver | undefined; let connection; @@ -486,6 +495,7 @@ useTooltip(reactionRef, (showing) => { } > .tail { + position: relative; flex: 1; min-width: 0; @@ -526,6 +536,17 @@ useTooltip(reactionRef, (showing) => { 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 + ); + } } } diff --git a/packages/client/src/components/MkShowMoreButton.vue b/packages/client/src/components/MkShowMoreButton.vue new file mode 100644 index 000000000..3516d6f43 --- /dev/null +++ b/packages/client/src/components/MkShowMoreButton.vue @@ -0,0 +1,68 @@ + + + diff --git a/packages/client/src/components/MkSubNoteContent.vue b/packages/client/src/components/MkSubNoteContent.vue index a345b23f5..a1f7cc1b9 100644 --- a/packages/client/src/components/MkSubNoteContent.vue +++ b/packages/client/src/components/MkSubNoteContent.vue @@ -97,20 +97,7 @@ - - + @@ -124,6 +111,7 @@ import XNoteSimple from "@/components/MkNoteSimple.vue"; import XMediaList from "@/components/MkMediaList.vue"; import XPoll from "@/components/MkPoll.vue"; import MkUrlPreview from "@/components/MkUrlPreview.vue"; +import XShowMoreButton from "./MkShowMoreButton.vue"; import XCwButton from "@/components/MkCwButton.vue"; import { extractUrlFromMfm } from "@/scripts/extract-url-from-mfm"; import { i18n } from "@/i18n"; @@ -146,6 +134,7 @@ const isLong = props.note.text != null && (props.note.text.split("\n").length > 9 || props.note.text.length > 500); const collapsed = $ref(props.note.cw == null && isLong); + const urls = props.note.text ? extractUrlFromMfm(mfm.parse(props.note.text)).slice(0, 5) : null; @@ -264,43 +253,6 @@ let showContent = $ref(false); top: 40px; } } - - :deep(.fade) { - display: block; - position: absolute; - bottom: 0; - left: 0; - width: 100%; - > span { - display: inline-block; - background: var(--panel); - padding: 0.4em 1em; - font-size: 0.8em; - border-radius: 999px; - box-shadow: 0 2px 6px rgb(0 0 0 / 20%); - } - &:hover { - > span { - background: var(--panelHighlight); - } - } - } - } - - :deep(.showLess) { - width: 100%; - margin-top: 1em; - position: sticky; - bottom: var(--stickyBottom); - - > span { - display: inline-block; - background: var(--panel); - padding: 6px 10px; - font-size: 0.8em; - border-radius: 999px; - box-shadow: 0 0 7px 7px var(--bg); - } } } } diff --git a/packages/client/src/components/MkUserPreview.vue b/packages/client/src/components/MkUserPreview.vue index 1e6db1442..ddfd39f14 100644 --- a/packages/client/src/components/MkUserPreview.vue +++ b/packages/client/src/components/MkUserPreview.vue @@ -55,20 +55,7 @@ :custom-emojis="user.emojis" /> - - +