From 535905780a2d8648cd043fdeaef3a8c9e8a6e343 Mon Sep 17 00:00:00 2001
From: Leo Vasanko <leo@git>
Date: Sun, 12 Nov 2023 11:55:28 +0000
Subject: [PATCH] Refactor file modified/size fields components, style
 different sizes

---
 frontend/src/components/FileExplorer.vue | 17 +++----------
 frontend/src/components/FileModified.vue | 22 ++++++++++++++++
 frontend/src/components/FileSize.vue     | 32 ++++++++++++++++++++++++
 3 files changed, 58 insertions(+), 13 deletions(-)
 create mode 100644 frontend/src/components/FileModified.vue
 create mode 100644 frontend/src/components/FileSize.vue

diff --git a/frontend/src/components/FileExplorer.vue b/frontend/src/components/FileExplorer.vue
index 5b7e8f8..a12586f 100644
--- a/frontend/src/components/FileExplorer.vue
+++ b/frontend/src/components/FileExplorer.vue
@@ -48,12 +48,8 @@
             "
           />
         </td>
-        <td class="modified right">
-          <time :datetime="new Date(editing.mtime).toISOString().replace('.000', '')">{{
-            editing.modified
-          }}</time>
-        </td>
-        <td class="size right">{{ editing.sizedisp }}</td>
+        <FileModified :doc=editing />
+        <FileSize :doc=editing />
         <td class="menu"></td>
       </tr>
       <template
@@ -111,13 +107,8 @@
               </button>
             </template>
           </td>
-          <td class="modified right">
-            <time
-              :data-tooltip="new Date(1000 * doc.mtime).toISOString().replace('T', '\n').replace('.000Z', ' UTC')"
-              >{{ doc.modified }}</time
-            >
-          </td>
-          <td class="size right">{{ doc.sizedisp }}</td>
+          <FileModified :doc=doc />
+          <FileSize :doc=doc />
           <td class="menu">
             <button
               tabindex="-1"
diff --git a/frontend/src/components/FileModified.vue b/frontend/src/components/FileModified.vue
new file mode 100644
index 0000000..b6950ae
--- /dev/null
+++ b/frontend/src/components/FileModified.vue
@@ -0,0 +1,22 @@
+<template>
+  <td class="modified right">
+    <time :data-tooltip=tooltip :datetime=datetime>{{ doc.modified }}</time>
+  </td>
+</template>
+
+<script setup lang="ts">
+import type { Document } from '@/repositories/Document'
+import { computed } from 'vue'
+
+const datetime = computed(() =>
+  new Date(1000 * props.doc.mtime).toISOString().replace('.000Z', 'Z')
+)
+
+const tooltip = computed(() =>
+  datetime.value.replace('T', '\n').replace('Z', ' UTC')
+)
+
+const props = defineProps<{
+    doc: Document
+}>()
+</script>
diff --git a/frontend/src/components/FileSize.vue b/frontend/src/components/FileSize.vue
new file mode 100644
index 0000000..fbc0bfe
--- /dev/null
+++ b/frontend/src/components/FileSize.vue
@@ -0,0 +1,32 @@
+<template>
+  <td class="size right" :class=sizeClass>{{ doc.sizedisp }}</td>
+</template>
+
+<script setup lang="ts">
+import type { Document } from '@/repositories/Document'
+import { computed } from 'vue'
+
+const sizeClass = computed(() => props.doc.sizedisp.split('\u202F').slice(-1)[0])
+
+const props = defineProps<{
+    doc: Document
+}>()
+</script>
+
+<style>
+.size.empty {
+  opacity: 50%;
+}
+.size.bytes {
+  opacity: 60%;
+}
+.size.kB {
+  opacity: 70%;
+}
+.size.MB {
+  opacity: 80%;
+}
+.size.GB {
+  opacity: 90%;
+}
+</style>