Filter tags and folders

browser/components/SideNavFilter.styl

@@ -1,5 +1,5 @@
 .menu
-  margin-bottom 30px
+  margin-bottom 20px
 
 .menu-button
   navButtonColor()

browser/components/StorageList.styl

@@ -1,7 +1,5 @@
 .storageList
-  absolute left right
-  bottom 37px
-  top 180px
+  margin-bottom 37px
   overflow-y auto
 
 .storageList-folded

browser/main/SideNav/PreferenceButton.styl

@@ -1,8 +1,5 @@
 .top-menu-preference
   navButtonColor()
-  position absolute
-  top 22px
-  right 10px
   width 2em
   background-color transparent
   &:hover

browser/main/SideNav/SearchButton.js

@@ -0,0 +1,26 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+import CSSModules from 'browser/lib/CSSModules'
+import styles from './SearchButton.styl'
+import i18n from 'browser/lib/i18n'
+
+const SearchButton = ({ onClick, isActive }) => (
+  <button styleName='top-menu-search' onClick={e => onClick(e)}>
+    <img
+      styleName='icon-search'
+      src={
+        isActive
+          ? '../resources/icon/icon-search-active.svg'
+          : '../resources/icon/icon-search.svg'
+      }
+    />
+    <span styleName='tooltip'>{i18n.__('Search')}</span>
+  </button>
+)
+
+SearchButton.propTypes = {
+  onClick: PropTypes.func.isRequired,
+  isActive: PropTypes.bool
+}
+
+export default CSSModules(SearchButton, styles)

browser/main/SideNav/SearchButton.styl

@@ -0,0 +1,55 @@
+.top-menu-search
+  navButtonColor()
+  position relative
+  margin-right 6px
+  top 3px
+  width 2em
+  background-color transparent
+  &:hover
+    color $ui-button-default--active-backgroundColor
+    background-color transparent
+    .tooltip
+      opacity 1
+  &:active, &:active:hover
+    color $ui-button-default--active-backgroundColor
+
+.icon-search
+  width 16px
+
+body[data-theme="white"]
+  .top-menu-search
+    navWhiteButtonColor()
+    background-color transparent
+    &:hover
+      color #0B99F1
+      background-color transparent
+    &:active, &:active:hover
+      color #0B99F1
+      background-color transparent
+
+body[data-theme="dark"]
+  .top-menu-search
+    navDarkButtonColor()
+    background-color transparent
+    &:active
+      background-color alpha($ui-dark-button--active-backgroundColor, 20%)
+      background-color transparent
+    &:hover
+      background-color alpha($ui-dark-button--active-backgroundColor, 20%)
+      background-color transparent
+
+
+
+.tooltip
+  tooltip()
+  position absolute
+  pointer-events none
+  top 26px
+  left -20px
+  z-index 200
+  padding 5px
+  line-height normal
+  border-radius 2px
+  opacity 0
+  transition 0.1s
+  white-space nowrap

browser/main/SideNav/SideNav.styl

@@ -9,16 +9,47 @@
   flex-direction column
 
 .top
-  padding-bottom 15px
+  display flex
+  align-items top
+  justify-content space-between
+  padding-bottom 10px
+  margin 14px 14px 4px
 
 .switch-buttons
   background-color transparent
   border 0
-  margin 24px auto 4px 14px
   display flex
+  align-items center
   text-align center
 
+.extra-buttons
+  position relative
+  display flex
+  align-items center
 
+.search
+  position relative
+  flex 1
+  display flex
+  max-height 0
+  overflow hidden
+  transition max-height .4s
+  margin -5px 10px 0
+  .search-input
+    flex 1
+    height 2em
+    vertical-align middle
+    font-size 14px
+    border solid 1px $border-color
+    border-radius 2px
+    padding 2px 6px
+    outline none
+  .search-clear
+    width 10px
+    position absolute
+    right 8px
+    top 9px
+    cursor pointer
 
 .top-menu-label
   margin-left 5px
@@ -68,8 +99,15 @@
   background-color #2E3235
   .switch-buttons
     display none
+  .extra-buttons > button:first-of-type // hide search icon
+    display none
   .top
     height 60px
+    align-items center
+    margin 0
+    justify-content center
+    position relative
+    left -4px
   .top-menu
     position static
     width $sideNav--folded-width
@@ -98,17 +136,35 @@
   .top-menu-preference
     position absolute
     left 7px
+  .search
+    height 28px
+    .search-input
+      display none
+    .search-clear
+      display none
+    .search-folded
+      width 16px
+      padding-left 4px
+      margin-bottom 8px
+      cursor pointer
 
 body[data-theme="white"]
   .root, .root--folded
     background-color #f9f9f9
     color $ui-text-color
+  .search .search-input
+    background-color #f9f9f9
+    color $ui-text-color
 
 body[data-theme="dark"]
   .root, .root--folded
     border-right 1px solid $ui-dark-borderColor
     background-color $ui-dark-backgroundColor
     color $ui-dark-text-color
+  .search .search-input
+    background-color $ui-dark-backgroundColor
+    color $ui-dark-text-color
+    border-color $ui-dark-borderColor
 
   .top
     border-color $ui-dark-borderColor
@@ -119,8 +175,13 @@ apply-theme(theme)
       background-color get-theme-var(theme, 'backgroundColor')
       border-right 1px solid get-theme-var(theme, 'borderColor')
 
+    .search .search-input
+      background-color get-theme-var(theme, 'backgroundColor')
+      color get-theme-var(theme, 'text-color')
+      border-color get-theme-var(theme, 'borderColor')
+
 for theme in 'solarized-dark' 'dracula'
   apply-theme(theme)
 
 for theme in $themes
-  apply-theme(theme)
+  apply-theme(theme)