From 10b67e1b3a8d03c25b8e2c008f11ce45ef3d915c Mon Sep 17 00:00:00 2001
From: syuilo <4439005+syuilo@users.noreply.github.com>
Date: Thu, 13 Mar 2025 16:56:47 +0900
Subject: [PATCH] enhance(frontend): improve emoji picker settings
---
locales/index.d.ts | 26 ++
locales/ja-JP.yml | 8 +
packages/frontend/src/boot/main-boot.ts | 11 +
packages/frontend/src/components/MkButton.vue | 10 +-
packages/frontend/src/pages/about-misskey.vue | 4 +-
packages/frontend/src/pages/settings/deck.vue | 8 +-
.../pages/settings/emoji-palette.palette.vue | 166 ++++++++++
.../src/pages/settings/emoji-palette.vue | 251 +++++++++++++++
.../src/pages/settings/emoji-picker.vue | 288 ------------------
.../frontend/src/pages/settings/index.vue | 10 +-
packages/frontend/src/preferences/def.ts | 29 +-
packages/frontend/src/router/definition.ts | 6 +-
packages/frontend/src/store.ts | 16 +-
.../utility/autogen/settings-search-index.ts | 66 +++-
packages/frontend/src/utility/emoji-picker.ts | 13 +-
.../frontend/src/utility/reaction-picker.ts | 13 +-
16 files changed, 601 insertions(+), 324 deletions(-)
create mode 100644 packages/frontend/src/pages/settings/emoji-palette.palette.vue
create mode 100644 packages/frontend/src/pages/settings/emoji-palette.vue
delete mode 100644 packages/frontend/src/pages/settings/emoji-picker.vue
diff --git a/locales/index.d.ts b/locales/index.d.ts
index 7efca999b9..b814bb70e1 100644
--- a/locales/index.d.ts
+++ b/locales/index.d.ts
@@ -5334,6 +5334,32 @@ export interface Locale extends ILocale {
* 同期の有効化をキャンセル
*/
"preferenceSyncConflictChoiceCancel": string;
+ /**
+ * ペースト
+ */
+ "paste": string;
+ /**
+ * 絵文字パレット
+ */
+ "emojiPalette": string;
+ "_emojiPalette": {
+ /**
+ * パレット
+ */
+ "palettes": string;
+ /**
+ * パレットのデバイス間同期を有効にする
+ */
+ "enableSyncBetweenDevicesForPalettes": string;
+ /**
+ * メインで使用するパレット
+ */
+ "paletteForMain": string;
+ /**
+ * リアクションで使用するパレット
+ */
+ "paletteForReaction": string;
+ };
"_settings": {
/**
* ドライブの管理と設定、使用量の確認、ファイルをアップロードする際の設定を行えます。
diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index 96d2439247..b51a839715 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -1329,6 +1329,14 @@ preferenceSyncConflictText: "同期が有効にされた設定項目は設定値
preferenceSyncConflictChoiceServer: "サーバーの設定値"
preferenceSyncConflictChoiceDevice: "デバイスの設定値"
preferenceSyncConflictChoiceCancel: "同期の有効化をキャンセル"
+paste: "ペースト"
+emojiPalette: "絵文字パレット"
+
+_emojiPalette:
+ palettes: "パレット"
+ enableSyncBetweenDevicesForPalettes: "パレットのデバイス間同期を有効にする"
+ paletteForMain: "メインで使用するパレット"
+ paletteForReaction: "リアクションで使用するパレット"
_settings:
driveBanner: "ドライブの管理と設定、使用量の確認、ファイルをアップロードする際の設定を行えます。"
diff --git a/packages/frontend/src/boot/main-boot.ts b/packages/frontend/src/boot/main-boot.ts
index 86efd48c4e..510e0509f4 100644
--- a/packages/frontend/src/boot/main-boot.ts
+++ b/packages/frontend/src/boot/main-boot.ts
@@ -176,6 +176,17 @@ export async function mainBoot() {
prefer.commit('lightTheme', ColdDeviceStorage.get('lightTheme'));
prefer.commit('darkTheme', ColdDeviceStorage.get('darkTheme'));
prefer.commit('syncDeviceDarkMode', ColdDeviceStorage.get('syncDeviceDarkMode'));
+ prefer.commit('emojiPalettes', [{
+ id: 'reactions',
+ name: '',
+ emojis: store.s.reactions,
+ }, {
+ id: 'pinnedEmojis',
+ name: '',
+ emojis: store.s.pinnedEmojis,
+ }]);
+ prefer.commit('emojiPaletteForMain', 'pinnedEmojis');
+ prefer.commit('emojiPaletteForReaction', 'reactions');
prefer.commit('overridedDeviceKind', store.s.overridedDeviceKind);
prefer.commit('widgets', store.s.widgets);
prefer.commit('keepCw', store.s.keepCw);
diff --git a/packages/frontend/src/components/MkButton.vue b/packages/frontend/src/components/MkButton.vue
index 667e624853..5b32ec0fc8 100644
--- a/packages/frontend/src/components/MkButton.vue
+++ b/packages/frontend/src/components/MkButton.vue
@@ -7,7 +7,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<button
v-if="!link"
ref="el" class="_button"
- :class="[$style.root, { [$style.inline]: inline, [$style.primary]: primary, [$style.gradate]: gradate, [$style.danger]: danger, [$style.rounded]: rounded, [$style.full]: full, [$style.small]: small, [$style.large]: large, [$style.transparent]: transparent, [$style.asLike]: asLike }]"
+ :class="[$style.root, { [$style.inline]: inline, [$style.primary]: primary, [$style.gradate]: gradate, [$style.danger]: danger, [$style.rounded]: rounded, [$style.full]: full, [$style.small]: small, [$style.large]: large, [$style.transparent]: transparent, [$style.asLike]: asLike, [$style.iconOnly]: iconOnly }]"
:type="type"
:name="name"
:value="value"
@@ -22,7 +22,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</button>
<MkA
v-else class="_button"
- :class="[$style.root, { [$style.inline]: inline, [$style.primary]: primary, [$style.gradate]: gradate, [$style.danger]: danger, [$style.rounded]: rounded, [$style.full]: full, [$style.small]: small, [$style.large]: large, [$style.transparent]: transparent, [$style.asLike]: asLike }]"
+ :class="[$style.root, { [$style.inline]: inline, [$style.primary]: primary, [$style.gradate]: gradate, [$style.danger]: danger, [$style.rounded]: rounded, [$style.full]: full, [$style.small]: small, [$style.large]: large, [$style.transparent]: transparent, [$style.asLike]: asLike, [$style.iconOnly]: iconOnly }]"
:to="to ?? '#'"
:behavior="linkBehavior"
@mousedown="onMousedown"
@@ -57,6 +57,7 @@ const props = defineProps<{
name?: string;
value?: string;
disabled?: boolean;
+ iconOnly?: boolean;
}>();
const emit = defineEmits<{
@@ -147,6 +148,11 @@ function onMousedown(evt: MouseEvent): void {
background: var(--MI_THEME-buttonHoverBg);
}
+ &.iconOnly {
+ padding: 7px;
+ min-width: auto;
+ }
+
&.small {
font-size: 90%;
padding: 6px 12px;
diff --git a/packages/frontend/src/pages/about-misskey.vue b/packages/frontend/src/pages/about-misskey.vue
index 55d703b9ea..5395429d7f 100644
--- a/packages/frontend/src/pages/about-misskey.vue
+++ b/packages/frontend/src/pages/about-misskey.vue
@@ -143,11 +143,11 @@ import MkInfo from '@/components/MkInfo.vue';
import { physics } from '@/utility/physics.js';
import { i18n } from '@/i18n.js';
import { instance } from '@/instance.js';
-import { store } from '@/store.js';
import * as os from '@/os.js';
import { definePage } from '@/page.js';
import { claimAchievement, claimedAchievements } from '@/utility/achievements.js';
import { $i } from '@/account.js';
+import { prefer } from '@/preferences.js';
const patronsWithIcon = [{
name: 'カイヤン',
@@ -406,7 +406,7 @@ const easterEggEngine = ref<{ stop: () => void } | null>(null);
const containerEl = shallowRef<HTMLElement>();
function iconLoaded() {
- const emojis = store.s.reactions;
+ const emojis = prefer.s.emojiPalettes[0].emojis;
const containerWidth = containerEl.value.offsetWidth;
for (let i = 0; i < 32; i++) {
easterEggEmojis.value.push({
diff --git a/packages/frontend/src/pages/settings/deck.vue b/packages/frontend/src/pages/settings/deck.vue
index 03c0cb16f8..9b2b40374e 100644
--- a/packages/frontend/src/pages/settings/deck.vue
+++ b/packages/frontend/src/pages/settings/deck.vue
@@ -6,7 +6,11 @@ SPDX-License-Identifier: AGPL-3.0-only
<template>
<SearchMarker path="/settings/deck" :label="i18n.ts.deck" :keywords="['deck', 'ui']" icon="ti ti-columns">
<div class="_gaps_m">
- <MkSwitch :modelValue="profilesSyncEnabled" @update:modelValue="changeProfilesSyncEnabled">{{ i18n.ts._deck.enableSyncBetweenDevicesForProfiles }}</MkSwitch>
+ <SearchMarker :keywords="['sync', 'profiles', 'devices']">
+ <MkSwitch :modelValue="profilesSyncEnabled" @update:modelValue="changeProfilesSyncEnabled">
+ <template #label><SearchLabel>{{ i18n.ts._deck.enableSyncBetweenDevicesForProfiles }}</SearchLabel></template>
+ </MkSwitch>
+ </SearchMarker>
<SearchMarker :keywords="['ui', 'root', 'page']">
<MkPreferenceContainer k="deck.useSimpleUiForNonRootPages">
@@ -35,7 +39,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<SearchMarker :keywords="['column', 'align']">
<MkPreferenceContainer k="deck.columnAlign">
<MkRadios v-model="columnAlign">
- <template #label>{{ i18n.ts._deck.columnAlign }}</template>
+ <template #label><SearchLabel>{{ i18n.ts._deck.columnAlign }}</SearchLabel></template>
<option value="left">{{ i18n.ts.left }}</option>
<option value="center">{{ i18n.ts.center }}</option>
</MkRadios>
diff --git a/packages/frontend/src/pages/settings/emoji-palette.palette.vue b/packages/frontend/src/pages/settings/emoji-palette.palette.vue
new file mode 100644
index 0000000000..33d1d7c9fa
--- /dev/null
+++ b/packages/frontend/src/pages/settings/emoji-palette.palette.vue
@@ -0,0 +1,166 @@
+<!--
+SPDX-FileCopyrightText: syuilo and misskey-project
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<template>
+<MkFolder :defaultOpen="true">
+ <template #icon><i class="ti ti-palette"></i></template>
+ <template #label>{{ palette.name === '' ? '(' + i18n.ts.noName + ')' : palette.name }}</template>
+ <template #footer>
+ <div class="_buttons">
+ <MkButton @click="rename"><i class="ti ti-pencil"></i> {{ i18n.ts.rename }}</MkButton>
+ <MkButton @click="copy"><i class="ti ti-copy"></i> {{ i18n.ts.copy }}</MkButton>
+ <MkButton danger @click="paste"><i class="ti ti-clipboard"></i> {{ i18n.ts.paste }}</MkButton>
+ <MkButton danger iconOnly style="margin-left: auto;" @click="del"><i class="ti ti-trash"></i></MkButton>
+ </div>
+ </template>
+
+ <div>
+ <div v-panel style="border-radius: 6px;">
+ <Sortable
+ v-model="emojis"
+ :class="$style.emojis"
+ :itemKey="item => item"
+ :animation="150"
+ :delay="100"
+ :delayOnTouchOnly="true"
+ :group="{ name: 'SortableEmojiPalettes' }"
+ >
+ <template #item="{element}">
+ <button class="_button" :class="$style.emojisItem" @click="remove(element, $event)">
+ <MkCustomEmoji v-if="element[0] === ':'" :name="element" :normal="true" :fallbackToImage="true"/>
+ <MkEmoji v-else :emoji="element" :normal="true"/>
+ </button>
+ </template>
+ <template #footer>
+ <button class="_button" :class="$style.emojisAdd" @click="pick">
+ <i class="ti ti-plus"></i>
+ </button>
+ </template>
+ </Sortable>
+ </div>
+ <div :class="$style.editorCaption">{{ i18n.ts.reactionSettingDescription2 }}</div>
+ </div>
+</MkFolder>
+</template>
+
+<script lang="ts" setup>
+import { ref, watch } from 'vue';
+import Sortable from 'vuedraggable';
+import MkButton from '@/components/MkButton.vue';
+import * as os from '@/os.js';
+import { i18n } from '@/i18n.js';
+import { deepClone } from '@/utility/clone.js';
+import MkCustomEmoji from '@/components/global/MkCustomEmoji.vue';
+import MkEmoji from '@/components/global/MkEmoji.vue';
+import MkFolder from '@/components/MkFolder.vue';
+import { copyToClipboard } from '@/utility/copy-to-clipboard.js';
+
+const props = defineProps<{
+ palette: {
+ id: string;
+ name: string;
+ emojis: string[];
+ };
+}>();
+
+const emit = defineEmits<{
+ (ev: 'updateEmojis', emojis: string[]): void,
+ (ev: 'updateName', name: string): void,
+ (ev: 'del'): void,
+}>();
+
+const emojis = ref<string[]>(deepClone(props.palette.emojis));
+
+watch(emojis, () => {
+ emit('updateEmojis', emojis.value);
+}, { deep: true });
+
+function remove(reaction: string, ev: MouseEvent) {
+ os.popupMenu([{
+ text: i18n.ts.remove,
+ action: () => {
+ emojis.value = emojis.value.filter(x => x !== reaction);
+ },
+ }], getHTMLElement(ev));
+}
+
+function pick(ev: MouseEvent) {
+ os.pickEmoji(getHTMLElement(ev), {
+ showPinned: false,
+ }).then(it => {
+ const emoji = it;
+ if (!emojis.value.includes(emoji)) {
+ emojis.value.push(emoji);
+ }
+ });
+}
+
+function getHTMLElement(ev: MouseEvent): HTMLElement {
+ const target = ev.currentTarget ?? ev.target;
+ return target as HTMLElement;
+}
+
+function rename() {
+ os.inputText({
+ title: i18n.ts.rename,
+ default: props.palette.name,
+ }).then(({ canceled, result: name }) => {
+ if (canceled) return;
+ if (name != null) {
+ emit('updateName', name);
+ }
+ });
+}
+
+function copy() {
+ copyToClipboard(emojis.value.join(' '));
+}
+
+function paste() {
+ // TODO: validate
+ navigator.clipboard.readText().then(text => {
+ emojis.value = text.split(' ');
+ });
+}
+
+function del(ev: MouseEvent) {
+ os.popupMenu([{
+ text: i18n.ts.delete,
+ action: () => {
+ emit('del');
+ },
+ }], ev.currentTarget ?? ev.target);
+}
+</script>
+
+<style lang="scss" module>
+.tab {
+ margin: calc(var(--MI-margin) / 2) 0;
+ padding: calc(var(--MI-margin) / 2) 0;
+ background: var(--MI_THEME-bg);
+}
+
+.emojis {
+ padding: 12px;
+ font-size: 1.1em;
+}
+
+.emojisItem {
+ display: inline-block;
+ padding: 8px;
+ cursor: move;
+}
+
+.emojisAdd {
+ display: inline-block;
+ padding: 8px;
+}
+
+.editorCaption {
+ font-size: 0.85em;
+ padding: 8px 0 0 0;
+ color: var(--MI_THEME-fgTransparentWeak);
+}
+</style>
diff --git a/packages/frontend/src/pages/settings/emoji-palette.vue b/packages/frontend/src/pages/settings/emoji-palette.vue
new file mode 100644
index 0000000000..398228e226
--- /dev/null
+++ b/packages/frontend/src/pages/settings/emoji-palette.vue
@@ -0,0 +1,251 @@
+<!--
+SPDX-FileCopyrightText: syuilo and misskey-project
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<template>
+<SearchMarker path="/settings/emoji-palette" :label="i18n.ts.emojiPalette" :keywords="['emoji', 'palette']" icon="ti ti-mood-happy">
+ <div class="_gaps_m">
+ <FormSection first>
+ <template #label>{{ i18n.ts._emojiPalette.palettes }}</template>
+
+ <div class="_gaps_s">
+ <XPalette
+ v-for="palette in prefer.r.emojiPalettes.value"
+ :key="palette.id"
+ :palette="palette"
+ @updateEmojis="emojis => updatePaletteEmojis(palette.id, emojis)"
+ @updateName="name => updatePaletteName(palette.id, name)"
+ @del="delPalette(palette.id)"
+ />
+ <MkButton primary rounded style="margin: auto;" @click="addPalette"><i class="ti ti-plus"></i></MkButton>
+ </div>
+ </FormSection>
+
+ <FormSection>
+ <div class="_gaps_m">
+ <SearchMarker :keywords="['sync', 'palettes', 'devices']">
+ <MkSwitch :modelValue="palettesSyncEnabled" @update:modelValue="changePalettesSyncEnabled">
+ <template #label><SearchLabel>{{ i18n.ts._emojiPalette.enableSyncBetweenDevicesForPalettes }}</SearchLabel></template>
+ </MkSwitch>
+ </SearchMarker>
+ </div>
+ </FormSection>
+
+ <FormSection>
+ <div class="_gaps_m">
+ <SearchMarker :keywords="['main', 'palette']">
+ <MkPreferenceContainer k="emojiPaletteForMain">
+ <MkSelect v-model="emojiPaletteForMain">
+ <template #label><SearchLabel>{{ i18n.ts._emojiPalette.paletteForMain }}</SearchLabel></template>
+ <option key="-" :value="null">({{ i18n.ts.auto }})</option>
+ <option v-for="palette in prefer.r.emojiPalettes.value" :key="palette.id" :value="palette.id">{{ palette.name === '' ? '(' + i18n.ts.noName + ')' : palette.name }}</option>
+ </MkSelect>
+ </MkPreferenceContainer>
+ </SearchMarker>
+
+ <SearchMarker :keywords="['reaction', 'palette']">
+ <MkPreferenceContainer k="emojiPaletteForReaction">
+ <MkSelect v-model="emojiPaletteForReaction">
+ <template #label><SearchLabel>{{ i18n.ts._emojiPalette.paletteForReaction }}</SearchLabel></template>
+ <option key="-" :value="null">({{ i18n.ts.auto }})</option>
+ <option v-for="palette in prefer.r.emojiPalettes.value" :key="palette.id" :value="palette.id">{{ palette.name === '' ? '(' + i18n.ts.noName + ')' : palette.name }}</option>
+ </MkSelect>
+ </MkPreferenceContainer>
+ </SearchMarker>
+ </div>
+ </FormSection>
+
+ <SearchMarker :keywords="['emoji', 'picker', 'display']">
+ <FormSection>
+ <template #label><SearchLabel>{{ i18n.ts.emojiPickerDisplay }}</SearchLabel></template>
+
+ <div class="_gaps_m">
+ <SearchMarker :keywords="['emoji', 'picker', 'scale', 'size']">
+ <MkPreferenceContainer k="emojiPickerScale">
+ <MkRadios v-model="emojiPickerScale">
+ <template #label><SearchLabel>{{ i18n.ts.size }}</SearchLabel></template>
+ <option :value="1">{{ i18n.ts.small }}</option>
+ <option :value="2">{{ i18n.ts.medium }}</option>
+ <option :value="3">{{ i18n.ts.large }}</option>
+ </MkRadios>
+ </MkPreferenceContainer>
+ </SearchMarker>
+
+ <SearchMarker :keywords="['emoji', 'picker', 'width', 'column', 'size']">
+ <MkPreferenceContainer k="emojiPickerWidth">
+ <MkRadios v-model="emojiPickerWidth">
+ <template #label><SearchLabel>{{ i18n.ts.numberOfColumn }}</SearchLabel></template>
+ <option :value="1">5</option>
+ <option :value="2">6</option>
+ <option :value="3">7</option>
+ <option :value="4">8</option>
+ <option :value="5">9</option>
+ </MkRadios>
+ </MkPreferenceContainer>
+ </SearchMarker>
+
+ <SearchMarker :keywords="['emoji', 'picker', 'height', 'size']">
+ <MkPreferenceContainer k="emojiPickerHeight">
+ <MkRadios v-model="emojiPickerHeight">
+ <template #label><SearchLabel>{{ i18n.ts.height }}</SearchLabel></template>
+ <option :value="1">{{ i18n.ts.small }}</option>
+ <option :value="2">{{ i18n.ts.medium }}</option>
+ <option :value="3">{{ i18n.ts.large }}</option>
+ <option :value="4">{{ i18n.ts.large }}+</option>
+ </MkRadios>
+ </MkPreferenceContainer>
+ </SearchMarker>
+
+ <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>
+ <option value="auto">{{ i18n.ts.auto }}</option>
+ <option value="popup">{{ i18n.ts.popup }}</option>
+ <option value="drawer">{{ i18n.ts.drawer }}</option>
+ </MkSelect>
+ </MkPreferenceContainer>
+ </SearchMarker>
+
+ <MkButton @click="previewPicker"><i class="ti ti-eye"></i> {{ i18n.ts.preview }}</MkButton>
+ </div>
+ </FormSection>
+ </SearchMarker>
+ </div>
+</SearchMarker>
+</template>
+
+<script lang="ts" setup>
+import { computed, ref, watch } from 'vue';
+import { v4 as uuid } from 'uuid';
+import XPalette from './emoji-palette.palette.vue';
+import MkRadios from '@/components/MkRadios.vue';
+import MkButton from '@/components/MkButton.vue';
+import FormSection from '@/components/form/section.vue';
+import MkSelect from '@/components/MkSelect.vue';
+import * as os from '@/os.js';
+import { i18n } from '@/i18n.js';
+import { definePage } from '@/page.js';
+import MkFolder from '@/components/MkFolder.vue';
+import { prefer } from '@/preferences.js';
+import MkPreferenceContainer from '@/components/MkPreferenceContainer.vue';
+import MkSwitch from '@/components/MkSwitch.vue';
+import { emojiPicker } from '@/utility/emoji-picker.js';
+
+const emojiPaletteForReaction = prefer.model('emojiPaletteForReaction');
+const emojiPaletteForMain = prefer.model('emojiPaletteForMain');
+const emojiPickerScale = prefer.model('emojiPickerScale');
+const emojiPickerWidth = prefer.model('emojiPickerWidth');
+const emojiPickerHeight = prefer.model('emojiPickerHeight');
+const emojiPickerStyle = prefer.model('emojiPickerStyle');
+
+const palettesSyncEnabled = ref(prefer.isSyncEnabled('emojiPalettes'));
+
+function changePalettesSyncEnabled(value: boolean) {
+ if (value) {
+ prefer.enableSync('emojiPalettes').then((res) => {
+ if (res == null) return;
+ if (res.enabled) palettesSyncEnabled.value = true;
+ });
+ } else {
+ prefer.disableSync('emojiPalettes');
+ palettesSyncEnabled.value = false;
+ }
+}
+
+function addPalette() {
+ prefer.commit('emojiPalettes', [
+ ...prefer.s.emojiPalettes,
+ {
+ id: uuid(),
+ name: '',
+ emojis: [],
+ },
+ ]);
+}
+
+function updatePaletteEmojis(id: string, emojis: string[]) {
+ prefer.commit('emojiPalettes', prefer.s.emojiPalettes.map(palette => {
+ if (palette.id === id) {
+ return {
+ ...palette,
+ emojis,
+ };
+ } else {
+ return palette;
+ }
+ }));
+}
+
+function updatePaletteName(id: string, name: string) {
+ prefer.commit('emojiPalettes', prefer.s.emojiPalettes.map(palette => {
+ if (palette.id === id) {
+ return {
+ ...palette,
+ name,
+ };
+ } else {
+ return palette;
+ }
+ }));
+}
+
+function delPalette(id: string) {
+ if (prefer.s.emojiPalettes.length === 1) {
+ addPalette();
+ }
+ prefer.commit('emojiPalettes', prefer.s.emojiPalettes.filter(palette => palette.id !== id));
+ if (prefer.s.emojiPaletteForMain === id) {
+ prefer.commit('emojiPaletteForMain', null);
+ }
+ if (prefer.s.emojiPaletteForReaction === id) {
+ prefer.commit('emojiPaletteForReaction', null);
+ }
+}
+
+function getHTMLElement(ev: MouseEvent): HTMLElement {
+ const target = ev.currentTarget ?? ev.target;
+ return target as HTMLElement;
+}
+
+function previewPicker(ev: MouseEvent) {
+ emojiPicker.show(getHTMLElement(ev));
+}
+
+definePage(() => ({
+ title: i18n.ts.emojiPalette,
+ icon: 'ti ti-mood-happy',
+}));
+</script>
+
+<style lang="scss" module>
+.tab {
+ margin: calc(var(--MI-margin) / 2) 0;
+ padding: calc(var(--MI-margin) / 2) 0;
+ background: var(--MI_THEME-bg);
+}
+
+.emojis {
+ padding: 12px;
+ font-size: 1.1em;
+}
+
+.emojisItem {
+ display: inline-block;
+ padding: 8px;
+ cursor: move;
+}
+
+.emojisAdd {
+ display: inline-block;
+ padding: 8px;
+}
+
+.editorCaption {
+ font-size: 0.85em;
+ padding: 8px 0 0 0;
+ color: var(--MI_THEME-fgTransparentWeak);
+}
+</style>
diff --git a/packages/frontend/src/pages/settings/emoji-picker.vue b/packages/frontend/src/pages/settings/emoji-picker.vue
deleted file mode 100644
index d8f27078ae..0000000000
--- a/packages/frontend/src/pages/settings/emoji-picker.vue
+++ /dev/null
@@ -1,288 +0,0 @@
-<!--
-SPDX-FileCopyrightText: syuilo and misskey-project
-SPDX-License-Identifier: AGPL-3.0-only
--->
-
-<template>
-<div class="_gaps_m">
- <MkFolder :defaultOpen="true">
- <template #icon><i class="ti ti-pin"></i></template>
- <template #label>{{ i18n.ts.pinned }} ({{ i18n.ts.reaction }})</template>
- <template #caption>{{ i18n.ts.pinnedEmojisForReactionSettingDescription }}</template>
-
- <div class="_gaps">
- <div>
- <div v-panel style="border-radius: 6px;">
- <Sortable
- v-model="pinnedEmojisForReaction"
- :class="$style.emojis"
- :itemKey="item => item"
- :animation="150"
- :delay="100"
- :delayOnTouchOnly="true"
- >
- <template #item="{element}">
- <button class="_button" :class="$style.emojisItem" @click="removeReaction(element, $event)">
- <MkCustomEmoji v-if="element[0] === ':'" :name="element" :normal="true" :fallbackToImage="true"/>
- <MkEmoji v-else :emoji="element" :normal="true"/>
- </button>
- </template>
- <template #footer>
- <button class="_button" :class="$style.emojisAdd" @click="chooseReaction">
- <i class="ti ti-plus"></i>
- </button>
- </template>
- </Sortable>
- </div>
- <div :class="$style.editorCaption">{{ i18n.ts.reactionSettingDescription2 }}</div>
- </div>
-
- <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="overwriteFromPinnedEmojis"><i class="ti ti-copy"></i> {{ i18n.ts.overwriteFromPinnedEmojis }}</MkButton>
- </div>
- </div>
- </MkFolder>
-
- <MkFolder>
- <template #icon><i class="ti ti-pin"></i></template>
- <template #label>{{ i18n.ts.pinned }} ({{ i18n.ts.general }})</template>
- <template #caption>{{ i18n.ts.pinnedEmojisSettingDescription }}</template>
-
- <div class="_gaps">
- <div>
- <div v-panel style="border-radius: 6px;">
- <Sortable
- v-model="pinnedEmojis"
- :class="$style.emojis"
- :itemKey="item => item"
- :animation="150"
- :delay="100"
- :delayOnTouchOnly="true"
- >
- <template #item="{element}">
- <button class="_button" :class="$style.emojisItem" @click="removeEmoji(element, $event)">
- <MkCustomEmoji v-if="element[0] === ':'" :name="element" :normal="true" :fallbackToImage="true"/>
- <MkEmoji v-else :emoji="element" :normal="true"/>
- </button>
- </template>
- <template #footer>
- <button class="_button" :class="$style.emojisAdd" @click="chooseEmoji">
- <i class="ti ti-plus"></i>
- </button>
- </template>
- </Sortable>
- </div>
- <div :class="$style.editorCaption">{{ i18n.ts.reactionSettingDescription2 }}</div>
- </div>
-
- <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="overwriteFromPinnedEmojisForReaction"><i class="ti ti-copy"></i> {{ i18n.ts.overwriteFromPinnedEmojisForReaction }}</MkButton>
- </div>
- </div>
- </MkFolder>
-
- <FormSection>
- <template #label>{{ i18n.ts.emojiPickerDisplay }}</template>
-
- <div class="_gaps_m">
- <MkPreferenceContainer k="emojiPickerScale">
- <MkRadios v-model="emojiPickerScale">
- <template #label>{{ i18n.ts.size }}</template>
- <option :value="1">{{ i18n.ts.small }}</option>
- <option :value="2">{{ i18n.ts.medium }}</option>
- <option :value="3">{{ i18n.ts.large }}</option>
- </MkRadios>
- </MkPreferenceContainer>
-
- <MkPreferenceContainer k="emojiPickerWidth">
- <MkRadios v-model="emojiPickerWidth">
- <template #label>{{ i18n.ts.numberOfColumn }}</template>
- <option :value="1">5</option>
- <option :value="2">6</option>
- <option :value="3">7</option>
- <option :value="4">8</option>
- <option :value="5">9</option>
- </MkRadios>
- </MkPreferenceContainer>
-
- <MkPreferenceContainer k="emojiPickerHeight">
- <MkRadios v-model="emojiPickerHeight">
- <template #label>{{ i18n.ts.height }}</template>
- <option :value="1">{{ i18n.ts.small }}</option>
- <option :value="2">{{ i18n.ts.medium }}</option>
- <option :value="3">{{ i18n.ts.large }}</option>
- <option :value="4">{{ i18n.ts.large }}+</option>
- </MkRadios>
- </MkPreferenceContainer>
-
- <MkPreferenceContainer k="emojiPickerStyle">
- <MkSelect v-model="emojiPickerStyle">
- <template #label>{{ i18n.ts.style }}</template>
- <template #caption>{{ i18n.ts.needReloadToApply }}</template>
- <option value="auto">{{ i18n.ts.auto }}</option>
- <option value="popup">{{ i18n.ts.popup }}</option>
- <option value="drawer">{{ i18n.ts.drawer }}</option>
- </MkSelect>
- </MkPreferenceContainer>
- </div>
- </FormSection>
-</div>
-</template>
-
-<script lang="ts" setup>
-import { computed, ref, watch } from 'vue';
-import Sortable from 'vuedraggable';
-import type { Ref } from 'vue';
-import MkRadios from '@/components/MkRadios.vue';
-import MkButton from '@/components/MkButton.vue';
-import FormSection from '@/components/form/section.vue';
-import MkSelect from '@/components/MkSelect.vue';
-import * as os from '@/os.js';
-import { store } from '@/store.js';
-import { i18n } from '@/i18n.js';
-import { definePage } from '@/page.js';
-import { deepClone } from '@/utility/clone.js';
-import { reactionPicker } from '@/utility/reaction-picker.js';
-import { emojiPicker } from '@/utility/emoji-picker.js';
-import MkCustomEmoji from '@/components/global/MkCustomEmoji.vue';
-import MkEmoji from '@/components/global/MkEmoji.vue';
-import MkFolder from '@/components/MkFolder.vue';
-import { prefer } from '@/preferences.js';
-import MkPreferenceContainer from '@/components/MkPreferenceContainer.vue';
-
-const pinnedEmojisForReaction: Ref<string[]> = ref(deepClone(store.s.reactions));
-const pinnedEmojis: Ref<string[]> = ref(deepClone(store.s.pinnedEmojis));
-
-const emojiPickerScale = prefer.model('emojiPickerScale');
-const emojiPickerWidth = prefer.model('emojiPickerWidth');
-const emojiPickerHeight = prefer.model('emojiPickerHeight');
-const emojiPickerStyle = prefer.model('emojiPickerStyle');
-
-const removeReaction = (reaction: string, ev: MouseEvent) => remove(pinnedEmojisForReaction, reaction, ev);
-const chooseReaction = (ev: MouseEvent) => pickEmoji(pinnedEmojisForReaction, ev);
-const setDefaultReaction = () => setDefault(pinnedEmojisForReaction);
-
-const removeEmoji = (reaction: string, ev: MouseEvent) => remove(pinnedEmojis, reaction, ev);
-const chooseEmoji = (ev: MouseEvent) => pickEmoji(pinnedEmojis, ev);
-const setDefaultEmoji = () => setDefault(pinnedEmojis);
-
-function previewReaction(ev: MouseEvent) {
- reactionPicker.show(getHTMLElement(ev), null);
-}
-
-function previewEmoji(ev: MouseEvent) {
- emojiPicker.show(getHTMLElement(ev));
-}
-
-async function overwriteFromPinnedEmojis() {
- const { canceled } = await os.confirm({
- type: 'warning',
- text: i18n.ts.overwriteContentConfirm,
- });
-
- if (canceled) {
- return;
- }
-
- pinnedEmojisForReaction.value = [...pinnedEmojis.value];
-}
-
-async function overwriteFromPinnedEmojisForReaction() {
- const { canceled } = await os.confirm({
- type: 'warning',
- text: i18n.ts.overwriteContentConfirm,
- });
-
- if (canceled) {
- return;
- }
-
- pinnedEmojis.value = [...pinnedEmojisForReaction.value];
-}
-
-function remove(itemsRef: Ref<string[]>, reaction: string, ev: MouseEvent) {
- os.popupMenu([{
- text: i18n.ts.remove,
- action: () => {
- itemsRef.value = itemsRef.value.filter(x => x !== reaction);
- },
- }], getHTMLElement(ev));
-}
-
-async function setDefault(itemsRef: Ref<string[]>) {
- const { canceled } = await os.confirm({
- type: 'warning',
- text: i18n.ts.resetAreYouSure,
- });
- if (canceled) return;
-
- itemsRef.value = deepClone(store.def.reactions.default);
-}
-
-async function pickEmoji(itemsRef: Ref<string[]>, ev: MouseEvent) {
- os.pickEmoji(getHTMLElement(ev), {
- showPinned: false,
- }).then(it => {
- const emoji = it;
- if (!itemsRef.value.includes(emoji)) {
- itemsRef.value.push(emoji);
- }
- });
-}
-
-function getHTMLElement(ev: MouseEvent): HTMLElement {
- const target = ev.currentTarget ?? ev.target;
- return target as HTMLElement;
-}
-
-watch(pinnedEmojisForReaction, () => {
- store.set('reactions', pinnedEmojisForReaction.value);
-}, {
- deep: true,
-});
-
-watch(pinnedEmojis, () => {
- store.set('pinnedEmojis', pinnedEmojis.value);
-}, {
- deep: true,
-});
-
-definePage(() => ({
- title: i18n.ts.emojiPicker,
- icon: 'ti ti-mood-happy',
-}));
-</script>
-
-<style lang="scss" module>
-.tab {
- margin: calc(var(--MI-margin) / 2) 0;
- padding: calc(var(--MI-margin) / 2) 0;
- background: var(--MI_THEME-bg);
-}
-
-.emojis {
- padding: 12px;
- font-size: 1.1em;
-}
-
-.emojisItem {
- display: inline-block;
- padding: 8px;
- cursor: move;
-}
-
-.emojisAdd {
- display: inline-block;
- padding: 8px;
-}
-
-.editorCaption {
- font-size: 0.85em;
- padding: 8px 0 0 0;
- color: var(--MI_THEME-fgTransparentWeak);
-}
-</style>
diff --git a/packages/frontend/src/pages/settings/index.vue b/packages/frontend/src/pages/settings/index.vue
index 7bbec82757..debcd4bd3e 100644
--- a/packages/frontend/src/pages/settings/index.vue
+++ b/packages/frontend/src/pages/settings/index.vue
@@ -86,11 +86,6 @@ const menuDef = computed<SuperMenuDef[]>(() => [{
text: i18n.ts.privacy,
to: '/settings/privacy',
active: currentPage.value?.route.name === 'privacy',
- }, {
- icon: 'ti ti-mood-happy',
- text: i18n.ts.emojiPicker,
- to: '/settings/emoji-picker',
- active: currentPage.value?.route.name === 'emojiPicker',
}, {
icon: 'ti ti-bell',
text: i18n.ts.notifications,
@@ -118,6 +113,11 @@ const menuDef = computed<SuperMenuDef[]>(() => [{
text: i18n.ts.theme,
to: '/settings/theme',
active: currentPage.value?.route.name === 'theme',
+ }, {
+ icon: 'ti ti-mood-happy',
+ text: i18n.ts.emojiPalette,
+ to: '/settings/emoji-palette',
+ active: currentPage.value?.route.name === 'emoji-palette',
}, {
icon: 'ti ti-device-desktop',
text: i18n.ts.appearance,
diff --git a/packages/frontend/src/preferences/def.ts b/packages/frontend/src/preferences/def.ts
index 47d0ab5cbc..6a926c4b26 100644
--- a/packages/frontend/src/preferences/def.ts
+++ b/packages/frontend/src/preferences/def.ts
@@ -29,6 +29,8 @@ export type SoundStore = {
volume: number;
};
+// NOTE: デフォルト値は他の設定の状態に依存してはならない(依存していた場合、ユーザーがその設定項目単体で「初期値にリセット」した場合不具合の原因になる)
+
export const PREF_DEF = {
pinnedUserLists: {
accountDependent: true,
@@ -56,6 +58,27 @@ export const PREF_DEF = {
default: [] as DeckProfile[],
},
+ emojiPalettes: {
+ serverDependent: true,
+ default: [{
+ id: 'a',
+ name: '',
+ emojis: ['👍', '❤️', '😆', '🤔', '😮', '🎉', '💢', '😥', '😇', '🍮'],
+ }] as {
+ id: string;
+ name: string;
+ emojis: string[];
+ }[],
+ },
+ emojiPaletteForReaction: {
+ serverDependent: true,
+ default: null as string | null,
+ },
+ emojiPaletteForMain: {
+ serverDependent: true,
+ default: null as string | null,
+ },
+
overridedDeviceKind: {
default: null as DeviceKind | null,
},
@@ -180,13 +203,13 @@ export const PREF_DEF = {
default: 'remote' as 'none' | 'remote' | 'always',
},
emojiPickerScale: {
- default: 1,
+ default: 2,
},
emojiPickerWidth: {
- default: 1,
+ default: 2,
},
emojiPickerHeight: {
- default: 2,
+ default: 3,
},
emojiPickerStyle: {
default: 'auto' as 'auto' | 'popup' | 'drawer',
diff --git a/packages/frontend/src/router/definition.ts b/packages/frontend/src/router/definition.ts
index 93dd081127..752356497e 100644
--- a/packages/frontend/src/router/definition.ts
+++ b/packages/frontend/src/router/definition.ts
@@ -66,9 +66,9 @@ const routes: RouteDef[] = [{
name: 'privacy',
component: page(() => import('@/pages/settings/privacy.vue')),
}, {
- path: '/emoji-picker',
- name: 'emojiPicker',
- component: page(() => import('@/pages/settings/emoji-picker.vue')),
+ path: '/emoji-palette',
+ name: 'emoji-palette',
+ component: page(() => import('@/pages/settings/emoji-palette.vue')),
}, {
path: '/drive',
name: 'drive',
diff --git a/packages/frontend/src/store.ts b/packages/frontend/src/store.ts
index 738a57d233..6eebcd1ead 100644
--- a/packages/frontend/src/store.ts
+++ b/packages/frontend/src/store.ts
@@ -39,14 +39,6 @@ export const store = markRaw(new Storage('base', {
where: 'account',
default: null,
},
- reactions: {
- where: 'account',
- default: ['👍', '❤️', '😆', '🤔', '😮', '🎉', '💢', '😥', '😇', '🍮'],
- },
- pinnedEmojis: {
- where: 'account',
- default: [],
- },
reactionAcceptance: {
where: 'account',
default: 'nonSensitiveOnly' as 'likeOnly' | 'likeOnlyForRemote' | 'nonSensitiveOnly' | 'nonSensitiveOnlyForLocalLikeOnlyForRemote' | null,
@@ -127,6 +119,14 @@ export const store = markRaw(new Storage('base', {
},
//#region TODO: そのうち消す (preferに移行済み)
+ reactions: {
+ where: 'account',
+ default: ['👍', '❤️', '😆', '🤔', '😮', '🎉', '💢', '😥', '😇', '🍮'],
+ },
+ pinnedEmojis: {
+ where: 'account',
+ default: [],
+ },
widgets: {
where: 'account',
default: [] as {
diff --git a/packages/frontend/src/utility/autogen/settings-search-index.ts b/packages/frontend/src/utility/autogen/settings-search-index.ts
index 52100ab639..4f1a94f266 100644
--- a/packages/frontend/src/utility/autogen/settings-search-index.ts
+++ b/packages/frontend/src/utility/autogen/settings-search-index.ts
@@ -536,6 +536,57 @@ export const searchIndexes: SearchIndexItem[] = [
path: '/settings/mute-block',
icon: 'ti ti-ban',
},
+ {
+ id: 'yR1OSyLiT',
+ children: [
+ {
+ id: 'yMJzyzOUk',
+ label: i18n.ts._emojiPalette.enableSyncBetweenDevicesForPalettes,
+ keywords: ['sync', 'palettes', 'devices'],
+ },
+ {
+ id: 'wCE09vgZr',
+ label: i18n.ts._emojiPalette.paletteForMain,
+ keywords: ['main', 'palette'],
+ },
+ {
+ id: 'uCzRPrSNx',
+ label: i18n.ts._emojiPalette.paletteForReaction,
+ keywords: ['reaction', 'palette'],
+ },
+ {
+ id: 'hgQr28WUk',
+ children: [
+ {
+ id: 'fY04NIHSQ',
+ label: i18n.ts.size,
+ keywords: ['emoji', 'picker', 'scale', 'size'],
+ },
+ {
+ id: '3j7vlaL7t',
+ label: i18n.ts.numberOfColumn,
+ keywords: ['emoji', 'picker', 'width', 'column', 'size'],
+ },
+ {
+ id: 'zPX8z1Bcy',
+ label: i18n.ts.height,
+ keywords: ['emoji', 'picker', 'height', 'size'],
+ },
+ {
+ id: '2CSkZa4tl',
+ label: i18n.ts.style,
+ keywords: ['emoji', 'picker', 'style'],
+ },
+ ],
+ label: i18n.ts.emojiPickerDisplay,
+ keywords: ['emoji', 'picker', 'display'],
+ },
+ ],
+ label: i18n.ts.emojiPalette,
+ keywords: ['emoji', 'palette'],
+ path: '/settings/emoji-palette',
+ icon: 'ti ti-mood-happy',
+ },
{
id: '3Tcxw4Fwl',
children: [
@@ -608,23 +659,28 @@ export const searchIndexes: SearchIndexItem[] = [
id: 'FfZdOs8y',
children: [
{
- id: 'lVlkdP4zN',
+ id: 'B1ZU6Ur54',
+ label: i18n.ts._deck.enableSyncBetweenDevicesForProfiles,
+ keywords: ['sync', 'profiles', 'devices'],
+ },
+ {
+ id: 'iEF0gqNAo',
label: i18n.ts._deck.useSimpleUiForNonRootPages,
keywords: ['ui', 'root', 'page'],
},
{
- id: 'avgxEYgsi',
+ id: 'BNdSeWxZn',
label: i18n.ts.defaultNavigationBehaviour,
keywords: ['default', 'navigation', 'behaviour', 'window'],
},
{
- id: 'ma7OSw5JK',
+ id: 'zT9pGm8DF',
label: i18n.ts._deck.alwaysShowMainColumn,
keywords: ['always', 'show', 'main', 'column'],
},
{
- id: 'jjTlUDhJH',
- label: 'Unnamed marker',
+ id: '5dk2xv1vc',
+ label: i18n.ts._deck.columnAlign,
keywords: ['column', 'align'],
},
],
diff --git a/packages/frontend/src/utility/emoji-picker.ts b/packages/frontend/src/utility/emoji-picker.ts
index e7275b86f2..6279786b2d 100644
--- a/packages/frontend/src/utility/emoji-picker.ts
+++ b/packages/frontend/src/utility/emoji-picker.ts
@@ -3,10 +3,10 @@
* SPDX-License-Identifier: AGPL-3.0-only
*/
-import { defineAsyncComponent, ref } from 'vue';
+import { defineAsyncComponent, ref, watch } from 'vue';
import type { Ref } from 'vue';
import { popup } from '@/os.js';
-import { store } from '@/store.js';
+import { prefer } from '@/preferences.js';
/**
* 絵文字ピッカーを表示する。
@@ -25,7 +25,14 @@ class EmojiPicker {
}
public async init() {
- const emojisRef = store.r.pinnedEmojis;
+ 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 ?? [];
+ }, {
+ immediate: true,
+ });
+
await popup(defineAsyncComponent(() => import('@/components/MkEmojiPickerDialog.vue')), {
src: this.src,
pinnedEmojis: emojisRef,
diff --git a/packages/frontend/src/utility/reaction-picker.ts b/packages/frontend/src/utility/reaction-picker.ts
index 200fb0b686..7c159fa2da 100644
--- a/packages/frontend/src/utility/reaction-picker.ts
+++ b/packages/frontend/src/utility/reaction-picker.ts
@@ -4,10 +4,10 @@
*/
import * as Misskey from 'misskey-js';
-import { defineAsyncComponent, ref } from 'vue';
+import { defineAsyncComponent, ref, watch } from 'vue';
import type { Ref } from 'vue';
import { popup } from '@/os.js';
-import { store } from '@/store.js';
+import { prefer } from '@/preferences.js';
class ReactionPicker {
private src: Ref<HTMLElement | null> = ref(null);
@@ -21,7 +21,14 @@ class ReactionPicker {
}
public async init() {
- const reactionsRef = store.r.reactions;
+ const reactionsRef = ref<string[]>([]);
+
+ watch([prefer.r.emojiPaletteForReaction, prefer.r.emojiPalettes], () => {
+ reactionsRef.value = prefer.s.emojiPaletteForReaction == null ? prefer.s.emojiPalettes[0].emojis : prefer.s.emojiPalettes.find(palette => palette.id === prefer.s.emojiPaletteForReaction)?.emojis ?? [];
+ }, {
+ immediate: true,
+ });
+
await popup(defineAsyncComponent(() => import('@/components/MkEmojiPickerDialog.vue')), {
src: this.src,
pinnedEmojis: reactionsRef,