絵文字の追加周り

This commit is contained in:
mattyatea 2023-09-26 10:54:01 +09:00
parent 0b89548481
commit bc12bba97d
8 changed files with 178 additions and 7 deletions

View file

@ -24,9 +24,11 @@ SPDX-License-Identifier: AGPL-3.0-only
<i v-else-if="type === 'info'" :class="$style.iconInner" class="ti ti-info-circle"></i>
<i v-else-if="type === 'question'" :class="$style.iconInner" class="ti ti-help-circle"></i>
<MkLoading v-else-if="type === 'waiting'" :class="$style.iconInner" :em="true"/>
<div v-if="type === 'mksw'" :class="$style.text"><MkSwitch :helpText="text" v-model="mkresult"/></div>
</div>
<header v-if="title" :class="$style.title"><Mfm :text="title"/></header>
<div v-if="text" :class="$style.text"><Mfm :text="text"/></div>
<MkInput v-if="input" v-model="inputValue" autofocus :type="input.type || 'text'" :placeholder="input.placeholder || undefined" :autocomplete="input.autocomplete" @keydown="onInputKeydown">
<template v-if="input.type === 'password'" #prefix><i class="ti ti-lock"></i></template>
<template #caption>
@ -62,9 +64,10 @@ import MkButton from '@/components/MkButton.vue';
import MkInput from '@/components/MkInput.vue';
import MkSelect from '@/components/MkSelect.vue';
import { i18n } from '@/i18n.js';
import MkSwitch from "@/components/MkSwitch.vue";
type Input = {
type: 'text' | 'number' | 'password' | 'email' | 'url' | 'date' | 'time' | 'search' | 'datetime-local';
type: 'text' | 'number' | 'password' | 'email' | 'url' | 'date' | 'time' | 'search' | 'datetime-local' | 'mksw';
placeholder?: string | null;
autocomplete?: string;
default: string | number | null;
@ -88,11 +91,12 @@ type Select = {
};
const props = withDefaults(defineProps<{
type?: 'success' | 'error' | 'warning' | 'info' | 'question' | 'waiting';
type?: 'success' | 'error' | 'warning' | 'info' | 'question' | 'waiting' | 'mksw';
title: string;
text?: string;
input?: Input;
select?: Select;
mksw?: boolean;
icon?: string;
actions?: {
text: string;
@ -121,7 +125,7 @@ const modal = shallowRef<InstanceType<typeof MkModal>>();
const inputValue = ref<string | number | null>(props.input?.default ?? null);
const selectedValue = ref(props.select?.default ?? null);
const mkresult= ref(false)
let disabledReason = $ref<null | 'charactersExceeded' | 'charactersBelow'>(null);
const okButtonDisabled = $computed<boolean>(() => {
if (props.input) {
@ -153,6 +157,7 @@ async function ok() {
const result =
props.input ? inputValue.value :
props.select ? selectedValue.value :
mkresult ? mkresult.value :
true;
done(false, result);
}

View file

@ -25,6 +25,7 @@ import MkContextMenu from '@/components/MkContextMenu.vue';
import { MenuItem } from '@/types/menu.js';
import copyToClipboard from '@/scripts/copy-to-clipboard.js';
import { showMovedDialog } from '@/scripts/show-moved-dialog.js';
import MkSwitch from "@/components/MkSwitch.vue";
export const openingWindowsCount = ref(0);
@ -196,9 +197,8 @@ export function alert(props: {
}, 'closed');
});
}
export function confirm(props: {
type: 'error' | 'info' | 'success' | 'warning' | 'waiting' | 'question';
type: 'error' | 'info' | 'success' | 'warning' | 'waiting' | 'question'|'mksw';
title?: string | null;
text?: string | null;
okText?: string;
@ -215,6 +215,24 @@ export function confirm(props: {
}, 'closed');
});
}
export function switch1(props: {
type: 'mksw';
title?: string | null;
text?: string | null;
okText?: string;
cancelText?: string;
}): Promise<{ canceled: boolean , result: boolean }> {
return new Promise((resolve, reject) => {
popup(MkDialog, {
...props,
showCancelButton: true,
}, {
done: result => {
resolve(result ? result : { canceled: true });
},
}, 'closed');
});
}
// TODO: const T extends ... にしたい
// https://zenn.dev/general_link/articles/813e47b7a0eef7#const-type-parameters

View file

@ -21,6 +21,8 @@ SPDX-License-Identifier: AGPL-3.0-only
<MkButton inline @click="selectAll">Select all</MkButton>
<MkButton inline @click="setCategoryBulk">Set category</MkButton>
<MkButton inline @click="setTagBulk">Set tag</MkButton>
<MkButton inline @click="setisSensitiveBulk">Set isSensitive</MkButton>
<MkButton inline @click="setlocalOnlyBulk">Set localOnly</MkButton>
<MkButton inline @click="addTagBulk">Add tag</MkButton>
<MkButton inline @click="removeTagBulk">Remove tag</MkButton>
<MkButton inline @click="setLicenseBulk">Set License</MkButton>
@ -84,6 +86,7 @@ import { selectFile, selectFiles } from '@/scripts/select-file.js';
import * as os from '@/os.js';
import { i18n } from '@/i18n.js';
import { definePageMetadata } from '@/scripts/page-metadata.js';
import {switch1, swtch} from "@/os.js";
const emojisPaginationComponent = shallowRef<InstanceType<typeof MkPagination>>();
@ -273,7 +276,30 @@ const setTagBulk = async () => {
});
emojisPaginationComponent.value.reload();
};
const setisSensitiveBulk = async () => {
const { canceled, result } = await os.switch1({
title: 'isSensitive',
type: "mksw"
});
if (canceled) return;
await os.apiWithDialog('admin/emoji/set-issensitive-bulk', {
ids: selectedEmojis.value,
isSensitive: result
});
emojisPaginationComponent.value.reload();
};
const setlocalOnlyBulk = async () => {
const { canceled, result } = await os.switch1({
title: 'localOnly',
type: "mksw"
});
if (canceled) return;
await os.apiWithDialog('admin/emoji/set-localonly-bulk', {
ids: selectedEmojis.value,
localOnly: result
});
emojisPaginationComponent.value.reload();
};
const delBulk = async () => {
const { canceled } = await os.confirm({
type: 'warning',