update design of Note List

add list style
remove folder info
enhance design

browser/finder/NoteDetail.styl

@@ -27,20 +27,24 @@
   border-bottom $ui-border
   display flex
   background-color $ui-backgroundColor
+
 .tabList-item
   position relative
   flex 1
   border-right $ui-border
+
 .tabList-item--active
   @extend .tabList-item
   .tabList-item-button
     border-color $brand-color
+
 .tabList-item-button
   width 100%
   height 29px
   navButtonColor()
   outline none
   border-left 4px solid transparent
+
 .tabList-item-deleteButton
   position absolute
   top 5px

browser/finder/NoteItem.js

@@ -22,7 +22,7 @@ class NoteItem extends React.Component {
     let tagList = _.isArray(note.tags)
       ? note.tags.map((tag) => {
         return (
-          <span styleName='item-tagList-item'
+          <span styleName='bottom-tagList-item'
             key={tag}>
             {tag}
           </span>
@@ -37,9 +37,7 @@ class NoteItem extends React.Component {
         key={note.storage + '-' + note.key}
         onClick={(e) => this.handleClick(e)}
       >
-        <div styleName='border'/>
         <div styleName='info'>
-
           <div styleName='info-left'>
             <span styleName='info-left-folder'
               style={{borderColor: folder.color}}
@@ -48,11 +46,6 @@ class NoteItem extends React.Component {
               <span styleName='info-left-folder-surfix'>in {storage.name}</span>
             </span>
           </div>
-
-          <div styleName='info-right'>
-            {moment(note.updatedAt).fromNow()}
-          </div>
-
         </div>
 
         <div styleName='title'>
@@ -66,14 +59,20 @@ class NoteItem extends React.Component {
           }
         </div>
 
-        <div styleName='tagList'>
-          <i styleName='tagList-icon'
+        <div styleName='bottom'>
+          <i styleName='bottom-tagIcon'
             className='fa fa-tags fa-fw'
           />
-          {tagList.length > 0
-            ? tagList
-            : <span styleName='tagList-empty'>Not tagged yet</span>
-          }
+          <div styleName='bottom-tagList'>
+            {tagList.length > 0
+              ? tagList
+              : <span styleName='bottom-tagList-empty'>Not tagged yet</span>
+            }
+          </div>
+
+          <div styleName='bottom-time'>
+            {moment(note.updatedAt).fromNow()}
+          </div>
         </div>
       </div>
     )

browser/finder/NoteItem.styl

@@ -1,18 +1,33 @@
 .root
   position relative
-  height 80px
   border-bottom $ui-border
-  padding 0 5px
+  padding 2px 5px
   user-select none
   cursor pointer
   transition background-color 0.15s
   &:hover
-    background-color alpha($ui-active-color, 10%)
+    background-color alpha($ui-active-color, 20%)
 
 .root--active
   @extend .root
-  .border
-    border-color $ui-active-color
+  background-color $ui-active-color
+  &:hover
+    background-color $ui-active-color
+  color white
+  .info-left-folder
+  .info-left-folder-surfix
+  .title
+  .title-icon
+  .title-empty
+  .bottom-tagIcon
+  .bottom-tagList-item
+  .bottom-tagList-empty
+  .bottom-time
+    color white
+  .bottom-tagList-item
+    color white
+    background-color transparent
+
 
 .border
   absolute top bottom left right
@@ -22,11 +37,11 @@
   transition 0.15s
 
 .info
-  height 30px
+  height 20px
   clearfix()
   font-size 12px
   color $ui-inactive-text-color
-  line-height 30px
+  line-height 20px
   overflow-y hidden
 
 .info-left
@@ -45,77 +60,120 @@
   float right
 
 .title
+  height 24px
+  box-sizing border-box
+  line-height 24px
   height 20px
   line-height 20px
   padding 0 5px 0 0
-  font-weight bold
   overflow ellipsis
   color $ui-text-color
+
 .title-icon
   font-size 12px
   color $ui-inactive-text-color
   padding-right 3px
+
 .title-empty
   font-weight normal
   color $ui-inactive-text-color
 
-.tagList
-  height 30px
+.bottom
+  margin-top 2px
+  height 20px
   font-size 12px
-  line-height 30px
+  line-height 20px
   overflow ellipsis
+  display flex
 
-.tagList-icon
+.bottom-tagIcon
   vertical-align middle
   color $ui-button-color
+  height 20px
+  line-height 20px
 
-.tagList-item
+.bottom-tagList
+  flex 1
+  overflow ellipsis
+  line-height 20px
+
+.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
+  transition 0.15s
 
-.tagList-empty
+.bottom-tagList-empty
   color $ui-inactive-text-color
   vertical-align middle
+  font-size 10px
+
+.bottom-time
+  color $ui-inactive-text-color
+  margin-left 5px
+  font-size 10px
 
 body[data-theme="dark"]
   .root
     border-color $ui-dark-borderColor
-    &:hover
-      background-color alpha($ui-active-color, 20%)
 
   .root--active
     @extend .root
-    .border
-      border-color $ui-active-color
+    border-color $ui-dark-borderColor
+    &:hover
+      background-color $ui-active-color
+    .info-left-folder
+    .info-left-folder-surfix
+    .title
+    .title-icon
+    .title-empty
+    .bottom-tagIcon
+    .bottom-tagList-item
+    .bottom-tagList-empty
+    .bottom-time
+      color white
+    .bottom-tagList-item
+      color white
+      background-color transparent
 
   .info
     color $ui-dark-inactive-text-color
 
   .info-left-folder
     color $ui-dark-text-color
+
   .info-left-folder-surfix
     color $ui-dark-inactive-text-color
 
   .title
     color $ui-dark-text-color
+
   .title-icon
     color $ui-dark-inactive-text-color
+
   .title-empty
     color $ui-dark-inactive-text-color
 
-  .tagList-icon
-    color $ui-dark-button-color
-
-  .tagList-item
-    border-color $ui-dark-button--focus-borderColor
-    background-color $ui-dark-backgroundColor
-
   .tagList-empty
     color $ui-dark-inactive-text-color
+
+  .bottom-tagIcon
+    color $ui-dark-button-color
+
+  .bottom-tagList-item
+    color $ui-dark-text-color
+    background-color $ui-dark-backgroundColor
+
+  .bottom-tagList-empty
+    color $ui-dark-inactive-text-color
+
+  .bottom-time
+    color $ui-dark-inactive-text-color

browser/finder/store.js

@@ -1,34 +1,6 @@
 import { combineReducers, createStore } from 'redux'
 import { routerReducer } from 'react-router-redux'
-
-const OSX = global.process.platform === 'darwin'
-const defaultConfig = {
-  zoom: 1,
-  isSideNavFolded: false,
-  listWidth: 250,
-  hotkey: {
-    toggleFinder: OSX ? 'Cmd + Alt + S' : 'Super + Alt + S',
-    toggleMain: OSX ? 'Cmd + Alt + L' : 'Super + Alt + E'
-  },
-  ui: {
-    theme: 'default',
-    disableDirectWrite: false
-  },
-  editor: {
-    theme: 'xcode',
-    fontSize: '14',
-    fontFamily: 'Monaco, Consolas',
-    indentType: 'space',
-    indentSize: '4',
-    switchPreview: 'BLUR' // Available value: RIGHTCLICK, BLUR
-  },
-  preview: {
-    fontSize: '14',
-    fontFamily: 'Lato',
-    codeBlockTheme: 'xcode',
-    lineNumber: true
-  }
-}
+import { DEFAULT_CONFIG } from 'browser/main/lib/ConfigManager'
 
 let defaultData = {
   storageMap: {},
@@ -48,7 +20,7 @@ function data (state = defaultData, action) {
   return state
 }
 
-function config (state = defaultConfig, action) {
+function config (state = DEFAULT_CONFIG, action) {
   switch (action.type) {
     case 'INIT_CONFIG':
     case 'SET_CONFIG':