added tooltips like the new note button (and consequently extracted some buttons and styles)

2026-01-19 11:55:30 +00:00 · 2017-12-21 15:23:13 +01:00
parent 7c8e19c681
commit 6ce1922fb3
21 changed files with 347 additions and 135 deletions
--- a/browser/main/Detail/FullscreenButton.js
+++ b/browser/main/Detail/FullscreenButton.js
@@ -0,0 +1,19 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+import CSSModules from 'browser/lib/CSSModules'
+import styles from './FullscreenButton.styl'
+
+const FullscreenButton = ({
+ onClick
+}) => (
+  <button styleName='control-fullScreenButton' title='Fullscreen' onMouseDown={(e) => onClick(e)}>
+    <img styleName='iconInfo' src='../resources/icon/icon-full.svg' />
+    <span styleName='tooltip'>Fullscreen</span>
+  </button>
+)
+
+FullscreenButton.propTypes = {
+  onClick: PropTypes.func.isRequired
+}
+
+export default CSSModules(FullscreenButton, styles)
--- a/browser/main/Detail/FullscreenButton.styl
+++ b/browser/main/Detail/FullscreenButton.styl
@@ -0,0 +1,22 @@
+.control-fullScreenButton
+  top 80px
+  topBarButtonRight()
+  &:hover .tooltip
+    opacity 1
+
+.tooltip
+  tooltip()
+  position absolute
+  pointer-events none
+  top 26px
+  right 0
+  z-index 200
+  padding 5px
+  line-height normal
+  border-radius 2px
+  opacity 0
+  transition 0.1s
+
+body[data-theme="dark"]
+  .control-fullScreenButton
+    topBarButtonDark()
--- a/browser/main/Detail/InfoButton.js
+++ b/browser/main/Detail/InfoButton.js
@@ -10,6 +10,7 @@ const InfoButton = ({
    onClick={(e) => onClick(e)}
  >
    <img className='infoButton' src='../resources/icon/icon-info.svg' />
+    <span styleName='tooltip'>Info</span>
  </button>
 )

--- a/browser/main/Detail/InfoButton.styl
+++ b/browser/main/Detail/InfoButton.styl
@@ -1,6 +1,21 @@
 .control-infoButton
  top 10px
  topBarButtonRight()
+  &:hover .tooltip
+    opacity 1
+
+.tooltip
+  tooltip()
+  position absolute
+  pointer-events none
+  top 26px
+  right 0
+  z-index 200
+  padding 5px
+  line-height normal
+  border-radius 2px
+  opacity 0
+  transition 0.1s

 .infoButton
  padding 0px
--- a/browser/main/Detail/MarkdownNoteDetail.js
+++ b/browser/main/Detail/MarkdownNoteDetail.js
@@ -18,8 +18,10 @@ import { findNoteTitle } from 'browser/lib/findNoteTitle'
 import AwsMobileAnalyticsConfig from 'browser/main/lib/AwsMobileAnalyticsConfig'
 import ConfigManager from 'browser/main/lib/ConfigManager'
 import TrashButton from './TrashButton'
+import FullscreenButton from './FullscreenButton'
 import PermanentDeleteButton from './PermanentDeleteButton'
 import InfoButton from './InfoButton'
+import ToggleModeButton from './ToggleModeButton'
 import InfoPanel from './InfoPanel'
 import InfoPanelTrashed from './InfoPanelTrashed'
 import { formatDate } from 'browser/lib/date-formatter'
@@ -355,18 +357,9 @@ class MarkdownNoteDetail extends React.Component {
          onChange={(e) => this.handleChange(e)}
        />

-        <div styleName='mode-tab'>
-          <div styleName={editorType === 'SPLIT' ? 'active' : 'non-active'} onClick={() => this.handleSwitchMode('SPLIT')}>
-            <img styleName='item-star' src={editorType === 'EDITOR_PREVIEW' ? '../resources/icon/icon-mode-split-on.svg' : '../resources/icon/icon-mode-split-on-active.svg'} />
-          </div>
-          <div styleName={editorType === 'EDITOR_PREVIEW' ? 'active' : 'non-active'} onClick={() => this.handleSwitchMode('EDITOR_PREVIEW')}>
-            <img styleName='item-star' src={editorType === 'EDITOR_PREVIEW' ? '../resources/icon/icon-mode-markdown-off-active.svg' : '../resources/icon/icon-mode-markdown-off.svg'} />
-          </div>
-        </div>
+        <ToggleModeButton onClick={(e) => this.handleSwitchMode(e)} editorType={editorType} />

-        <TodoListPercentage
-          percentageOfTodo={getTodoPercentageOfCompleted(note.content)}
-        />
+        <TodoListPercentage percentageOfTodo={getTodoPercentageOfCompleted(note.content)} />
      </div>
      <div styleName='info-right'>
        <InfoButton
@@ -393,11 +386,7 @@ class MarkdownNoteDetail extends React.Component {
          )
        })()}

