Mizah/mizzkey
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge remote-tracking branch 'misskey-mattyatea/emoji-request' into develop

Browse source 
# Conflicts:
#	CHANGELOG.md
#	locales/index.d.ts
#	locales/ja-JP.yml
#	packages/backend/src/core/CustomEmojiService.ts
#	packages/backend/src/models/RepositoryModule.ts
#	packages/backend/src/server/api/EndpointsModule.ts
#	packages/backend/src/server/api/endpoints.ts
#	packages/backend/src/server/api/endpoints/admin/emoji/update.ts
#	packages/frontend/src/components/MkCustomEmojiEditLocal.vue
#	packages/frontend/src/components/MkCustomEmojiEditRemote.vue
#	packages/frontend/src/components/MkEmojiEditDialog.vue
#	packages/frontend/src/pages/about.emojis.vue
#	packages/frontend/src/pages/admin/roles.editor.vue
#	packages/frontend/src/pages/custom-emojis-manager.vue
#	packages/frontend/src/pages/emojis.emoji.vue
This commit is contained in:
mattyatea 2023-12-23 09:30:48 +09:00
commit 68b48bc16f
35 changed files with 1286 additions and 476 deletions
Download patch file Download diff file Expand all files Collapse all files

103
packages/frontend/src/components/MkCustomEmojiEditLocal.vue
View file

@ -1,5 +1,5 @@
<template>
<MkInput v-model="query" :debounce="true" type="search">
<MkInput v-model="query" :debounce="true" type="search" autocapitalize="off">
<template #prefix><i class="ti ti-search"></i></template>
<template #label>{{ i18n.ts.search }}</template>
</MkInput>
@ -20,22 +20,22 @@
<MkPagination ref="emojisPaginationComponent" :pagination="pagination" :displayLimit="100">
<template #empty><span>{{ i18n.ts.noCustomEmojis }}</span></template>
<template #default="{items}">
<div class="ldhfsamy">
<div :class="$style.root">
<div v-for="emoji in items" :key="emoji.id">
<button v-if="emoji.draft" class="emoji _panel _button emoji-draft" :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 + ' (draft)' }}</div>
<div class="info">{{ emoji.category }}</div>
</div>
</button>
<button v-else class="emoji _panel _button" :class="{ selected: selectedEmojis.includes(emoji.id) }" @click="selectMode ? toggleSelect(emoji) : edit(emoji)">
<button v-if="emoji.request" class="_panel _button" :class="[{ selected: selectedEmojis.includes(emoji.id) },$style.emoji,$style.emojirequest]" @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>
<button v-else class="_panel _button" :class="[{ selected: selectedEmojis.includes(emoji.id) },$style.emoji]" @click="selectMode ? toggleSelect(emoji) : edit(emoji)">
<img :src="emoji.url" :class="$style.img" :alt="emoji.name"/>
<div :class="$style.body">
<div :class="$style.name" class="_monospace">{{ emoji.name }}</div>
<div :class="$style.info">{{ emoji.category }}</div>
</div>
</button>
</div>
</div>
</template>
@ -64,6 +64,14 @@ const pagination = {
query: (query.value && query.value !== '') ? query.value : null,
})),
};
const selectAll = () => {
if (selectedEmojis.value.length > 0) {
selectedEmojis.value = [];
} else {
selectedEmojis.value = emojisPaginationComponent.value.items.map(item => item.id);
}
};
const setisSensitiveBulk = async () => {
const { canceled, result } = await os.switch1({
title: 'isSensitive',
@ -221,53 +229,48 @@ const delBulk = async () => {
};
</script>
<style lang="scss" scoped>
.ldhfsamy {
<style lang="scss" module>
.root {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
grid-gap: var(--margin);
}
.emoji {
display: flex;
align-items: center;
padding: 11px;
text-align: left;
border: solid 1px var(--panel);
width: 100%;
div > .emoji {
display: flex;
align-items: center;
padding: 11px;
text-align: left;
border: solid 1px var(--panel);
width: 100%;
&:hover {
border-color: var(--inputBorderHover);
}
&: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;
}
}
}
&.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;
}
.emoji-draft {
.info {
opacity: 0.5;
text-overflow: ellipsis;
overflow: hidden;
}
.emojirequest {
--c: rgb(255 196 0 / 15%);;
background-image: linear-gradient(45deg,var(--c) 16.67%,transparent 16.67%,transparent 50%,var(--c) 50%,var(--c) 66.67%,transparent 66.67%,transparent 100%);
background-size: 16px 16px;