From 1bf3b381ac72196f7685c83c289bce6fb3d0924d Mon Sep 17 00:00:00 2001
From: LukasDoesDev <lukasdoesdev@gmail.com>
Date: Sat, 23 Jan 2021 00:46:33 +0200
Subject: [PATCH] Add icons to file tree

---
 app/classes/shared/helpers.py                 |  8 ++++--
 .../templates/panel/server_files.html         | 25 +++++++++++++------
 2 files changed, 23 insertions(+), 10 deletions(-)

diff --git a/app/classes/shared/helpers.py b/app/classes/shared/helpers.py
index f0da09b7..6321a007 100644
--- a/app/classes/shared/helpers.py
+++ b/app/classes/shared/helpers.py
@@ -476,7 +476,11 @@ class Helpers:
             if os.path.isdir(rel):
                 output += \
                     """<li class="tree-item" data-path="{}">
-                    \n<div data-path="{}" data-name="{}" class="tree-caret tree-ctx-item tree-folder">{}</div>
+                    \n<div data-path="{}" data-name="{}" class="tree-caret tree-ctx-item tree-folder">
+                      <i class="far fa-folder"></i>
+                      <i class="far fa-folder-open"></i>
+                      {}
+                    </div>
                     \n<ul class="tree-nested">"""\
                         .format(os.path.join(folder, filename), os.path.join(folder, filename), filename, filename)
 
@@ -487,7 +491,7 @@ class Helpers:
                 class="tree-item tree-ctx-item tree-file"
                 data-path="{}"
                 data-name="{}"
-                onclick="clickOnFile(event)">{}</li>""".format(os.path.join(folder, filename), filename, filename)
+                onclick="clickOnFile(event)"><span style="margin-right: 6px;"><i class="far fa-file"></i></span>{}</li>""".format(os.path.join(folder, filename), filename, filename)
         return output
 
     @staticmethod
diff --git a/app/frontend/templates/panel/server_files.html b/app/frontend/templates/panel/server_files.html
index 57da4ffe..a4b15940 100644
--- a/app/frontend/templates/panel/server_files.html
+++ b/app/frontend/templates/panel/server_files.html
@@ -140,7 +140,11 @@
                 </style>
                 <ul class="tree-view">
                   <li>
-                    <div class="tree-caret tree-ctx-item files-tree-title">Files</div>
+                    <div class="tree-caret tree-ctx-item files-tree-title">
+                      <i class="far fa-folder"></i>
+                      <i class="far fa-folder-open"></i>
+                      Files
+                    </div>
                     <ul class="tree-nested" id="files-tree">
                       <li>Error while getting files</li>
 
@@ -150,10 +154,12 @@
               </div>
               <style>
                  /* Remove default bullets */
-                .tree-view {
+                .tree-view,
+                .tree-nested {
                   list-style-type: none;
                   margin: 0;
                   padding: 0;
+                  margin-left: 10px;
                 }
 
                 /* Style the caret/arrow */
@@ -163,16 +169,19 @@
                 }
 
                 /* Create the caret/arrow with a unicode, and style it */
-                .tree-caret::before {
-                  content: "\25B6";
-                  color: white;
+                .tree-caret .fa-folder {
                   display: inline-block;
-                  margin-right: 6px;
+                }
+                .tree-caret .fa-folder-open {
+                  display: none;
                 }
 
                 /* Rotate the caret/arrow icon when clicked on (using JavaScript) */
-                .tree-caret-down::before {
-                  transform: rotate(90deg);
+                .tree-caret-down .fa-folder {
+                  display: none;
+                }
+                .tree-caret-down .fa-folder-open {
+                  display: inline-block;
                 }
 
                 /* Hide the nested list */