diff --git a/packages/client/src/components/MkCwButton.vue b/packages/client/src/components/MkCwButton.vue index 5e59853b6..107e140e7 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 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 fc587379c..1d505682b 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 a8a6bb90a..806ec8880 100644 --- a/packages/client/src/components/MkUserPreview.vue +++ b/packages/client/src/components/MkUserPreview.vue @@ -58,20 +58,7 @@ :custom-emojis="user.emojis" /> - - +