enhance(frontend): 引用対象を「もっと見る」で展開した場合、「閉じる」で畳めるように

Resolve #11185
This commit is contained in:
syuilo 2023-07-08 19:01:47 +09:00
parent 6a015341ef
commit ac6d6fdeb8
2 changed files with 25 additions and 3 deletions

View file

@ -25,6 +25,7 @@
- オリジナル画像を保持せずにアップロードする場合webpでアップロードされるように(Safari以外)
- 見たことのあるRenoteを省略して表示をオンのときに自分のnoteのrenoteを省略するように
- フォルダーやファイルに対しても開発者モード使用時、IDをコピーできるように
- 引用対象を「もっと見る」で展開した場合、「閉じる」で畳めるように
- Fix: サーバーメトリクスが90度傾いている
- Fix: 非ログイン時にクレデンシャルが必要なページに行くとエラーが出る問題を修正
- Fix: sparkle内にリンクを入れるとクリック不能になる問題の修正

View file

@ -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>