From ffbe896f284a1ac7a42724b8871d918c6b3a1da4 Mon Sep 17 00:00:00 2001 From: syuilo Date: Thu, 30 Mar 2023 12:49:23 +0900 Subject: [PATCH] =?UTF-8?q?enhance(client):=20=E3=83=8E=E3=83=BC=E3=83=88?= =?UTF-8?q?=E3=81=AE=E3=83=AA=E3=82=A2=E3=82=AF=E3=82=B7=E3=83=A7=E3=83=B3?= =?UTF-8?q?=E3=82=92=E5=A4=A7=E3=81=8D=E3=81=8F=E8=A1=A8=E7=A4=BA=E3=81=99?= =?UTF-8?q?=E3=82=8B=E3=82=AA=E3=83=97=E3=82=B7=E3=83=A7=E3=83=B3=E3=82=92?= =?UTF-8?q?=E8=BF=BD=E5=8A=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- CHANGELOG.md | 1 + locales/ja-JP.yml | 1 + .../src/components/MkReactionsViewer.reaction.vue | 13 ++++++++++++- packages/frontend/src/pages/settings/general.vue | 2 ++ packages/frontend/src/store.ts | 4 ++++ 5 files changed, 20 insertions(+), 1 deletion(-) 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,