enhance(frontend): アイコンデコレーション管理画面にプレビューを追加 (#14511)
* enhance(frontend): アイコンデコレーション管理画面にプレビューを追加 * Update Changelog * tweak
This commit is contained in:
parent
c8f49b6ae7
commit
f7398faeac
|
@ -5,6 +5,7 @@
|
||||||
|
|
||||||
### Client
|
### Client
|
||||||
- サイズ制限を超過するファイルをアップロードしようとした際にエラーを出すように
|
- サイズ制限を超過するファイルをアップロードしようとした際にエラーを出すように
|
||||||
|
- Enhance: アイコンデコレーション管理画面にプレビューを追加
|
||||||
- Fix: サーバーメトリクスが2つ以上あるとリロード直後の表示がおかしくなる問題を修正
|
- Fix: サーバーメトリクスが2つ以上あるとリロード直後の表示がおかしくなる問題を修正
|
||||||
|
|
||||||
### Server
|
### Server
|
||||||
|
|
|
@ -12,19 +12,31 @@ SPDX-License-Identifier: AGPL-3.0-only
|
||||||
<template #label>{{ avatarDecoration.name }}</template>
|
<template #label>{{ avatarDecoration.name }}</template>
|
||||||
<template #caption>{{ avatarDecoration.description }}</template>
|
<template #caption>{{ avatarDecoration.description }}</template>
|
||||||
|
|
||||||
<div class="_gaps_m">
|
<div :class="$style.editorRoot">
|
||||||
<MkInput v-model="avatarDecoration.name">
|
<div :class="$style.editorWrapper">
|
||||||
<template #label>{{ i18n.ts.name }}</template>
|
<div :class="$style.preview">
|
||||||
</MkInput>
|
<div :class="[$style.previewItem, $style.light]">
|
||||||
<MkTextarea v-model="avatarDecoration.description">
|
<MkAvatar style="width: 60px; height: 60px;" :user="$i" :decorations="[avatarDecoration]" forceShowDecoration/>
|
||||||
<template #label>{{ i18n.ts.description }}</template>
|
</div>
|
||||||
</MkTextarea>
|
<div :class="[$style.previewItem, $style.dark]">
|
||||||
<MkInput v-model="avatarDecoration.url">
|
<MkAvatar style="width: 60px; height: 60px;" :user="$i" :decorations="[avatarDecoration]" forceShowDecoration/>
|
||||||
<template #label>{{ i18n.ts.imageUrl }}</template>
|
</div>
|
||||||
</MkInput>
|
</div>
|
||||||
<div class="buttons _buttons">
|
<div class="_gaps_m">
|
||||||
<MkButton class="button" inline primary @click="save(avatarDecoration)"><i class="ti ti-device-floppy"></i> {{ i18n.ts.save }}</MkButton>
|
<MkInput v-model="avatarDecoration.name">
|
||||||
<MkButton v-if="avatarDecoration.id != null" class="button" inline danger @click="del(avatarDecoration)"><i class="ti ti-trash"></i> {{ i18n.ts.delete }}</MkButton>
|
<template #label>{{ i18n.ts.name }}</template>
|
||||||
|
</MkInput>
|
||||||
|
<MkTextarea v-model="avatarDecoration.description">
|
||||||
|
<template #label>{{ i18n.ts.description }}</template>
|
||||||
|
</MkTextarea>
|
||||||
|
<MkInput v-model="avatarDecoration.url">
|
||||||
|
<template #label>{{ i18n.ts.imageUrl }}</template>
|
||||||
|
</MkInput>
|
||||||
|
<div class="_buttons">
|
||||||
|
<MkButton inline primary @click="save(avatarDecoration)"><i class="ti ti-device-floppy"></i> {{ i18n.ts.save }}</MkButton>
|
||||||
|
<MkButton v-if="avatarDecoration.id != null" inline danger @click="del(avatarDecoration)"><i class="ti ti-trash"></i> {{ i18n.ts.delete }}</MkButton>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</MkFolder>
|
</MkFolder>
|
||||||
|
@ -39,6 +51,7 @@ import * as Misskey from 'misskey-js';
|
||||||
import MkButton from '@/components/MkButton.vue';
|
import MkButton from '@/components/MkButton.vue';
|
||||||
import MkInput from '@/components/MkInput.vue';
|
import MkInput from '@/components/MkInput.vue';
|
||||||
import MkTextarea from '@/components/MkTextarea.vue';
|
import MkTextarea from '@/components/MkTextarea.vue';
|
||||||
|
import { signinRequired } from '@/account.js';
|
||||||
import * as os from '@/os.js';
|
import * as os from '@/os.js';
|
||||||
import { misskeyApi } from '@/scripts/misskey-api.js';
|
import { misskeyApi } from '@/scripts/misskey-api.js';
|
||||||
import { i18n } from '@/i18n.js';
|
import { i18n } from '@/i18n.js';
|
||||||
|
@ -47,6 +60,8 @@ import MkFolder from '@/components/MkFolder.vue';
|
||||||
|
|
||||||
const avatarDecorations = ref<Misskey.entities.AdminAvatarDecorationsListResponse>([]);
|
const avatarDecorations = ref<Misskey.entities.AdminAvatarDecorationsListResponse>([]);
|
||||||
|
|
||||||
|
const $i = signinRequired();
|
||||||
|
|
||||||
function add() {
|
function add() {
|
||||||
avatarDecorations.value.unshift({
|
avatarDecorations.value.unshift({
|
||||||
_id: Math.random().toString(36),
|
_id: Math.random().toString(36),
|
||||||
|
@ -99,3 +114,55 @@ definePageMetadata(() => ({
|
||||||
icon: 'ti ti-sparkles',
|
icon: 'ti ti-sparkles',
|
||||||
}));
|
}));
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" module>
|
||||||
|
.editorRoot {
|
||||||
|
container: editor / inline-size;
|
||||||
|
}
|
||||||
|
|
||||||
|
.editorWrapper {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
grid-template-rows: auto auto;
|
||||||
|
gap: var(--margin);
|
||||||
|
}
|
||||||
|
|
||||||
|
.preview {
|
||||||
|
display: grid;
|
||||||
|
place-items: center;
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
grid-template-rows: 1fr;
|
||||||
|
gap: var(--margin);
|
||||||
|
}
|
||||||
|
|
||||||
|
.previewItem {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
min-height: 160px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
border-radius: var(--radius);
|
||||||
|
|
||||||
|
&.light {
|
||||||
|
background: #eee;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.dark {
|
||||||
|
background: #222;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@container editor (min-width: 600px) {
|
||||||
|
.editorWrapper {
|
||||||
|
grid-template-columns: 200px 1fr;
|
||||||
|
grid-template-rows: 1fr;
|
||||||
|
gap: calc(var(--margin) * 2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.preview {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
grid-template-rows: 1fr 1fr;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
Loading…
Reference in New Issue