update design of Note List

add list style
remove folder info
enhance design

browser/main/NoteList/NoteList.styl

@@ -2,14 +2,64 @@
   absolute left bottom
   border-top $ui-border
   border-bottom $ui-border
-  overflow auto
   top $topBar-height - 1
 
+.control
+  absolute top left right
+  user-select none
+  height 25px
+  font-size 10px
+  border-bottom $ui-border
+  line-height 25px
+  display flex
+  background-color $ui-backgroundColor
+  color $ui-inactive-text-color
+
+.control-sortBy
+  flex 1
+  padding-left 5px
+
+.control-sortBy-select
+  margin-left 5px
+  padding 0
+  border none
+  background-color transparent
+  font-size 10px
+
+.control-button
+  width 25px
+  padding 0
+  background-color transparent
+  border none
+  color $ui-inactive-text-color
+  &:hover
+    .control-button-tooltip
+      opacity 1
+
+.control-button--active
+  @extend .control-button
+  color $ui-active-color
+
+.control-button-tooltip
+  tooltip()
+  position absolute
+  top 20px
+  right 5px
+  padding 5px
+  opacity 0
+  white-space nowrap
+  border-radius 2px
+  z-index 1
+
+.list
+  absolute left right bottom
+  top 24px
+  overflow auto
+
 .item
   position relative
-  height 80px
   border-bottom $ui-border
-  padding 0 5px
+  padding 2px 5px
   user-select none
   cursor pointer
   transition background-color 0.15s
@@ -18,8 +68,23 @@
 
 .item--active
   @extend .item
-  .item-border
-    border-color $ui-active-color
+  background-color alpha($ui-active-color, 100%)
+  color white
+  .item-title
+    color white
+  .item-title-icon
+    color white
+  .item-bottom-tagIcon
+    color white
+  .item-bottom-tagList-empty
+    color white
+  .item-bottom-time
+    color white
+  .item-bottom-tagList-item
+    background-color transparent
+    color white
+  &:hover
+    background-color alpha($ui-active-color, 100%)
 
 .item-border
   absolute top bottom left right
@@ -28,68 +93,64 @@
   border-color transparent
   transition 0.15s
 
-.item-info
-  height 30px
-  clearfix()
-  font-size 12px
-  color $ui-inactive-text-color
-  line-height 30px
-  overflow-y hidden
-
-.item-info-left
-  float left
-  overflow ellipsis
-
-.item-info-left-folder
-  border-left 4px solid transparent
-  padding 2px 5px
-  color $ui-text-color
-.item-info-left-folder-surfix
-  font-size 10px
-  margin-left 5px
-  color $ui-inactive-text-color
-.item-info-right
-  float right
-
 .item-title
-  height 20px
-  line-height 20px
-  padding 0 5px 0 0
-  font-weight bold
+  height 24px
+  box-sizing border-box
+  line-height 24px
+  padding 0
   overflow ellipsis
   color $ui-text-color
+
 .item-title-icon
   font-size 12px
   color $ui-inactive-text-color
   padding-right 3px
+
 .item-title-empty
   font-weight normal
   color $ui-inactive-text-color
 
-.item-tagList
-  height 30px
+.item-bottom
+  margin-top 2px
+  height 20px
   font-size 12px
-  line-height 30px
+  line-height 20px
   overflow ellipsis
+  display flex
 
-.item-tagList-icon
+.item-bottom-tagIcon
   vertical-align middle
   color $ui-button-color
+  height 20px
+  line-height 20px
 
-.item-tagList-item
+.item-bottom-tagList
+  flex 1
+  overflow ellipsis
+  line-height 20px
+
+.item-bottom-tagList-item
   margin 0 4px
   padding 0 4px
   height 20px
+  box-sizing border-box
   border-radius 3px
   vertical-align middle
   border-style solid
   border-color $ui-button--focus-borderColor
   border-width 0 0 0 3px
   background-color $ui-backgroundColor
+  color $ui-text-color
 
-.item-tagList-empty
+.item-bottom-tagList-empty
   color $ui-inactive-text-color
   vertical-align middle
+  font-size 10px
+
+.item-bottom-time
+  color $ui-inactive-text-color
+  margin-left 5px
+  font-size 10px
 
 body[data-theme="dark"]
   .root
@@ -103,32 +164,40 @@ body[data-theme="dark"]
 
   .item--active
     @extend .item
-    .item-border
-      border-color $ui-active-color
-
-  .item-info
-    color $ui-dark-inactive-text-color
-
-  .item-info-left-folder
-    color $ui-dark-text-color
-  .item-info-left-folder-surfix
-    color $ui-dark-inactive-text-color
+    border-color $ui-dark-borderColor
+    .item-title
+      color white
+    .item-bottom-tagList-item
+      background-color transparent
+      color white
+    .item-bottom-tagList-empty
+      color white
+    &:hover
+      background-color alpha($ui-active-color, 100%)
 
   .item-title
     color $ui-dark-text-color
+
   .item-title-icon
     color $ui-darkinactive-text-color
+
   .item-title-empty
     color $ui-dark-inactive-text-color
 
-  .item-tagList-icon
+  .item-bottom-tagIcon
     color $ui-dark-button-color
 
-  .item-tagList-item
+  .item-bottom-tagList-item
     border-color $ui-dark-button--focus-borderColor
     background-color $ui-dark-button--hover-backgroundColor
     color $ui-dark-text-color
 
-  .item-tagList-empty
+  .item-bottom-tagList-empty
     color $ui-inactive-text-color
     vertical-align middle
+
+  .control
+    background-color $ui-dark-backgroundColor
+    border-color $ui-dark-borderColor
+  .control-sortBy-select
+    color $ui-dark-text-color