Enhance(frontend): MkCustomEmojiDetailedDialogを調整 (#13015)

* MkEmojiDetailedDialogを調整

* 絵文字ライセンスでMFMを使えるように

* <a> -> <MkLink>

* 入力ボックスでmfmのオートコンプリートを効かせる
This commit is contained in:
1Step621 2024-01-17 14:29:24 +09:00 committed by GitHub
parent bc5aebe956
commit acab9ccb81
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 7 additions and 5 deletions

View file

@ -10,9 +10,9 @@ SPDX-License-Identifier: AGPL-3.0-only
<MkSpacer> <MkSpacer>
<div style="display: flex; flex-direction: column; gap: 1em;"> <div style="display: flex; flex-direction: column; gap: 1em;">
<div :class="$style.emojiImgWrapper"> <div :class="$style.emojiImgWrapper">
<MkCustomEmoji :name="emoji.name" :normal="true" style="height: 100%;"></MkCustomEmoji> <MkCustomEmoji :name="emoji.name" :normal="true" :useOriginalSize="true" style="height: 100%;"></MkCustomEmoji>
</div> </div>
<MkKeyValue> <MkKeyValue :copy="`:${emoji.name}:`">
<template #key>{{ i18n.ts.name }}</template> <template #key>{{ i18n.ts.name }}</template>
<template #value>{{ emoji.name }}</template> <template #value>{{ emoji.name }}</template>
</MkKeyValue> </MkKeyValue>
@ -41,12 +41,12 @@ SPDX-License-Identifier: AGPL-3.0-only
</MkKeyValue> </MkKeyValue>
<MkKeyValue> <MkKeyValue>
<template #key>{{ i18n.ts.license }}</template> <template #key>{{ i18n.ts.license }}</template>
<template #value>{{ emoji.license ?? i18n.ts.none }}</template> <template #value><Mfm :text="emoji.license ?? i18n.ts.none" /></template>
</MkKeyValue> </MkKeyValue>
<MkKeyValue :copy="emoji.url"> <MkKeyValue :copy="emoji.url">
<template #key>{{ i18n.ts.emojiUrl }}</template> <template #key>{{ i18n.ts.emojiUrl }}</template>
<template #value> <template #value>
<a :href="emoji.url" target="_blank">{{ emoji.url }}</a> <MkLink :url="emoji.url" target="_blank">{{ emoji.url }}</MkLink>
</template> </template>
</MkKeyValue> </MkKeyValue>
</div> </div>
@ -61,6 +61,7 @@ import { defineProps, shallowRef } from 'vue';
import { i18n } from '@/i18n.js'; import { i18n } from '@/i18n.js';
import MkModalWindow from '@/components/MkModalWindow.vue'; import MkModalWindow from '@/components/MkModalWindow.vue';
import MkKeyValue from '@/components/MkKeyValue.vue'; import MkKeyValue from '@/components/MkKeyValue.vue';
import MkLink from './MkLink.vue';
const props = defineProps<{ const props = defineProps<{
emoji: Misskey.entities.EmojiDetailed, emoji: Misskey.entities.EmojiDetailed,
}>(); }>();
@ -94,6 +95,7 @@ const cancel = () => {
.alias { .alias {
display: inline-block; display: inline-block;
word-break: break-all;
padding: 3px 10px; padding: 3px 10px;
background-color: var(--X5); background-color: var(--X5);
border: solid 1px var(--divider); border: solid 1px var(--divider);

View file

@ -44,7 +44,7 @@ SPDX-License-Identifier: AGPL-3.0-only
{{ i18n.ts.setMultipleBySeparatingWithSpace }} {{ i18n.ts.setMultipleBySeparatingWithSpace }}
</template> </template>
</MkInput> </MkInput>
<MkInput v-model="license"> <MkInput v-model="license" :mfmAutocomplete="true">
<template #label>{{ i18n.ts.license }}</template> <template #label>{{ i18n.ts.license }}</template>
</MkInput> </MkInput>
<MkFolder> <MkFolder>