From 48212e7a444b7dc39d8d0549a93c5748ca89d983 Mon Sep 17 00:00:00 2001 From: syuilo <Syuilotan@yahoo.co.jp> Date: Fri, 10 Dec 2021 21:41:37 +0900 Subject: [PATCH] tweak component --- packages/client/src/pages/admin/emojis.vue | 129 +++++++++++++-------- 1 file changed, 79 insertions(+), 50 deletions(-) diff --git a/packages/client/src/pages/admin/emojis.vue b/packages/client/src/pages/admin/emojis.vue index a4ac5dcebf..49277325a0 100644 --- a/packages/client/src/pages/admin/emojis.vue +++ b/packages/client/src/pages/admin/emojis.vue @@ -1,50 +1,54 @@ <template> -<div class="ogwlenmc"> - <div v-if="tab === 'local'" class="local"> - <MkInput v-model="query" :debounce="true" type="search" style="margin: var(--margin);"> - <template #prefix><i class="fas fa-search"></i></template> - <template #label>{{ $ts.search }}</template> - </MkInput> - <MkPagination ref="emojis" :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" @click="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> +<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> + <MkPagination ref="emojis" :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" @click="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"> - <MkInput v-model="queryRemote" :debounce="true" type="search" style="margin: var(--margin);"> - <template #prefix><i class="fas fa-search"></i></template> - <template #label>{{ $ts.search }}</template> - </MkInput> - <MkInput v-model="host" :debounce="true" style="margin: var(--margin);"> - <template #label>{{ $ts.host }}</template> - </MkInput> - <MkPagination ref="remoteEmojis" :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 v-else-if="tab === 'remote'" class="remote"> + <div class="_inputSplit"> + <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> + </div> + <MkPagination ref="remoteEmojis" :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> - </div> - </template> - </MkPagination> + </template> + </MkPagination> + </div> </div> -</div> +</MkSpacer> </template> <script lang="ts"> @@ -78,6 +82,9 @@ export default defineComponent({ icon: 'fas fa-plus', text: this.$ts.addEmoji, handler: this.add, + }, { + icon: 'fas fa-ellipsis-h', + handler: this.menu, }], tabs: [{ active: this.tab === 'local', @@ -160,6 +167,28 @@ export default defineComponent({ icon: 'fas fa-plus', action: () => { this.im(emoji) } }], 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> .ogwlenmc { > .local { - .empty { - margin: var(--margin); + .empty { + margin: var(--margin); } .ldhfsamy { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); grid-gap: 12px; - margin: var(--margin); + margin: var(--margin) 0; > .emoji { display: flex; @@ -214,15 +243,15 @@ export default defineComponent({ } > .remote { - .empty { - margin: var(--margin); - } - + .empty { + margin: var(--margin); + } + .ldhfsamy { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); grid-gap: 12px; - margin: var(--margin); + margin: var(--margin) 0; > .emoji { display: flex;