From 04e3be48a4c57e8b1149300ae60a311b9806bd22 Mon Sep 17 00:00:00 2001
From: Laurynas Gadliauskas <laurynas.gadliauskas@hostinger.com>
Date: Tue, 27 Jul 2021 10:59:44 +0300
Subject: [PATCH] feat: differentiate dir listing color (#18)

---
 frontend/src/components/files/ListingItem.vue | 8 ++++++++
 frontend/src/css/listing.css                  | 8 ++++++++
 2 files changed, 16 insertions(+)

diff --git a/frontend/src/components/files/ListingItem.vue b/frontend/src/components/files/ListingItem.vue
index 7c6c9f57..b66678e5 100644
--- a/frontend/src/components/files/ListingItem.vue
+++ b/frontend/src/components/files/ListingItem.vue
@@ -12,6 +12,7 @@
     :aria-label="name"
     :aria-selected="isSelected"
     ref="item"
+    :class="listingClass"
   >
     <div>
       <img
@@ -101,6 +102,13 @@ export default {
       if (this.type === "video") return "movie";
       return "insert_drive_file";
     },
+    listingClass() {
+      if (this.isDir) return "folder";
+      if (this.type === "image") return "image";
+      if (this.type === "audio") return "audio";
+      if (this.type === "video") return "video";
+      return "file";
+    },
     isDraggable() {
       return this.readOnly == undefined && this.user.perm.rename;
     },
diff --git a/frontend/src/css/listing.css b/frontend/src/css/listing.css
index f7cc9211..c2314a44 100644
--- a/frontend/src/css/listing.css
+++ b/frontend/src/css/listing.css
@@ -53,6 +53,14 @@
   vertical-align: bottom;
 }
 
+#listing .item.folder i {
+  color: var(--blue);
+}
+
+#listing .item[aria-selected=true].folder i {
+  color: #fff;
+}
+
 #listing .item img {
   width: 4em;
   height: 4em;