diff --git a/locales/index.d.ts b/locales/index.d.ts index 7f43b59c5a..9ba9332566 100644 --- a/locales/index.d.ts +++ b/locales/index.d.ts @@ -546,6 +546,10 @@ export interface Locale extends ILocale { * 絵文字ピッカー */ "emojiPicker": string; + /** + * リアクションピッカー + */ + "reactionPicker": string; /** * リアクション時にピン留め表示する絵文字を設定できます */ diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml index f723802b3a..b25107903b 100644 --- a/locales/ja-JP.yml +++ b/locales/ja-JP.yml @@ -132,6 +132,7 @@ add: "追加" reaction: "リアクション" reactions: "リアクション" emojiPicker: "絵文字ピッカー" +reactionPicker: "リアクションピッカー" pinnedEmojisForReactionSettingDescription: "リアクション時にピン留め表示する絵文字を設定できます" pinnedEmojisSettingDescription: "絵文字入力時にピン留め表示する絵文字を設定できます" emojiPickerDisplay: "ピッカーの表示" diff --git a/packages/frontend/src/components/MkEmojiPickerDialog.vue b/packages/frontend/src/components/MkEmojiPickerDialog.vue index 21c712b441..42ebc0a6b9 100644 --- a/packages/frontend/src/components/MkEmojiPickerDialog.vue +++ b/packages/frontend/src/components/MkEmojiPickerDialog.vue @@ -8,7 +8,7 @@ SPDX-License-Identifier: AGPL-3.0-only ref="modal" v-slot="{ type, maxHeight }" :zPriority="'middle'" - :preferType="defaultStore.state.emojiPickerStyle" + :preferType="asReactionPicker ? defaultStore.state.reactionPickerStyle : defaultStore.state.emojiPickerStyle === 'window' ? 'auto' : defaultStore.state.emojiPickerStyle" :hasInteractionWithOtherFocusTrappedEls="true" :transparentBg="true" :manualShowing="manualShowing" diff --git a/packages/frontend/src/pages/settings/emoji-picker.vue b/packages/frontend/src/pages/settings/emoji-picker.vue index 647a8b9e96..6be439baa3 100644 --- a/packages/frontend/src/pages/settings/emoji-picker.vue +++ b/packages/frontend/src/pages/settings/emoji-picker.vue @@ -114,12 +114,19 @@ SPDX-License-Identifier: AGPL-3.0-only - + + + + + + + + @@ -152,6 +159,7 @@ const emojiPickerScale = computed(defaultStore.makeGetterSetter('emojiPickerScal const emojiPickerWidth = computed(defaultStore.makeGetterSetter('emojiPickerWidth')); const emojiPickerHeight = computed(defaultStore.makeGetterSetter('emojiPickerHeight')); const emojiPickerStyle = computed(defaultStore.makeGetterSetter('emojiPickerStyle')); +const reactionPickerStyle = computed(defaultStore.makeGetterSetter('reactionPickerStyle')); const removeReaction = (reaction: string, ev: MouseEvent) => remove(pinnedEmojisForReaction, reaction, ev); const chooseReaction = (ev: MouseEvent) => pickEmoji(pinnedEmojisForReaction, ev); @@ -244,7 +252,10 @@ watch(pinnedEmojis, () => { deep: true, }); -watch(emojiPickerStyle, async () => { +watch([ + emojiPickerStyle, + reactionPickerStyle, +], async () => { await reloadAsk({ reason: i18n.ts.reloadToApplySetting, unison: true }); }); diff --git a/packages/frontend/src/store.ts b/packages/frontend/src/store.ts index afc007a430..85895a4ad1 100644 --- a/packages/frontend/src/store.ts +++ b/packages/frontend/src/store.ts @@ -315,6 +315,10 @@ export const defaultStore = markRaw(new Storage('base', { where: 'device', default: 'auto' as 'auto' | 'popup' | 'drawer' | 'window', }, + reactionPickerStyle: { + where: 'device', + default: 'auto' as 'auto' | 'popup' | 'drawer', + }, recentlyUsedEmojis: { where: 'device', default: [] as string[],