improvement (quick access): improve the user friendly aspect of the quick access bar

client/pages/filespage/frequently_access.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
 
-import { Container, Icon } from '../../components/';
+import { Container, Icon, NgIf } from '../../components/';
 import { Link } from 'react-router-dom';
 import Path from 'path';
 
@@ -25,15 +25,11 @@ export class FrequentlyAccess extends React.Component {
                 .slice(0, 2);
         }
 
-        if(files.length === 0){
-            return null;
-        }
-
         return (
             <ReactCSSTransitionGroup transitionName="frequent-access" transitionLeave={false} transitionEnter={false} transitionAppear={true} transitionAppearTimeout={300}>
               <div className="component_frequently-access">
                 <Container>
-                  <span>Quick Access</span>
+                  <span className="caption">Quick Access</span>
                   <div className="frequent_wrapper">
                     {
                         files.map(function(path, index){
@@ -46,6 +42,12 @@ export class FrequentlyAccess extends React.Component {
                         })
                     }
                   </div>
+                <NgIf cond={files.length === 0} className="nothing_placeholder">
+                  <svg aria-hidden="true" focusable="false" data-icon="layer-group" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                     <path fill="currentColor" d="M12.41 148.02l232.94 105.67c6.8 3.09 14.49 3.09 21.29 0l232.94-105.67c16.55-7.51 16.55-32.52 0-40.03L266.65 2.31a25.607 25.607 0 0 0-21.29 0L12.41 107.98c-16.55 7.51-16.55 32.53 0 40.04zm487.18 88.28l-58.09-26.33-161.64 73.27c-7.56 3.43-15.59 5.17-23.86 5.17s-16.29-1.74-23.86-5.17L70.51 209.97l-58.1 26.33c-16.55 7.5-16.55 32.5 0 40l232.94 105.59c6.8 3.08 14.49 3.08 21.29 0L499.59 276.3c16.55-7.5 16.55-32.5 0-40zm0 127.8l-57.87-26.23-161.86 73.37c-7.56 3.43-15.59 5.17-23.86 5.17s-16.29-1.74-23.86-5.17L70.29 337.87 12.41 364.1c-16.55 7.5-16.55 32.5 0 40l232.94 105.59c6.8 3.08 14.49 3.08 21.29 0L499.59 404.1c16.55-7.5 16.55-32.5 0-40z"></path>
+                   </svg>
+                   Frequently access folders will be shown here
+                </NgIf>
                 </Container>
               </div>
             </ReactCSSTransitionGroup>

client/pages/filespage/frequently_access.scss

@@ -1,11 +1,19 @@
 .component_frequently-access{
-    min-height: 80px;
+    .caption{
+        letter-spacing: 0.06em;
+        display: inline-block;
+        text-transform: uppercase;
+        font-size: 12px;
+        padding-bottom: 5px;
+        color: var(--light);
+    }
     .frequent_wrapper{
         display: flex;
         a{
             width: 33.33%;
             background: var(--super-light);
             box-shadow: rgba(158, 163, 172, 0.3) 0px 19px 60px, rgba(158, 163, 172, 0.22) 0px 15px 20px;
+            transition: box-shadow 0.05s linear 0s;
             overflow: hidden;
             margin-right: 5px;
             padding: 5px;
@@ -24,13 +32,32 @@
                 text-overflow: ellipsis;
             }
         }
+        @media (max-width: 800px){ a:nth-child(6){display: none;} }
+        @media (max-width: 750px){ a:nth-child(5){display: none;} }
+        @media (max-width: 650px){ a:nth-child(4){display: none;} }
+        @media (max-width: 450px){ a:nth-child(3){display: none;} }
+    }
+    .nothing_placeholder{
+        padding: 20px;
+        text-align: center;
+        background: var(--super-light);
+        border: 1px dashed rgba(0,0,0,0.1);
+        border-radius: 2px;
+        color: var(--light);
+        font-weight: 100;
+        svg{
+            display: block;
+            width: 50px;
+            margin: 0 auto;
+            padding-bottom: 10px;
+        }
     }
-    @media (max-width: 800px){ a:nth-child(6){display: none;} }
-    @media (max-width: 750px){ a:nth-child(5){display: none;} }
-    @media (max-width: 650px){ a:nth-child(4){display: none;} }
-    @media (max-width: 450px){ a:nth-child(3){display: none;} }
 }
 
+.touch-no .component_frequently-access .frequent_wrapper a:hover{
+    transition: box-shadow 0.2s linear 0s;
+    box-shadow: rgba(158, 163, 172, 0.3) 0px 19px 70px, rgba(158, 163, 172, 0.22) 0px 15px 40px;
+}
 
 
  .frequent-access-appear{

client/pages/filespage/submenu.scss

@@ -27,8 +27,13 @@
                 @include ripple(var(--bg-color));
             }
             > span{
-                padding: 5px 10px;
-                font-weight: 100;
+                padding: 5px 8px;
+                letter-spacing: 0.06em;
+                display: inline-block;
+                text-transform: uppercase;
+                font-size: 12px;
+                color: var(--light);
+                vertical-align: text-bottom;
             }
 
             > div {cursor: pointer; margin-right: 15px;}

client/pages/filespage/thing.scss

@@ -1,6 +1,9 @@
 .component_thing{
     clear: both;
+
     &:hover .box, .highlight.box{
+        transition: 0.2s ease-out box-shadow;
+        box-shadow: rgba(158, 163, 172, 0.3) 3px 3px 10px;
         background: var(--super-light);
         border-color: var(--super-light);
     }