summaryrefslogtreecommitdiff
path: root/src/client/pages/instance/emojis.vue
diff options
context:
space:
mode:
Diffstat (limited to 'src/client/pages/instance/emojis.vue')
-rw-r--r--src/client/pages/instance/emojis.vue222
1 files changed, 111 insertions, 111 deletions
diff --git a/src/client/pages/instance/emojis.vue b/src/client/pages/instance/emojis.vue
index 722ed0063f..fd641703cb 100644
--- a/src/client/pages/instance/emojis.vue
+++ b/src/client/pages/instance/emojis.vue
@@ -1,58 +1,52 @@
<template>
-<div class="mk-instance-emojis">
- <div class="_section" style="padding: 0;">
- <MkTab v-model:value="tab">
- <option value="local">{{ $ts.local }}</option>
- <option value="remote">{{ $ts.remote }}</option>
- </MkTab>
- </div>
+<div class="ogwlenmc">
+ <MkTab v-model:value="tab">
+ <option value="local">{{ $ts.local }}</option>
+ <option value="remote">{{ $ts.remote }}</option>
+ </MkTab>
- <div class="_section">
- <div class="local" v-if="tab === 'local'">
- <MkButton primary @click="add" style="margin: 0 auto var(--margin) auto;"><Fa :icon="faPlus"/> {{ $ts.addEmoji }}</MkButton>
- <MkInput v-model:value="query" :debounce="true" type="search"><template #icon><Fa :icon="faSearch"/></template><span>{{ $ts.search }}</span></MkInput>
- <MkPagination :pagination="pagination" ref="emojis">
- <template #empty><span>{{ $ts.noCustomEmojis }}</span></template>
- <template #default="{items}">
- <div class="emojis">
- <button class="emoji _panel _button" v-for="emoji in items" :key="emoji.id" @click="edit(emoji)">
- <img :src="emoji.url" class="img" :alt="emoji.name"/>
- <div class="body">
- <div class="name">{{ emoji.name }}</div>
- <div class="info">{{ emoji.category }}</div>
- </div>
- </button>
- </div>
- </template>
- </MkPagination>
- </div>
+ <div class="local" v-if="tab === 'local'">
+ <MkButton primary @click="add" style="margin: var(--margin) auto;"><i class="fas fa-plus"></i> {{ $ts.addEmoji }}</MkButton>
+ <MkInput v-model:value="query" :debounce="true" type="search" style="margin: var(--margin);"><template #icon><i class="fas fa-search"></i></template><span>{{ $ts.search }}</span></MkInput>
+ <MkPagination :pagination="pagination" ref="emojis">
+ <template #empty><span>{{ $ts.noCustomEmojis }}</span></template>
+ <template #default="{items}">
+ <div class="ldhfsamy">
+ <button class="emoji _panel _button" v-for="emoji in items" :key="emoji.id" @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 class="remote" v-else-if="tab === 'remote'">
- <MkInput v-model:value="queryRemote" :debounce="true" type="search"><template #icon><Fa :icon="faSearch"/></template><span>{{ $ts.search }}</span></MkInput>
- <MkInput v-model:value="host" :debounce="true"><span>{{ $ts.host }}</span></MkInput>
- <MkPagination :pagination="remotePagination" ref="remoteEmojis">
- <template #empty><span>{{ $ts.noCustomEmojis }}</span></template>
- <template #default="{items}">
- <div class="emojis">
- <div class="emoji _panel _button" v-for="emoji in items" :key="emoji.id" @click="remoteMenu(emoji, $event)">
- <img :src="emoji.url" class="img" :alt="emoji.name"/>
- <div class="body">
- <div class="name">{{ emoji.name }}</div>
- <div class="info">{{ emoji.host }}</div>
- </div>
+ <div class="remote" v-else-if="tab === 'remote'">
+ <MkInput v-model:value="queryRemote" :debounce="true" type="search" style="margin: var(--margin);"><template #icon><i class="fas fa-search"></i></template><span>{{ $ts.search }}</span></MkInput>
+ <MkInput v-model:value="host" :debounce="true" style="margin: var(--margin);"><span>{{ $ts.host }}</span></MkInput>
+ <MkPagination :pagination="remotePagination" ref="remoteEmojis">
+ <template #empty><span>{{ $ts.noCustomEmojis }}</span></template>
+ <template #default="{items}">
+ <div class="ldhfsamy">
+ <div class="emoji _panel _button" v-for="emoji in items" :key="emoji.id" @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>
- </template>
- </MkPagination>
- </div>
+ </div>
+ </template>
+ </MkPagination>
</div>
</div>
</template>
<script lang="ts">
import { computed, defineComponent } from 'vue';
-import { faPlus, faSave, faSearch } from '@fortawesome/free-solid-svg-icons';
-import { faTrashAlt, faLaugh } from '@fortawesome/free-regular-svg-icons';
import MkButton from '@client/components/ui/button.vue';
import MkInput from '@client/components/ui/input.vue';
import MkPagination from '@client/components/ui/pagination.vue';
@@ -69,13 +63,15 @@ export default defineComponent({
MkPagination,
},
+ emits: ['info'],
+
data() {
return {
[symbols.PAGE_INFO]: {
title: this.$ts.customEmojis,
- icon: faLaugh,
+ icon: 'fas fa-laugh',
action: {
- icon: faPlus,
+ icon: 'fas fa-plus',
handler: this.add
}
},
@@ -98,10 +94,13 @@ export default defineComponent({
host: (this.host && this.host !== '') ? this.host : null
}))
},
- faTrashAlt, faPlus, faLaugh, faSave, faSearch,
}
},
+ async mounted() {
+ this.$emit('info', this[symbols.PAGE_INFO]);
+ },
+
methods: {
async add(e) {
const files = await selectFile(e.currentTarget || e.target, null, true);
@@ -144,7 +143,7 @@ export default defineComponent({
text: ':' + emoji.name + ':',
}, {
text: this.$ts.import,
- icon: faPlus,
+ icon: 'fas fa-plus',
action: () => { this.im(emoji) }
}], ev.currentTarget || ev.target);
}
@@ -153,85 +152,86 @@ export default defineComponent({
</script>
<style lang="scss" scoped>
-.mk-instance-emojis {
- > ._section {
- > .local {
- .emojis {
- display: grid;
- grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
- grid-gap: var(--margin);
-
- > .emoji {
- display: flex;
- align-items: center;
- padding: 12px;
- text-align: left;
+.ogwlenmc {
+ > .local {
+ .ldhfsamy {
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
+ grid-gap: 12px;
+ margin: var(--margin);
+
+ > .emoji {
+ display: flex;
+ align-items: center;
+ padding: 12px;
+ text-align: left;
- &:hover {
- color: var(--accent);
- }
+ &:hover {
+ color: var(--accent);
+ }
- > .img {
- width: 42px;
- height: 42px;
- }
+ > .img {
+ width: 42px;
+ height: 42px;
+ }
- > .body {
- padding: 0 0 0 8px;
- white-space: nowrap;
- overflow: hidden;
+ > .body {
+ padding: 0 0 0 8px;
+ white-space: nowrap;
+ overflow: hidden;
- > .name {
- text-overflow: ellipsis;
- overflow: hidden;
- }
+ > .name {
+ text-overflow: ellipsis;
+ overflow: hidden;
+ }
- > .info {
- opacity: 0.5;
- text-overflow: ellipsis;
- overflow: hidden;
- }
+ > .info {
+ opacity: 0.5;
+ text-overflow: ellipsis;
+ overflow: hidden;
}
}
}
}
+ }
- > .remote {
- .emojis {
- display: grid;
- grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
- grid-gap: var(--margin);
+ > .remote {
+ .ldhfsamy {
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
+ grid-gap: 12px;
+ margin: var(--margin);
- > .emoji {
- display: flex;
- align-items: center;
- padding: 12px;
- text-align: left;
+ > .emoji {
+ display: flex;
+ align-items: center;
+ padding: 12px;
+ text-align: left;
- &:hover {
- color: var(--accent);
- }
+ &:hover {
+ color: var(--accent);
+ }
- > .img {
- width: 32px;
- height: 32px;
- }
+ > .img {
+ width: 32px;
+ height: 32px;
+ }
- > .body {
- padding: 0 0 0 8px;
- white-space: nowrap;
- overflow: hidden;
+ > .body {
+ padding: 0 0 0 8px;
+ white-space: nowrap;
+ overflow: hidden;
- > .name {
- text-overflow: ellipsis;
- overflow: hidden;
- }
+ > .name {
+ text-overflow: ellipsis;
+ overflow: hidden;
+ }
- > .info {
- opacity: 0.5;
- text-overflow: ellipsis;
- overflow: hidden;
- }
+ > .info {
+ opacity: 0.5;
+ font-size: 90%;
+ text-overflow: ellipsis;
+ overflow: hidden;
}
}
}
generated by cgit v1.2.3-freya (git 2.53.0.84.g453e7b744a) at 2026-04-24 23:10:40 +0000