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