-        <button styleName='control-fullScreenButton'
-          onMouseDown={(e) => this.handleFullScreenButton(e)}
-        >
-          <img styleName='iconInfo' src='../resources/icon/icon-full.svg' />
-        </button>
+        <FullscreenButton onClick={(e) => this.handleFullScreenButton(e)} />

        <TrashButton onClick={(e) => this.handleTrashButtonClick(e)} />

--- a/browser/main/Detail/MarkdownNoteDetail.styl
+++ b/browser/main/Detail/MarkdownNoteDetail.styl
@@ -19,10 +19,6 @@
  top 40px
  position relative

-.control-fullScreenButton
-  top 80px
-  topBarButtonRight()
-
 .body
  absolute left right
  left 0
@@ -32,26 +28,6 @@
  margin 0 45px
 .body-noteEditor
  absolute top bottom left right
-
-.mode-tab
-  border 1px solid #eee
-  height 34px
-  display flex
-  align-items center
-  div
-    width 40px
-    height 100%
-    background-color #f9f9f9
-    display flex
-    align-items center
-    justify-content center
-    cursor pointer
-    &:first-child
-      border-right 1px solid #eee
-  .active
-    background-color #fff
-    box-shadow 2px 0px 7px #eee
-    z-index 1
  
 body[data-theme="white"]
  .root
