update design of SideNav

smaller menu

Author: Rokt33r

browser/finder/FinderMain.styl

@@ -30,8 +30,10 @@ $list-width = 250px
   absolute left top bottom
   width $nav-width
   background-color $ui-backgroundColor
+
 .result-nav-filter
   margin-bottom 5px
+
 .result-nav-filter-option
   height 25px
   line-height 25px
@@ -41,13 +43,13 @@ $list-width = 250px
 
 .result-nav-menu
   navButtonColor()
-  height 40px
+  height 32px
   padding 0 10px
   font-size 14px
   width 100%
   outline none
   text-align left
-  line-height 40px
+  line-height 32px
   box-sizing border-box
   cursor pointer
 
@@ -60,7 +62,7 @@ $list-width = 250px
 
 .result-nav-storageList
   absolute bottom left right
-  top 80px + 50px + 10px
+  top 80px + 32px + 10px
   overflow-y auto
 
 .result-list

browser/finder/NoteItem.styl

@@ -115,6 +115,7 @@
   color $ui-inactive-text-color
   vertical-align middle
   font-size 10px
+  margin-left 5px
 
 .bottom-time
   color $ui-inactive-text-color

browser/finder/StorageSection.js

@@ -48,7 +48,13 @@ class StorageSection extends React.Component {
         <div styleName='header'>
           <button styleName='header-toggleButton'
             onClick={(e) => this.handleToggleButtonClick(e)}
-          ><i className='fa fa-caret-down'/></button>
+          >
+            <i className={this.state.isOpen
+                ? 'fa fa-caret-down'
+                : 'fa fa-caret-right'
+              }
+            />
+          </button>
           <button styleName={filter.type === 'STORAGE' && filter.storage === storage.key
               ? 'header-name--active'
               : 'header-name'

browser/finder/StorageSection.styl

@@ -2,23 +2,23 @@
   position relative
 
 .header
-  height 30px
+  height 26px
 .header-toggleButton
   absolute top left
   width 25px
-  height 30px
+  height 26px
   navButtonColor()
   border none
   outline none
 .header-name
   display block
-  height 30px
+  height 26px
   navButtonColor()
   padding 0 10px 0 25px
   font-size 14px
   width 100%
   text-align left
-  line-height 30px
+  line-height 26px
   box-sizing border-box
   cursor pointer
   outline none
@@ -33,20 +33,20 @@
 .folderList-item
   display block
   width 100%
-  height 30px
+  height 26px
   navButtonColor()
   padding 0 10px 0 25px
   font-size 14px
   width 100%
   text-align left
-  line-height 30px
+  line-height 26px
   box-sizing border-box
   cursor pointer
   outline none
   padding 0 10px
   margin 2px 0
-  height 30px
-  line-height 30px
+  height 26px
+  line-height 26px
   border-width 0 0 0 6px
   border-style solid
   border-color transparent

browser/main/NoteList/NoteList.styl

@@ -146,6 +146,7 @@
   color $ui-inactive-text-color
   vertical-align middle
   font-size 10px
+  margin-left 5px
 
 .item-bottom-time
   color $ui-inactive-text-color

browser/main/SideNav/SideNav.styl

@@ -25,11 +25,11 @@
   overflow ellipsis
 
 .menu
-  margin-top 15px
+  margin 0
 
 .menu-button
   navButtonColor()
-  height 44px
+  height 32px
   padding 0 10px
   font-size 14px
   width 100%
@@ -48,8 +48,8 @@
 
 .storageList
   absolute left right
-  bottom 44px
-  top 178px
+  bottom 32px
+  top 120px
   overflow-y auto
 
 .storageList-empty
@@ -86,9 +86,9 @@
     position fixed
     display inline-block
     height 30px
-    left 44px
+    left 32px
     padding 0 10px
-    margin-top -7px
+    margin-top -8px
     opacity 0
     margin-left 0
     overflow hidden
@@ -105,20 +105,20 @@
     &:hover .menu-button-label
       transition opacity 0.15s
       opacity 1
-  // TODO: extract tooltip style to a mixin
+
   .menu-button-label
     position fixed
     display inline-block
-    height 30px
+    height 32px
     left 44px
     padding 0 10px
-    margin-top -7px
+    margin-top -8px
     margin-left 0
     overflow ellipsis
     background-color $ui-tooltip-backgroundColor
     z-index 10
     color white
-    line-height 34px
+    line-height 32px
     border-top-right-radius 2px
     border-bottom-right-radius 2px
     pointer-events none

browser/main/SideNav/StorageItem.styl

@@ -3,7 +3,7 @@
   user-select none
 .header
   position relative
-  height 30px
+  height 26px
   width 100%
   &:hover
     background-color $ui-button--hover-backgroundColor
@@ -24,7 +24,7 @@
   position absolute
   left 0
   width 25px
-  height 30px
+  height 26px
   padding 0
   border none
   color $ui-inactive-text-color
@@ -37,10 +37,10 @@
 .header-info
   display block
   width 100%
-  height 30px
+  height 26px
   padding-left 25px
   padding-right 10px
-  line-height 30px
+  line-height 26px
   cursor pointer
   font-size 14px
   border none
@@ -58,11 +58,11 @@
 .folderList-item
   display block
   width 100%
-  height 30px
+  height 26px
   background-color transparent
   color $ui-inactive-text-color
   padding 0
-  margin 2px 0
+  margin-bottom 2px
   text-align left
   border none
   overflow ellipsis
@@ -84,8 +84,8 @@
 .folderList-item-name
   display block
   padding 0 10px
-  height 30px
-  line-height 30px
+  height 26px
+  line-height 26px
   border-width 0 0 0 6px
   border-style solid
   border-color transparent
@@ -99,9 +99,9 @@
   opacity 0
   border-top-right-radius 2px
   border-bottom-right-radius 2px
-  height 30px
-  margin-top -30px
-  line-height 30px
+  height 26px
+  margin-top -26px
+  line-height 26px
 .root--folded
   @extend .root
   .header