forked from mirrors/misskey
Collapse long notes (#8990)
* Revert "Revert option to collapse long notes (#8561)"
This reverts commit 71150f21cd
and reinstates
the option to collapse long notes again after they were expanded.
* fix(client): wrongly collapsed posts
* fix: don't use ref
* tweak style
Co-authored-by: syuilo <Syuilotan@yahoo.co.jp>
This commit is contained in:
parent
f3164c9cf2
commit
b934c738a6
|
@ -52,6 +52,7 @@ searchUser: "ユーザーを検索"
|
||||||
reply: "返信"
|
reply: "返信"
|
||||||
loadMore: "もっと見る"
|
loadMore: "もっと見る"
|
||||||
showMore: "もっと見る"
|
showMore: "もっと見る"
|
||||||
|
showLess: "閉じる"
|
||||||
youGotNewFollower: "フォローされました"
|
youGotNewFollower: "フォローされました"
|
||||||
receiveFollowRequest: "フォローリクエストされました"
|
receiveFollowRequest: "フォローリクエストされました"
|
||||||
followRequestAccepted: "フォローが承認されました"
|
followRequestAccepted: "フォローが承認されました"
|
||||||
|
|
|
@ -41,7 +41,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>
|
||||||
|
@ -61,9 +61,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>
|
||||||
|
@ -162,10 +165,11 @@ 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 isLong = (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)
|
||||||
));
|
));
|
||||||
|
const collapsed = ref(appearNote.cw == null && isLong);
|
||||||
const isDeleted = ref(false);
|
const isDeleted = ref(false);
|
||||||
const muted = ref(checkWordMute(appearNote, $i, defaultStore.state.mutedWords));
|
const muted = ref(checkWordMute(appearNote, $i, defaultStore.state.mutedWords));
|
||||||
const translation = ref(null);
|
const translation = ref(null);
|
||||||
|
@ -442,6 +446,24 @@ function readPromo() {
|
||||||
}
|
}
|
||||||
|
|
||||||
> .content {
|
> .content {
|
||||||
|
&.isLong {
|
||||||
|
> .showLess {
|
||||||
|
width: 100%;
|
||||||
|
margin-top: 1em;
|
||||||
|
position: sticky;
|
||||||
|
bottom: 1em;
|
||||||
|
|
||||||
|
> span {
|
||||||
|
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%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
&.collapsed {
|
&.collapsed {
|
||||||
position: relative;
|
position: relative;
|
||||||
max-height: 9em;
|
max-height: 9em;
|
||||||
|
|
Loading…
Reference in a new issue