From 3589a9d971a3db5ffbbfaf3b13fac545ecf77f2d Mon Sep 17 00:00:00 2001
From: nabil salah <nabil.salah203@gmail.com>
Date: Wed, 21 Aug 2024 14:52:40 +0300
Subject: [PATCH] fix: tables alignments and font weight

Signed-off-by: nabil salah <nabil.salah203@gmail.com>
---
 frontend/src/components/CreateFlist.vue  |  4 ++--
 frontend/src/components/Footer.vue       |  2 +-
 frontend/src/components/Home.vue         | 30 ++++++++++++++++--------
 frontend/src/components/Login.vue        |  2 +-
 frontend/src/components/Navbar.vue       |  3 ++-
 frontend/src/components/PreviewFlist.vue | 28 ++++++++++++++++++++++
 frontend/src/components/UserFlist.vue    | 12 ++++++----
 7 files changed, 61 insertions(+), 20 deletions(-)
 create mode 100644 frontend/src/components/PreviewFlist.vue

diff --git a/frontend/src/components/CreateFlist.vue b/frontend/src/components/CreateFlist.vue
index 71574e5..f65028c 100644
--- a/frontend/src/components/CreateFlist.vue
+++ b/frontend/src/components/CreateFlist.vue
@@ -192,7 +192,7 @@
             </div>
 
             <v-btn
-              class="pr-5 rounded-pill background-green mb-8 mt-5"
+              class="pr-5 rounded-pill background-green mb-8 mt-5 text-white"
               size="large"
               width="50%"
               @click="create"
