diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml index 0dbe35216..9877248eb 100644 --- a/locales/ja-JP.yml +++ b/locales/ja-JP.yml @@ -806,6 +806,7 @@ muteThread: "スレッドをミュート" unmuteThread: "スレッドのミュートを解除" ffVisibility: "つながりの公開範囲" ffVisibilityDescription: "自分のフォロー/フォロワー情報の公開範囲を設定できます。" +continueThread: "さらにスレッドを見る" deleteAccountConfirm: "アカウントが削除されます。よろしいですか?" _emailUnavailable: diff --git a/packages/client/src/components/note.sub.vue b/packages/client/src/components/note.sub.vue index 45204854b..2e3636550 100644 --- a/packages/client/src/components/note.sub.vue +++ b/packages/client/src/components/note.sub.vue @@ -1,5 +1,5 @@ <template> -<div class="wrpstxzv" :class="{ children }" v-size="{ max: [450] }"> +<div class="wrpstxzv" :class="{ children: depth > 1 }" v-size="{ max: [450] }"> <div class="main"> <MkAvatar class="avatar" :user="note.user"/> <div class="body"> @@ -15,12 +15,18 @@ </div> </div> </div> - <XSub v-for="reply in replies" :key="reply.id" :note="reply" class="reply" :detail="true" :children="true"/> + <template v-if="depth < 5"> + <XSub v-for="reply in replies" :key="reply.id" :note="reply" class="reply" :detail="true" :depth="depth + 1"/> + </template> + <div v-else class="more"> + <MkA class="text _link" :to="notePage(note)">{{ $ts.continueThread }} <i class="fas fa-angle-double-right"></i></MkA> + </div> </div> </template> <script lang="ts"> import { defineComponent } from 'vue'; +import notePage from '@/filters/note'; import XNoteHeader from './note-header.vue'; import XSubNoteContent from './sub-note-content.vue'; import XCwButton from './cw-button.vue'; @@ -45,16 +51,12 @@ export default defineComponent({ required: false, default: false }, - children: { - type: Boolean, + // how many notes are in between this one and the note being viewed in detail + depth: { + type: Number, required: false, - default: false + default: 1 }, - // TODO - truncate: { - type: Boolean, - default: true - } }, data() { @@ -74,6 +76,10 @@ export default defineComponent({ }); } }, + + methods: { + notePage, + } }); </script> @@ -138,9 +144,13 @@ export default defineComponent({ } } - > .reply { + > .reply, > .more { border-left: solid 0.5px var(--divider); margin-top: 10px; } + + > .more { + padding: 10px 0 0 16px; + } } </style>