From 4bb28a358e54c04425f163f52188ed810c808182 Mon Sep 17 00:00:00 2001
From: Yutaka Ishii <ytkishii@gmail.com>
Date: Thu, 23 Nov 2017 21:26:23 +0900
Subject: [PATCH] improve search folder

---
 browser/components/markdown.styl      |  2 +-
 browser/main/Detail/FolderSelect.js   |  2 +-
 browser/main/Detail/FolderSelect.styl | 42 +++++++++++++++------------
 browser/main/StatusBar/StatusBar.styl |  9 ++++--
 browser/styles/index.styl             |  2 +-
 5 files changed, 33 insertions(+), 24 deletions(-)

diff --git a/browser/components/markdown.styl b/browser/components/markdown.styl
index 7522a7b1..ab6c4bc7 100644
--- a/browser/components/markdown.styl
+++ b/browser/components/markdown.styl
@@ -118,7 +118,7 @@ hr
 h1, h2, h3, h4, h5, h6
   font-weight bold
 h1
-  font-size 2.25em
+  font-size 2.55em
   padding-bottom 0.3em
   line-height 1.2em
   border-bottom solid 1px borderColor
diff --git a/browser/main/Detail/FolderSelect.js b/browser/main/Detail/FolderSelect.js
index 4329c270..16181a6a 100644
--- a/browser/main/Detail/FolderSelect.js
+++ b/browser/main/Detail/FolderSelect.js
@@ -8,7 +8,7 @@ class FolderSelect extends React.Component {
     super(props)
 
     this.state = {
-      status: 'IDLE',
+      status: 'SEARCH',
       search: '',
       optionIndex: -1
     }
diff --git a/browser/main/Detail/FolderSelect.styl b/browser/main/Detail/FolderSelect.styl
index 7abb79da..b63de0d1 100644
--- a/browser/main/Detail/FolderSelect.styl
+++ b/browser/main/Detail/FolderSelect.styl
@@ -11,11 +11,12 @@
 
 .root--search, .root--focus
   @extend .root
-  background-color $ui-noteDetail-backgroundColor = #F4F4F4
+  background-color $ui-noteDetail-backgroundColor = #fff
   border-color $ui-input--focus-borderColor
-  width 100px
+  width 154px
+  height 30px
   &:hover
-    border-color $ui-input--focus-borderColor
+    border-color $ui-input--focus-borderColor = #fff
 
 .idle
   position relative
@@ -33,7 +34,7 @@
   margin-left 4px
 
 .idle-label-name-surfix
-  font-size 10px
+  font-size 15px
   color $ui-inactive-text-color
   margin-left 5px
 .idle-caret
@@ -41,40 +42,41 @@
   height 34px
   width 20px
   line-height 34px
-
-.search
-  absolute top left right bottom
-  line-height 34px
-
+  
 .search-input
   vertical-align middle
   position relative
-  top -2px
+  top 0
+  font-size 14px
   outline none
   border none
-  height 20px
-  line-height 20px
+  width 100%
   background-color transparent
   padding 0 10px
 
 .search-optionList
-  position fixed
+  position absolute
+  top 30px
   max-height 450px
   overflow auto
   z-index 200
   border $ui-border
   background-color white
   border-radius 2px
+  padding 10px 6px
 
 .search-optionList-item
+  width 140px
   height 34px
-  width 250px
+  display flex
+  align-items center
   box-sizing border-box
-  padding 0 5px
+  padding 0
+  margin-bottom 10px
   overflow ellipsis
   cursor pointer
   &:hover
-    background-color $ui-button--hover-backgroundColor
+    background-color $ui-button--hover-backgroundColor 
 
 .search-optionList-item--active
   @extend .search-optionList-item
@@ -84,13 +86,17 @@
     background-color $ui-button--active-backgroundColor
     color $ui-button--active-color
 .search-optionList-item-name
-  border-left solid 2px transparent
-  padding 2px 5px
+  border-left solid 3px transparent
+  padding 6px
 .search-optionList-item-name-surfix
   font-size 10px
   color $ui-inactive-text-color
   margin-left 5px
 
+
+
+
+
 body[data-theme="dark"]
   .root
     color $ui-dark-text-color
diff --git a/browser/main/StatusBar/StatusBar.styl b/browser/main/StatusBar/StatusBar.styl
index dd7c211a..6bbc2300 100644
--- a/browser/main/StatusBar/StatusBar.styl
+++ b/browser/main/StatusBar/StatusBar.styl
@@ -1,11 +1,12 @@
 @import('../Detail/DetailVars')
 
 .root
-  absolute bottom left right
+  position absolute
+  bottom 10px
+  left 10px
   z-index 100
   background-color $ui-noteDetail-backgroundColor
   display flex
-  height 20px
 
 .blank
   flex 1
@@ -22,8 +23,10 @@
 
 .zoom
   navButtonColor()
-  height 18px
+  color rgba(0,0,0,.54)
+  height 20px
   display flex
+  padding 0
   align-items center
   &:hover
     color $ui-active-color
diff --git a/browser/styles/index.styl b/browser/styles/index.styl
index 51b2bc17..35131ff3 100644
--- a/browser/styles/index.styl
+++ b/browser/styles/index.styl
@@ -215,7 +215,7 @@ navWhiteButtonColor()
 
 // UI Button
 $ui-button-color = #939395
-$ui-button--hover-backgroundColor = #D9D9D9
+$ui-button--hover-backgroundColor = #F6F6F6
 $ui-button--active-color = white
 $ui-button--active-backgroundColor = #D9D9D9
 $ui-button--focus-borderColor = lighten(#369DCD, 25%)