ノート詳細画面で引用一覧をリプライタブではなく引用タブで表示されるように
This commit is contained in:
parent
9caae8a10a
commit
f596a9ee3c
|
@ -134,6 +134,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
||||||
<button class="_button" :class="[$style.tab, { [$style.tabActive]: tab === 'replies' }]" @click="tab = 'replies'"><i class="ti ti-arrow-back-up"></i> {{ i18n.ts.replies }}</button>
|
<button class="_button" :class="[$style.tab, { [$style.tabActive]: tab === 'replies' }]" @click="tab = 'replies'"><i class="ti ti-arrow-back-up"></i> {{ i18n.ts.replies }}</button>
|
||||||
<button class="_button" :class="[$style.tab, { [$style.tabActive]: tab === 'renotes' }]" @click="tab = 'renotes'"><i class="ti ti-repeat"></i> {{ i18n.ts.renotes }}</button>
|
<button class="_button" :class="[$style.tab, { [$style.tabActive]: tab === 'renotes' }]" @click="tab = 'renotes'"><i class="ti ti-repeat"></i> {{ i18n.ts.renotes }}</button>
|
||||||
<button class="_button" :class="[$style.tab, { [$style.tabActive]: tab === 'reactions' }]" @click="tab = 'reactions'"><i class="ti ti-icons"></i> {{ i18n.ts.reactions }}</button>
|
<button class="_button" :class="[$style.tab, { [$style.tabActive]: tab === 'reactions' }]" @click="tab = 'reactions'"><i class="ti ti-icons"></i> {{ i18n.ts.reactions }}</button>
|
||||||
|
<button class="_button" :class="[$style.tab, { [$style.tabActive]: tab === 'quote' }]" @click="tab = 'quote'"><i class="ti ti-quote"></i> {{ i18n.ts.quote }}</button>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<div v-if="tab === 'replies'" :class="$style.tab_replies">
|
<div v-if="tab === 'replies'" :class="$style.tab_replies">
|
||||||
|
@ -170,6 +171,12 @@ SPDX-License-Identifier: AGPL-3.0-only
|
||||||
</template>
|
</template>
|
||||||
</MkPagination>
|
</MkPagination>
|
||||||
</div>
|
</div>
|
||||||
|
<div v-if="tab === 'quote'" :class="$style.tab_quotes">
|
||||||
|
<div v-if="!quotesLoaded" style="padding: 16px">
|
||||||
|
<MkButton style="margin: 0 auto;" primary rounded @click="loadQuotes">{{ i18n.ts.showMore }}</MkButton>
|
||||||
|
</div>
|
||||||
|
<MkNoteSub v-for="note in quotes" :key="note.id" :note="note" :class="$style.quote" :detail="true"/>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div v-else class="_panel" :class="$style.muted" @click="muted = false">
|
<div v-else class="_panel" :class="$style.muted" @click="muted = false">
|
||||||
|
@ -262,6 +269,7 @@ const urls = appearNote.text ? extractUrlFromMfm(mfm.parse(appearNote.text)) : n
|
||||||
const showTicker = (defaultStore.state.instanceTicker === 'always') || (defaultStore.state.instanceTicker === 'remote' && appearNote.user.instance);
|
const showTicker = (defaultStore.state.instanceTicker === 'always') || (defaultStore.state.instanceTicker === 'remote' && appearNote.user.instance);
|
||||||
const conversation = ref<Misskey.entities.Note[]>([]);
|
const conversation = ref<Misskey.entities.Note[]>([]);
|
||||||
const replies = ref<Misskey.entities.Note[]>([]);
|
const replies = ref<Misskey.entities.Note[]>([]);
|
||||||
|
const quotes = ref<Misskey.entities.Note[]>([]);
|
||||||
const canRenote = computed(() => ['public', 'home'].includes(appearNote.visibility) || appearNote.userId === $i.id);
|
const canRenote = computed(() => ['public', 'home'].includes(appearNote.visibility) || appearNote.userId === $i.id);
|
||||||
|
|
||||||
const keymap = {
|
const keymap = {
|
||||||
|
@ -507,6 +515,18 @@ function loadReplies() {
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const quotesLoaded = ref(false);
|
||||||
|
function loadQuotes() {
|
||||||
|
quotesLoaded.value = true;
|
||||||
|
os.api('notes/children', {
|
||||||
|
noteId: appearNote.id,
|
||||||
|
limit: 30,
|
||||||
|
}).then(res => {
|
||||||
|
res.filter(item => item.renoteId != null)
|
||||||
|
quotes.value = res;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
const conversationLoaded = ref(false);
|
const conversationLoaded = ref(false);
|
||||||
function loadConversation() {
|
function loadConversation() {
|
||||||
conversationLoaded.value = true;
|
conversationLoaded.value = true;
|
||||||
|
@ -720,6 +740,10 @@ function loadConversation() {
|
||||||
border-top: solid 0.5px var(--divider);
|
border-top: solid 0.5px var(--divider);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.quote:not(:first-child) {
|
||||||
|
border-top: solid 0.5px var(--divider);
|
||||||
|
}
|
||||||
|
|
||||||
.tabs {
|
.tabs {
|
||||||
border-top: solid 0.5px var(--divider);
|
border-top: solid 0.5px var(--divider);
|
||||||
border-bottom: solid 0.5px var(--divider);
|
border-bottom: solid 0.5px var(--divider);
|
||||||
|
@ -745,6 +769,10 @@ function loadConversation() {
|
||||||
padding: 16px;
|
padding: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.tab_quotes {
|
||||||
|
padding: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
.reactionTabs {
|
.reactionTabs {
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 8px;
|
gap: 8px;
|
||||||
|
|
Loading…
Reference in a new issue