✨ Site > Files tree > Add no file message

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

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

site/src/components/files-tree/template.html

@@ -1,7 +1,13 @@
 <div class="file-tree">
+    <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>
 </div>

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

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