diff --git a/CHANGELOG.md b/CHANGELOG.md index 84e3321518..be47a3db27 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -19,6 +19,7 @@ ### Client - 検索ページでURLを入力した際に照会したときと同等の挙動をするように +- ノートのリアクションを大きく表示するオプションを追加 ### Server - diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml index 8bea3b8405..67f0634346 100644 --- a/locales/ja-JP.yml +++ b/locales/ja-JP.yml @@ -983,6 +983,7 @@ retryAllQueuesConfirmText: "一時的にサーバーの負荷が増大するこ enableChartsForRemoteUser: "リモートユーザーのチャートを生成" enableChartsForFederatedInstances: "リモートサーバーのチャートを生成" showClipButtonInNoteFooter: "ノートのアクションにクリップを追加" +largeNoteReactions: "ノートのリアクションを大きく表示" _achievements: earnedAt: "獲得日時" diff --git a/packages/frontend/src/components/MkReactionsViewer.reaction.vue b/packages/frontend/src/components/MkReactionsViewer.reaction.vue index fd0f42e9fc..9480af5102 100644 --- a/packages/frontend/src/components/MkReactionsViewer.reaction.vue +++ b/packages/frontend/src/components/MkReactionsViewer.reaction.vue @@ -3,7 +3,7 @@ ref="buttonEl" v-ripple="canToggle" class="_button" - :class="[$style.root, { [$style.reacted]: note.myReaction == reaction, [$style.canToggle]: canToggle }]" + :class="[$style.root, { [$style.reacted]: note.myReaction == reaction, [$style.canToggle]: canToggle, [$style.large]: defaultStore.state.largeNoteReactions }]" @click="toggleReaction()" > @@ -118,6 +118,17 @@ useTooltip(buttonEl, async (showing) => { cursor: default; } + &.large { + height: 42px; + font-size: 1.5em; + border-radius: 6px; + + > .count { + font-size: 0.7em; + line-height: 42px; + } + } + &.reacted { background: var(--accent); diff --git a/packages/frontend/src/pages/settings/general.vue b/packages/frontend/src/pages/settings/general.vue index dd62a32530..f88e934e1d 100644 --- a/packages/frontend/src/pages/settings/general.vue +++ b/packages/frontend/src/pages/settings/general.vue @@ -48,6 +48,7 @@
{{ i18n.ts.showNoteActionsOnlyHover }} {{ i18n.ts.showClipButtonInNoteFooter }} + {{ i18n.ts.largeNoteReactions }} {{ i18n.ts.collapseRenotes }} {{ i18n.ts.enableAdvancedMfm }} {{ i18n.ts.enableAnimatedMfm }} @@ -145,6 +146,7 @@ const overridedDeviceKind = computed(defaultStore.makeGetterSetter('overridedDev const serverDisconnectedBehavior = computed(defaultStore.makeGetterSetter('serverDisconnectedBehavior')); const showNoteActionsOnlyHover = computed(defaultStore.makeGetterSetter('showNoteActionsOnlyHover')); const showClipButtonInNoteFooter = computed(defaultStore.makeGetterSetter('showClipButtonInNoteFooter')); +const largeNoteReactions = computed(defaultStore.makeGetterSetter('largeNoteReactions')); const collapseRenotes = computed(defaultStore.makeGetterSetter('collapseRenotes')); const reduceAnimation = computed(defaultStore.makeGetterSetter('animation', v => !v, v => !v)); const useBlurEffectForModal = computed(defaultStore.makeGetterSetter('useBlurEffectForModal')); diff --git a/packages/frontend/src/store.ts b/packages/frontend/src/store.ts index c3cf48afc4..0be91bbcb4 100644 --- a/packages/frontend/src/store.ts +++ b/packages/frontend/src/store.ts @@ -294,6 +294,10 @@ export const defaultStore = markRaw(new Storage('base', { where: 'device', default: false, }, + largeNoteReactions: { + where: 'device', + default: false, + }, aiChanMode: { where: 'device', default: false,