From ac6d6fdeb813e9c99e0d843a24cce81a99fd91da Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Sat, 8 Jul 2023 19:01:47 +0900
Subject: [PATCH] =?UTF-8?q?enhance(frontend):=20=E5=BC=95=E7=94=A8?=
=?UTF-8?q?=E5=AF=BE=E8=B1=A1=E3=82=92=E3=80=8C=E3=82=82=E3=81=A3=E3=81=A8?=
=?UTF-8?q?=E8=A6=8B=E3=82=8B=E3=80=8D=E3=81=A7=E5=B1=95=E9=96=8B=E3=81=97?=
=?UTF-8?q?=E3=81=9F=E5=A0=B4=E5=90=88=E3=80=81=E3=80=8C=E9=96=89=E3=81=98?=
=?UTF-8?q?=E3=82=8B=E3=80=8D=E3=81=A7=E7=95=B3=E3=82=81=E3=82=8B=E3=82=88?=
=?UTF-8?q?=E3=81=86=E3=81=AB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
Resolve #11185
---
CHANGELOG.md | 1 +
.../src/components/MkSubNoteContent.vue | 27 ++++++++++++++++---
2 files changed, 25 insertions(+), 3 deletions(-)
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 5629d36442..35162f6b0f 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -25,6 +25,7 @@
- オリジナル画像を保持せずにアップロードする場合webpでアップロードされるように(Safari以外)
- 見たことのあるRenoteを省略して表示をオンのときに自分のnoteのrenoteを省略するように
- フォルダーやファイルに対しても開発者モード使用時、IDをコピーできるように
+- 引用対象を「もっと見る」で展開した場合、「閉じる」で畳めるように
- Fix: サーバーメトリクスが90度傾いている
- Fix: 非ログイン時にクレデンシャルが必要なページに行くとエラーが出る問題を修正
- Fix: sparkle内にリンクを入れるとクリック不能になる問題の修正
diff --git a/packages/frontend/src/components/MkSubNoteContent.vue b/packages/frontend/src/components/MkSubNoteContent.vue
index 3a050889c8..c76ce7315d 100644
--- a/packages/frontend/src/components/MkSubNoteContent.vue
+++ b/packages/frontend/src/components/MkSubNoteContent.vue
@@ -15,9 +15,12 @@
<summary>{{ i18n.ts.poll }}</summary>
<MkPoll :note="note"/>
</details>
- <button v-if="collapsed" :class="$style.fade" class="_button" @click="collapsed = false">
+ <button v-if="isLong && collapsed" :class="$style.fade" class="_button" @click="collapsed = false">
<span :class="$style.fadeLabel">{{ i18n.ts.showMore }}</span>
</button>
+ <button v-else-if="isLong && !collapsed" :class="$style.showLess" class="_button" @click="collapsed = true">
+ <span :class="$style.showLessLabel">{{ i18n.ts.showLess }}</span>
+ </button>
</div>
</template>
@@ -33,11 +36,13 @@ const props = defineProps<{
note: misskey.entities.Note;
}>();
-const collapsed = $ref(
+const isLong =
props.note.cw == null && props.note.text != null && (
(props.note.text.split('\n').length > 9) ||
(props.note.text.length > 500)
- ));
+ );
+
+const collapsed = $ref(isLong);
</script>
<style lang="scss" module>
@@ -86,4 +91,20 @@ const collapsed = $ref(
font-style: oblique;
color: var(--renote);
}
+
+.showLess {
+ width: 100%;
+ margin-top: 14px;
+ position: sticky;
+ bottom: calc(var(--stickyBottom, 0px) + 14px);
+}
+
+.showLessLabel {
+ display: inline-block;
+ background: var(--popup);
+ padding: 6px 10px;
+ font-size: 0.8em;
+ border-radius: 999px;
+ box-shadow: 0 2px 6px rgb(0 0 0 / 20%);
+}
</style>