--- a/browser/main/Detail/PermanentDeleteButton.js
+++ b/browser/main/Detail/PermanentDeleteButton.js
@@ -10,6 +10,7 @@ const PermanentDeleteButton = ({
    onClick={(e) => onClick(e)}
  >
    <img styleName='iconInfo' src='../resources/icon/icon-trash.svg' />
+    <span styleName='tooltip'>Permanent Delete</span>
  </button>
 )

--- a/browser/main/Detail/SnippetNoteDetail.js
+++ b/browser/main/Detail/SnippetNoteDetail.js
@@ -634,7 +634,7 @@ class SnippetNoteDetail extends React.Component {
          isActive={note.isStarred}
        />

-        <button styleName='control-fullScreenButton'
+        <button styleName='control-fullScreenButton' title='Fullscreen'
          onMouseDown={(e) => this.handleFullScreenButton(e)}>
          <img styleName='iconInfo' src='../resources/icon/icon-sidebar.svg' />
        </button>
--- a/browser/main/Detail/StarButton.js
+++ b/browser/main/Detail/StarButton.js
@@ -46,14 +46,14 @@ class StarButton extends React.Component {
        onMouseDown={(e) => this.handleMouseDown(e)}
        onMouseUp={(e) => this.handleMouseUp(e)}
        onMouseLeave={(e) => this.handleMouseLeave(e)}
-        onClick={this.props.onClick}
-      >
+        onClick={this.props.onClick}>
        <img styleName='icon'
          src={this.state.isActive || this.props.isActive
            ? '../resources/icon/icon-starred.svg'
            : '../resources/icon/icon-star.svg'
          }
        />
+        <span styleName='tooltip'>Star</span>
      </button>
    )
  }
--- a/browser/main/Detail/StarButton.styl
+++ b/browser/main/Detail/StarButton.styl
@@ -4,6 +4,22 @@
  &:hover
    transition 0.2s
    color alpha($ui-favorite-star-button-color, 0.6)
+  &:hover .tooltip
+    opacity 1
+
+.tooltip
+  tooltip()
+  position absolute
+  pointer-events none
+  top 26px
+  right 0
+  width 100%
+  z-index 200
+  padding 5px
+  line-height normal
+  border-radius 2px
+  opacity 0
+  transition 0.1s

 .root--active
  @extend .root
--- a/browser/main/Detail/ToggleModeButton.js
+++ b/browser/main/Detail/ToggleModeButton.js
@@ -0,0 +1,25 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+import CSSModules from 'browser/lib/CSSModules'
+import styles from './ToggleModeButton.styl'
+
+const ToggleModeButton = ({
+  onClick, editorType
+}) => (
+  <div styleName='control-toggleModeButton'>
+    <div styleName={editorType === 'SPLIT' ? 'active' : 'non-active'} onClick={() => onClick('SPLIT')}>
+      <img styleName='item-star' src={editorType === 'EDITOR_PREVIEW' ? '../resources/icon/icon-mode-split-on.svg' : '../resources/icon/icon-mode-split-on-active.svg'} />
+    </div>
+    <div styleName={editorType === 'EDITOR_PREVIEW' ? 'active' : 'non-active'} onClick={() => onClick('EDITOR_PREVIEW')}>
+      <img styleName='item-star' src={editorType === 'EDITOR_PREVIEW' ? '../resources/icon/icon-mode-markdown-off-active.svg' : '../resources/icon/icon-mode-markdown-off.svg'} />
+    </div>
+    <span styleName='tooltip'>Toggle Mode</span>
+  </div>
+)
+
+ToggleModeButton.propTypes = {
+  onClick: PropTypes.func.isRequired,
+  editorType: PropTypes.string.Required
+}
+
+export default CSSModules(ToggleModeButton, styles)
--- a/browser/main/Detail/ToggleModeButton.styl
+++ b/browser/main/Detail/ToggleModeButton.styl
@@ -0,0 +1,41 @@
+.control-toggleModeButton
+
+  border 1px solid #eee
+  height 34px
+  display flex
+  align-items center
+
+  div
+    width 40px
+    height 100%
+    background-color #f9f9f9
+    display flex
+    align-items center
+    justify-content center
+    cursor pointer
+
+    &:first-child
+      border-right 1px solid #eee
+    .active
+      background-color #fff
+      box-shadow 2px 0px 7px #eee
+      z-index 1
+  &:hover .tooltip
+    opacity 1
+
+.tooltip
+  tooltip()
+  position absolute
+  pointer-events none
+  top 47px
+  right 11px
+  z-index 200
+  padding 5px
+  line-height normal
+  border-radius 2px
+  opacity 0
+  transition 0.1s
+
+body[data-theme="dark"]
+  .control-fullScreenButton
+    topBarButtonDark()
--- a/browser/main/Detail/TrashButton.js
+++ b/browser/main/Detail/TrashButton.js
@@ -10,6 +10,7 @@ const TrashButton = ({
    onClick={(e) => onClick(e)}
  >
    <img styleName='iconInfo' src='../resources/icon/icon-trash.svg' />
+    <span styleName='tooltip'>Trash</span>
  </button>
 )

--- a/browser/main/Detail/TrashButton.styl
+++ b/browser/main/Detail/TrashButton.styl
@@ -1,6 +1,21 @@
 .control-trashButton
  top 115px
  topBarButtonRight()
+  &:hover .tooltip
+    opacity 1
+
+.tooltip
+  tooltip()
+  position absolute
+  pointer-events none
+  top 26px
+  right 0
+  z-index 200
+  padding 5px
+  line-height normal
+  border-radius 2px
+  opacity 0
+  transition 0.1s

 .control-trashButton--in-trash
  top 60px