Merge c381c3a522 into a874def344

CHANGELOG.md

@@ -42,6 +42,8 @@
 - Enhance: トルコ語 (tr-TR) に対応
 - Enhance: 不必要な翻訳データを読み込まなくなり、パフォーマンスが向上しました
 - Enhance: 画像エフェクトのパラメータ名の多言語対応
+- Enhance: 投稿フォームの絵文字ピッカーに独立したウィンドウを使用できるように
+  - リアクションピッカーと絵文字ピッカーで表示スタイルの設定が分離しました。絵文字ピッカーでのみウィンドウスタイルを使用可能です。
 - Enhance: 依存ソフトウェアの更新
 - Enhance: ノートを非表示にする相対期間を1ヶ月単位で自由に指定できるように
 - Enhance: メールアドレス確認画面のUIを改善

locales/index.d.ts

@@ -130,6 +130,10 @@ export interface Locale extends ILocale {
      * ウィンドウで開く
      */
     "openInWindow": string;
+    /**
+     * ウィンドウ
+     */
+    "window": string;
     /**
      * プロフィール
      */
@@ -542,6 +546,10 @@ export interface Locale extends ILocale {
      * 絵文字ピッカー
      */
     "emojiPicker": string;
+    /**
+     * リアクションピッカー
+     */
+    "reactionPicker": string;
     /**
      * リアクション時にピン留め表示する絵文字を設定できます
      */
@@ -3194,10 +3202,6 @@ export interface Locale extends ILocale {
      * 設定はページリロード後に反映されます。
      */
     "reloadToApplySetting": string;
-    /**
-     * 反映には再起動が必要です。
-     */
-    "needReloadToApply": string;
     /**
      * 反映にはサーバーの再起動が必要です。
      */

locales/ja-JP.yml

@@ -28,6 +28,7 @@ notificationSettings: "通知の設定"
 basicSettings: "基本設定"
 otherSettings: "その他の設定"
 openInWindow: "ウィンドウで開く"
+window: "ウィンドウ"
 profile: "プロフィール"
 timeline: "タイムライン"
 noAccountDescription: "自己紹介はありません"
@@ -131,6 +132,7 @@ add: "追加"
 reaction: "リアクション"
 reactions: "リアクション"
 emojiPicker: "絵文字ピッカー"
+reactionPicker: "リアクションピッカー"
 pinnedEmojisForReactionSettingDescription: "リアクション時にピン留め表示する絵文字を設定できます"
 pinnedEmojisSettingDescription: "絵文字入力時にピン留め表示する絵文字を設定できます"
 emojiPickerDisplay: "ピッカーの表示"
@@ -794,7 +796,6 @@ center: "中央"
 wide: "広い"
 narrow: "狭い"
 reloadToApplySetting: "設定はページリロード後に反映されます。"
-needReloadToApply: "反映には再起動が必要です。"
 needToRestartServerToApply: "反映にはサーバーの再起動が必要です。"
 showTitlebar: "タイトルバーを表示する"
 clearCache: "キャッシュをクリア"

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="prefer.s.emojiPickerStyle"
+	:preferType="asReactionPicker ? prefer.s.reactionPickerStyle : prefer.s.emojiPickerStyle === 'window' ? 'auto' : prefer.s.emojiPickerStyle"
 	:hasInteractionWithOtherFocusTrappedEls="true"
 	:transparentBg="true"
 	:manualShowing="manualShowing"

packages/frontend/src/components/MkEmojiPickerWindow.stories.impl.ts

@@ -0,0 +1,7 @@
+/*
+ * SPDX-FileCopyrightText: syuilo and misskey-project
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import MkEmojiPickerWindow from './MkEmojiPickerWindow.vue';
+void MkEmojiPickerWindow;

packages/frontend/src/components/MkEmojiPickerWindow.vue

@@ -0,0 +1,68 @@
+<!--
+SPDX-FileCopyrightText: syuilo and misskey-project
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<template>
+<MkWindow
+	ref="window"
+	:initialWidth="300"
+	:initialHeight="290"
+	:canResize="true"
+	:mini="true"
+	:front="true"
+	@closed="emit('closed')"
+>
+	<MkEmojiPicker
+		:showPinned="showPinned"
+		:asReactionPicker="asReactionPicker"
+		:targetNote="targetNote"
+		asWindow
+		:class="$style.picker"
+		@chosen="chosen"
+	/>
+</MkWindow>
+</template>
+
+<script lang="ts" setup>
+import { onBeforeUnmount, onMounted, useTemplateRef } from 'vue';
+import * as Misskey from 'misskey-js';
+import { globalEvents } from '@/events.js';
+import MkWindow from '@/components/MkWindow.vue';
+import MkEmojiPicker from '@/components/MkEmojiPicker.vue';
+
+withDefaults(defineProps<{
+	src?: HTMLElement;
+	showPinned?: boolean;
+	pinnedEmojis?: string[];
+	asReactionPicker?: boolean;
+	targetNote?: Misskey.entities.Note;
+}>(), {
+	showPinned: true,
+});
+
+const emit = defineEmits<{
+	(ev: 'chosen', v: string): void;
+	(ev: 'closed'): void;
+}>();
+
+function chosen(emoji: string) {
+	emit('chosen', emoji);
+}
+
+const windowEl = useTemplateRef('window');
+
+function close() {
+	windowEl.value?.close();
+}
+
+defineExpose({
+	close,
+});
+</script>
+
+<style lang="scss" module>
+.picker {
+	height: 100%;
+}
+</style>

packages/frontend/src/components/MkPostForm.vue

@@ -105,14 +105,14 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script lang="ts" setup>
-import { inject, watch, nextTick, onMounted, defineAsyncComponent, provide, shallowRef, ref, computed, useTemplateRef } from 'vue';
+import { inject, watch, nextTick, onMounted, onBeforeUnmount, defineAsyncComponent, provide, shallowRef, ref, computed, useTemplateRef } from 'vue';
+import type { ShallowRef } from 'vue';
 import * as mfm from 'mfm-js';
 import * as Misskey from 'misskey-js';
 import insertTextAtCursor from 'insert-text-at-cursor';
 import { toASCII } from 'punycode.js';
 import { host, url } from '@@/js/config.js';
 import MkUploaderItems from './MkUploaderItems.vue';
-import type { ShallowRef } from 'vue';
 import type { PostFormProps } from '@/types/post-form.js';
 import type { MenuItem } from '@/types/menu.js';
 import type { PollEditorModelValue } from '@/components/MkPollEditor.vue';
@@ -1070,20 +1070,20 @@ async function insertEmoji(ev: MouseEvent) {
 
 	let pos = textareaEl.value?.selectionStart ?? 0;
 	let posEnd = textareaEl.value?.selectionEnd ?? text.value.length;
-	emojiPicker.show(
-		target as HTMLElement,
-		emoji => {
+	emojiPicker.show({
+		anchorElement: target as HTMLElement,
+		onChosen: emoji => {
 			const textBefore = text.value.substring(0, pos);
 			const textAfter = text.value.substring(posEnd);
 			text.value = textBefore + emoji + textAfter;
 			pos += emoji.length;
 			posEnd += emoji.length;
 		},
-		() => {
+		onClosed: () => {
 			textAreaReadOnly.value = false;
 			nextTick(() => focus());
 		},
-	);
+	});
 }
 
 async function insertMfmFunction(ev: MouseEvent) {
@@ -1286,6 +1286,10 @@ onMounted(() => {
 	});
 });
 
+onBeforeUnmount(() => {
+	emojiPicker.closeWindow();
+});
+
 async function canClose() {
 	if (!uploader.allItemsUploaded.value) {
 		const { canceled } = await os.confirm({

packages/frontend/src/components/MkPostFormDialog.vue

@@ -8,6 +8,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 	ref="modal"
 	:preferType="'dialog'"
 	@click="onBgClick()"
+	@close="onModalClose()"
 	@closed="onModalClosed()"
 	@esc="onEsc"
 >
@@ -26,9 +27,10 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <script lang="ts" setup>
 import { useTemplateRef } from 'vue';
-import type { PostFormProps } from '@/types/post-form.js';
 import MkModal from '@/components/MkModal.vue';
 import MkPostForm from '@/components/MkPostForm.vue';
+import { emojiPicker } from '@/utility/emoji-picker.js';
+import type { PostFormProps } from '@/types/post-form.js';
 
 const props = withDefaults(defineProps<PostFormProps & {
 	instant?: boolean;
@@ -51,13 +53,17 @@ function onPosted() {
 	});
 }
 
+function onModalClose() {
+	emojiPicker.closeWindow();
+}
+
 async function _close() {
 	const canClose = await form.value?.canClose();
 	if (!canClose) return;
 	modal.value?.close();
 }
 
-function onEsc(ev: KeyboardEvent) {
+function onEsc() {
 	_close();
 }
 

packages/frontend/src/os.ts

@@ -5,10 +5,10 @@
 
 // TODO: なんでもかんでもos.tsに突っ込むのやめたいのでよしなに分割する
 
-import { markRaw, ref, defineAsyncComponent, nextTick } from 'vue';
+import { markRaw, ref, shallowRef, defineAsyncComponent, nextTick } from 'vue';
 import { EventEmitter } from 'eventemitter3';
 import * as Misskey from 'misskey-js';
-import type { Component, Ref } from 'vue';
+import type { Component, Ref, ShallowRef } from 'vue';
 import type { ComponentProps as CP } from 'vue-component-type-helpers';
 import type { Form, GetFormResultType } from '@/utility/form.js';
 import type { MenuItem } from '@/types/menu.js';
@@ -142,6 +142,7 @@ let popupIdCount = 0;
 export const popups = ref<{
 	id: number;
 	component: Component;
+	componentRef: ShallowRef<Component | null>;
 	props: Record<string, any>;
 	events: Record<string, any>;
 }[]>([]);
@@ -179,13 +180,21 @@ type EmitsExtractor<T> = {
 	[K in keyof T as K extends `onVnode${string}` ? never : K extends `on${infer E}` ? Uncapitalize<E> : K extends string ? never : K]: T[K];
 };
 
-export function popup<T extends Component>(
+export function popup<
+	T extends Component,
+	TI extends T extends new (...args: unknown[]) => infer I ? I : T,
+>(
 	component: T,
 	props: ComponentProps<T>,
 	events: Partial<ComponentEmit<T>> = {},
-): { dispose: () => void } {
+): {
+	dispose: () => void;
+	componentRef: ShallowRef<TI | null>;
+} {
 	markRaw(component);
 
+	const componentRef = shallowRef<TI | null>(null);
+
 	const id = ++popupIdCount;
 	const dispose = () => {
 		// このsetTimeoutが無いと挙動がおかしくなる(autocompleteが閉じなくなる)。Vueのバグ？
@@ -195,6 +204,7 @@ export function popup<T extends Component>(
 	};
 	const state = {
 		component,
+		componentRef,
 		props,
 		events,
 		id,
@@ -204,6 +214,7 @@ export function popup<T extends Component>(
 
 	return {
 		dispose,
+		componentRef,
 	};
 }
 

packages/frontend/src/pages/chat/room.form.vue

@@ -260,20 +260,20 @@ async function insertEmoji(ev: MouseEvent) {
 
 	let pos = textareaEl.value?.selectionStart ?? 0;
 	let posEnd = textareaEl.value?.selectionEnd ?? text.value.length;
-	emojiPicker.show(
-		target as HTMLElement,
-		emoji => {
+	emojiPicker.show({
+		anchorElement: target as HTMLElement,
+		onChosen: (emoji) => {
 			const textBefore = text.value.substring(0, pos);
 			const textAfter = text.value.substring(posEnd);
 			text.value = textBefore + emoji + textAfter;
 			pos += emoji.length;
 			posEnd += emoji.length;
 		},
-		() => {
+		onClosed: () => {
 			textareaReadOnly.value = false;
 			nextTick(() => focus());
 		},
-	);
+	});
 }
 
 onMounted(() => {

packages/frontend/src/pages/settings/emoji-palette.vue

@@ -100,8 +100,19 @@ SPDX-License-Identifier: AGPL-3.0-only
 					<SearchMarker :keywords="['emoji', 'picker', 'style']">
 						<MkPreferenceContainer k="emojiPickerStyle">
 							<MkSelect v-model="emojiPickerStyle">
-								<template #label><SearchLabel>{{ i18n.ts.style }}</SearchLabel></template>
-								<template #caption>{{ i18n.ts.needReloadToApply }}</template>
+								<template #label><SearchLabel>{{ i18n.ts.style }} ({{ i18n.ts.emojiPicker }})</SearchLabel></template>
+								<option value="auto">{{ i18n.ts.auto }}</option>
+								<option value="popup">{{ i18n.ts.popup }}</option>
+								<option value="drawer">{{ i18n.ts.drawer }}</option>
+								<option value="window">{{ i18n.ts.window }}</option>
+							</MkSelect>
+						</MkPreferenceContainer>
+					</SearchMarker>
+
+					<SearchMarker :keywords="['reaction', 'emoji', 'picker', 'style']">
+						<MkPreferenceContainer k="emojiPickerStyle">
+							<MkSelect v-model="emojiPickerStyle">
+								<template #label><SearchLabel>{{ i18n.ts.style }} ({{ i18n.ts.reactionPicker }})</SearchLabel></template>
 								<option value="auto">{{ i18n.ts.auto }}</option>
 								<option value="popup">{{ i18n.ts.popup }}</option>
 								<option value="drawer">{{ i18n.ts.drawer }}</option>
@@ -133,6 +144,7 @@ import { prefer } from '@/preferences.js';
 import MkPreferenceContainer from '@/components/MkPreferenceContainer.vue';
 import MkSwitch from '@/components/MkSwitch.vue';
 import { emojiPicker } from '@/utility/emoji-picker.js';
+import { suggestReload } from '@/utility/reload-suggest.js';
 
 const emojiPaletteForReaction = prefer.model('emojiPaletteForReaction');
 const emojiPaletteForMain = prefer.model('emojiPaletteForMain');
@@ -140,6 +152,7 @@ const emojiPickerScale = prefer.model('emojiPickerScale');
 const emojiPickerWidth = prefer.model('emojiPickerWidth');
 const emojiPickerHeight = prefer.model('emojiPickerHeight');
 const emojiPickerStyle = prefer.model('emojiPickerStyle');
+const reactionPickerStyle = prefer.model('reactionPickerStyle');
 
 const palettesSyncEnabled = ref(prefer.isSyncEnabled('emojiPalettes'));
 
@@ -211,9 +224,18 @@ function getHTMLElement(ev: MouseEvent): HTMLElement {
 }
 
 function previewPicker(ev: MouseEvent) {
-	emojiPicker.show(getHTMLElement(ev));
+	emojiPicker.show({
+		anchorElement: getHTMLElement(ev),
+	});
 }
 
+watch([
+	emojiPickerStyle,
+	reactionPickerStyle,
+], () => {
+	suggestReload();
+});
+
 definePage(() => ({
 	title: i18n.ts.emojiPalette,
 	icon: 'ti ti-mood-happy',

packages/frontend/src/preferences/def.ts

@@ -265,6 +265,9 @@ export const PREF_DEF = definePreferences({
 		default: 3,
 	},
 	emojiPickerStyle: {
+		default: 'auto' as 'auto' | 'popup' | 'drawer' | 'window',
+	},
+	reactionPickerStyle: {
 		default: 'auto' as 'auto' | 'popup' | 'drawer',
 	},
 	squareAvatars: {

packages/frontend/src/store.ts

@@ -304,7 +304,7 @@ export const store = markRaw(new Pizzax('base', {
 	},
 	emojiPickerStyle: {
 		where: 'device',
-		default: 'auto' as 'auto' | 'popup' | 'drawer',
+		default: 'auto' as 'auto' | 'popup' | 'drawer' | 'window',
 	},
 	reportError: {
 		where: 'device',

packages/frontend/src/ui/_common_/common.vue

@@ -61,6 +61,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 	:is="popup.component"
 	v-for="popup in popups"
 	:key="popup.id"
+	:ref="(el: Component | null) => popup.componentRef = el"
 	v-bind="popup.props"
 	v-on="popup.events"
 />

packages/frontend/src/utility/emoji-picker.ts

@@ -3,8 +3,9 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
-import { defineAsyncComponent, ref, watch } from 'vue';
-import type { Ref } from 'vue';
+import { defineAsyncComponent, ref, shallowRef, watch } from 'vue';
+import type { Ref, ShallowRef } from 'vue';
+import type MkEmojiPickerWindow_TypeOnly from '@/components/MkEmojiPickerWindow.vue';
 import { popup } from '@/os.js';
 import { prefer } from '@/preferences.js';
 
@@ -16,7 +17,15 @@ import { prefer } from '@/preferences.js';
  */
 class EmojiPicker {
 	private anchorElement: Ref<HTMLElement | null> = ref(null);
-	private manualShowing = ref(false);
+
+	private isWindow: boolean = false;
+	private windowComponentEl: ShallowRef<InstanceType<typeof MkEmojiPickerWindow_TypeOnly> | null> = shallowRef(null);
+	private windowShowing: boolean = false;
+
+	private dialogShowing = ref(false);
+
+	private emojisRef = ref<string[]>([]);
+
 	private onChosen?: (emoji: string) => void;
 	private onClosed?: () => void;
 
@@ -25,43 +34,74 @@ class EmojiPicker {
 	}
 
 	public async init() {
-		const emojisRef = ref<string[]>([]);
-
 		watch([prefer.r.emojiPaletteForMain, prefer.r.emojiPalettes], () => {
-			emojisRef.value = prefer.s.emojiPaletteForMain == null ? prefer.s.emojiPalettes[0].emojis : prefer.s.emojiPalettes.find(palette => palette.id === prefer.s.emojiPaletteForMain)?.emojis ?? [];
+			this.emojisRef.value = prefer.s.emojiPaletteForMain == null ? prefer.s.emojiPalettes[0].emojis : prefer.s.emojiPalettes.find(palette => palette.id === prefer.s.emojiPaletteForMain)?.emojis ?? [];
 		}, {
 			immediate: true,
 		});
 
-		await popup(defineAsyncComponent(() => import('@/components/MkEmojiPickerDialog.vue')), {
-			anchorElement: this.anchorElement,
-			pinnedEmojis: emojisRef,
-			asReactionPicker: false,
-			manualShowing: this.manualShowing,
-			choseAndClose: false,
-		}, {
-			done: emoji => {
-				if (this.onChosen) this.onChosen(emoji);
-			},
-			close: () => {
-				this.manualShowing.value = false;
-			},
-			closed: () => {
-				this.anchorElement.value = null;
-				if (this.onClosed) this.onClosed();
-			},
-		});
+		if (prefer.s.emojiPickerStyle === 'window') {
+			// init後にemojiPickerStyleが変わった場合、drawer/popup用の初期化をスキップするため、
+			// 正常に絵文字ピッカーが表示されない。
+			// なので一度initされたらwindow表示で固定する（設定を変更したら要リロード）
+			this.isWindow = true;
+		} else {
+			await popup(defineAsyncComponent(() => import('@/components/MkEmojiPickerDialog.vue')), {
+				anchorElement: this.anchorElement,
+				pinnedEmojis: this.emojisRef,
+				asReactionPicker: false,
+				manualShowing: this.dialogShowing,
+				choseAndClose: false,
+			}, {
+				done: emoji => {
+					if (this.onChosen) this.onChosen(emoji);
+				},
+				close: () => {
+					this.dialogShowing.value = false;
+				},
+				closed: () => {
+					this.anchorElement.value = null;
+					if (this.onClosed) this.onClosed();
+				},
+			});
+		}
 	}
 
-	public show(
+	public show(opts: {
 		anchorElement: HTMLElement,
 		onChosen?: EmojiPicker['onChosen'],
 		onClosed?: EmojiPicker['onClosed'],
-	) {
-		this.anchorElement.value = anchorElement;
-		this.manualShowing.value = true;
-		this.onChosen = onChosen;
-		this.onClosed = onClosed;
+	}) {
+		if (this.isWindow) {
+			if (this.windowShowing) return;
+			this.windowShowing = true;
+			const { dispose, componentRef } = popup(defineAsyncComponent(() => import('@/components/MkEmojiPickerWindow.vue')), {
+				anchorElement: opts.anchorElement,
+				pinnedEmojis: this.emojisRef,
+				asReactionPicker: false,
+			}, {
+				chosen: (emoji) => {
+					if (opts.onChosen) opts.onChosen(emoji);
+				},
+				closed: () => {
+					if (opts.onClosed) opts.onClosed();
+					this.windowShowing = false;
+					dispose();
+				},
+			});
+			this.windowComponentEl.value = componentRef.value;
+		} else {
+			this.anchorElement.value = opts.anchorElement;
+			this.dialogShowing.value = true;
+			this.onChosen = opts.onChosen;
+			this.onClosed = opts.onClosed;
+		}
+	}
+
+	public closeWindow() {
+		if (this.isWindow && this.windowComponentEl.value) {
+			this.windowComponentEl.value.close();
+		}
 	}
 }