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

* enhance(frontend): アイコンデコレーション管理画面にプレビューを追加 * Update Changelog * tweak
1673beta · Sep 6, 2024 · ec799fb · ec799fb
1 parent 44613d0
commit ec799fb
Show file tree

Hide file tree

Showing 2 changed files with 70 additions and 43 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,7 +4,9 @@
 -
 
 ### Client
--
+- サイズ制限を超過するファイルをアップロードしようとした際にエラーを出すように
+- Enhance: アイコンデコレーション管理画面にプレビューを追加
+- Fix: サーバーメトリクスが2つ以上あるとリロード直後の表示がおかしくなる問題を修正
 
 ### Server
 - Fix: WSの`readAllNotifications` メッセージが `body` を持たない場合に動作しない問題 #14374

diff --git a/packages/frontend/src/pages/avatar-decorations.vue b/packages/frontend/src/pages/avatar-decorations.vue
@@ -12,27 +12,31 @@ SPDX-License-Identifier: AGPL-3.0-only
 				<template #label>{{ avatarDecoration.name }}</template>
 				<template #caption>{{ avatarDecoration.description }}</template>
 
-				<div class="_gaps_m">
-					<MkInput v-model="avatarDecoration.name">
-						<template #label>{{ i18n.ts.name }}</template>
-					</MkInput>
-					<MkTextarea v-model="avatarDecoration.description">
-						<template #label>{{ i18n.ts.description }}</template>
-					</MkTextarea>
-					<div :class="$style.imageSelectdiv">
-						<p>{{ i18n.ts.image }}</p>
-						<MkButton @click="ev => changeImage(ev, avatarDecoration)">{{ i18n.ts.selectFile }}</MkButton>
-					</div>
-					<MkInput v-model="avatarDecoration.url">
-						<template #label>{{ i18n.ts.imageUrl }}</template>
-					</MkInput>
-					<div v-if="avatarDecoration.url !== ''" :class="$style.imgContainer">
-						<img src="https://misskey-hub.net/avatar-decoration-template.png" :class="$style.img" style="opacity: .5;"/>
-						<img :src="avatarDecoration.url" :class="$style.img"/>
-					</div>
-					<div class="buttons _buttons">
-						<MkButton class="button" inline primary @click="save(avatarDecoration)"><i class="ti ti-device-floppy"></i> {{ i18n.ts.save }}</MkButton>
-						<MkButton v-if="avatarDecoration.id != null" class="button" inline danger @click="del(avatarDecoration)"><i class="ti ti-trash"></i> {{ i18n.ts.delete }}</MkButton>
+				<div :class="$style.editorRoot">
+					<div :class="$style.editorWrapper">
+						<div :class="$style.preview">
+							<div :class="[$style.previewItem, $style.light]">
+								<MkAvatar style="width: 60px; height: 60px;" :user="$i" :decorations="[avatarDecoration]" forceShowDecoration/>
+							</div>
+							<div :class="[$style.previewItem, $style.dark]">
+								<MkAvatar style="width: 60px; height: 60px;" :user="$i" :decorations="[avatarDecoration]" forceShowDecoration/>
+							</div>
+						</div>
+						<div class="_gaps_m">
+							<MkInput v-model="avatarDecoration.name">
+								<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>
 			</MkFolder>
@@ -47,6 +51,7 @@ import * as Misskey from 'cherrypick-js';
 import MkButton from '@/components/MkButton.vue';
 import MkInput from '@/components/MkInput.vue';
 import MkTextarea from '@/components/MkTextarea.vue';
+import { signinRequired } from '@/account.js';
 import * as os from '@/os.js';
 import { misskeyApi } from '@/scripts/misskey-api.js';
 import { i18n } from '@/i18n.js';
@@ -56,6 +61,8 @@ import { selectFile } from '@/scripts/select-file.js';
 
 const avatarDecorations = ref<Misskey.entities.AdminAvatarDecorationsListResponse>([]);
 
+const $i = signinRequired();
+
 async function changeImage(ev, avatarDecoration) {
 	const file = await selectFile(ev.currentTarget ?? ev.target, null);
 	if (file != null) {
@@ -117,35 +124,53 @@ definePageMetadata(() => ({
 </script>
 
 <style lang="scss" module>
-.imageSelectdiv {
-	display: flex;
-	align-items: center;
-	gap: 1em;
-
-	> p {
-		margin: 0;
-	}
+.editorRoot {
+	container: editor / inline-size;
 }
 
-.imgContainer {
-	position: relative;
-	margin: 8px;
-	width: 128px;
-	height: 128px;
+.editorWrapper {
+	display: grid;
+	grid-template-columns: 1fr;
+	grid-template-rows: auto auto;
+	gap: var(--margin);
 }
 
-.img {
-	display: block;
-
-	position: absolute;
-	left: 0;
-	top: 0;
+.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);
 
-	object-fit: contain;
-	pointer-events: none;
+	&.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>