From 2e052148289b1dac964c4ece421d4023d6861fab Mon Sep 17 00:00:00 2001
From: Kazu Yokomizo <kaz@maisin.co>
Date: Thu, 25 Jan 2018 13:30:36 -0500
Subject: [PATCH] Fix the editor lock button layout

---
 browser/main/Detail/MarkdownNoteDetail.js   |  1 +
 browser/main/Detail/MarkdownNoteDetail.styl | 18 ++++++++++++++++++
 resources/icon/icon-previewoff-off.svg      |  2 +-
 resources/icon/icon-previewoff-on.svg       |  2 +-
 4 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/browser/main/Detail/MarkdownNoteDetail.js b/browser/main/Detail/MarkdownNoteDetail.js
index d64e1817..2dac51a6 100644
--- a/browser/main/Detail/MarkdownNoteDetail.js
+++ b/browser/main/Detail/MarkdownNoteDetail.js
@@ -380,6 +380,7 @@ class MarkdownNoteDetail extends React.Component {
               onMouseDown={(e) => this.handleLockButtonMouseDown(e)}
             >
               <img styleName='iconInfo' src={imgSrc} />
+              {this.state.isLocked ? <span styleName='tooltip'>Unlock</span> : <span styleName='tooltip'>Lock</span>}
             </button>
 
           return (
diff --git a/browser/main/Detail/MarkdownNoteDetail.styl b/browser/main/Detail/MarkdownNoteDetail.styl
index 1d3125e3..652532c7 100644
--- a/browser/main/Detail/MarkdownNoteDetail.styl
+++ b/browser/main/Detail/MarkdownNoteDetail.styl
@@ -13,6 +13,24 @@
 
 .control-lockButton
   topBarButtonRight()
+  position absolute
+  right 225px
+  &:hover .tooltip
+    opacity 1
+
+  .tooltip
+    tooltip()
+    position absolute
+    pointer-events none
+    top 35px
+    right -10px
+    width 50px
+    z-index 200
+    padding 5px
+    line-height normal
+    border-radius 2px
+    opacity 0
+    transition 0.1s
 
 .trashed-infopanel
   position relative
diff --git a/resources/icon/icon-previewoff-off.svg b/resources/icon/icon-previewoff-off.svg
index b0e720e7..857c1928 100644
--- a/resources/icon/icon-previewoff-off.svg
+++ b/resources/icon/icon-previewoff-off.svg
@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg width="14px" height="14px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <!-- Generator: Sketch 48.1 (47250) - http://www.bohemiancoding.com/sketch -->
     <title>icon-previewoff-off</title>
     <desc>Created with Sketch.</desc>
diff --git a/resources/icon/icon-previewoff-on.svg b/resources/icon/icon-previewoff-on.svg
index 8a6c5d7e..bf05088f 100644
--- a/resources/icon/icon-previewoff-on.svg
+++ b/resources/icon/icon-previewoff-on.svg
@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg width="14px" height="14px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <!-- Generator: Sketch 48.1 (47250) - http://www.bohemiancoding.com/sketch -->
     <title>icon-previewoff-on</title>
     <desc>Created with Sketch.</desc>