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; + } } } }