From 6289c90a8d55454a1862c4cfe4db665339201a59 Mon Sep 17 00:00:00 2001
From: brunosimon <simon.bruno.77@gmail.com>
Date: Wed, 20 Sep 2017 22:52:22 +0200
Subject: [PATCH] :sparkles: Site > Files tree > Add no file message

---
 site/src/components/application/style.styl   | 13 +++++
 site/src/components/files-tree/style.styl    | 16 ++++++
 site/src/components/files-tree/template.html | 14 ++++--
 site/src/components/landing/style.styl       | 13 -----
 site/src/utils/FileTree.js                   | 53 ++++++++++++++++++++
 5 files changed, 92 insertions(+), 17 deletions(-)

diff --git a/site/src/components/application/style.styl b/site/src/components/application/style.styl
index 161b4b5..167207e 100644
--- a/site/src/components/application/style.styl
+++ b/site/src/components/application/style.styl
@@ -1,3 +1,16 @@
+// Fonts
+@font-face
+    font-family 'DINNextRoundedLTPro'
+    font-weight 300
+    font-style normal
+    src url('../../../static/fonts/DINNextRoundedLTPro-Light.otf')
+
+@font-face
+    font-family 'DINNextRoundedLTPro'
+    font-weight normal
+    font-style normal
+    src url('../../../static/fonts/DINNextRoundedLTPro-Regular.otf')
+
 // App
 #application
     position absolute
diff --git a/site/src/components/files-tree/style.styl b/site/src/components/files-tree/style.styl
index 5c1ea22..2c0abb9 100644
--- a/site/src/components/files-tree/style.styl
+++ b/site/src/components/files-tree/style.styl
@@ -9,6 +9,22 @@
     user-select none
     overflow hidden
 
+.no-file
+    display flex
+    align-items center
+    justify-content center
+    position absolute
+    top 0
+    left 0
+    width 100%
+    height 100%
+    text-align center
+    color #fff
+    font-size 20px
+    opacity 0.5
+    font-weight 300
+    font-family 'DINNextRoundedLTPro'
+
 .search
     display block
     font-size 14px
diff --git a/site/src/components/files-tree/template.html b/site/src/components/files-tree/template.html
index c99ab1b..9aa6c57 100644
--- a/site/src/components/files-tree/template.html
+++ b/site/src/components/files-tree/template.html
@@ -1,7 +1,13 @@
 <div class="file-tree">
-    <input class="search" type="text" v-model="searchValue" placeholder="Search for files ...">
-    <div class="inner" :style="`right: -${scrollbarWidth}px;`">
-        <files-tree-folder class="content" v-for="folder of files.folders" :key="+ new Date()" :content="folder" :depth="0"></files-tree-folder>
+    <div v-if="files.allCount === 0" class="no-file">
+        There is no file yet
+        <br>Please wait
+    </div>
+    <div v-else>
+        <input class="search" type="text" v-model="searchValue" placeholder="Search for files ...">
+        <div class="inner" :style="`right: -${scrollbarWidth}px;`">
+            <files-tree-folder class="content" v-for="folder of files.folders" :key="+ new Date()" :content="folder" :depth="0"></files-tree-folder>
+        </div>
+        <a href="#" class="all-read" @click.prevent="onAllReadClick">Mark all as read</a>
     </div>
-     <a href="#" class="all-read" @click.prevent="onAllReadClick">Mark all as read</a>
 </div>
\ No newline at end of file
diff --git a/site/src/components/landing/style.styl b/site/src/components/landing/style.styl
index 23674d4..1e7a55a 100644
--- a/site/src/components/landing/style.styl
+++ b/site/src/components/landing/style.styl
@@ -1,16 +1,3 @@
-// Fonts
-@font-face
-    font-family 'DINNextRoundedLTPro'
-    font-weight 300
-    font-style normal
-    src url('../../../static/fonts/DINNextRoundedLTPro-Light.otf')
-
-@font-face
-    font-family 'DINNextRoundedLTPro'
-    font-weight normal
-    font-style normal
-    src url('../../../static/fonts/DINNextRoundedLTPro-Regular.otf')
-
 .landing
     display flex
     align-items center
diff --git a/site/src/utils/FileTree.js b/site/src/utils/FileTree.js
index e55f666..cbe18b0 100644
--- a/site/src/utils/FileTree.js
+++ b/site/src/utils/FileTree.js
@@ -9,6 +9,9 @@ class FileTree
     {
         // Options
         this.autoWash = typeof _options.autoWash === 'undefined' ? false : _options.autoWash
+        this.filesCount = 0
+        this.foldersCount = 0
+        this.allCount = 0
 
         // Set up
         this.folders = []
@@ -115,6 +118,9 @@ class FileTree
             }
         }
 
+        // Update counts
+        this.updateCounts()
+
         // Return
         return folder
     }
@@ -163,6 +169,9 @@ class FileTree
         // Save
         folder.files.push(file)
 
+        // Update counts
+        this.updateCounts()
+
         return file
     }
 
@@ -266,6 +275,9 @@ class FileTree
                 this.removeEmptyFolders()
             }
 
+            // Update counts
+            this.updateCounts()
+
             return true
         }
 
@@ -341,6 +353,9 @@ class FileTree
                     file.onRemove.apply(this, [file])
                 }
 
+                // Update counts
+                this.updateCounts()
+
                 return true
             }
         }
@@ -502,9 +517,47 @@ class FileTree
         // Try from ./
         canRemoveFolder(this.folders[0])
 
+        // Update counts
+        this.updateCounts()
+
         return removedCount
     }
 
+    /**
+     * Update counts
+     */
+    updateCounts()
+    {
+        let filesCount = 0
+        let foldersCount = 0
+
+        // Recursive emptying
+        const traverseFolder = function(folder)
+        {
+            // Each folder
+            for(const _folderKey in folder.folders)
+            {
+                const _folder = folder.folders[_folderKey]
+
+                traverseFolder(_folder)
+
+                foldersCount++
+            }
+
+            // Each file
+            for(const _fileKey in folder.files)
+            {
+                filesCount++
+            }
+        }
+
+        traverseFolder(this.folders[0])
+
+        this.filesCount = filesCount
+        this.foldersCount = foldersCount
+        this.allCount = this.filesCount + this.foldersCount
+    }
+
     /**
      * Describe the tree in ASCII (├ ─ │ └)
      * @param {Boolean} _log - Directly log to console