From c6255139248dda9578b37becbbcecebad62796a6 Mon Sep 17 00:00:00 2001
From: Rokt33r <fluke8259@gmail.com>
Date: Tue, 22 Dec 2015 19:42:23 +0900
Subject: [PATCH] Add tooltip to editmode buttons

---
 browser/main/HomePage/ArticleDetail/index.js      |  7 +++++--
 .../HomeContainer/components/ArticleDetail.styl   | 15 ++++++++++++++-
 2 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/browser/main/HomePage/ArticleDetail/index.js b/browser/main/HomePage/ArticleDetail/index.js
index 5f52ace5..ab3e4bc3 100644
--- a/browser/main/HomePage/ArticleDetail/index.js
+++ b/browser/main/HomePage/ArticleDetail/index.js
@@ -526,14 +526,17 @@ export default class ArticleDetail extends React.Component {
                       ? 'Preview'
                       : 'Edit'
                     }
+                    <span className='tooltip'>{process.platform === 'darwin' ? '⌘' : '^'} + p</span>
                   </button>)
                 : null
             }
-            <button onClick={e => this.handleCancelButtonClick(e)}>
+            <button onClick={e => this.handleCancelButtonClick(e)} className='cancelBtn'>
               Cancel
+              <span className='tooltip'>Esc</span>
             </button>
-            <button onClick={e => this.handleSaveButtonClick(e)} className='primary'>
+            <button onClick={e => this.handleSaveButtonClick(e)} className='saveBtn'>
               Save
+              <span className='tooltip'>{process.platform === 'darwin' ? '⌘' : '^'} + s</span>
             </button>
           </div>
         </div>
diff --git a/browser/styles/main/HomeContainer/components/ArticleDetail.styl b/browser/styles/main/HomeContainer/components/ArticleDetail.styl
index 61e4d8d9..6466ecdf 100644
--- a/browser/styles/main/HomeContainer/components/ArticleDetail.styl
+++ b/browser/styles/main/HomeContainer/components/ArticleDetail.styl
@@ -159,6 +159,7 @@ iptFocusBorderColor = #369DCD
               &:hover
                 background-color darken(white, 10%)
       .right
+        z-index 30
         button
           cursor pointer
           height 33px
@@ -169,14 +170,26 @@ iptFocusBorderColor = #369DCD
           background-color darken(white, 5%)
           border solid 1px borderColor
           border-radius 5px
+          &>.tooltip
+            tooltip()
+            top 105px
           &.preview
             width inherit
+            .tooltip
+              margin-left -55px
           &:hover
             background-color white
-          &.primary
+            .tooltip
+              opacity 1
+          &.cancelBtn
+            .tooltip
+              margin-left -25px
+          &.saveBtn
             border none
             background-color brandColor
             color white
+            .tooltip
+              margin-left -45px
             &:hover
               color white
               background-color lighten(brandColor, 10%)