enhance: リアクションの背景を表示するか選択できるように

bettaku · Dec 11, 2024 · fa7c5de · fa7c5de
1 parent 3be2c49
commit fa7c5de
Show file tree

Hide file tree

Showing 5 changed files with 16 additions and 2 deletions.
diff --git a/locales/index.d.ts b/locales/index.d.ts
@@ -4382,6 +4382,10 @@ export interface Locale extends ILocale {
      * リアクションの最大横幅を制限し、縮小して表示する
      */
     readonly "limitWidthOfReaction": string;
+    /**
+     * リアクションの背景を表示する
+     */
+    readonly "hideReactionBackground": string;
     /**
      * ノートIDまたはURL
      */

diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
@@ -1091,6 +1091,7 @@ enableStatsForFederatedInstances: "リモートサーバーの情報を取得"
 showClipButtonInNoteFooter: "ノートのアクションにクリップを追加"
 reactionsDisplaySize: "リアクションの表示サイズ"
 limitWidthOfReaction: "リアクションの最大横幅を制限し、縮小して表示する"
+hideReactionBackground: "リアクションの背景を表示する"
 noteIdOrUrl: "ノートIDまたはURL"
 video: "動画"
 videos: "動画"

diff --git a/packages/frontend/src/components/MkReactionsViewer.reaction.vue b/packages/frontend/src/components/MkReactionsViewer.reaction.vue
@@ -12,7 +12,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 	@click="toggleReaction()"
 	@contextmenu.prevent.stop="menu"
 >
-	<MkReactionIcon :class="[$style.icon, { [$style.limitWidth]: defaultStore.state.limitWidthOfReaction }]" :reaction="reaction" :emojiUrl="note.reactionEmojis[reaction.substring(1, reaction.length - 1)]"/>
+	<MkReactionIcon :class="[$style.icon, { [$style.limitWidth]: defaultStore.state.limitWidthOfReaction, [$style.background]: !defaultStore.state.showReactionBackground }]" :reaction="reaction" :emojiUrl="note.reactionEmojis[reaction.substring(1, reaction.length - 1)]"/>
 	<span :class="$style.count">{{ count }}</span>
 </button>
 </template>
@@ -248,12 +248,15 @@ if (!mock) {
 	object-fit: contain;
 }
 
+.background {
+	background-color: var(--MI_THEME-panel);
+}
+
 .icon {
 	box-sizing: border-box;
 	padding: 4px;
 	height: 34px;
 	font-size: 1.5em;
-	background-color: #ffffff;
 }
 
 .count {

diff --git a/packages/frontend/src/pages/settings/general.vue b/packages/frontend/src/pages/settings/general.vue
@@ -65,6 +65,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 							<option value="large">{{ i18n.ts.large }}</option>
 						</MkRadios>
 						<MkSwitch v-model="limitWidthOfReaction">{{ i18n.ts.limitWidthOfReaction }}</MkSwitch>
+						<MkSwitch v-model="showReactionBackground">{{ i18n.ts.hideReactionBackground }}</MkSwitch>
 					</div>
 
 					<MkSelect v-model="instanceTicker">
@@ -288,6 +289,7 @@ const showNoteActionsOnlyHover = computed(defaultStore.makeGetterSetter('showNot
 const showClipButtonInNoteFooter = computed(defaultStore.makeGetterSetter('showClipButtonInNoteFooter'));
 const reactionsDisplaySize = computed(defaultStore.makeGetterSetter('reactionsDisplaySize'));
 const limitWidthOfReaction = computed(defaultStore.makeGetterSetter('limitWidthOfReaction'));
+const showReactionBackground = computed(defaultStore.makeGetterSetter('showReactionBackground'));
 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
@@ -375,6 +375,10 @@ export const defaultStore = markRaw(new Storage('base', {
 		where: 'device',
 		default: true,
 	},
+	showReactionBackground: {
+		where: 'device',
+		default: false,
+	},
 	forceShowAds: {
 		where: 'device',
 		default: false,