Refine preferences (#15597)
* wip * wip * wip * test * wip rollup pluginでsearchIndexの情報生成 * wip * SPDX * wip: markerIdを自動付与 * rollupでビルド時・devモード時に毎回uuidを生成するように * 開発サーバーでだけ必要な挙動は開発サーバーのみで * 条件が逆 * wip: childrenの生成 * update comment * update comment * rename auto generated file * hashをパスと行数から決定 * Update privacy.vue * Update privacy.vue * wip * Update general.vue * Update general.vue * wip * wip * Update SearchMarker.vue * wip * Update profile.vue * Update mute-block.vue * Update mute-block.vue * Update general.vue * Update general.vue * childrenがduplicate key errorを吐く問題をいったん解決 * マーカーの形を成形 * loggerを置きかえ * とりあえず省略記法に対応 * Refactor and Format codes * wip * Update settings-search-index.ts * wip * wip * とりあえず不確定要因の仮置きidを削除 * hashの生成を正規化（絶対パスになっていたのを緩和） * pathの入力を省略可能に * adminでもパス生成できるように * Update settings-search-index.ts * Update privacy.vue * wip * build searchIndex * wip * build * Update general.vue * build * Update sounds.vue * build * build * Update sounds.vue * 🎨 * 🎨 * Update privacy.vue * Update privacy.vue * Update security.vue * create-search-indexを多少改善 * build * Update 2fa.vue * wip * 必ずtransformCodeCacheを利用するように, キャッシュの明確な受け渡しを定義 * キャッシュはdevServerでなくても更新 * Revert "wip" This reverts commit 41bffd3a13f55618bf939dc1c9acb2a77ead4054. * inlining * wip * Update theme.vue * 🎨 * wip normalize * Update theme.vue * キャッシュのパス変換 * build * wip * wip * Update SearchMarker.vue * i18n.ts['key'] の形式が取り出せない問題のFix * build * 仮でpath入れ * 必ず絶対パスが使われるように * wip * 🎨 * storybookビルド時はcreateSearchIndexをしない * inliningの構造化 * format code * Update index.vue * wip * wip * 🎨 * wip * wip * wip * wip * wip * wip * wip * wip * clean up * wip * wip * wip * Update rollup-plugin-unwind-css-module-class-name.test.ts * Update navbar.vue * clean up * wip * wip * wip * wip * wip * Update preferences-backups.vue * Update common.ts * Update preferences.ts * wip * wip * wip * wip * Update MkPreferenceContainer.vue * Update MkPreferenceContainer.vue * Update MkPreferenceContainer.vue * enhance: 検索で上下矢印を使用することで検索結果を移動できるように * Update main-boot.ts * refactor * wip * Update sounds.vue * fix(frontend): PageWindowでSearchMarkerが動作するように * enhance(frontend): SearchMarkerの点滅を一定時間で止める * wip * lint fix * fix: 子要素監視が抜けていたのを修正 * アニメーションの回数はCSSで制御するように * refactor * enhance(frontend): 検索インデックス作成時のログを削減 * revert * fix * fix * Update preferences.ts * Update preferences.ts * wip * Update preferences.ts * wip * 🎨 * wip * Update MkPreferenceContainer.vue * wip * Update preferences.ts * wip * Update preferences.ts * Update preferences.ts * wip * wip * Update preferences.ts * wip * wip * Update preferences.ts * Update CHANGELOG.md * Update preferences.ts * Update deck-store.ts * deckStoreをdefaultStoreに統合 * wip * defaultStore -> store * Update profile.ts * wip * refactor * wip: plugin * plugin * plugin * plugin * Update plugin.ts * wip * Update plugin.vue * Update preferences.ts * Update main-boot.ts * wip * fix test * Update plugin.vue * Update plugin.vue * Update utility.ts * wip * wip * Update utility.ts * wip * wip * clean up * Update utility.ts --------- Co-authored-by: tai-cha <dev@taichan.site> Co-authored-by: taichan <40626578+tai-cha@users.noreply.github.com> Co-authored-by: kakkokari-gtyih <67428053+kakkokari-gtyih@users.noreply.github.com>
This commit is contained in:
syuilo
@@ -89,37 +89,45 @@ SPDX-License-Identifier: AGPL-3.0-only
|
||||
<template #label>{{ i18n.ts.emojiPickerDisplay }}</template>
|
||||
|
||||
<div class="_gaps_m">
|
||||
<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 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>
|
||||
|
||||
<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 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>
|
||||
|
||||
<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 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>
|
||||
|
||||
<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 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>
|
||||
@@ -127,14 +135,14 @@ SPDX-License-Identifier: AGPL-3.0-only
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { computed, ref, watch } from 'vue';
|
||||
import type { Ref } 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 { defaultStore } from '@/store.js';
|
||||
import { store } from '@/store.js';
|
||||
import { i18n } from '@/i18n.js';
|
||||
import { definePageMetadata } from '@/scripts/page-metadata.js';
|
||||
import { deepClone } from '@/scripts/clone.js';
|
||||
@@ -143,14 +151,16 @@ import { emojiPicker } from '@/scripts/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(defaultStore.state.reactions));
|
||||
const pinnedEmojis: Ref<string[]> = ref(deepClone(defaultStore.state.pinnedEmojis));
|
||||
const pinnedEmojisForReaction: Ref<string[]> = ref(deepClone(store.state.reactions));
|
||||
const pinnedEmojis: Ref<string[]> = ref(deepClone(store.state.pinnedEmojis));
|
||||
|
||||
const emojiPickerScale = computed(defaultStore.makeGetterSetter('emojiPickerScale'));
|
||||
const emojiPickerWidth = computed(defaultStore.makeGetterSetter('emojiPickerWidth'));
|
||||
const emojiPickerHeight = computed(defaultStore.makeGetterSetter('emojiPickerHeight'));
|
||||
const emojiPickerStyle = computed(defaultStore.makeGetterSetter('emojiPickerStyle'));
|
||||
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);
|
||||
@@ -210,7 +220,7 @@ async function setDefault(itemsRef: Ref<string[]>) {
|
||||
});
|
||||
if (canceled) return;
|
||||
|
||||
itemsRef.value = deepClone(defaultStore.def.reactions.default);
|
||||
itemsRef.value = deepClone(store.def.reactions.default);
|
||||
}
|
||||
|
||||
async function pickEmoji(itemsRef: Ref<string[]>, ev: MouseEvent) {
|
||||
@@ -230,13 +240,13 @@ function getHTMLElement(ev: MouseEvent): HTMLElement {
|
||||
}
|
||||
|
||||
watch(pinnedEmojisForReaction, () => {
|
||||
defaultStore.set('reactions', pinnedEmojisForReaction.value);
|
||||
store.set('reactions', pinnedEmojisForReaction.value);
|
||||
}, {
|
||||
deep: true,
|
||||
});
|
||||
|
||||
watch(pinnedEmojis, () => {
|
||||
defaultStore.set('pinnedEmojis', pinnedEmojis.value);
|
||||
store.set('pinnedEmojis', pinnedEmojis.value);
|
||||
}, {
|
||||
deep: true,
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user