worldcone/cherrypick
2
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

ノート詳細画面で引用一覧をリプライタブではなく引用タブで表示されるように

Browse source
This commit is contained in:
GrapeApple0 2023-10-23 07:53:00 +00:00
parent 9caae8a10a
commit f596a9ee3c
1 changed files with 28 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
packages/frontend/src/components/MkNoteDetailed.vue
View file

@ -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;