diff options
Diffstat (limited to 'packages/frontend/src/components')
4 files changed, 24 insertions, 15 deletions
diff --git a/packages/frontend/src/components/MkEmojiPicker.vue b/packages/frontend/src/components/MkEmojiPicker.vue index d84d298e23..f36d46506f 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<HTMLInputElement>(); const emojisEl = shallowRef<HTMLDivElement>(); 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<string>(''); const searchResultCustom = ref<Misskey.entities.EmojiSimple[]>([]); const searchResultUnicode = ref<UnicodeEmojiDef[]>([]); 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 2cce1f5520..6660dcf1ed 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 e6d55ae982..4a1930ac0b 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 095b24604a..6af63d1ec6 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 <template> <div :class="[$style.root, { [$style.rootFirst]: first }]"> <div :class="[$style.label, { [$style.labelFirst]: first }]"><slot name="label"></slot></div> + <div :class="[$style.description]"><slot name="description"></slot></div> <div :class="$style.main"> <slot></slot> </div> @@ -31,7 +32,7 @@ defineProps<{ .label { font-weight: bold; padding: 1.5em 0 0 0; - margin: 0 0 16px 0; + margin: 0 0 8px 0; &:empty { display: none; @@ -45,4 +46,10 @@ defineProps<{ .main { margin: 1.5em 0 0 0; } + +.description { + font-size: 0.85em; + color: var(--fgTransparentWeak); + margin: 0 0 8px 0; +} </style> |