From eececf8a934d8454fd4868e3d5b98e99fdb849d1 Mon Sep 17 00:00:00 2001
From: Kazu Yokomizo <kaz@maisin.co>
Date: Tue, 12 Dec 2017 02:27:44 +0900
Subject: [PATCH] Add Pin to NoteItemSimple

---
 browser/components/NoteItemSimple.js   |  6 +++++-
 browser/components/NoteItemSimple.styl | 10 ++++++++++
 browser/main/NoteList/index.js         |  1 +
 3 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/browser/components/NoteItemSimple.js b/browser/components/NoteItemSimple.js
index 04c6690e0..77ff2d808 100644
--- a/browser/components/NoteItemSimple.js
+++ b/browser/components/NoteItemSimple.js
@@ -14,7 +14,7 @@ import styles from './NoteItemSimple.styl'
  * @param {Function} handleNoteContextMenu
  * @param {Function} handleDragStart
  */
-const NoteItemSimple = ({ isActive, note, handleNoteClick, handleNoteContextMenu, handleDragStart }) => (
+const NoteItemSimple = ({ isActive, note, handleNoteClick, handleNoteContextMenu, handleDragStart, pathname }) => (
   <div styleName={isActive
       ? 'item-simple--active'
       : 'item-simple'
@@ -30,6 +30,10 @@ const NoteItemSimple = ({ isActive, note, handleNoteClick, handleNoteContextMenu
         ? <i styleName='item-simple-title-icon' className='fa fa-fw fa-code' />
         : <i styleName='item-simple-title-icon' className='fa fa-fw fa-file-text-o' />
       }
+      {note.isPinned && !pathname.match(/\/home|\/starred|\/trash/)
+        ? <i styleName='item-pin' className='fa fa-thumb-tack' />
+        : ''
+      }
       {note.title.trim().length > 0
         ? note.title
         : <span styleName='item-simple-title-empty'>Empty</span>
diff --git a/browser/components/NoteItemSimple.styl b/browser/components/NoteItemSimple.styl
index d86b3cbd0..fdf0c2e3d 100644
--- a/browser/components/NoteItemSimple.styl
+++ b/browser/components/NoteItemSimple.styl
@@ -50,6 +50,7 @@ $control-height = 30px
 .item-simple-title
   font-size 13px
   height 40px
+  padding-right 20px
   box-sizing border-box
   line-height 24px
   padding-top 8px
@@ -67,6 +68,15 @@ $control-height = 30px
   font-weight normal
   color $ui-inactive-text-color
 
+.item-pin
+  position absolute
+  right 0px
+  top 12px
+  color #E54D42
+  font-size 14px
+  padding 0
+  border-radius 17px
+
 body[data-theme="white"]
   .item-simple
     background-color $ui-white-noteList-backgroundColor
diff --git a/browser/main/NoteList/index.js b/browser/main/NoteList/index.js
index fc28b3628..43bd32bcc 100644
--- a/browser/main/NoteList/index.js
+++ b/browser/main/NoteList/index.js
@@ -717,6 +717,7 @@ class NoteList extends React.Component {
             handleNoteContextMenu={this.handleNoteContextMenu.bind(this)}
             handleNoteClick={this.handleNoteClick.bind(this)}
             handleDragStart={this.handleDragStart.bind(this)}
+            pathname={location.pathname}
           />
         )
       })