From bf9773be208fccf5bfca2ede7d65e8c3296012d8 Mon Sep 17 00:00:00 2001
From: sota1235 <sota1235@gmail.com>
Date: Wed, 21 Dec 2016 15:59:25 +0900
Subject: [PATCH] modify: move star on left side

---
 browser/main/Detail/MarkdownNoteDetail.js |  8 ++++----
 browser/main/Detail/NoteDetailInfo.styl   | 18 +++++++++++++++++-
 browser/main/Detail/SnippetNoteDetail.js  |  8 ++++----
 browser/main/Detail/StarButton.js         |  1 -
 browser/main/Detail/StarButton.styl       | 10 +---------
 browser/main/Detail/TagSelect.styl        |  1 +
 6 files changed, 27 insertions(+), 19 deletions(-)

diff --git a/browser/main/Detail/MarkdownNoteDetail.js b/browser/main/Detail/MarkdownNoteDetail.js
index 2dca7236..7b473c0f 100644
--- a/browser/main/Detail/MarkdownNoteDetail.js
+++ b/browser/main/Detail/MarkdownNoteDetail.js
@@ -214,6 +214,10 @@ class MarkdownNoteDetail extends React.Component {
       >
         <div styleName='info'>
           <div styleName='info-left'>
+            <StarButton styleName='info-left-button'
+              onClick={(e) => this.handleStarButtonClick(e)}
+              isActive={note.isStarred}
+            />
             <TagSelect
               ref='tags'
               value={this.state.note.tags}
@@ -221,10 +225,6 @@ class MarkdownNoteDetail extends React.Component {
             />
           </div>
           <div styleName='info-right'>
-            <StarButton styleName='info-right-button'
-              onClick={(e) => this.handleStarButtonClick(e)}
-              isActive={note.isStarred}
-            />
             <button styleName='info-right-button'
               onClick={(e) => this.handleContextButtonClick(e)}
             >
diff --git a/browser/main/Detail/NoteDetailInfo.styl b/browser/main/Detail/NoteDetailInfo.styl
index 2e5774fd..d023db53 100644
--- a/browser/main/Detail/NoteDetailInfo.styl
+++ b/browser/main/Detail/NoteDetailInfo.styl
@@ -9,7 +9,23 @@ $info-height = 60px
 .info-left
   float left
   padding 0 5px
-  margin 18px 2px
+  margin 0px 2px
+
+.info-left-button
+  width 34px
+  height 34px
+  border-radius 17px
+  navButtonColor()
+  border $ui-border
+  font-size 14px
+  margin 13px 2px
+  padding 0
+  &:active
+    border-color $ui-button--focus-borderColor
+  &:hover .info-right-button-tooltip
+    opacity 1
+  &:focus
+    border-color $ui-button--focus-borderColor
 
 .info-right
   float right
diff --git a/browser/main/Detail/SnippetNoteDetail.js b/browser/main/Detail/SnippetNoteDetail.js
index dff4c3d4..bb581c07 100644
--- a/browser/main/Detail/SnippetNoteDetail.js
+++ b/browser/main/Detail/SnippetNoteDetail.js
@@ -522,6 +522,10 @@ class SnippetNoteDetail extends React.Component {
       >
         <div styleName='info'>
           <div styleName='info-left'>
+            <StarButton styleName='info-left-button'
+              onClick={(e) => this.handleStarButtonClick(e)}
+              isActive={note.isStarred}
+            />
             <TagSelect
               ref='tags'
               value={this.state.note.tags}
@@ -529,10 +533,6 @@ class SnippetNoteDetail extends React.Component {
             />
           </div>
           <div styleName='info-right'>
-            <StarButton styleName='info-right-button'
-              onClick={(e) => this.handleStarButtonClick(e)}
-              isActive={note.isStarred}
-            />
             <button styleName='info-right-button'
               onClick={(e) => this.handleContextButtonClick(e)}
             >
diff --git a/browser/main/Detail/StarButton.js b/browser/main/Detail/StarButton.js
index 055a4fff..8610c950 100644
--- a/browser/main/Detail/StarButton.js
+++ b/browser/main/Detail/StarButton.js
@@ -53,7 +53,6 @@ class StarButton extends React.Component {
             : 'fa fa-star-o'
           }
         />
-        <span styleName='tooltip'>Star Note</span>
       </button>
     )
   }
diff --git a/browser/main/Detail/StarButton.styl b/browser/main/Detail/StarButton.styl
index 89b199dc..66580366 100644
--- a/browser/main/Detail/StarButton.styl
+++ b/browser/main/Detail/StarButton.styl
@@ -14,14 +14,6 @@
     color $brand-color !important
   .icon
     transform rotate(-72deg)
+
 .icon
   transition transform 0.15s
-
-.tooltip
-  tooltip()
-  position fixed
-  top 45px
-  right 65px
-  padding 5px
-  opacity 0
-  border-radius 2px
diff --git a/browser/main/Detail/TagSelect.styl b/browser/main/Detail/TagSelect.styl
index ba7e309c..932ba661 100644
--- a/browser/main/Detail/TagSelect.styl
+++ b/browser/main/Detail/TagSelect.styl
@@ -1,4 +1,5 @@
 .root
+  display: inline
   position relative
   user-select none