mirror of
https://github.com/MisskeyIO/misskey
synced 2024-12-23 19:18:44 +09:00
a89003b57a
* update stream.ts * https://github.com/misskey-dev/misskey/pull/7769#issuecomment-917542339 * fix lint * clean up? * add app * fix * nanka iroiro * wip * wip * fix lint * fix loginId * fix * refactor * refactor * remove follow action * clean up * Revert "remove follow action" This reverts commit defbb416480905af2150d1c92f10d8e1d1288c0a. * Revert "clean up" This reverts commit f94919cb9cff41e274044fc69c56ad36a33974f2. * remove fetch specification * renoteの条件追加 * apiFetch => cli * bypass fetch? * fix * refactor: use path alias * temp: add submodule * remove submodule * enhane: unison-reloadに指定したパスに移動できるように * null * null * feat: ログインするアカウントのIDをクエリ文字列で指定する機能 * null * await? * rename * rename * Update read.ts * merge * get-note-summary * fix * swパッケージに * add missing packages * fix getNoteSummary * add webpack-cli * ✌️ * remove plugins * sw-inject分離したがテストしてない * fix notification.vue * remove a blank line * disconnect intersection observer * disconnect2 * fix notification.vue * remove a blank line * disconnect intersection observer * disconnect2 * fix * ✌️ * clean up config * typesを戻した * Update packages/client/src/components/notification.vue Co-authored-by: Acid Chicken (硫酸鶏) <root@acid-chicken.com> * disconnect * oops * Failed to load the script unexpectedly回避 sw.jsとlib.tsを分離してみた * truncate notification * Update packages/client/src/ui/_common_/common.vue Co-authored-by: syuilo <Syuilotan@yahoo.co.jp> * clean up * clean up * キャッシュ対策 * Truncate push notification message * クライアントがあったらストリームに接続しているということなので通知しない判定の位置を修正 * components/drive-file-thumbnail.vue * components/drive-select-dialog.vue * components/drive-window.vue * merge * fix * Service Workerのビルドにesbuildを使うようにする * return createEmptyNotification() * fix * i18n.ts * update * ✌️ * remove ts-loader * fix * fix * enhance: Service Workerを常に登録するように * pollEnded * URLをsw.jsに戻す * clean up * wip * wip * wip * wip * wip * wip * ✌️ * use import * fix * install rollup * use defineAsyncComponent. * fix emojilist * wip use defineAsyncComponent * popup(import -> popup(defineAsyncComponent(() => import * draggable? * fix init import * clean up * fix router * add comment * ✌️ * ✌️ * ✌️ * remove webpack * update vite * fix boot sequence * Revert "fix boot sequence" This reverts commit e893dbf37aed83bf9f12e427d98c78a7065b4a39. * revert boot import * never make two app div * ; * remove console.log * change clientEntry sequence * fix * Revert "fix" This reverts commit 12741b3d89950a31dbb1bb81477ddb27b0e9951a. * fix * add comment https://github.com/misskey-dev/misskey/pull/8575#issuecomment-1114239210 * add log * add comment Co-authored-by: Acid Chicken (硫酸鶏) <root@acid-chicken.com> Co-authored-by: syuilo <Syuilotan@yahoo.co.jp>
396 lines
9.5 KiB
Vue
396 lines
9.5 KiB
Vue
<template>
|
|
<MkSpacer :content-max="900">
|
|
<div class="ogwlenmc">
|
|
<div v-if="tab === 'local'" class="local">
|
|
<MkInput v-model="query" :debounce="true" type="search">
|
|
<template #prefix><i class="fas fa-search"></i></template>
|
|
<template #label>{{ $ts.search }}</template>
|
|
</MkInput>
|
|
<MkSwitch v-model="selectMode" style="margin: 8px 0;">
|
|
<template #label>Select mode</template>
|
|
</MkSwitch>
|
|
<div v-if="selectMode" style="display: flex; gap: var(--margin); flex-wrap: wrap;">
|
|
<MkButton inline @click="selectAll">Select all</MkButton>
|
|
<MkButton inline @click="setCategoryBulk">Set category</MkButton>
|
|
<MkButton inline @click="addTagBulk">Add tag</MkButton>
|
|
<MkButton inline @click="removeTagBulk">Remove tag</MkButton>
|
|
<MkButton inline @click="setTagBulk">Set tag</MkButton>
|
|
<MkButton inline danger @click="delBulk">Delete</MkButton>
|
|
</div>
|
|
<MkPagination ref="emojisPaginationComponent" :pagination="pagination">
|
|
<template #empty><span>{{ $ts.noCustomEmojis }}</span></template>
|
|
<template v-slot="{items}">
|
|
<div class="ldhfsamy">
|
|
<button v-for="emoji in items" :key="emoji.id" class="emoji _panel _button" :class="{ selected: selectedEmojis.includes(emoji.id) }" @click="selectMode ? toggleSelect(emoji) : edit(emoji)">
|
|
<img :src="emoji.url" class="img" :alt="emoji.name"/>
|
|
<div class="body">
|
|
<div class="name _monospace">{{ emoji.name }}</div>
|
|
<div class="info">{{ emoji.category }}</div>
|
|
</div>
|
|
</button>
|
|
</div>
|
|
</template>
|
|
</MkPagination>
|
|
</div>
|
|
|
|
<div v-else-if="tab === 'remote'" class="remote">
|
|
<FormSplit>
|
|
<MkInput v-model="queryRemote" :debounce="true" type="search">
|
|
<template #prefix><i class="fas fa-search"></i></template>
|
|
<template #label>{{ $ts.search }}</template>
|
|
</MkInput>
|
|
<MkInput v-model="host" :debounce="true">
|
|
<template #label>{{ $ts.host }}</template>
|
|
</MkInput>
|
|
</FormSplit>
|
|
<MkPagination :pagination="remotePagination">
|
|
<template #empty><span>{{ $ts.noCustomEmojis }}</span></template>
|
|
<template v-slot="{items}">
|
|
<div class="ldhfsamy">
|
|
<div v-for="emoji in items" :key="emoji.id" class="emoji _panel _button" @click="remoteMenu(emoji, $event)">
|
|
<img :src="emoji.url" class="img" :alt="emoji.name"/>
|
|
<div class="body">
|
|
<div class="name _monospace">{{ emoji.name }}</div>
|
|
<div class="info">{{ emoji.host }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</MkPagination>
|
|
</div>
|
|
</div>
|
|
</MkSpacer>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { computed, defineAsyncComponent, defineComponent, ref, toRef } from 'vue';
|
|
import MkButton from '@/components/ui/button.vue';
|
|
import MkInput from '@/components/form/input.vue';
|
|
import MkPagination from '@/components/ui/pagination.vue';
|
|
import MkTab from '@/components/tab.vue';
|
|
import MkSwitch from '@/components/form/switch.vue';
|
|
import FormSplit from '@/components/form/split.vue';
|
|
import { selectFile, selectFiles } from '@/scripts/select-file';
|
|
import * as os from '@/os';
|
|
import * as symbols from '@/symbols';
|
|
import { i18n } from '@/i18n';
|
|
|
|
const emojisPaginationComponent = ref<InstanceType<typeof MkPagination>>();
|
|
|
|
const tab = ref('local');
|
|
const query = ref(null);
|
|
const queryRemote = ref(null);
|
|
const host = ref(null);
|
|
const selectMode = ref(false);
|
|
const selectedEmojis = ref<string[]>([]);
|
|
|
|
const pagination = {
|
|
endpoint: 'admin/emoji/list' as const,
|
|
limit: 30,
|
|
params: computed(() => ({
|
|
query: (query.value && query.value !== '') ? query.value : null,
|
|
})),
|
|
};
|
|
|
|
const remotePagination = {
|
|
endpoint: 'admin/emoji/list-remote' as const,
|
|
limit: 30,
|
|
params: computed(() => ({
|
|
query: (queryRemote.value && queryRemote.value !== '') ? queryRemote.value : null,
|
|
host: (host.value && host.value !== '') ? host.value : null,
|
|
})),
|
|
};
|
|
|
|
const selectAll = () => {
|
|
if (selectedEmojis.value.length > 0) {
|
|
selectedEmojis.value = [];
|
|
} else {
|
|
selectedEmojis.value = emojisPaginationComponent.value.items.map(item => item.id);
|
|
}
|
|
};
|
|
|
|
const toggleSelect = (emoji) => {
|
|
if (selectedEmojis.value.includes(emoji.id)) {
|
|
selectedEmojis.value = selectedEmojis.value.filter(x => x !== emoji.id);
|
|
} else {
|
|
selectedEmojis.value.push(emoji.id);
|
|
}
|
|
};
|
|
|
|
const add = async (ev: MouseEvent) => {
|
|
const files = await selectFiles(ev.currentTarget ?? ev.target, null);
|
|
|
|
const promise = Promise.all(files.map(file => os.api('admin/emoji/add', {
|
|
fileId: file.id,
|
|
})));
|
|
promise.then(() => {
|
|
emojisPaginationComponent.value.reload();
|
|
});
|
|
os.promiseDialog(promise);
|
|
};
|
|
|
|
const edit = (emoji) => {
|
|
os.popup(defineAsyncComponent(() => import('./emoji-edit-dialog.vue')), {
|
|
emoji: emoji
|
|
}, {
|
|
done: result => {
|
|
if (result.updated) {
|
|
emojisPaginationComponent.value.replaceItem(item => item.id === emoji.id, {
|
|
...emoji,
|
|
...result.updated
|
|
});
|
|
} else if (result.deleted) {
|
|
emojisPaginationComponent.value.removeItem(item => item.id === emoji.id);
|
|
}
|
|
},
|
|
}, 'closed');
|
|
};
|
|
|
|
const im = (emoji) => {
|
|
os.apiWithDialog('admin/emoji/copy', {
|
|
emojiId: emoji.id,
|
|
});
|
|
};
|
|
|
|
const remoteMenu = (emoji, ev: MouseEvent) => {
|
|
os.popupMenu([{
|
|
type: 'label',
|
|
text: ':' + emoji.name + ':',
|
|
}, {
|
|
text: i18n.ts.import,
|
|
icon: 'fas fa-plus',
|
|
action: () => { im(emoji) }
|
|
}], ev.currentTarget ?? ev.target);
|
|
};
|
|
|
|
const menu = (ev: MouseEvent) => {
|
|
os.popupMenu([{
|
|
icon: 'fas fa-download',
|
|
text: i18n.ts.export,
|
|
action: async () => {
|
|
os.api('export-custom-emojis', {
|
|
})
|
|
.then(() => {
|
|
os.alert({
|
|
type: 'info',
|
|
text: i18n.ts.exportRequested,
|
|
});
|
|
}).catch((e) => {
|
|
os.alert({
|
|
type: 'error',
|
|
text: e.message,
|
|
});
|
|
});
|
|
}
|
|
}, {
|
|
icon: 'fas fa-upload',
|
|
text: i18n.ts.import,
|
|
action: async () => {
|
|
const file = await selectFile(ev.currentTarget ?? ev.target);
|
|
os.api('admin/emoji/import-zip', {
|
|
fileId: file.id,
|
|
})
|
|
.then(() => {
|
|
os.alert({
|
|
type: 'info',
|
|
text: i18n.ts.importRequested,
|
|
});
|
|
}).catch((e) => {
|
|
os.alert({
|
|
type: 'error',
|
|
text: e.message,
|
|
});
|
|
});
|
|
}
|
|
}], ev.currentTarget ?? ev.target);
|
|
};
|
|
|
|
const setCategoryBulk = async () => {
|
|
const { canceled, result } = await os.inputText({
|
|
title: 'Category',
|
|
});
|
|
if (canceled) return;
|
|
await os.apiWithDialog('admin/emoji/set-category-bulk', {
|
|
ids: selectedEmojis.value,
|
|
category: result,
|
|
});
|
|
emojisPaginationComponent.value.reload();
|
|
};
|
|
|
|
const addTagBulk = async () => {
|
|
const { canceled, result } = await os.inputText({
|
|
title: 'Tag',
|
|
});
|
|
if (canceled) return;
|
|
await os.apiWithDialog('admin/emoji/add-aliases-bulk', {
|
|
ids: selectedEmojis.value,
|
|
aliases: result.split(' '),
|
|
});
|
|
emojisPaginationComponent.value.reload();
|
|
};
|
|
|
|
const removeTagBulk = async () => {
|
|
const { canceled, result } = await os.inputText({
|
|
title: 'Tag',
|
|
});
|
|
if (canceled) return;
|
|
await os.apiWithDialog('admin/emoji/remove-aliases-bulk', {
|
|
ids: selectedEmojis.value,
|
|
aliases: result.split(' '),
|
|
});
|
|
emojisPaginationComponent.value.reload();
|
|
};
|
|
|
|
const setTagBulk = async () => {
|
|
const { canceled, result } = await os.inputText({
|
|
title: 'Tag',
|
|
});
|
|
if (canceled) return;
|
|
await os.apiWithDialog('admin/emoji/set-aliases-bulk', {
|
|
ids: selectedEmojis.value,
|
|
aliases: result.split(' '),
|
|
});
|
|
emojisPaginationComponent.value.reload();
|
|
};
|
|
|
|
const delBulk = async () => {
|
|
const { canceled } = await os.confirm({
|
|
type: 'warning',
|
|
text: i18n.ts.deleteConfirm,
|
|
});
|
|
if (canceled) return;
|
|
await os.apiWithDialog('admin/emoji/delete-bulk', {
|
|
ids: selectedEmojis.value,
|
|
});
|
|
emojisPaginationComponent.value.reload();
|
|
};
|
|
|
|
defineExpose({
|
|
[symbols.PAGE_INFO]: computed(() => ({
|
|
title: i18n.ts.customEmojis,
|
|
icon: 'fas fa-laugh',
|
|
bg: 'var(--bg)',
|
|
actions: [{
|
|
asFullButton: true,
|
|
icon: 'fas fa-plus',
|
|
text: i18n.ts.addEmoji,
|
|
handler: add,
|
|
}, {
|
|
icon: 'fas fa-ellipsis-h',
|
|
handler: menu,
|
|
}],
|
|
tabs: [{
|
|
active: tab.value === 'local',
|
|
title: i18n.ts.local,
|
|
onClick: () => { tab.value = 'local'; },
|
|
}, {
|
|
active: tab.value === 'remote',
|
|
title: i18n.ts.remote,
|
|
onClick: () => { tab.value = 'remote'; },
|
|
},]
|
|
})),
|
|
});
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.ogwlenmc {
|
|
> .local {
|
|
.empty {
|
|
margin: var(--margin);
|
|
}
|
|
|
|
.ldhfsamy {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
|
|
grid-gap: 12px;
|
|
margin: var(--margin) 0;
|
|
|
|
> .emoji {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 11px;
|
|
text-align: left;
|
|
border: solid 1px var(--panel);
|
|
|
|
&:hover {
|
|
border-color: var(--inputBorderHover);
|
|
}
|
|
|
|
&.selected {
|
|
border-color: var(--accent);
|
|
}
|
|
|
|
> .img {
|
|
width: 42px;
|
|
height: 42px;
|
|
}
|
|
|
|
> .body {
|
|
padding: 0 0 0 8px;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
|
|
> .name {
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
}
|
|
|
|
> .info {
|
|
opacity: 0.5;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
> .remote {
|
|
.empty {
|
|
margin: var(--margin);
|
|
}
|
|
|
|
.ldhfsamy {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
|
|
grid-gap: 12px;
|
|
margin: var(--margin) 0;
|
|
|
|
> .emoji {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 12px;
|
|
text-align: left;
|
|
|
|
&:hover {
|
|
color: var(--accent);
|
|
}
|
|
|
|
> .img {
|
|
width: 32px;
|
|
height: 32px;
|
|
}
|
|
|
|
> .body {
|
|
padding: 0 0 0 8px;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
|
|
> .name {
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
}
|
|
|
|
> .info {
|
|
opacity: 0.5;
|
|
font-size: 90%;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|