feat: default file icon + drawer file info

GIP-RECIA · Apr 24, 2024 · 6bd9c61 · 6bd9c61
1 parent 368cb22
commit 6bd9c61
Show file tree

Hide file tree

Showing 5 changed files with 45 additions and 6 deletions.
diff --git a/src/main/webapp/src/assets/main.scss b/src/main/webapp/src/assets/main.scss
@@ -24,3 +24,9 @@
   height: 100vh !important;
   overflow: hidden;
 }
+
+.text-truncated {
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
diff --git a/src/main/webapp/src/components/drawers/information/InformationDrawer.vue b/src/main/webapp/src/components/drawers/information/InformationDrawer.vue
@@ -6,10 +6,13 @@ import ShareTab from '@/components/drawers/information/tabs/ShareTab.vue';
 import { useFileStore } from '@/stores/fileStore.ts';
 import { useHomeStore } from '@/stores/homeStore.ts';
 import { Tabs } from '@/types/enums/Tabs.ts';
+import { dateToDuration } from '@/utils/dateFnsUtils.ts';
 import { storeToRefs } from 'pinia';
 import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 
+const { VITE_API_URI } = import.meta.env;
+
 const isDev = import.meta.env.DEV;
 
 const fileStore = useFileStore();
@@ -37,10 +40,32 @@ const onClose = (): void => {
 <template>
   <v-navigation-drawer v-model="modelValue" location="right" :width="460">
     <v-toolbar :title="t(`navigation.title.${drawerTab}`)" color="rgba(255, 255, 255, 0)">
+      <template #title v-if="file">
+        <div class="d-flex align-center">
+          <v-avatar
+            icon="fas fa-file"
+            :image="
+              file.associatedApp.iconPath != null
+                ? `${VITE_API_URI}${VITE_API_URI.endsWith('/') ? '' : '/'}${file.associatedApp.iconPath}`
+                : undefined
+            "
+            class="me-2"
+          />
+          <div class="overflow-hidden">
+            <div class="text-body-1 font-weight-bold text-truncated">
+              {{ file.title }}
+            </div>
+            <div class="text-caption text-medium-emphasis">
+              {{ t('information.duration', { duration: dateToDuration(file.editionDate) }) }}
+            </div>
+          </div>
+        </div>
+      </template>
       <template #append>
         <v-btn icon="fas fa-xmark" color="default" variant="plain" :alt="t('button.close')" @click="onClose" />
       </template>
     </v-toolbar>
+
     <v-tabs
       v-model="drawerTab"
       align-tabs="center"

diff --git a/src/main/webapp/src/components/drawers/information/tabs/InformationTab.vue b/src/main/webapp/src/components/drawers/information/tabs/InformationTab.vue
@@ -116,13 +116,13 @@ onMounted((): void => initForm());
     </div>
   </div>
   <div v-if="file">
-    <div class="ms-2 mb-2">
+    <div class="text-body-2 ms-2 mb-1">
       {{ t(`application.${file.associatedApp.slug}`) }}
     </div>
-    <div class="ms-2 mb-2">
+    <div class="text-body-2 ms-2 mb-1">
       {{ t('information.creationDate', { date: format(file.creationDate, 'Pp') }) }}
     </div>
-    <div class="ms-2 mb-2">
+    <div class="text-body-2 ms-2 mb-1">
       {{ t('information.editionDate', { date: format(file.editionDate, 'Pp') }) }}
     </div>
   </div>

diff --git a/src/main/webapp/src/components/layouts/FilesLayout.vue b/src/main/webapp/src/components/layouts/FilesLayout.vue
@@ -82,13 +82,14 @@ const sortBy = useSessionStorage<Array<any>>(`${__APP_SLUG__}.sort-by`, [{ key:
         class="d-flex align-center h-100 table-column-title"
       >
         <v-avatar
+          icon="fas fa-file"
           :image="
             item.associatedApp.iconPath != null
               ? `${VITE_API_URI}${VITE_API_URI.endsWith('/') ? '' : '/'}${item.associatedApp.iconPath}`
               : undefined
           "
         />
-        <span class="ms-2">{{ item.title }}</span>
+        <span class="text-truncated ms-2">{{ item.title }}</span>
       </router-link>
     </template>
     <template #item.editionDate="{ item }">
@@ -106,14 +107,19 @@ const sortBy = useSessionStorage<Array<any>>(`${__APP_SLUG__}.sort-by`, [{ key:
 
 <style scoped lang="scss">
 .table-column-title {
-  white-space: nowrap;
+  width: 0;
+  flex-grow: 1;
   text-decoration: none;
   color: inherit;
 }
 </style>
 
 <style lang="scss">
-.v-data-table-header__content > span {
+thead > tr > th > .v-data-table-header__content > span {
   margin-right: 4px;
 }
+
+tbody > tr.v-data-table__tr > td:nth-child(1) {
+  display: flex;
+}
 </style>
diff --git a/src/main/webapp/src/plugins/fontawsome.ts b/src/main/webapp/src/plugins/fontawsome.ts
@@ -13,6 +13,7 @@ import {
   faCloud,
   faDownload,
   faEllipsisVertical,
+  faFile,
   faFolder,
   faGear,
   faGlobe,
@@ -47,6 +48,7 @@ const register = (app: App): void => {
     faCloud,
     faDownload,
     faEllipsisVertical,
+    faFile,
     faFolder,
     faGear,
     faGlobe,