profxadke/misskey
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

feat: option to collapse long notes (#8561)

Browse source 
* 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
This commit is contained in:
Balazs Nadasdi 2022-06-04 06:57:09 +02:00 • committed by GitHub
parent 32dff28460
commit e675ffcf38
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 25 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

1
locales/ja-JP.yml
View file

@ -52,6 +52,7 @@ searchUser: "ユーザーを検索"
reply: "返信" reply: "返信"
loadMore: "もっと見る" loadMore: "もっと見る"
showMore: "もっと見る" showMore: "もっと見る"
showLess: "閉じる"
youGotNewFollower: "フォローされました" youGotNewFollower: "フォローされました"
receiveFollowRequest: "フォローリクエストされました" receiveFollowRequest: "フォローリクエストされました"
followRequestAccepted: "フォローが承認されました" followRequestAccepted: "フォローが承認されました"

27
packages/client/src/components/note.vue
View file

@ -46,7 +46,7 @@
<Mfm v-if="appearNote.cw != ''" class="text" :text="appearNote.cw" :author="appearNote.user" :i="$i" :custom-emojis="appearNote.emojis"/> <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"/> <XCwButton v-model="showContent" :note="appearNote"/>
</p> </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"> <div class="text">
<span v-if="appearNote.isHidden" style="opacity: 0.5">({{ i18n.ts.private }})</span> <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> <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"/> <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"/> <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> <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> <span>{{ i18n.ts.showMore }}</span>
</button> </button>
<button v-else-if="isLong && !collapsed" class="showLess _button" @click="collapsed = true">
<span>{{ i18n.ts.showLess }}</span>
</button>
</div> </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> <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> </div>
@ -166,7 +169,8 @@ const reactButton = ref<HTMLElement>();
let appearNote = $computed(() => isRenote ? note.renote as misskey.entities.Note : note); let appearNote = $computed(() => isRenote ? note.renote as misskey.entities.Note : note);
const isMyRenote = $i && ($i.id === note.userId); const isMyRenote = $i && ($i.id === note.userId);
const showContent = ref(false); 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.split('\n').length > 9) ||
(appearNote.text.length > 500) (appearNote.text.length > 500)
)); ));
@ -452,6 +456,23 @@ function readPromo() {
} }
> .content { > .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 { &.collapsed {
position: relative; position: relative;
max-height: 9em; max-height: 9em;