From 505a0dfd9cbc6d538de1eabebe11518d2c45a3e3 Mon Sep 17 00:00:00 2001 From: Freeplay Date: Mon, 1 May 2023 16:50:08 -0400 Subject: [PATCH 1/2] revert show more notification component --- .../client/src/components/MkNotification.vue | 47 +++++-------------- 1 file changed, 13 insertions(+), 34 deletions(-) diff --git a/packages/client/src/components/MkNotification.vue b/packages/client/src/components/MkNotification.vue index 2c7281dbe5..c909873a55 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="summary" + :title="getNoteSummary(notification.note)" > -
@@ -275,7 +274,6 @@ 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"; @@ -301,19 +299,12 @@ 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; @@ -495,7 +486,6 @@ useTooltip(reactionRef, (showing) => { } > .tail { - position: relative; flex: 1; min-width: 0; @@ -536,17 +526,6 @@ 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 - ); - } } } From f34c224a108cc1455496a2b379003bf2dbbee53d Mon Sep 17 00:00:00 2001 From: Freeplay Date: Fri, 28 Apr 2023 18:18:09 -0400 Subject: [PATCH 2/2] bring back Show More component --- packages/client/src/components/MkCwButton.vue | 4 +- .../src/components/MkShowMoreButton.vue | 68 +++++++++++++++++++ .../src/components/MkSubNoteContent.vue | 50 ++------------ .../client/src/components/MkUserPreview.vue | 16 +---- 4 files changed, 75 insertions(+), 63 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 5e59853b66..107e140e73 100644 --- a/packages/client/src/components/MkCwButton.vue +++ b/packages/client/src/components/MkCwButton.vue @@ -85,7 +85,6 @@ defineExpose({ bottom: 0; left: 0; width: 100%; - z-index: 2; > span { display: inline-block; background: var(--panel); @@ -94,8 +93,7 @@ defineExpose({ border-radius: 999px; box-shadow: 0 2px 6px rgb(0 0 0 / 20%); } - &:hover, - &:focus { + &:hover { > span { background: var(--panelHighlight); } diff --git a/packages/client/src/components/MkShowMoreButton.vue b/packages/client/src/components/MkShowMoreButton.vue new file mode 100644 index 0000000000..3516d6f43c --- /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 fc587379cf..1d505682b2 100644 --- a/packages/client/src/components/MkSubNoteContent.vue +++ b/packages/client/src/components/MkSubNoteContent.vue @@ -115,15 +115,8 @@ v-on:focus="cwButton?.focus()" > - - + + @@ -136,6 +129,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"; @@ -160,6 +154,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; @@ -287,43 +282,6 @@ function focusFooter(ev) { 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 a8a6bb90a3..806ec8880a 100644 --- a/packages/client/src/components/MkUserPreview.vue +++ b/packages/client/src/components/MkUserPreview.vue @@ -58,20 +58,7 @@ :custom-emojis="user.emojis" /> - - +