@@ -250,6 +250,6 @@ const create = async () => {
 
 <style>
 .mn-height {
-  min-height: calc(100% - 6%);
+  min-height: calc(100% - 7%);
 }
 </style>
\ No newline at end of file
diff --git a/frontend/src/components/Footer.vue b/frontend/src/components/Footer.vue
index 41287b6..21764ab 100644
--- a/frontend/src/components/Footer.vue
+++ b/frontend/src/components/Footer.vue
@@ -17,6 +17,6 @@
 </template>
 <style>
 .v-footer {
-  height: 100px !important;
+  height: 7% !important;
 }
 </style>
diff --git a/frontend/src/components/Home.vue b/frontend/src/components/Home.vue
index 007311e..b1fe81e 100644
--- a/frontend/src/components/Home.vue
+++ b/frontend/src/components/Home.vue
@@ -11,16 +11,16 @@
       </div> -->
     </div>
 
-    <v-main class="d-flex justify-center mt-0 mn-height">
+    <v-main class="d-flex justify-center mt-0 mn-height" 
+    style="--v-layout-left: 150px;">
       <v-navigation-drawer
-        elevation="2"
         app
         class="position-absolute mx-height"
-        style="top: 30%; left: 0; height: fit-content"
+        style="top: 30%; left: 0; height: 63%; width: fit-content;"
       >
         <v-list>
           <v-list-item nav>
-            <v-list-item-title class="text-h6"> Users</v-list-item-title>
+            <v-list-item-title class=" text-h6 " > Users</v-list-item-title>
           </v-list-item>
           <v-divider></v-divider>
           <v-list-item density="compact"
@@ -29,8 +29,10 @@
             @click="username = userName"
           >
             <template v-slot:prepend >
-              <v-icon icon="mdi-account" color="#1aa18f"></v-icon>
-              <v-list-item-title>
+              <v-icon icon="mdi-account" color="#1aa18f" style="font-size: 15px;"></v-icon>
+              <v-list-item-title style="padding: 2px 4px;
+  font-size: 12px;
+  font-weight: 300;">
                 {{ userName }}
               </v-list-item-title>
           </template>
@@ -50,13 +52,19 @@
           :items="filteredFlist"
           :headers="tableHeader"
           dense
+          
           class="thick-border "
           items-per-page="25"  
         >
         <template #item.name="{ value }">
               <v-icon icon="mdi-text-box" class="mr-1"  color="grey"/>
               <span class="file-name">{{ value }}</span>
-            </template>
+        </template>
+        <template #item.preview = "">
+          <v-btn @click="" class="elevation-0">
+                <v-icon icon="mdi-eye-outline" color="grey"></v-icon>
+          </v-btn>
+        </template>
         <template #item.size="{value}">
           {{filesize(value, {standard: "jedec", precision: 3})}}
         </template>
@@ -95,6 +103,7 @@ import { toast } from "vue3-toastify";
 import "vue3-toastify/dist/index.css";
 import { api } from "../client.ts";
 import {filesize} from "filesize";
+import { title } from "process";
 
 const baseURL = import.meta.env.VITE_API_URL;
 
@@ -104,7 +113,8 @@ const copyLink = (url: string) => {
 };
 
 const tableHeader = [
-  { title: "Name", key: "name" },
+  { title: "File Name", key: "name" },
+  { title: "Preview", key:"preview"},
   { title: "Size", key: "size" },
   { title: "Last Modified", key: "last_modified" },
   { title: "Download", key: "path_uri", sortable: false },
@@ -156,7 +166,7 @@ watch(username, () => {
   filteredFlistFn();
 });
 </script>
-<style lang="css">
+<style lang="css" scoped>
 .mx-height {
   max-height: 600px;
 }
@@ -166,6 +176,6 @@ watch(username, () => {
 }
 
 .mn-height {
-  min-height: calc(100% - 7%);
+  min-height: calc(100% - 37%);
 }
 </style>
diff --git a/frontend/src/components/Login.vue b/frontend/src/components/Login.vue
index 8c06cb9..b0139c3 100644
--- a/frontend/src/components/Login.vue
+++ b/frontend/src/components/Login.vue
@@ -63,7 +63,7 @@
               >
               </v-text-field>
               <v-btn
-                class="pr-5 rounded-pill background-green"
+                class="pr-5 rounded-pill background-green text-white"
                 size="large"
                 width="50%"
                 @click="login"
diff --git a/frontend/src/components/Navbar.vue b/frontend/src/components/Navbar.vue
index 32c945a..b8151ae 100644
--- a/frontend/src/components/Navbar.vue
+++ b/frontend/src/components/Navbar.vue
@@ -22,7 +22,8 @@
             v-bind="props"
             style="font-size: 20px"
           >
-            <v-icon icon="mdi-menu-down" end></v-icon>
+            <v-icon icon="mdi-account"></v-icon>
+            <!-- <v-icon icon="mdi-menu-down" end></v-icon> -->
           </v-btn>
         </template>
         <v-list>
diff --git a/frontend/src/components/PreviewFlist.vue b/frontend/src/components/PreviewFlist.vue
new file mode 100644
index 0000000..902aea3
--- /dev/null
+++ b/frontend/src/components/PreviewFlist.vue
@@ -0,0 +1,28 @@
+<template>
+
+</template>
+
+<script setup lang="ts">
+
+import { onMounted, ref, watch } from "vue";
+import Navbar from "./Navbar.vue";
+import Footer from "./Footer.vue";
+import image from "../assets/home.png";
+import { useClipboard } from "@vueuse/core";
+import { toast } from "vue3-toastify";
+import "vue3-toastify/dist/index.css";
+import { api } from "../client.ts";
+import {filesize} from "filesize";
+
+
+onMounted(async () => {
+  try {
+    //flists.value = (await api.get<FlistsResponseInterface>("/v1/api/fl")).data;
+
+  } catch (error: any) {
+    console.error("Failed to fetch flists", error);
+    toast.error(error.response?.data);
+  }
+});
+
+</script>
\ No newline at end of file
diff --git a/frontend/src/components/UserFlist.vue b/frontend/src/components/UserFlist.vue
index 308c79a..0908e12 100644
--- a/frontend/src/components/UserFlist.vue
+++ b/frontend/src/components/UserFlist.vue
@@ -132,17 +132,19 @@ onMounted(async () => {
 .thick-border .v-data-table__wrapper {
   border: 3px solid #000;
 }
-
-.v-data-table td {
+.v-data-table-footer__items-per-page { 
+  display: none !important;  
+}
+.v-data-table td{
   padding: 4px 8px;
   font-size: 12px;
-  font-weight: bold;
+  font-weight: 500;
 }
 
 .file-name {
-  font-weight: bold;
+  font-weight: 500;
 }
 .mn-height {
-  min-height: calc(100% - 6%);
+  min-height: calc(100% - 7%);
 }
 </style>