From 734fe9fd9daf590150a9cfcdbbb1f9f8b93b1a70 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Sat, 25 Jun 2022 00:03:59 +0900
Subject: [PATCH] chore(client): tweak ui

---
 .../src/components/file-list-for-admin.vue    | 24 +++++++++++++++++--
 1 file changed, 22 insertions(+), 2 deletions(-)

diff --git a/packages/client/src/components/file-list-for-admin.vue b/packages/client/src/components/file-list-for-admin.vue
index 04427de453..59256f90c9 100644
--- a/packages/client/src/components/file-list-for-admin.vue
+++ b/packages/client/src/components/file-list-for-admin.vue
@@ -8,6 +8,7 @@
 			:to="`/admin/file/${file.id}`"
 			class="file _button"
 		>
+			<div v-if="file.isSensitive" class="sensitive-label">{{ i18n.ts.sensitive }}</div>
 			<MkDriveFileThumbnail class="thumbnail" :file="file" fit="contain"/>
 			<div v-if="viewMode === 'list'" class="body">
 				<div>
@@ -15,14 +16,14 @@
 				</div>
 				<div>
 					<MkAcct v-if="file.user" :user="file.user"/>
-					<div v-else>{{ $ts.system }}</div>
+					<div v-else>{{ i18n.ts.system }}</div>
 				</div>
 				<div>
 					<span style="margin-right: 1em;">{{ file.type }}</span>
 					<span>{{ bytes(file.size) }}</span>
 				</div>
 				<div>
-					<span>{{ $ts.registeredDate }}: <MkTime :time="file.createdAt" mode="detail"/></span>
+					<span>{{ i18n.ts.registeredDate }}: <MkTime :time="file.createdAt" mode="detail"/></span>
 				</div>
 			</div>
 		</MkA>
@@ -47,6 +48,11 @@ const props = defineProps<{
 </script>
 
 <style lang="scss" scoped>
+@keyframes sensitive-blink {
+	0% { opacity: 1; }
+	50% { opacity: 0; }
+}
+
 .urempief {
 	margin-top: var(--margin);
 
@@ -86,12 +92,26 @@ const props = defineProps<{
 		margin: var(--margin) 0;
 
 		> .file {
+			position: relative;
 			aspect-ratio: 1;
 		
 			> .thumbnail {
 				width: 100%;
 				height: 100%;
 			}
+
+			> .sensitive-label {
+				position: absolute;
+				z-index: 10;
+				top: 8px;
+				left: 8px;
+				padding: 2px 4px;
+				background: #ff0000bf;
+				color: #fff;
+				border-radius: 4px;
+				font-size: 85%;
+				animation: sensitive-blink 1s infinite;
+			}
 		}
 	}
 }