fix https://github.com/misskey-dev/misskey/pull/12617#issuecomment-1848952862

2023-12-12 09:54:15 +09:00 · 2023-12-12 09:54:15 +09:00 · b47b25be8f
parent bcc2bdd8a2
commit b47b25be8f
7 changed files with 91 additions and 82 deletions
--- a/locales/index.d.ts
+++ b/locales/index.d.ts
@ -124,14 +124,17 @@ export interface Locale {
    "add": string;
    "reaction": string;
    "reactions": string;
+    "reactionAndEmoji": string;
    "reactionDeckSettingTitle": string;
    "reactionDeckSettingDescription": string;
    "emojiDeckSettingTitle": string;
    "emojiDeckSettingDescription": string;
    "diversionReactionDeckEmojisTitle": string;
    "diversionReactionDeckEmojisDescription": string;
-    "diversionReactionDeckSettingCaption": string;
-    "diversionReactionDeckSettingDescription": string;
+    "copyFromReactionDeckItems": string;
+    "copyFromReactionDeckItemsConfirm": string;
+    "copyFromEmojiDeckItems": string;
+    "copyFromEmojiDeckItemsConfirm": string;
    "reactionSettingDescription2": string;
    "rememberNoteVisibility": string;
    "attachCancel": string;
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@ -121,14 +121,17 @@ sensitive: "センシティブ"
 add: "追加"
 reaction: "リアクション"
 reactions: "リアクション"
+reactionAndEmoji: "リアクション・絵文字"
 reactionDeckSettingTitle: "リアクションデッキ"
 reactionDeckSettingDescription: "ノートの＋ボタンから使用するリアクションデッキの設定です。"
 emojiDeckSettingTitle: "絵文字デッキ"
 emojiDeckSettingDescription: "投稿時に使用する絵文字デッキの設定です。"
 diversionReactionDeckEmojisTitle: "ピッカーの表示設定"
 diversionReactionDeckEmojisDescription: "ピッカーの表示についての設定を行います。この設定はリアクションピッカーと絵文字ピッカーで共通です。"
-diversionReactionDeckSettingCaption: "リアクションデッキと同じ設定を使う"
-diversionReactionDeckSettingDescription: "絵文字デッキの設定をリアクションデッキと同じにします。絵文字デッキの設定内容そのものは消えません。"
+copyFromReactionDeckItems: "リアクションデッキからコピーする"
+copyFromReactionDeckItemsConfirm: "リアクションデッキの内容を絵文字デッキにコピーします。この操作により、いまの絵文字デッキの設定内容はすべて上書きされます。続行しますか？"
+copyFromEmojiDeckItems: "絵文字デッキからコピーする"
+copyFromEmojiDeckItemsConfirm: "絵文字デッキの内容をリアクションデッキにコピーします。この操作により、いまのリアクションデッキの設定内容はすべて上書きされます。続行しますか？"
 reactionSettingDescription2: "ドラッグして並び替え、クリックして削除、＋を押して追加します。"
 rememberNoteVisibility: "公開範囲を記憶する"
 attachCancel: "添付取り消し"
--- a/packages/frontend/src/pages/settings/index.vue
+++ b/packages/frontend/src/pages/settings/index.vue
@ -74,7 +74,7 @@ const menuDef = computed(() => [{
 		active: currentPage.value?.route.name === 'privacy',
 	}, {
 		icon: 'ti ti-mood-happy',
-		text: i18n.ts.reaction,
+		text: i18n.ts.reactionAndEmoji,
 		to: '/settings/reaction',
 		active: currentPage.value?.route.name === 'reaction',
 	}, {
--- a/packages/frontend/src/pages/settings/preferences-backups.vue
+++ b/packages/frontend/src/pages/settings/preferences-backups.vue
@ -95,7 +95,6 @@ const defaultStoreSaveKeys: (keyof typeof defaultStore['state'])[] = [
 	'numberOfPageCache',
 	'showNoteActionsOnlyHover',
 	'showClipButtonInNoteFooter',
-	'useReactionDeckItems',
 	'reactionsDisplaySize',
 	'forceShowAds',
 	'aiChanMode',
--- a/packages/frontend/src/pages/settings/reaction.vue
+++ b/packages/frontend/src/pages/settings/reaction.vue
@ -5,11 +5,15 @@ SPDX-License-Identifier: AGPL-3.0-only

 <template>
 <div class="_gaps_m">
-	<FormSection :first="true">
-		<template #label>{{ i18n.ts.reactionDeckSettingTitle }}</template>
-		<template #description>{{ i18n.ts.reactionDeckSettingDescription }}</template>
+	<div>
+		<MkTab v-model="tabSelection" :class="$style.tab">
+			<option value="reactionDeck">{{ i18n.ts.reactionDeckSettingTitle }}</option>
+			<option value="emojiDeck">{{ i18n.ts.emojiDeckSettingTitle }}</option>
+		</MkTab>
+
+		<div v-if="tabSelection === 'reactionDeck'" class="_gaps_m">
+			<div class="description">{{ i18n.ts.reactionDeckSettingDescription }}</div>

-		<div class="_gaps_m">
 			<div>
 				<div v-panel style="border-radius: 6px;">
 					<Sortable
@ -39,52 +43,48 @@ SPDX-License-Identifier: AGPL-3.0-only
 			<div class="_buttons">
 				<MkButton inline @click="previewReaction"><i class="ti ti-eye"></i> {{ i18n.ts.preview }}</MkButton>
 				<MkButton inline danger @click="setDefaultReaction"><i class="ti ti-reload"></i> {{ i18n.ts.default }}</MkButton>
+				<MkButton inline danger @click="copyFromEmojiDeckItems"><i class="ti ti-copy"></i> {{ i18n.ts.copyFromEmojiDeckItems }}</MkButton>
 			</div>
 		</div>
-	</FormSection>

-	<FormSection>
-		<template #label>{{ i18n.ts.emojiDeckSettingTitle }}</template>
-		<template #description>{{ i18n.ts.emojiDeckSettingDescription }}</template>
+		<div v-if="tabSelection === 'emojiDeck'" class="_gaps_m">
+			<div class="description">{{ i18n.ts.emojiDeckSettingDescription }}</div>

-		<div class="_gaps_m">
-			<MkSwitch v-model="useReactionDeckItems">
-				{{ i18n.ts.diversionReactionDeckSettingCaption }}
-				<template #caption>{{ i18n.ts.diversionReactionDeckSettingDescription }}</template>
-			</MkSwitch>
-
-			<div v-if="!useReactionDeckItems">
-				<div v-panel style="border-radius: 6px;">
-					<Sortable
-						v-model="emojiDeckItems"
-						:class="$style.reactions"
-						:itemKey="item => item"
-						:animation="150"
-						:delay="100"
-						:delayOnTouchOnly="true"
-					>
-						<template #item="{element}">
-							<button class="_button" :class="$style.reactionsItem" @click="removeEmoji(element, $event)">
-								<MkCustomEmoji v-if="element[0] === ':'" :name="element" :normal="true"/>
-								<MkEmoji v-else :emoji="element" :normal="true"/>
-							</button>
-						</template>
-						<template #footer>
-							<button class="_button" :class="$style.reactionsAdd" @click="chooseEmoji">
-								<i class="ti ti-plus"></i>
-							</button>
-						</template>
-					</Sortable>
+			<div class="_gaps_m">
+				<div>
+					<div v-panel style="border-radius: 6px;">
+						<Sortable
+							v-model="emojiDeckItems"
+							:class="$style.reactions"
+							:itemKey="item => item"
+							:animation="150"
+							:delay="100"
+							:delayOnTouchOnly="true"
+						>
+							<template #item="{element}">
+								<button class="_button" :class="$style.reactionsItem" @click="removeEmoji(element, $event)">
+									<MkCustomEmoji v-if="element[0] === ':'" :name="element" :normal="true"/>
+									<MkEmoji v-else :emoji="element" :normal="true"/>
+								</button>
+							</template>
+							<template #footer>
+								<button class="_button" :class="$style.reactionsAdd" @click="chooseEmoji">
+									<i class="ti ti-plus"></i>
+								</button>
+							</template>
+						</Sortable>
+					</div>
+					<span class="description">{{ i18n.ts.reactionSettingDescription2 }}</span>
 				</div>
-				<span class="description">{{ i18n.ts.reactionSettingDescription2 }}</span>
-			</div>

-			<div v-if="!useReactionDeckItems" class="_buttons">
-				<MkButton inline @click="previewEmoji"><i class="ti ti-eye"></i> {{ i18n.ts.preview }}</MkButton>
-				<MkButton inline danger @click="setDefaultEmoji"><i class="ti ti-reload"></i> {{ i18n.ts.default }}</MkButton>
+				<div class="_buttons">
+					<MkButton inline @click="previewEmoji"><i class="ti ti-eye"></i> {{ i18n.ts.preview }}</MkButton>
+					<MkButton inline danger @click="setDefaultEmoji"><i class="ti ti-reload"></i> {{ i18n.ts.default }}</MkButton>
+					<MkButton inline danger @click="copyFromReactionDeckItems"><i class="ti ti-copy"></i> {{ i18n.ts.copyFromReactionDeckItems }}</MkButton>
+				</div>
 			</div>
 		</div>
-	</FormSection>
+	</div>

 	<FormSection>
 		<template #label>{{ i18n.ts.diversionReactionDeckEmojisTitle }}</template>
@ -140,11 +140,13 @@ import { reactionPicker } from '@/scripts/reaction-picker.js';
 import { emojiPicker } from '@/scripts/emoji-picker.js';
 import MkCustomEmoji from '@/components/global/MkCustomEmoji.vue';
 import MkEmoji from '@/components/global/MkEmoji.vue';
+import MkTab from "@/components/MkTab.vue";
+
+const tabSelection = ref<'reactionDeck' | 'emojiDeck'>('reactionDeck');

 const reactionDeckItems: Ref<string[]> = ref(deepClone(defaultStore.state.reactions));
 const emojiDeckItems: Ref<string[]> = ref(deepClone(defaultStore.state.emojiDeckItems));

-const useReactionDeckItems = computed(defaultStore.makeGetterSetter('useReactionDeckItems'));
 const reactionPickerSize = computed(defaultStore.makeGetterSetter('reactionPickerSize'));
 const reactionPickerWidth = computed(defaultStore.makeGetterSetter('reactionPickerWidth'));
 const reactionPickerHeight = computed(defaultStore.makeGetterSetter('reactionPickerHeight'));
@ -163,7 +165,33 @@ function previewReaction(ev: MouseEvent) {
 }

 function previewEmoji(ev: MouseEvent) {
-	emojiPicker.show(getHTMLElement(ev), undefined, undefined, 'emojis');
+	emojiPicker.show(getHTMLElement(ev));
+}
+
+async function copyFromEmojiDeckItems() {
+  const { canceled } = await os.confirm({
+		type: 'warning',
+		text: i18n.ts.copyFromEmojiDeckItemsConfirm,
+	});
+
+	if (canceled) {
+		return;
+	}
+
+	reactionDeckItems.value = emojiDeckItems.value;
+}
+
+async function copyFromReactionDeckItems() {
+	const { canceled } = await os.confirm({
+		type: 'warning',
+		text: i18n.ts.copyFromReactionDeckItemsConfirm,
+	});
+
+	if (canceled) {
+		return;
+	}
+
+	emojiDeckItems.value = reactionDeckItems.value;
 }

 function remove(itemsRef: Ref<string[]>, reaction: string, ev: MouseEvent) {
@ -227,6 +255,12 @@ definePageMetadata({
 </style>

 <style lang="scss" module>
+.tab {
+	margin: calc(var(--margin) / 2) 0;
+	padding: calc(var(--margin) / 2) 0;
+	background: var(--bg);
+}
+
 .reactions {
  padding: 12px;
  font-size: 1.1em;
--- a/packages/frontend/src/scripts/emoji-picker.ts
+++ b/packages/frontend/src/scripts/emoji-picker.ts
@ -16,7 +16,6 @@ import { defaultStore } from '@/store.js';
 class EmojiPicker {
 	private src: Ref<HTMLElement | null> = ref(null);
 	private manualShowing = ref(false);
-	private itemPresetType = ref<DeckItemPresetType>('auto');
 	private onChosen?: (emoji: string) => void;
 	private onClosed?: () => void;

@ -24,32 +23,11 @@ class EmojiPicker {
 		// nop
 	}

-	/**
-	 * リアクションデッキ・絵文字デッキを動的に切り替えるための{@link ComputedRef}を作成する。
-	 */
-	private createDeckItemCompute(): ComputedRef<string[]> {
-		const itemPresetTypeRef = this.itemPresetType;
-		const useReactionDeckItemsRef = defaultStore.reactiveState.useReactionDeckItems;
-		const reactionsRef = defaultStore.reactiveState.reactions;
-		const emojisRef = defaultStore.reactiveState.emojiDeckItems;
-
-		return computed(() => {
-			switch (itemPresetTypeRef.value) {
-				case 'reactions':
-					return reactionsRef.value;
-				case 'emojis':
-					return emojisRef.value;
-				default:
-					return useReactionDeckItemsRef.value ? reactionsRef.value : emojisRef.value;
-			}
-		});
-	}
-
 	public async init() {
-		const emojisComputed = this.createDeckItemCompute();
+		const emojisRef = defaultStore.reactiveState.emojiDeckItems;
 		await popup(defineAsyncComponent(() => import('@/components/MkEmojiPickerDialog.vue')), {
 			src: this.src,
-			pinnedEmojis: emojisComputed,
+			pinnedEmojis: emojisRef,
 			asReactionPicker: true,
 			manualShowing: this.manualShowing,
 			choseAndClose: false,
@ -71,16 +49,12 @@ class EmojiPicker {
 		src: HTMLElement,
 		onChosen?: EmojiPicker['onChosen'],
 		onClosed?: EmojiPicker['onClosed'],
-		itemPresetType: DeckItemPresetType = 'auto',
 	) {
 		this.src.value = src;
-		this.itemPresetType.value = itemPresetType;
 		this.manualShowing.value = true;
 		this.onChosen = onChosen;
 		this.onClosed = onClosed;
 	}
 }

-export type DeckItemPresetType = 'reactions' | 'emojis' | 'auto';
-
 export const emojiPicker = new EmojiPicker();
--- a/packages/frontend/src/store.ts
+++ b/packages/frontend/src/store.ts
@ -343,10 +343,6 @@ export const defaultStore = markRaw(new Storage('base', {
 		where: 'device',
 		default: false,
 	},
-	useReactionDeckItems: {
-		where: 'device',
-		default: true,
-	},
 	reactionsDisplaySize: {
 		where: 'device',
 		default: 'medium' as 'small' | 'medium' | 'large',