From 9336b6dab02c597ff0e6b82f1495eb4198111f42 Mon Sep 17 00:00:00 2001 From: ThatOneCalculator Date: Sat, 29 Apr 2023 19:38:26 -0700 Subject: [PATCH] Revert "Merge pull request 'Add show more button to notifications' (#9942) from Freeplay/calckey:notifications into develop" This reverts commit 8cb321b110dca7f8020f8a7a9af6a49308a0c036, reversing changes made to 133391122b77c92bff6e0e94f40cfdea542c6f35. --- packages/client/src/components/MkCwButton.vue | 37 ---------- .../client/src/components/MkNotification.vue | 47 ++++--------- .../src/components/MkShowMoreButton.vue | 68 ------------------- .../src/components/MkSubNoteContent.vue | 56 +++++++++++++-- .../client/src/components/MkUserPreview.vue | 16 ++++- 5 files changed, 79 insertions(+), 145 deletions(-) delete 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 1f6340510..01ab11351 100644 --- a/packages/client/src/components/MkCwButton.vue +++ b/packages/client/src/components/MkCwButton.vue @@ -77,42 +77,5 @@ defineExpose({ background: var(--cwFg) !important; color: var(--cwBg) !important; } - - &.fade { - display: block; - position: absolute; - bottom: 0; - left: 0; - width: 100%; - z-index: 2; - > 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, &:focus { - > 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 2c7281dbe..c909873a5 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 - ); - } } } diff --git a/packages/client/src/components/MkShowMoreButton.vue b/packages/client/src/components/MkShowMoreButton.vue deleted file mode 100644 index 3516d6f43..000000000 --- a/packages/client/src/components/MkShowMoreButton.vue +++ /dev/null @@ -1,68 +0,0 @@ - - - diff --git a/packages/client/src/components/MkSubNoteContent.vue b/packages/client/src/components/MkSubNoteContent.vue index 68439527a..94869402f 100644 --- a/packages/client/src/components/MkSubNoteContent.vue +++ b/packages/client/src/components/MkSubNoteContent.vue @@ -106,8 +106,21 @@ v-on:focus="cwButton?.focus()" > - - + + + @@ -120,7 +133,6 @@ 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"; @@ -145,7 +157,6 @@ 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; @@ -274,6 +285,43 @@ 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 ddfd39f14..1e6db1442 100644 --- a/packages/client/src/components/MkUserPreview.vue +++ b/packages/client/src/components/MkUserPreview.vue @@ -55,7 +55,20 @@ :custom-emojis="user.emojis" /> - + +