diff --git a/locales/en-US.yml b/locales/en-US.yml index 09fd726c9f..ff5e30eb2f 100644 --- a/locales/en-US.yml +++ b/locales/en-US.yml @@ -1032,6 +1032,7 @@ enableChartsForRemoteUser: "Generate remote user data charts" enableChartsForFederatedInstances: "Generate remote instance data charts" showClipButtonInNoteFooter: "Add \"Clip\" to note action menu" reactionsDisplaySize: "Reaction display size" +limitWidthOfReaction: "Limit Width of Reaction" noteIdOrUrl: "Note ID or URL" video: "Video" videos: "Videos" diff --git a/locales/index.d.ts b/locales/index.d.ts index 6baed91c42..290cfdd6f7 100644 --- a/locales/index.d.ts +++ b/locales/index.d.ts @@ -1035,6 +1035,7 @@ export interface Locale { "enableChartsForFederatedInstances": string; "showClipButtonInNoteFooter": string; "reactionsDisplaySize": string; + "limitWidthOfReaction": string; "noteIdOrUrl": string; "video": string; "videos": string; diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml index e59a550df5..fd8b9cba6b 100644 --- a/locales/ja-JP.yml +++ b/locales/ja-JP.yml @@ -1032,6 +1032,7 @@ enableChartsForRemoteUser: "リモートユーザーのチャートを生成" enableChartsForFederatedInstances: "リモートサーバーのチャートを生成" showClipButtonInNoteFooter: "ノートのアクションにクリップを追加" reactionsDisplaySize: "リアクションの表示サイズ" +limitWidthOfReaction: "リアクションの横幅を制限する" noteIdOrUrl: "ノートIDまたはURL" video: "動画" videos: "動画" diff --git a/locales/ja-KS.yml b/locales/ja-KS.yml index aa68def1da..1af47c0128 100644 --- a/locales/ja-KS.yml +++ b/locales/ja-KS.yml @@ -1032,6 +1032,7 @@ enableChartsForRemoteUser: "リモートユーザーのチャートを作る" enableChartsForFederatedInstances: "リモートサーバーのチャートを作る" showClipButtonInNoteFooter: "ノートのアクションにクリップを追加" reactionsDisplaySize: "リアクションの表示のでかさ" +limitWidthOfReaction: "リアクションの横幅を制限する" noteIdOrUrl: "ノートIDかURL" video: "動画" videos: "動画" diff --git a/packages/frontend/src/components/MkReactionsViewer.reaction.vue b/packages/frontend/src/components/MkReactionsViewer.reaction.vue index 2b850016c5..6d4df92a06 100644 --- a/packages/frontend/src/components/MkReactionsViewer.reaction.vue +++ b/packages/frontend/src/components/MkReactionsViewer.reaction.vue @@ -11,7 +11,7 @@ SPDX-License-Identifier: AGPL-3.0-only :class="[$style.root, { [$style.reacted]: note.myReaction == reaction, [$style.canToggle]: canToggle, [$style.small]: defaultStore.state.reactionsDisplaySize === 'small', [$style.large]: defaultStore.state.reactionsDisplaySize === 'large' }]" @click="toggleReaction()" > - + {{ count }} diff --git a/packages/frontend/src/pages/settings/general.vue b/packages/frontend/src/pages/settings/general.vue index 06d3789829..313b5efc46 100644 --- a/packages/frontend/src/pages/settings/general.vue +++ b/packages/frontend/src/pages/settings/general.vue @@ -56,6 +56,7 @@ SPDX-License-Identifier: AGPL-3.0-only + {{ i18n.ts.limitWidthOfReaction }} @@ -226,6 +227,7 @@ const serverDisconnectedBehavior = computed(defaultStore.makeGetterSetter('serve const showNoteActionsOnlyHover = computed(defaultStore.makeGetterSetter('showNoteActionsOnlyHover')); const showClipButtonInNoteFooter = computed(defaultStore.makeGetterSetter('showClipButtonInNoteFooter')); const reactionsDisplaySize = computed(defaultStore.makeGetterSetter('reactionsDisplaySize')); +const limitWidthOfReaction = computed(defaultStore.makeGetterSetter('limitWidthOfReaction')); const collapseRenotes = computed(defaultStore.makeGetterSetter('collapseRenotes')); const reduceAnimation = computed(defaultStore.makeGetterSetter('animation', v => !v, v => !v)); const useBlurEffectForModal = computed(defaultStore.makeGetterSetter('useBlurEffectForModal')); @@ -290,6 +292,7 @@ watch([ overridedDeviceKind, mediaListWithOneImageAppearance, reactionsDisplaySize, + limitWidthOfReaction, highlightSensitiveMedia, keepScreenOn, disableStreamingTimeline, diff --git a/packages/frontend/src/store.ts b/packages/frontend/src/store.ts index 6d95ddba35..12660e9e8d 100644 --- a/packages/frontend/src/store.ts +++ b/packages/frontend/src/store.ts @@ -330,6 +330,10 @@ export const defaultStore = markRaw(new Storage('base', { where: 'device', default: 'medium' as 'small' | 'medium' | 'large', }, + limitWidthOfReaction: { + where: 'device', + default: true, + }, forceShowAds: { where: 'device', default: false,