入力フォームでもリアクション選択時に使用するピッカーを使うようにしたい (#12337)
* 入力フォームでもリアクション選択時に使用するピッカーを使うようにしたい * erase console.log * fix CHANGELOG.md * reaction-picker.ts を戻し、今回の対応を入れた emoji-picker.ts を新たに作成 * fix CHANGELOG.md * tweak --------- Co-authored-by: osamu <46447427+sam-osamu@users.noreply.github.com> Co-authored-by: syuilo <Syuilotan@yahoo.co.jp>
This commit is contained in:
parent
af15f8d09d
commit
5e1d872404
|
@ -24,6 +24,7 @@
|
||||||
### Client
|
### Client
|
||||||
- Feat: 今日誕生日のフォロー中のユーザーを一覧表示できるウィジェットを追加
|
- Feat: 今日誕生日のフォロー中のユーザーを一覧表示できるウィジェットを追加
|
||||||
- Feat: データセーバーでコードハイライトの読み込みを削減できるように
|
- Feat: データセーバーでコードハイライトの読み込みを削減できるように
|
||||||
|
- Enhance: 投稿フォームの絵文字ピッカーをリアクション時に使用するものと同じのを使用するように #12336
|
||||||
- Enhance: 絵文字のオートコンプリート機能強化 #12364
|
- Enhance: 絵文字のオートコンプリート機能強化 #12364
|
||||||
- Enhance: ユーザーのRawデータを表示するページが復活
|
- Enhance: ユーザーのRawデータを表示するページが復活
|
||||||
- Enhance: リアクション選択時に音を鳴らせるように
|
- Enhance: リアクション選択時に音を鳴らせるように
|
||||||
|
|
|
@ -19,6 +19,7 @@ import { claimAchievement, claimedAchievements } from '@/scripts/achievements.js
|
||||||
import { mainRouter } from '@/router.js';
|
import { mainRouter } from '@/router.js';
|
||||||
import { initializeSw } from '@/scripts/initialize-sw.js';
|
import { initializeSw } from '@/scripts/initialize-sw.js';
|
||||||
import { deckStore } from '@/ui/deck/deck-store.js';
|
import { deckStore } from '@/ui/deck/deck-store.js';
|
||||||
|
import { emojiPicker } from '@/scripts/emoji-picker.js';
|
||||||
|
|
||||||
export async function mainBoot() {
|
export async function mainBoot() {
|
||||||
const { isClientUpdated } = await common(() => createApp(
|
const { isClientUpdated } = await common(() => createApp(
|
||||||
|
@ -30,6 +31,7 @@ export async function mainBoot() {
|
||||||
));
|
));
|
||||||
|
|
||||||
reactionPicker.init();
|
reactionPicker.init();
|
||||||
|
emojiPicker.init();
|
||||||
|
|
||||||
if (isClientUpdated && $i) {
|
if (isClientUpdated && $i) {
|
||||||
popup(defineAsyncComponent(() => import('@/components/MkUpdated.vue')), {}, {}, 'closed');
|
popup(defineAsyncComponent(() => import('@/components/MkUpdated.vue')), {}, {}, 'closed');
|
||||||
|
|
|
@ -36,7 +36,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<div v-if="tab === 'index'" class="group index">
|
<div v-if="tab === 'index'" class="group index">
|
||||||
<section v-if="showPinned">
|
<section v-if="showPinned && pinned.length > 0">
|
||||||
<div class="body">
|
<div class="body">
|
||||||
<button
|
<button
|
||||||
v-for="emoji in pinned"
|
v-for="emoji in pinned"
|
||||||
|
@ -137,7 +137,7 @@ const searchEl = shallowRef<HTMLInputElement>();
|
||||||
const emojisEl = shallowRef<HTMLDivElement>();
|
const emojisEl = shallowRef<HTMLDivElement>();
|
||||||
|
|
||||||
const {
|
const {
|
||||||
reactions: pinned,
|
reactions: pinnedReactions,
|
||||||
reactionPickerSize,
|
reactionPickerSize,
|
||||||
reactionPickerWidth,
|
reactionPickerWidth,
|
||||||
reactionPickerHeight,
|
reactionPickerHeight,
|
||||||
|
@ -145,6 +145,7 @@ const {
|
||||||
recentlyUsedEmojis,
|
recentlyUsedEmojis,
|
||||||
} = defaultStore.reactiveState;
|
} = defaultStore.reactiveState;
|
||||||
|
|
||||||
|
const pinned = computed(() => props.asReactionPicker ? pinnedReactions.value : []); // TODO: 非リアクションの絵文字ピッカー用のpinned絵文字を設定可能にする?
|
||||||
const size = computed(() => props.asReactionPicker ? reactionPickerSize.value : 1);
|
const size = computed(() => props.asReactionPicker ? reactionPickerSize.value : 1);
|
||||||
const width = computed(() => props.asReactionPicker ? reactionPickerWidth.value : 3);
|
const width = computed(() => props.asReactionPicker ? reactionPickerWidth.value : 3);
|
||||||
const height = computed(() => props.asReactionPicker ? reactionPickerHeight.value : 2);
|
const height = computed(() => props.asReactionPicker ? reactionPickerHeight.value : 2);
|
||||||
|
|
|
@ -31,20 +31,21 @@ SPDX-License-Identifier: AGPL-3.0-only
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { shallowRef } from 'vue';
|
|
||||||
import MkModal from '@/components/MkModal.vue';
|
import MkModal from '@/components/MkModal.vue';
|
||||||
import MkEmojiPicker from '@/components/MkEmojiPicker.vue';
|
import MkEmojiPicker from '@/components/MkEmojiPicker.vue';
|
||||||
import { defaultStore } from '@/store.js';
|
import { defaultStore } from '@/store.js';
|
||||||
|
|
||||||
withDefaults(defineProps<{
|
const props = withDefaults(defineProps<{
|
||||||
manualShowing?: boolean | null;
|
manualShowing?: boolean | null;
|
||||||
src?: HTMLElement;
|
src?: HTMLElement;
|
||||||
showPinned?: boolean;
|
showPinned?: boolean;
|
||||||
asReactionPicker?: boolean;
|
asReactionPicker?: boolean;
|
||||||
|
choseAndClose?: boolean;
|
||||||
}>(), {
|
}>(), {
|
||||||
manualShowing: null,
|
manualShowing: null,
|
||||||
showPinned: true,
|
showPinned: true,
|
||||||
asReactionPicker: false,
|
asReactionPicker: false,
|
||||||
|
choseAndClose: true,
|
||||||
});
|
});
|
||||||
|
|
||||||
const emit = defineEmits<{
|
const emit = defineEmits<{
|
||||||
|
@ -53,21 +54,23 @@ const emit = defineEmits<{
|
||||||
(ev: 'closed'): void;
|
(ev: 'closed'): void;
|
||||||
}>();
|
}>();
|
||||||
|
|
||||||
const modal = shallowRef<InstanceType<typeof MkModal>>();
|
const modal = $shallowRef<InstanceType<typeof MkModal>>();
|
||||||
const picker = shallowRef<InstanceType<typeof MkEmojiPicker>>();
|
const picker = $shallowRef<InstanceType<typeof MkEmojiPicker>>();
|
||||||
|
|
||||||
function chosen(emoji: any) {
|
function chosen(emoji: any) {
|
||||||
emit('done', emoji);
|
emit('done', emoji);
|
||||||
modal.value?.close();
|
if (props.choseAndClose) {
|
||||||
|
modal?.close();
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function opening() {
|
function opening() {
|
||||||
picker.value?.reset();
|
picker?.reset();
|
||||||
picker.value?.focus();
|
picker?.focus();
|
||||||
|
|
||||||
// 何故かちょっと待たないとフォーカスされない
|
// 何故かちょっと待たないとフォーカスされない
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
picker.value?.focus();
|
picker?.focus();
|
||||||
}, 10);
|
}, 10);
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
|
@ -124,6 +124,7 @@ import { deepClone } from '@/scripts/clone.js';
|
||||||
import MkRippleEffect from '@/components/MkRippleEffect.vue';
|
import MkRippleEffect from '@/components/MkRippleEffect.vue';
|
||||||
import { miLocalStorage } from '@/local-storage.js';
|
import { miLocalStorage } from '@/local-storage.js';
|
||||||
import { claimAchievement } from '@/scripts/achievements.js';
|
import { claimAchievement } from '@/scripts/achievements.js';
|
||||||
|
import { emojiPicker } from '@/scripts/emoji-picker.js';
|
||||||
|
|
||||||
const modal = inject('modal');
|
const modal = inject('modal');
|
||||||
|
|
||||||
|
@ -845,7 +846,15 @@ function insertMention() {
|
||||||
}
|
}
|
||||||
|
|
||||||
async function insertEmoji(ev: MouseEvent) {
|
async function insertEmoji(ev: MouseEvent) {
|
||||||
os.openEmojiPicker(ev.currentTarget ?? ev.target, {}, textareaEl);
|
emojiPicker.show(
|
||||||
|
ev.currentTarget ?? ev.target,
|
||||||
|
emoji => {
|
||||||
|
insertTextAtCursor(textareaEl, emoji);
|
||||||
|
},
|
||||||
|
() => {
|
||||||
|
focus();
|
||||||
|
},
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
function showActions(ev) {
|
function showActions(ev) {
|
||||||
|
|
|
@ -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<HTMLElement | null> = 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: false,
|
||||||
|
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();
|
Loading…
Reference in New Issue