From 9e1dcf8b6453d5acfc4a62af3c80e220bf87a287 Mon Sep 17 00:00:00 2001
From: Rokt33r <fluke8259@gmail.com>
Date: Tue, 7 Jul 2015 15:08:57 +0900
Subject: [PATCH] add highlighting for an active item in the snippet list

---
 browser/main/Containers/SnippetContainer.jsx         | 5 +++--
 browser/styles/main/components/SideNavigator.styl    | 2 +-
 browser/styles/main/containers/SnippetContainer.styl | 3 +++
 3 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/browser/main/Containers/SnippetContainer.jsx b/browser/main/Containers/SnippetContainer.jsx
index 14bc2e40..6f80548a 100644
--- a/browser/main/Containers/SnippetContainer.jsx
+++ b/browser/main/Containers/SnippetContainer.jsx
@@ -5,7 +5,8 @@ var CodeViewer = require('../Components/CodeViewer')
 var SnippetList = React.createClass({
   propTypes: {
     snippets: React.PropTypes.array,
-    selectSnippet: React.PropTypes.func
+    selectSnippet: React.PropTypes.func,
+    currentSnippet: React.PropTypes.object
   },
   itemClickHandlerFactory: function (snippet) {
     return function () {
@@ -20,7 +21,7 @@ var SnippetList = React.createClass({
         )
       })
       return (
-        <li key={snippet.id} onClick={this.itemClickHandlerFactory(snippet)}>
+        <li className={this.props.currentSnippet.id === snippet.id ? 'active' : ''} key={snippet.id} onClick={this.itemClickHandlerFactory(snippet)}>
           <div className='callSign'><i className='fa fa-code'></i> {snippet.callSign}</div>
           <div className='description'>{snippet.description}</div>
           <div className='updatedAt'>{snippet.updatedAt}</div>
diff --git a/browser/styles/main/components/SideNavigator.styl b/browser/styles/main/components/SideNavigator.styl
index c06e6383..6d4c4a4a 100644
--- a/browser/styles/main/components/SideNavigator.styl
+++ b/browser/styles/main/components/SideNavigator.styl
@@ -1,7 +1,7 @@
 .SideNavigator
   absolute top bottom left
   width 200px
-  border-right solid 2px brandColor
+  border-right solid 1px highlightenBorderColor
   padding 10px
   box-sizing border-box
   .nav-header
diff --git a/browser/styles/main/containers/SnippetContainer.styl b/browser/styles/main/containers/SnippetContainer.styl
index 5ba5594d..d8f15b43 100644
--- a/browser/styles/main/containers/SnippetContainer.styl
+++ b/browser/styles/main/containers/SnippetContainer.styl
@@ -31,6 +31,9 @@
           font-size 0.8em
         &:hover, &.hover
           background-color hoverBackgroundColor
+        &:active, &.active
+          border solid 2px brandBorderColor
+          padding 9px 9px 8px
 
   .SnippetViewer
     absolute top bottom right