Преглед изворни кода

[home2] Added empty message for empty folders

Enrico Berti пре 9 година
родитељ
комит
d6b8d9fd2a

+ 26 - 1
desktop/core/src/desktop/static/desktop/css/hue3.css

@@ -2362,4 +2362,29 @@ body {
   margin: 9px 0;
   overflow: hidden;
   background-color: #e5e5e5;
-}
+}
+
+@-webkit-keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+.animated {
+  -webkit-animation-duration: 1s;
+  animation-duration: 1s;
+  -webkit-animation-fill-mode: both;
+  animation-fill-mode: both;
+}

+ 22 - 1
desktop/core/src/desktop/templates/file_browser.mako

@@ -37,7 +37,6 @@ from desktop.views import _ko
     .fb-action-bar,
     .fb-header {
       flex: 0 0 auto;
-
       overflow: hidden;
       padding: 2px;
       clear: both;
@@ -50,6 +49,16 @@ from desktop.views import _ko
       color: #737373;
     }
 
+    .fb-empty {
+      letter-spacing: 0.035em;
+      font-size: 15px;
+      color: #737373;
+      padding: 40px 0;
+      text-align: center;
+      -webkit-animation-name: fadeIn;
+      animation-name: fadeIn;
+    }
+
     .fb-list {
       flex: 1 1 auto;
       overflow-y: scroll;
@@ -275,6 +284,9 @@ from desktop.views import _ko
           <a class="inactive-action fb-action" href="javascript:void(0);" data-bind="click: showUploadModal"><i class="fa fa-fw fa-upload"></i></a>
         </div>
       </div>
+
+
+      <!-- ko if: activeEntry().entries().length > 0 -->
       <div class="fb-header">
         <div class="fb-primary-col">${ _('Name') }</div>
         <div class="fb-attr-group">
@@ -283,6 +295,15 @@ from desktop.views import _ko
           <div class="fb-attr-col fb-modified">${ _('Last Modified') }</div>
         </div>
       </div>
+      <!-- /ko -->
+
+      <!-- ko if: activeEntry().entries().length == 0 -->
+      <div class="fb-empty animated">
+        ${ _('The current folder is empty. You can add a new file or folder form the top right menu.')}
+      </div>
+      <!-- /ko -->
+
+
       <div class="fb-list" data-bind="with: activeEntry">
         <ul data-bind="foreach: { data: entries, itemHeight: 39, scrollableElement: '.fb-list' }">
           <li data-bind="fileSelect: $parent.entries, css: { 'fb-selected': selected }">