enhance(frontend): アイコンデコレーション管理画面にプレビューを追加 (#14511)

* enhance(frontend): アイコンデコレーション管理画面にプレビューを追加

* Update Changelog

* tweak
This commit is contained in:
かっこかり 2024-09-06 15:37:03 +09:00 committed by GitHub
parent c8f49b6ae7
commit f7398faeac
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 81 additions and 13 deletions

View File

@ -5,6 +5,7 @@
### Client ### Client
- サイズ制限を超過するファイルをアップロードしようとした際にエラーを出すように - サイズ制限を超過するファイルをアップロードしようとした際にエラーを出すように
- Enhance: アイコンデコレーション管理画面にプレビューを追加
- Fix: サーバーメトリクスが2つ以上あるとリロード直後の表示がおかしくなる問題を修正 - Fix: サーバーメトリクスが2つ以上あるとリロード直後の表示がおかしくなる問題を修正
### Server ### Server

View File

@ -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>