From d07c79551156fd4440701de68cb3e919c900ab50 Mon Sep 17 00:00:00 2001
From: Dick Choi <fluke8259@gmail.com>
Date: Tue, 24 May 2016 20:15:52 +0900
Subject: [PATCH] Navigating by notelist

---
 browser/main/NoteList/NoteList.styl | 17 +++++++++++++++++
 browser/main/NoteList/index.js      | 19 ++++++++++++++++---
 browser/styles/index.styl           |  1 +
 3 files changed, 34 insertions(+), 3 deletions(-)

diff --git a/browser/main/NoteList/NoteList.styl b/browser/main/NoteList/NoteList.styl
index e176f6da..26f3a603 100644
--- a/browser/main/NoteList/NoteList.styl
+++ b/browser/main/NoteList/NoteList.styl
@@ -5,18 +5,33 @@
   overflow auto
 
 .item
+  position relative
   height 80px
   border-bottom $ui-border
   padding 0 5px
   user-select none
   cursor pointer
+  transition background-color 0.15s
   &:hover
     background-color alpha(black, 5%)
 
+.item--active
+  @extend .item
+  .item-border
+    border-color $ui-active-color
+
+.item-border
+  absolute top bottom left right
+  border-style solid
+  border-width 2px
+  border-color transparent
+  transition 0.15s
+
 .item-info
   height 30px
   clearfix()
   font-size 12px
+  color $ui-inactive-text-color
   line-height 30px
 
 .item-info-left
@@ -28,6 +43,7 @@
 .item-title
   height 20px
   line-height 20px
+  padding 0 5px
   font-weight bold
   overflow ellipsis
 
@@ -35,3 +51,4 @@
   height 30px
   font-size 12px
   line-height 30px
+  color $ui-inactive-text-color
diff --git a/browser/main/NoteList/index.js b/browser/main/NoteList/index.js
index f3e91539..eb328e4c 100644
--- a/browser/main/NoteList/index.js
+++ b/browser/main/NoteList/index.js
@@ -161,11 +161,20 @@ class NoteList extends React.Component {
 
   handleNoteClick (key) {
     return (e) => {
-      console.log(key)
+      let { router } = this.context
+      let { location } = this.props
+
+      router.push({
+        pathname: location.pathname,
+        query: {
+          key: key
+        }
+      })
     }
   }
 
   render () {
+    let { location } = this.props
     let notes = this.getNotes()
     let noteElements = notes.map((note) => {
       let folder = _.find(note._repository.folders, {key: note.folder})
@@ -173,12 +182,16 @@ class NoteList extends React.Component {
         return <span key='tag'>{tag}</span>
       })
       let key = `${note._repository.key}/${note.key}`
-
+      let isActive = location.query.key === key
       return (
-        <div styleName='item'
+        <div styleName={isActive
+            ? 'item--active'
+            : 'item'
+          }
           key={key}
           onClick={(e) => this.handleNoteClick(key)(e)}
         >
+          <div styleName='item-border'/>
           <div styleName='item-info'>
 
             <div styleName='item-info-left'>
diff --git a/browser/styles/index.styl b/browser/styles/index.styl
index 7d592146..db3636a7 100644
--- a/browser/styles/index.styl
+++ b/browser/styles/index.styl
@@ -15,6 +15,7 @@ $ui-inactive-text-color = #939395
 $ui-borderColor = #D1D1D1
 $ui-backgroundColor = #FAFAFA
 $ui-border = solid 1px $ui-borderColor
+$ui-active-color = #6AA5E9
 
 // UI Button
 $ui-button-color = #939395