✨ 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">
-    <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>

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