ae5d052274
to keep things manageable i merged a lot of one off values into just a handful of common sizes, so some parts of the ui will look different than upstream even with the "Misskey" rounding mode
95 lines
1.7 KiB
Vue
95 lines
1.7 KiB
Vue
<!--
|
|
SPDX-FileCopyrightText: syuilo and other misskey contributors
|
|
SPDX-License-Identifier: AGPL-3.0-only
|
|
-->
|
|
|
|
<template>
|
|
<button class="_button" :class="$style.root" @click="menu">
|
|
<img :src="emoji.url" :class="$style.img" loading="lazy"/>
|
|
<div :class="$style.body">
|
|
<div :class="$style.name" class="_monospace">{{ emoji.name }}</div>
|
|
<div :class="$style.info">{{ emoji.aliases.join(' ') }}</div>
|
|
</div>
|
|
</button>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { } from 'vue';
|
|
import * as os from '@/os.js';
|
|
import copyToClipboard from '@/scripts/copy-to-clipboard.js';
|
|
import { i18n } from '@/i18n.js';
|
|
|
|
const props = defineProps<{
|
|
emoji: {
|
|
name: string;
|
|
aliases: string[];
|
|
category: string;
|
|
url: string;
|
|
};
|
|
}>();
|
|
|
|
function menu(ev) {
|
|
os.popupMenu([{
|
|
type: 'label',
|
|
text: ':' + props.emoji.name + ':',
|
|
}, {
|
|
text: i18n.ts.copy,
|
|
icon: 'ph-copy ph-bold ph-lg',
|
|
action: () => {
|
|
copyToClipboard(`:${props.emoji.name}:`);
|
|
os.success();
|
|
},
|
|
}, {
|
|
text: i18n.ts.info,
|
|
icon: 'ph-info ph-bold ph-lg',
|
|
action: () => {
|
|
os.apiGet('emoji', { name: props.emoji.name }).then(res => {
|
|
os.alert({
|
|
type: 'info',
|
|
text: `License: ${res.license}`,
|
|
});
|
|
});
|
|
},
|
|
}], ev.currentTarget ?? ev.target);
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" module>
|
|
.root {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 12px;
|
|
text-align: left;
|
|
background: var(--panel);
|
|
border-radius: var(--radius-sm);
|
|
|
|
&:hover {
|
|
border-color: var(--accent);
|
|
}
|
|
}
|
|
|
|
.img {
|
|
width: 42px;
|
|
height: 42px;
|
|
object-fit: contain;
|
|
}
|
|
|
|
.body {
|
|
padding: 0 0 0 8px;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.name {
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.info {
|
|
opacity: 0.5;
|
|
font-size: 0.9em;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
}
|
|
</style>
|