diff options
| author | Balazs Nadasdi <balazs@weave.works> | 2022-06-04 06:57:09 +0200 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2022-06-04 13:57:09 +0900 |
| commit | e675ffcf38b07f5c70d00b49c171c7ab3460e810 (patch) | |
| tree | f8b2b509094453dd68472a64bd2d40915a0192c0 /packages/client/src/components/note.vue | |
| parent | fix: add id for activitypub follows (#8689) (diff) | |
| download | misskey-e675ffcf38b07f5c70d00b49c171c7ab3460e810.tar.gz misskey-e675ffcf38b07f5c70d00b49c171c7ab3460e810.tar.bz2 misskey-e675ffcf38b07f5c70d00b49c171c7ab3460e810.zip | |
feat: option to collapse long notes (#8561)
* feat: option to collapse long notes
Closes #8559
* do not collapse if cw exists
* use '閉じる' to close / show less.
* make it sticky
* Change style of the Show less button
Diffstat (limited to 'packages/client/src/components/note.vue')
| -rw-r--r-- | packages/client/src/components/note.vue | 27 |
1 files changed, 24 insertions, 3 deletions
diff --git a/packages/client/src/components/note.vue b/packages/client/src/components/note.vue index bc8a0dd19d..4840b0dc2a 100644 --- a/packages/client/src/components/note.vue +++ b/packages/client/src/components/note.vue @@ -46,7 +46,7 @@ <Mfm v-if="appearNote.cw != ''" class="text" :text="appearNote.cw" :author="appearNote.user" :i="$i" :custom-emojis="appearNote.emojis"/> <XCwButton v-model="showContent" :note="appearNote"/> </p> - <div v-show="appearNote.cw == null || showContent" class="content" :class="{ collapsed }"> + <div v-show="appearNote.cw == null || showContent" class="content" :class="{ collapsed, isLong }"> <div class="text"> <span v-if="appearNote.isHidden" style="opacity: 0.5">({{ i18n.ts.private }})</span> <MkA v-if="appearNote.replyId" class="reply" :to="`/notes/${appearNote.replyId}`"><i class="fas fa-reply"></i></MkA> @@ -66,9 +66,12 @@ <XPoll v-if="appearNote.poll" ref="pollViewer" :note="appearNote" class="poll"/> <MkUrlPreview v-for="url in urls" :key="url" :url="url" :compact="true" :detail="false" class="url-preview"/> <div v-if="appearNote.renote" class="renote"><XNoteSimple :note="appearNote.renote"/></div> - <button v-if="collapsed" class="fade _button" @click="collapsed = false"> + <button v-if="isLong && collapsed" class="fade _button" @click="collapsed = false"> <span>{{ i18n.ts.showMore }}</span> </button> + <button v-else-if="isLong && !collapsed" class="showLess _button" @click="collapsed = true"> + <span>{{ i18n.ts.showLess }}</span> + </button> </div> <MkA v-if="appearNote.channel && !inChannel" class="channel" :to="`/channels/${appearNote.channel.id}`"><i class="fas fa-satellite-dish"></i> {{ appearNote.channel.name }}</MkA> </div> @@ -166,7 +169,8 @@ const reactButton = ref<HTMLElement>(); let appearNote = $computed(() => isRenote ? note.renote as misskey.entities.Note : note); const isMyRenote = $i && ($i.id === note.userId); const showContent = ref(false); -const collapsed = ref(appearNote.cw == null && appearNote.text != null && ( +const collapsed = ref(appearNote.cw == null); +const isLong = ref(appearNote.cw == null && appearNote.text != null && ( (appearNote.text.split('\n').length > 9) || (appearNote.text.length > 500) )); @@ -452,6 +456,23 @@ function readPromo() { } > .content { + &.isLong { + > .showLess { + width: 100%; + margin-top: 1em; + position: sticky; + bottom: 1em; + + > 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); + } + } + } &.collapsed { position: relative; max-height: 9em; |