From a92795d90f9e55c7b7726725dceea979fd8940a3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E3=81=8A=E3=81=95=E3=82=80=E3=81=AE=E3=81=B2=E3=81=A8?= <46447427+samunohito@users.noreply.github.com> Date: Thu, 14 Dec 2023 14:11:20 +0900 Subject: [PATCH] =?UTF-8?q?feat(frontend):=20=E7=B5=B5=E6=96=87=E5=AD=97?= =?UTF-8?q?=E3=83=94=E3=83=83=E3=82=AB=E3=83=BC=E3=81=AE=E5=AE=9F=E8=A3=85?= =?UTF-8?q?=20(#12617)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 絵文字デッキの作成 * 細かい不備を修正 * fix lint * fix * fix CHANGELOG.md * fix setTimeout -> nextTick * fix https://github.com/misskey-dev/misskey/pull/12617#issuecomment-1848952862 * fix bug * fix CHANGELOG.md * fix CHANGELOG.md * wip * Update CHANGELOG.md * Update CHANGELOG.md * wip --------- Co-authored-by: syuilo --- CHANGELOG.md | 14 +- locales/index.d.ts | 7 +- locales/ja-JP.yml | 7 +- .../frontend/src/components/MkEmojiPicker.vue | 23 +- .../src/components/MkEmojiPickerDialog.vue | 5 +- .../frontend/src/components/MkPostForm.vue | 2 +- .../frontend/src/components/form/section.vue | 9 +- .../src/pages/settings/emoji-picker.vue | 274 ++++++++++++++++++ .../frontend/src/pages/settings/index.vue | 8 +- .../pages/settings/preferences-backups.vue | 8 +- .../frontend/src/pages/settings/reaction.vue | 159 ---------- packages/frontend/src/router.ts | 6 +- packages/frontend/src/scripts/emoji-picker.ts | 9 +- .../frontend/src/scripts/reaction-picker.ts | 9 +- packages/frontend/src/store.ts | 12 +- 15 files changed, 354 insertions(+), 198 deletions(-) create mode 100644 packages/frontend/src/pages/settings/emoji-picker.vue delete mode 100644 packages/frontend/src/pages/settings/reaction.vue diff --git a/CHANGELOG.md b/CHANGELOG.md index 972c87651..7fbc1e06d 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -15,6 +15,17 @@ ## 2023.x.x (unreleased) +### Note +- 絵文字ピッカーにピン留め表示する絵文字設定が「リアクション用」と「絵文字入力用」に分かれました。以前の設定は「リアクション用」として使用されます。 + + **影響：** + それにより、投稿フォームから表示される絵文字ピッカーのピン留め絵文字がリセットされたように感じるかもしれません（新設された投稿用のピン留め絵文字が使われるため）。 + 投稿用のピン留め絵文字をアップデート前の状態にするには、以下の手順で操作します。 + + 1. 「設定」メニューに移動し、「絵文字ピッカー」タブを選択します。 + 2. 「ピン留 (全般)」のタブを選択します。 + 3. 「リアクション設定からコピーする」ボタンを押すことで、アップデート前の状態に戻すことができます。 + ### General - Feat: メールアドレスの認証にverifymail.ioを使えるように (cherry-pick from https://github.com/TeamNijimiss/misskey/commit/971ba07a44550f68d2ba31c62066db2d43a0caed) - Feat: モデレーターがユーザーのアイコンもしくはバナー画像を未設定状態にできる機能を追加 (cherry-pick from https://github.com/TeamNijimiss/misskey/commit/e0eb5a752f6e5616d6312bb7c9790302f9dbff83) @@ -25,7 +36,8 @@ ### Client - Feat: 今日誕生日のフォロー中のユーザーを一覧表示できるウィジェットを追加 - Feat: データセーバーでコードハイライトの読み込みを削減できるように -- Enhance: 投稿フォームの絵文字ピッカーをリアクション時に使用するものと同じのを使用するように #12336 +- Enhance: 投稿フォームの絵文字ピッカーをリアクション時に使用するものと同じのを使用するように #12336 #12560 +- Enhance: リアクション用ピン留め絵文字と投稿時の絵文字入力用ピン留め絵文字を分けて設定できるように #12560 - Enhance: 絵文字のオートコンプリート機能強化 #12364 - Enhance: ユーザーのRawデータを表示するページが復活 - Enhance: リアクション選択時に音を鳴らせるように diff --git a/locales/index.d.ts b/locales/index.d.ts index d32023f5a..40837b05a 100644 --- a/locales/index.d.ts +++ b/locales/index.d.ts @@ -124,7 +124,12 @@ export interface Locale { "add": string; "reaction": string; "reactions": string; - "reactionSetting": string; + "emojiPicker": string; + "pinnedEmojisForReactionSettingDescription": string; + "pinnedEmojisSettingDescription": string; + "emojiPickerDisplay": string; + "copyFromPinnedEmojisForReaction": string; + "copyFromPinnedEmojis": string; "reactionSettingDescription2": string; "rememberNoteVisibility": string; "attachCancel": string; diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml index 2ac57fd31..3ad27910e 100644 --- a/locales/ja-JP.yml +++ b/locales/ja-JP.yml @@ -121,7 +121,12 @@ sensitive: "センシティブ" add: "追加" reaction: "リアクション" reactions: "リアクション" -reactionSetting: "ピッカーに表示するリアクション" +emojiPicker: "絵文字ピッカー" +pinnedEmojisForReactionSettingDescription: "リアクション時にピン留め表示する絵文字を設定できます" +pinnedEmojisSettingDescription: "絵文字入力時にピン留め表示する絵文字を設定できます" +emojiPickerDisplay: "ピッカーの表示" +copyFromPinnedEmojisForReaction: "リアクション設定からコピーする" +copyFromPinnedEmojis: "絵文字設定からコピーする" reactionSettingDescription2: "ドラッグして並び替え、クリックして削除、＋を押して追加します。" rememberNoteVisibility: "公開範囲を記憶する" attachCancel: "添付取り消し" diff --git a/packages/frontend/src/components/MkEmojiPicker.vue b/packages/frontend/src/components/MkEmojiPicker.vue index d84d298e2..f36d46506 100644 --- a/packages/frontend/src/components/MkEmojiPicker.vue +++ b/packages/frontend/src/components/MkEmojiPicker.vue @@ -121,10 +121,11 @@ import { $i } from '@/account.js'; const props = withDefaults(defineProps<{ showPinned?: boolean; - asReactionPicker?: boolean; + pinnedEmojis?: string[]; maxHeight?: number; asDrawer?: boolean; asWindow?: boolean; + asReactionPicker?: boolean; // 今は使われてないが将来的に使いそう }>(), { showPinned: true, }); @@ -137,24 +138,22 @@ const searchEl = shallowRef(); const emojisEl = shallowRef(); const { - reactions: pinnedReactions, - reactionPickerSize, - reactionPickerWidth, - reactionPickerHeight, - disableShowingAnimatedImages, + emojiPickerScale, + emojiPickerWidth, + emojiPickerHeight, recentlyUsedEmojis, } = defaultStore.reactiveState; -const pinned = computed(() => props.asReactionPicker ? pinnedReactions.value : []); // TODO: 非リアクションの絵文字ピッカー用のpinned絵文字を設定可能にする？ -const size = computed(() => props.asReactionPicker ? reactionPickerSize.value : 1); -const width = computed(() => props.asReactionPicker ? reactionPickerWidth.value : 3); -const height = computed(() => props.asReactionPicker ? reactionPickerHeight.value : 2); +const pinned = computed(() => props.pinnedEmojis); +const size = computed(() => emojiPickerScale.value); +const width = computed(() => emojiPickerWidth.value); +const height = computed(() => emojiPickerHeight.value); const q = ref(''); const searchResultCustom = ref([]); const searchResultUnicode = ref([]); const tab = ref<'index' | 'custom' | 'unicode' | 'tags'>('index'); -const customEmojiFolderRoot: CustomEmojiFolderTree = { value: "", category: "", children: [] }; +const customEmojiFolderRoot: CustomEmojiFolderTree = { value: '', category: '', children: [] }; function parseAndMergeCategories(input: string, root: CustomEmojiFolderTree): CustomEmojiFolderTree { const parts = input.split('/').map(p => p.trim()); @@ -368,7 +367,7 @@ function chosen(emoji: any, ev?: MouseEvent) { emit('chosen', key); // 最近使った絵文字更新 - if (!pinned.value.includes(key)) { + if (!pinned.value?.includes(key)) { let recents = defaultStore.state.recentlyUsedEmojis; recents = recents.filter((emoji: any) => emoji !== key); recents.unshift(key); diff --git a/packages/frontend/src/components/MkEmojiPickerDialog.vue b/packages/frontend/src/components/MkEmojiPickerDialog.vue index 2cce1f552..6660dcf1e 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="asReactionPicker && defaultStore.state.reactionPickerUseDrawerForMobile === false ? 'popup' : 'auto'" + :preferType="defaultStore.state.emojiPickerUseDrawerForMobile === false ? 'popup' : 'auto'" :transparentBg="true" :manualShowing="manualShowing" :src="src" @@ -22,6 +22,7 @@ SPDX-License-Identifier: AGPL-3.0-only class="_popup _shadow" :class="{ [$style.drawer]: type === 'drawer' }" :showPinned="showPinned" + :pinnedEmojis="pinnedEmojis" :asReactionPicker="asReactionPicker" :asDrawer="type === 'drawer'" :max-height="maxHeight" @@ -40,11 +41,13 @@ const props = withDefaults(defineProps<{ manualShowing?: boolean | null; src?: HTMLElement; showPinned?: boolean; + pinnedEmojis?: string[], asReactionPicker?: boolean; choseAndClose?: boolean; }>(), { manualShowing: null, showPinned: true, + pinnedEmojis: undefined, asReactionPicker: false, choseAndClose: true, }); diff --git a/packages/frontend/src/components/MkPostForm.vue b/packages/frontend/src/components/MkPostForm.vue index e6d55ae98..4a1930ac0 100644 --- a/packages/frontend/src/components/MkPostForm.vue +++ b/packages/frontend/src/components/MkPostForm.vue @@ -857,7 +857,7 @@ async function insertEmoji(ev: MouseEvent) { }, () => { textAreaReadOnly.value = false; - focus(); + nextTick(() => focus()); }, ); } diff --git a/packages/frontend/src/components/form/section.vue b/packages/frontend/src/components/form/section.vue index 095b24604..6af63d1ec 100644 --- a/packages/frontend/src/components/form/section.vue +++ b/packages/frontend/src/components/form/section.vue @@ -6,6 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only