From 370099dfea7defbafe16f436f7a2834cc4cbc043 Mon Sep 17 00:00:00 2001 From: osamu <46447427+sam-osamu@users.noreply.github.com> Date: Wed, 15 Nov 2023 12:30:00 +0900 Subject: [PATCH 1/6] =?UTF-8?q?=E5=85=A5=E5=8A=9B=E3=83=95=E3=82=A9?= =?UTF-8?q?=E3=83=BC=E3=83=A0=E3=81=A7=E3=82=82=E3=83=AA=E3=82=A2=E3=82=AF?= =?UTF-8?q?=E3=82=B7=E3=83=A7=E3=83=B3=E9=81=B8=E6=8A=9E=E6=99=82=E3=81=AB?= =?UTF-8?q?=E4=BD=BF=E7=94=A8=E3=81=99=E3=82=8B=E3=83=94=E3=83=83=E3=82=AB?= =?UTF-8?q?=E3=83=BC=E3=82=92=E4=BD=BF=E3=81=86=E3=82=88=E3=81=86=E3=81=AB?= =?UTF-8?q?=E3=81=97=E3=81=9F=E3=81=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/MkEmojiPickerDialog.vue | 20 +++++++++++-------- .../frontend/src/components/MkPostForm.vue | 12 ++++++++++- .../frontend/src/scripts/reaction-picker.ts | 10 +++++++++- 3 files changed, 32 insertions(+), 10 deletions(-) diff --git a/packages/frontend/src/components/MkEmojiPickerDialog.vue b/packages/frontend/src/components/MkEmojiPickerDialog.vue index 9d3132c54091..1f87b3ebcf50 100644 --- a/packages/frontend/src/components/MkEmojiPickerDialog.vue +++ b/packages/frontend/src/components/MkEmojiPickerDialog.vue @@ -31,20 +31,21 @@ SPDX-License-Identifier: AGPL-3.0-only diff --git a/packages/frontend/src/components/MkPostForm.vue b/packages/frontend/src/components/MkPostForm.vue index d163ea248767..0421fa4d6201 100644 --- a/packages/frontend/src/components/MkPostForm.vue +++ b/packages/frontend/src/components/MkPostForm.vue @@ -124,6 +124,7 @@ import { deepClone } from '@/scripts/clone.js'; import MkRippleEffect from '@/components/MkRippleEffect.vue'; import { miLocalStorage } from '@/local-storage.js'; import { claimAchievement } from '@/scripts/achievements.js'; +import { reactionPicker } from '@/scripts/reaction-picker.js'; const modal = inject('modal'); @@ -845,7 +846,16 @@ function insertMention() { } async function insertEmoji(ev: MouseEvent) { - os.openEmojiPicker(ev.currentTarget ?? ev.target, {}, textareaEl); + reactionPicker.show( + ev.currentTarget ?? ev.target, + reaction => { + insertTextAtCursor(textareaEl, reaction); + }, + () => { + focus(); + }, + false, + ); } function showActions(ev) { diff --git a/packages/frontend/src/scripts/reaction-picker.ts b/packages/frontend/src/scripts/reaction-picker.ts index 19e1bfba2c8c..2b37802dd1a1 100644 --- a/packages/frontend/src/scripts/reaction-picker.ts +++ b/packages/frontend/src/scripts/reaction-picker.ts @@ -9,6 +9,7 @@ import { popup } from '@/os.js'; class ReactionPicker { private src: Ref = ref(null); private manualShowing = ref(false); + private choseAndClose = ref(true); private onChosen?: (reaction: string) => void; private onClosed?: () => void; @@ -21,6 +22,7 @@ class ReactionPicker { src: this.src, asReactionPicker: true, manualShowing: this.manualShowing, + choseAndClose: this.choseAndClose, }, { done: reaction => { this.onChosen!(reaction); @@ -35,9 +37,15 @@ class ReactionPicker { }); } - public show(src: HTMLElement, onChosen: ReactionPicker['onChosen'], onClosed: ReactionPicker['onClosed']) { + public show( + src: HTMLElement, + onChosen: ReactionPicker['onChosen'], + onClosed: ReactionPicker['onClosed'], + choseAndClose = true, + ) { this.src.value = src; this.manualShowing.value = true; + this.choseAndClose.value = choseAndClose; this.onChosen = onChosen; this.onClosed = onClosed; } From 6b33854953014293448e348e4857ff4acc2bd6a6 Mon Sep 17 00:00:00 2001 From: osamu <46447427+sam-osamu@users.noreply.github.com> Date: Wed, 15 Nov 2023 13:22:54 +0900 Subject: [PATCH 2/6] erase console.log --- packages/frontend/src/components/MkEmojiPickerDialog.vue | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/frontend/src/components/MkEmojiPickerDialog.vue b/packages/frontend/src/components/MkEmojiPickerDialog.vue index 1f87b3ebcf50..05b137e335a9 100644 --- a/packages/frontend/src/components/MkEmojiPickerDialog.vue +++ b/packages/frontend/src/components/MkEmojiPickerDialog.vue @@ -58,7 +58,6 @@ const modal = $shallowRef>(); const picker = $shallowRef>(); function chosen(emoji: any) { - console.log(`chosen : ${props.choseAndClose}`); emit('done', emoji); if (props.choseAndClose) { modal?.close(); From b68b4ebafeeed876062d0dc9ab484b66d9996d2e Mon Sep 17 00:00:00 2001 From: osamu <46447427+sam-osamu@users.noreply.github.com> Date: Wed, 15 Nov 2023 16:43:19 +0900 Subject: [PATCH 3/6] fix CHANGELOG.md --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index d872ff153bcb..5555031bc25b 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -22,6 +22,7 @@ ### Client - Enhance: プラグインでエラーが発生した場合のハンドリングを強化 - Enhance: 細かなUIのブラッシュアップ +- Enhance: 投稿フォームの絵文字ピッカーをリアクション時に使用するものと同じのを使用するように #12336 - Fix: デッキに表示されたチャンネルの表示先チャンネルを切り替えた際、即座に反映されない問題を修正 #12236 - Fix: プラグインでノートの表示を書き換えられない問題を修正 - Fix: アイコンデコレーションが見切れる場合がある問題を修正 From d23fb314b90f19eb26c9f83d5773cab905c41164 Mon Sep 17 00:00:00 2001 From: osamu <46447427+sam-osamu@users.noreply.github.com> Date: Thu, 16 Nov 2023 07:20:32 +0900 Subject: [PATCH 4/6] =?UTF-8?q?reaction-picker.ts=20=E3=82=92=E6=88=BB?= =?UTF-8?q?=E3=81=97=E3=80=81=E4=BB=8A=E5=9B=9E=E3=81=AE=E5=AF=BE=E5=BF=9C?= =?UTF-8?q?=E3=82=92=E5=85=A5=E3=82=8C=E3=81=9F=20emoji-picker.ts=20?= =?UTF-8?q?=E3=82=92=E6=96=B0=E3=81=9F=E3=81=AB=E4=BD=9C=E6=88=90?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/frontend/src/boot/main-boot.ts | 2 + .../frontend/src/components/MkPostForm.vue | 9 ++- packages/frontend/src/scripts/emoji-picker.ts | 57 +++++++++++++++++++ .../frontend/src/scripts/reaction-picker.ts | 10 +--- 4 files changed, 64 insertions(+), 14 deletions(-) create mode 100644 packages/frontend/src/scripts/emoji-picker.ts diff --git a/packages/frontend/src/boot/main-boot.ts b/packages/frontend/src/boot/main-boot.ts index 71236e4c531d..88e2f8389544 100644 --- a/packages/frontend/src/boot/main-boot.ts +++ b/packages/frontend/src/boot/main-boot.ts @@ -19,6 +19,7 @@ import { claimAchievement, claimedAchievements } from '@/scripts/achievements.js import { mainRouter } from '@/router.js'; import { initializeSw } from '@/scripts/initialize-sw.js'; import { deckStore } from '@/ui/deck/deck-store.js'; +import { emojiPicker } from '@/scripts/emoji-picker.js'; export async function mainBoot() { const { isClientUpdated } = await common(() => createApp( @@ -30,6 +31,7 @@ export async function mainBoot() { )); reactionPicker.init(); + emojiPicker.init(); if (isClientUpdated && $i) { popup(defineAsyncComponent(() => import('@/components/MkUpdated.vue')), {}, {}, 'closed'); diff --git a/packages/frontend/src/components/MkPostForm.vue b/packages/frontend/src/components/MkPostForm.vue index 0421fa4d6201..8c5f42181fbb 100644 --- a/packages/frontend/src/components/MkPostForm.vue +++ b/packages/frontend/src/components/MkPostForm.vue @@ -124,7 +124,7 @@ import { deepClone } from '@/scripts/clone.js'; import MkRippleEffect from '@/components/MkRippleEffect.vue'; import { miLocalStorage } from '@/local-storage.js'; import { claimAchievement } from '@/scripts/achievements.js'; -import { reactionPicker } from '@/scripts/reaction-picker.js'; +import { emojiPicker } from '@/scripts/emoji-picker.js'; const modal = inject('modal'); @@ -846,15 +846,14 @@ function insertMention() { } async function insertEmoji(ev: MouseEvent) { - reactionPicker.show( + emojiPicker.show( ev.currentTarget ?? ev.target, - reaction => { - insertTextAtCursor(textareaEl, reaction); + emoji => { + insertTextAtCursor(textareaEl, emoji); }, () => { focus(); }, - false, ); } diff --git a/packages/frontend/src/scripts/emoji-picker.ts b/packages/frontend/src/scripts/emoji-picker.ts new file mode 100644 index 000000000000..84caeddf173b --- /dev/null +++ b/packages/frontend/src/scripts/emoji-picker.ts @@ -0,0 +1,57 @@ +/* + * SPDX-FileCopyrightText: syuilo and other misskey contributors + * SPDX-License-Identifier: AGPL-3.0-only + */ + +import { defineAsyncComponent, Ref, ref } from 'vue'; +import { popup } from '@/os.js'; + +/** + * 絵文字ピッカーを表示する。 + * 類似の機能として{@link ReactionPicker}が存在しているが、この機能とは動きが異なる。 + * 投稿フォームなどで絵文字を選択する時など、絵文字ピックアップ後でもダイアログが消えずに残り、 + * 一度表示したダイアログを連続で使用できることが望ましいシーンでの利用が想定される。 + */ +class EmojiPicker { + private src: Ref = ref(null); + private manualShowing = ref(false); + private onChosen?: (emoji: string) => void; + private onClosed?: () => void; + + constructor() { + // nop + } + + public async init() { + await popup(defineAsyncComponent(() => import('@/components/MkEmojiPickerDialog.vue')), { + src: this.src, + asReactionPicker: true, + manualShowing: this.manualShowing, + choseAndClose: false, + }, { + done: emoji => { + if (this.onChosen) this.onChosen(emoji); + }, + close: () => { + this.manualShowing.value = false; + }, + closed: () => { + this.src.value = null; + if (this.onClosed) this.onClosed(); + }, + }); + } + + public show( + src: HTMLElement, + onChosen: EmojiPicker['onChosen'], + onClosed: EmojiPicker['onClosed'], + ) { + this.src.value = src; + this.manualShowing.value = true; + this.onChosen = onChosen; + this.onClosed = onClosed; + } +} + +export const emojiPicker = new EmojiPicker(); diff --git a/packages/frontend/src/scripts/reaction-picker.ts b/packages/frontend/src/scripts/reaction-picker.ts index 2b37802dd1a1..19e1bfba2c8c 100644 --- a/packages/frontend/src/scripts/reaction-picker.ts +++ b/packages/frontend/src/scripts/reaction-picker.ts @@ -9,7 +9,6 @@ import { popup } from '@/os.js'; class ReactionPicker { private src: Ref = ref(null); private manualShowing = ref(false); - private choseAndClose = ref(true); private onChosen?: (reaction: string) => void; private onClosed?: () => void; @@ -22,7 +21,6 @@ class ReactionPicker { src: this.src, asReactionPicker: true, manualShowing: this.manualShowing, - choseAndClose: this.choseAndClose, }, { done: reaction => { this.onChosen!(reaction); @@ -37,15 +35,9 @@ class ReactionPicker { }); } - public show( - src: HTMLElement, - onChosen: ReactionPicker['onChosen'], - onClosed: ReactionPicker['onClosed'], - choseAndClose = true, - ) { + public show(src: HTMLElement, onChosen: ReactionPicker['onChosen'], onClosed: ReactionPicker['onClosed']) { this.src.value = src; this.manualShowing.value = true; - this.choseAndClose.value = choseAndClose; this.onChosen = onChosen; this.onClosed = onClosed; } From 4bf240fc9b229efea928bd823a23ed4fbb84b167 Mon Sep 17 00:00:00 2001 From: osamu <46447427+sam-osamu@users.noreply.github.com> Date: Wed, 22 Nov 2023 11:45:02 +0900 Subject: [PATCH 5/6] fix CHANGELOG.md --- CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 6d38caf69f33..efb40a8c6a29 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -19,6 +19,7 @@ - Feat: モデレーターがユーザーのアイコンもしくはバナー画像を未設定状態にできる機能を追加 (cherry-pick from https://github.com/TeamNijimiss/misskey/commit/e0eb5a752f6e5616d6312bb7c9790302f9dbff83) ### Client +- Enhance: 投稿フォームの絵文字ピッカーをリアクション時に使用するものと同じのを使用するように #12336 - fix: 「設定のバックアップ」で一部の項目がバックアップに含まれていなかった問題を修正 - Fix: ウィジェットのジョブキューにて音声の発音方法変更に追従できていなかったのを修正 #12367 @@ -41,7 +42,6 @@ - 例: `$[unixtime 1701356400]` - Enhance: プラグインでエラーが発生した場合のハンドリングを強化 - Enhance: 細かなUIのブラッシュアップ -- Enhance: 投稿フォームの絵文字ピッカーをリアクション時に使用するものと同じのを使用するように #12336 - Fix: 効果音が再生されるとデバイスで再生している動画や音声が停止する問題を修正 #12339 - Fix: デッキに表示されたチャンネルの表示先チャンネルを切り替えた際、即座に反映されない問題を修正 #12236 - Fix: プラグインでノートの表示を書き換えられない問題を修正 From a3b2ec4d6fc6216d9d4dc9abdc1a65a41724791c Mon Sep 17 00:00:00 2001 From: syuilo Date: Sun, 3 Dec 2023 17:25:02 +0900 Subject: [PATCH 6/6] tweak --- packages/frontend/src/components/MkEmojiPicker.vue | 5 +++-- packages/frontend/src/scripts/emoji-picker.ts | 2 +- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/packages/frontend/src/components/MkEmojiPicker.vue b/packages/frontend/src/components/MkEmojiPicker.vue index 5b420c499e13..7b182a7c052a 100644 --- a/packages/frontend/src/components/MkEmojiPicker.vue +++ b/packages/frontend/src/components/MkEmojiPicker.vue @@ -36,7 +36,7 @@ SPDX-License-Identifier: AGPL-3.0-only
-
+