natty
/
calckey
1
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

tweak component

This commit is contained in:
syuilo 2021-12-10 21:41:37 +09:00
parent 0f7241c2c2
commit 48212e7a44
1 changed files with 79 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

127
packages/client/src/pages/admin/emojis.vue
View File

@ -1,50 +1,54 @@
<template> <template>
<div class="ogwlenmc"> <MkSpacer :content-max="900">
<div v-if="tab === 'local'" class="local"> <div class="ogwlenmc">
<MkInput v-model="query" :debounce="true" type="search" style="margin: var(--margin);"> <div v-if="tab === 'local'" class="local">
<template #prefix><i class="fas fa-search"></i></template> <MkInput v-model="query" :debounce="true" type="search">
<template #label>{{ $ts.search }}</template> <template #prefix><i class="fas fa-search"></i></template>
</MkInput> <template #label>{{ $ts.search }}</template>
<MkPagination ref="emojis" :pagination="pagination"> </MkInput>
<template #empty><span>{{ $ts.noCustomEmojis }}</span></template> <MkPagination ref="emojis" :pagination="pagination">
<template v-slot="{items}"> <template #empty><span>{{ $ts.noCustomEmojis }}</span></template>
<div class="ldhfsamy"> <template v-slot="{items}">
<button v-for="emoji in items" :key="emoji.id" class="emoji _panel _button" @click="edit(emoji)"> <div class="ldhfsamy">
<img :src="emoji.url" class="img" :alt="emoji.name"/> <button v-for="emoji in items" :key="emoji.id" class="emoji _panel _button" @click="edit(emoji)">
<div class="body"> <img :src="emoji.url" class="img" :alt="emoji.name"/>
<div class="name _monospace">{{ emoji.name }}</div> <div class="body">
<div class="info">{{ emoji.category }}</div> <div class="name _monospace">{{ emoji.name }}</div>
</div> <div class="info">{{ emoji.category }}</div>
</button> </div>
</div> </button>
</template> </div>
</MkPagination> </template>
</div> </MkPagination>
</div>
<div v-else-if="tab === 'remote'" class="remote"> <div v-else-if="tab === 'remote'" class="remote">
<MkInput v-model="queryRemote" :debounce="true" type="search" style="margin: var(--margin);"> <div class="_inputSplit">
<template #prefix><i class="fas fa-search"></i></template> <MkInput v-model="queryRemote" :debounce="true" type="search">
<template #label>{{ $ts.search }}</template> <template #prefix><i class="fas fa-search"></i></template>
</MkInput> <template #label>{{ $ts.search }}</template>
<MkInput v-model="host" :debounce="true" style="margin: var(--margin);"> </MkInput>
<template #label>{{ $ts.host }}</template> <MkInput v-model="host" :debounce="true">
</MkInput> <template #label>{{ $ts.host }}</template>
<MkPagination ref="remoteEmojis" :pagination="remotePagination"> </MkInput>
<template #empty><span>{{ $ts.noCustomEmojis }}</span></template> </div>
<template v-slot="{items}"> <MkPagination ref="remoteEmojis" :pagination="remotePagination">
<div class="ldhfsamy"> <template #empty><span>{{ $ts.noCustomEmojis }}</span></template>
<div v-for="emoji in items" :key="emoji.id" class="emoji _panel _button" @click="remoteMenu(emoji, $event)"> <template v-slot="{items}">
<img :src="emoji.url" class="img" :alt="emoji.name"/> <div class="ldhfsamy">
<div class="body"> <div v-for="emoji in items" :key="emoji.id" class="emoji _panel _button" @click="remoteMenu(emoji, $event)">
<div class="name _monospace">{{ emoji.name }}</div> <img :src="emoji.url" class="img" :alt="emoji.name"/>
<div class="info">{{ emoji.host }}</div> <div class="body">
<div class="name _monospace">{{ emoji.name }}</div>
<div class="info">{{ emoji.host }}</div>
</div>
</div> </div>
</div> </div>
</div> </template>
</template> </MkPagination>
</MkPagination> </div>
</div> </div>
</div> </MkSpacer>
</template> </template>
<script lang="ts"> <script lang="ts">
@ -78,6 +82,9 @@ export default defineComponent({
icon: 'fas fa-plus', icon: 'fas fa-plus',
text: this.$ts.addEmoji, text: this.$ts.addEmoji,
handler: this.add, handler: this.add,
}, {
icon: 'fas fa-ellipsis-h',
handler: this.menu,
}], }],
tabs: [{ tabs: [{
active: this.tab === 'local', active: this.tab === 'local',
@ -160,6 +167,28 @@ export default defineComponent({
icon: 'fas fa-plus', icon: 'fas fa-plus',
action: () => { this.im(emoji) } action: () => { this.im(emoji) }
}], ev.currentTarget || ev.target); }], ev.currentTarget || ev.target);
},
menu(ev) {
os.popupMenu([{
icon: 'fas fa-download',
text: this.$ts.export,
action: async () => {
os.api('export-custom-emojis', {
})
.then(() => {
os.alert({
type: 'info',
text: this.$ts.exportRequested,
});
}).catch((e) => {
os.alert({
type: 'error',
text: e.message,
});
});
}
}], ev.currentTarget || ev.target);
} }
} }
}); });
@ -168,15 +197,15 @@ export default defineComponent({
<style lang="scss" scoped> <style lang="scss" scoped>
.ogwlenmc { .ogwlenmc {
> .local { > .local {
.empty { .empty {
margin: var(--margin); margin: var(--margin);
} }
.ldhfsamy { .ldhfsamy {
display: grid; display: grid;
grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
grid-gap: 12px; grid-gap: 12px;
margin: var(--margin); margin: var(--margin) 0;
> .emoji { > .emoji {
display: flex; display: flex;
@ -214,15 +243,15 @@ export default defineComponent({
} }
> .remote { > .remote {
.empty { .empty {
margin: var(--margin); margin: var(--margin);
} }
.ldhfsamy { .ldhfsamy {
display: grid; display: grid;
grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
grid-gap: 12px; grid-gap: 12px;
margin: var(--margin); margin: var(--margin) 0;
> .emoji { > .emoji {
display: flex; display: flex;