diff options
Diffstat (limited to 'packages/frontend/src/components/MkCustomEmojiDetailedDialog.vue')
| -rw-r--r-- | packages/frontend/src/components/MkCustomEmojiDetailedDialog.vue | 108 |
1 files changed, 56 insertions, 52 deletions
diff --git a/packages/frontend/src/components/MkCustomEmojiDetailedDialog.vue b/packages/frontend/src/components/MkCustomEmojiDetailedDialog.vue index 84b5375a41..c7f1288729 100644 --- a/packages/frontend/src/components/MkCustomEmojiDetailedDialog.vue +++ b/packages/frontend/src/components/MkCustomEmojiDetailedDialog.vue @@ -4,77 +4,81 @@ SPDX-License-Identifier: AGPL-3.0-only --> <template> - <MkModalWindow ref="dialogEl" @close="cancel()" @closed="$emit('closed')"> - <template #header>:{{ emoji.name }}:</template> - <template #default> - <MkSpacer> - <div style="display: flex; flex-direction: column; gap: 1em;"> - <div :class="$style.emojiImgWrapper"> - <MkCustomEmoji :name="emoji.name" :normal="true" :useOriginalSize="true" style="height: 100%;"></MkCustomEmoji> - </div> - <MkKeyValue :copy="`:${emoji.name}:`"> - <template #key>{{ i18n.ts.name }}</template> - <template #value>{{ emoji.name }}</template> - </MkKeyValue> - <MkKeyValue> - <template #key>{{ i18n.ts.tags }}</template> - <template #value> - <div v-if="emoji.aliases.length === 0">{{ i18n.ts.none }}</div> - <div v-else :class="$style.aliases"> - <span v-for="alias in emoji.aliases" :key="alias" :class="$style.alias"> - {{ alias }} - </span> - </div> - </template> - </MkKeyValue> - <MkKeyValue> - <template #key>{{ i18n.ts.category }}</template> - <template #value>{{ emoji.category ?? i18n.ts.none }}</template> - </MkKeyValue> - <MkKeyValue> - <template #key>{{ i18n.ts.sensitive }}</template> - <template #value>{{ emoji.isSensitive ? i18n.ts.yes : i18n.ts.no }}</template> - </MkKeyValue> - <MkKeyValue> - <template #key>{{ i18n.ts.localOnly }}</template> - <template #value>{{ emoji.localOnly ? i18n.ts.yes : i18n.ts.no }}</template> - </MkKeyValue> - <MkKeyValue> - <template #key>{{ i18n.ts.license }}</template> - <template #value><Mfm :text="emoji.license ?? i18n.ts.none" /></template> - </MkKeyValue> - <MkKeyValue :copy="emoji.url"> - <template #key>{{ i18n.ts.emojiUrl }}</template> - <template #value> - <MkLink :url="emoji.url" target="_blank">{{ emoji.url }}</MkLink> - </template> - </MkKeyValue> - </div> - </MkSpacer> - </template> - </MkModalWindow> +<MkModalWindow ref="dialogEl" @close="cancel()" @closed="$emit('closed')"> + <template #header>:{{ emoji.name }}:</template> + <template #default> + <MkSpacer> + <div style="display: flex; flex-direction: column; gap: 1em;"> + <div :class="$style.emojiImgWrapper"> + <MkCustomEmoji :name="emoji.name" :normal="true" :useOriginalSize="true" style="height: 100%;"></MkCustomEmoji> + </div> + <MkKeyValue :copy="`:${emoji.name}:`"> + <template #key>{{ i18n.ts.name }}</template> + <template #value>{{ emoji.name }}</template> + </MkKeyValue> + <MkKeyValue> + <template #key>{{ i18n.ts.tags }}</template> + <template #value> + <div v-if="emoji.aliases.length === 0">{{ i18n.ts.none }}</div> + <div v-else :class="$style.aliases"> + <span v-for="alias in emoji.aliases" :key="alias" :class="$style.alias"> + {{ alias }} + </span> + </div> + </template> + </MkKeyValue> + <MkKeyValue> + <template #key>{{ i18n.ts.category }}</template> + <template #value>{{ emoji.category ?? i18n.ts.none }}</template> + </MkKeyValue> + <MkKeyValue> + <template #key>{{ i18n.ts.sensitive }}</template> + <template #value>{{ emoji.isSensitive ? i18n.ts.yes : i18n.ts.no }}</template> + </MkKeyValue> + <MkKeyValue> + <template #key>{{ i18n.ts.localOnly }}</template> + <template #value>{{ emoji.localOnly ? i18n.ts.yes : i18n.ts.no }}</template> + </MkKeyValue> + <MkKeyValue> + <template #key>{{ i18n.ts.license }}</template> + <template #value><Mfm :text="emoji.license ?? i18n.ts.none"/></template> + </MkKeyValue> + <MkKeyValue :copy="emoji.url"> + <template #key>{{ i18n.ts.emojiUrl }}</template> + <template #value> + <MkLink :url="emoji.url" target="_blank">{{ emoji.url }}</MkLink> + </template> + </MkKeyValue> + </div> + </MkSpacer> + </template> +</MkModalWindow> </template> <script lang="ts" setup> import * as Misskey from 'misskey-js'; import { defineProps, shallowRef } from 'vue'; +import MkLink from '@/components/MkLink.vue'; import { i18n } from '@/i18n.js'; import MkModalWindow from '@/components/MkModalWindow.vue'; import MkKeyValue from '@/components/MkKeyValue.vue'; -import MkLink from './MkLink.vue'; + const props = defineProps<{ emoji: Misskey.entities.EmojiDetailed, }>(); + const emit = defineEmits<{ (ev: 'ok', cropped: Misskey.entities.DriveFile): void; (ev: 'cancel'): void; (ev: 'closed'): void; }>(); + const dialogEl = shallowRef<InstanceType<typeof MkModalWindow>>(); -const cancel = () => { + +function cancel() { emit('cancel'); dialogEl.value!.close(); -}; +} </script> <style lang="scss" module> |