Enhance(frontend): もっと!ボタンでリアクション一覧が開けるように (#12935)

* もっと!ボタンでリアクション一覧が開けるように

* update CHANGELOG.md && デバッグ用に最大リアクション表示数を1にしてたのを一応戻した

* fix

* デザイン調整

* maxNumberもどす

* fix CHANGELOG

* fix

* move changelog

* 🎨

---------

Co-authored-by: かっこかり <67428053+kakkokari-gtyih@users.noreply.github.com>
Co-authored-by: syuilo <4439005+syuilo@users.noreply.github.com>
This commit is contained in:
1Step621 2024-03-30 20:30:22 +09:00 committed by GitHub
parent b96d9c6973
commit d4ca973e34
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
6 changed files with 16 additions and 9 deletions

View File

@ -22,6 +22,7 @@
- Enhance: 映像・音声の再生にブラウザのネイティブプレイヤーを使用できるように - Enhance: 映像・音声の再生にブラウザのネイティブプレイヤーを使用できるように
- Enhance: 映像・音声の再生メニューに「再生速度」「ループ再生」「ピクチャインピクチャ」を追加 - Enhance: 映像・音声の再生メニューに「再生速度」「ループ再生」「ピクチャインピクチャ」を追加
- Enhance: 映像・音声の再生にキーボードショートカットが使えるように - Enhance: 映像・音声の再生にキーボードショートカットが使えるように
- Enhance: ノートについているリアクションの「もっと!」から、リアクションの一覧を表示できるように
- Fix: 一部のページ内リンクが正しく動作しない問題を修正 - Fix: 一部のページ内リンクが正しく動作しない問題を修正
- Fix: 周年の実績が閏年を考慮しない問題を修正 - Fix: 周年の実績が閏年を考慮しない問題を修正
- Fix: ローカルURLのプレビューポップアップが左上に表示される - Fix: ローカルURLのプレビューポップアップが左上に表示される

View File

@ -97,7 +97,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</div> </div>
<MkReactionsViewer v-if="appearNote.reactionAcceptance !== 'likeOnly'" :note="appearNote" :maxNumber="16" @mockUpdateMyReaction="emitUpdReaction"> <MkReactionsViewer v-if="appearNote.reactionAcceptance !== 'likeOnly'" :note="appearNote" :maxNumber="16" @mockUpdateMyReaction="emitUpdReaction">
<template #more> <template #more>
<div :class="$style.reactionOmitted">{{ i18n.ts.more }}</div> <MkA :to="`/notes/${appearNote.id}/reactions`" :class="[$style.reactionOmitted]">{{ i18n.ts.more }}</MkA>
</template> </template>
</MkReactionsViewer> </MkReactionsViewer>
<footer :class="$style.footer"> <footer :class="$style.footer">
@ -1020,9 +1020,8 @@ function emitUpdReaction(emoji: string, delta: number) {
.reactionOmitted { .reactionOmitted {
display: inline-block; display: inline-block;
height: 32px; margin-left: 8px;
margin: 2px;
padding: 0 6px;
opacity: .8; opacity: .8;
font-size: 95%;
} }
</style> </style>

View File

@ -234,9 +234,12 @@ import MkReactionIcon from '@/components/MkReactionIcon.vue';
import MkButton from '@/components/MkButton.vue'; import MkButton from '@/components/MkButton.vue';
import { isEnabledUrlPreview } from '@/instance.js'; import { isEnabledUrlPreview } from '@/instance.js';
const props = defineProps<{ const props = withDefaults(defineProps<{
note: Misskey.entities.Note; note: Misskey.entities.Note;
}>(); initialTab: string;
}>(), {
initialTab: 'replies',
});
const inChannel = inject('inChannel', null); const inChannel = inject('inChannel', null);
@ -304,7 +307,7 @@ provide('react', (reaction: string) => {
}); });
}); });
const tab = ref('replies'); const tab = ref(props.initialTab);
const reactionTabType = ref<string | null>(null); const reactionTabType = ref<string | null>(null);
const renotesPagination = computed<Paging>(() => ({ const renotesPagination = computed<Paging>(() => ({

View File

@ -100,6 +100,9 @@ watch([() => props.note.reactions, () => props.maxNumber], ([newSource, maxNumbe
} }
.root { .root {
display: flex;
flex-wrap: wrap;
align-items: center;
margin: 4px -2px 0 -2px; margin: 4px -2px 0 -2px;
&:empty { &:empty {

View File

@ -21,7 +21,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</div> </div>
<div class="_margin _gaps_s"> <div class="_margin _gaps_s">
<MkRemoteCaution v-if="note.user.host != null" :href="note.url ?? note.uri"/> <MkRemoteCaution v-if="note.user.host != null" :href="note.url ?? note.uri"/>
<MkNoteDetailed :key="note.id" v-model:note="note" :class="$style.note"/> <MkNoteDetailed :key="note.id" v-model:note="note" :initialTab="initialTab" :class="$style.note"/>
</div> </div>
<div v-if="clips && clips.length > 0" class="_margin"> <div v-if="clips && clips.length > 0" class="_margin">
<div style="font-weight: bold; padding: 12px;">{{ i18n.ts.clip }}</div> <div style="font-weight: bold; padding: 12px;">{{ i18n.ts.clip }}</div>
@ -66,6 +66,7 @@ import { defaultStore } from '@/store.js';
const props = defineProps<{ const props = defineProps<{
noteId: string; noteId: string;
initialTab?: string;
}>(); }>();
const note = ref<null | Misskey.entities.Note>(); const note = ref<null | Misskey.entities.Note>();

View File

@ -35,7 +35,7 @@ const routes: RouteDef[] = [{
component: page(() => import('@/pages/user/index.vue')), component: page(() => import('@/pages/user/index.vue')),
}, { }, {
name: 'note', name: 'note',
path: '/notes/:noteId', path: '/notes/:noteId/:initialTab?',
component: page(() => import('@/pages/note.vue')), component: page(() => import('@/pages/note.vue')),
}, { }, {
name: 'list', name: 'list',