Merge pull request #331 from asmsuechan/fix-the-behavior-of-lock

Fix the behavior of a feature which locks the editor
2025-12-13 09:46:22 +00:00 · 2017-03-20 15:31:44 +09:00
parent 1b474e1c28 6feeee8933
commit 9d1d57f183
7 changed files with 94 additions and 40 deletions
--- a/browser/components/MarkdownEditor.js
+++ b/browser/components/MarkdownEditor.js
@@ -82,7 +82,7 @@ class MarkdownEditor extends React.Component {
          this.refs.code.blur()
          this.refs.preview.focus()
        }
-        eventEmitter.emit('topbar:showlockbutton')
+        eventEmitter.emit('topbar:togglelockbutton', this.state.status)
      })
    }
  }
@@ -99,7 +99,7 @@ class MarkdownEditor extends React.Component {
        this.refs.preview.focus()
        this.refs.preview.scrollTo(cursorPosition.line)
      })
-      eventEmitter.emit('topbar:showlockbutton')
+      eventEmitter.emit('topbar:togglelockbutton', this.state.status)
    }
  }

@@ -115,7 +115,7 @@ class MarkdownEditor extends React.Component {
      }, () => {
        this.refs.code.focus()
      })
-      eventEmitter.emit('topbar:showlockbutton')
+      eventEmitter.emit('topbar:togglelockbutton', this.state.status)
    }
  }

@@ -152,7 +152,7 @@ class MarkdownEditor extends React.Component {
    } else {
      this.refs.code.focus()
    }
-    eventEmitter.emit('topbar:showlockbutton')
+    eventEmitter.emit('topbar:togglelockbutton', this.state.status)
  }

  reload () {
--- a/browser/main/Detail/MarkdownNoteDetail.js
+++ b/browser/main/Detail/MarkdownNoteDetail.js
@@ -26,12 +26,12 @@ class MarkdownNoteDetail extends React.Component {
        title: '',
        content: ''
      }, props.note),
-      editorStatus: false,
+      isLockButtonShown: false,
      isLocked: false
    }
    this.dispatchTimer = null

-    this.showLockButton = this.handleShowLockButton.bind(this)
+    this.toggleLockButton = this.handleToggleLockButton.bind(this)
  }

  focus () {
@@ -39,7 +39,7 @@ class MarkdownNoteDetail extends React.Component {
  }

  componentDidMount () {
-    ee.on('topbar:showlockbutton', this.showLockButton)
+    ee.on('topbar:togglelockbutton', this.toggleLockButton)
  }

  componentWillReceiveProps (nextProps) {
@@ -59,7 +59,7 @@ class MarkdownNoteDetail extends React.Component {
  }

  componentDidUnmount () {
-    ee.off('topbar:lock', this.showLockButton)
+    ee.off('topbar:togglelockbutton', this.toggleLockButton)
  }

  findTitle (value) {
@@ -219,6 +219,7 @@ class MarkdownNoteDetail extends React.Component {
    e.preventDefault()
    ee.emit('editor:lock')
    this.setState({ isLocked: !this.state.isLocked })
+    if (this.state.isLocked) this.focus()
  }

  getToggleLockButton () {
@@ -229,8 +230,13 @@ class MarkdownNoteDetail extends React.Component {
    if (e.keyCode === 27) this.handleDeleteCancelButtonClick(e)
  }

-  handleShowLockButton () {
-    this.setState({editorStatus: this.refs.content.state.status})
+  handleToggleLockButton (event, noteStatus) {
+    // first argument event is not used
+    if (this.props.config.editor.switchPreview === 'BLUR' && noteStatus === 'CODE') {
+      this.setState({isLockButtonShown: true})
+    } else {
+      this.setState({isLockButtonShown: false})
+    }
  }

  handleFocus (e) {
@@ -271,17 +277,20 @@ class MarkdownNoteDetail extends React.Component {
            {(() => {
              const faClassName=`fa ${this.getToggleLockButton()}`
              const lockButtonComponent =
-                <button styleName='info-right-button'
+                <button styleName='control-lockButton'
                  onFocus={(e) => this.handleFocus(e)}
                  onMouseDown={(e) => this.handleLockButtonMouseDown(e)}
                >
-                  <i className={faClassName}/>
+                  <i className={faClassName} styleName='lock-button'/>
+                  <span styleName='control-lockButton-tooltip'>
+                  {this.state.isLocked ? 'Unlock' : 'Lock'}
+                  </span>
                </button>
              return (
-                this.state.editorStatus === 'CODE' ? lockButtonComponent : ''
+                this.state.isLockButtonShown ? lockButtonComponent : ''
              )
            })()}
-            <button styleName='info-right-button'
+            <button styleName='control-trashButton'
              onClick={(e) => this.handleContextButtonClick(e)}
            >
              <svg height="17px" id="Capa_1" style={{"enableBackground":"new 0 0 753.23 753.23"}} width="17px" version="1.1" viewBox="0 0 753.23 753.23" x="0px" y="0px" xmlSpace="preserve">
--- a/browser/main/Detail/MarkdownNoteDetail.styl
+++ b/browser/main/Detail/MarkdownNoteDetail.styl
@@ -9,6 +9,28 @@
  background-color $ui-noteDetail-backgroundColor
  box-shadow $note-detail-box-shadow

+.lock-button
+  padding-bottom 3px
+
+.control-lockButton
+  topBarButtonLight()
+
+.control-lockButton-tooltip
+  tooltip()
+  position fixed
+  pointer-events none
+  top 50px
+  z-index 200
+  padding 5px
+  line-height normal
+  border-radius 2px
+  opacity 0
+  transition 0.1s
+
+.control-trashButton
+  float right
+  topBarButtonLight()
+
 .body
  absolute left right
  left $note-detail-left-margin
@@ -24,3 +46,12 @@ body[data-theme="dark"]
    border-color $ui-dark-borderColor
    background-color $ui-dark-noteDetail-backgroundColor
    box-shadow none
+
+  .control-lockButton
+    topBarButtonDark()
+
+  .control-lockButton-tooltip
+    darkTooltip()
+
+  .control-trashButton
+    topBarButtonDark()
--- a/browser/main/Detail/NoteDetailInfo.styl
+++ b/browser/main/Detail/NoteDetailInfo.styl
@@ -38,7 +38,7 @@ $info-margin-under-border = 27px
  margin 13px 2px
  padding 0
  border-radius 17px
-  &:hover .info-right-button-tooltip
+  &:hover .info-left-button-tooltip
    opacity 1
  &:focus
    border-color $ui-favorite-star-button-color
@@ -54,22 +54,6 @@ $info-margin-under-border = 27px
  bottom 1px
  padding-left 30px

-.info-right-button
-  width 34px
-  height 34px
-  border-radius 17px
-  font-size 14px
-  margin 13px 7px
-  padding-top 7px 
-  border none
-  color $ui-button-color
-  fill $ui-button-color
-  background-color transparent
-  &:hover
-    opacity 1
-    background-color $ui-button--hover-backgroundColor
-
-
 body[data-theme="dark"]
  .info
    border-color $ui-dark-borderColor
@@ -89,11 +73,3 @@ body[data-theme="dark"]

  .info-right
    background-color $ui-dark-noteDetail-backgroundColor
-
-  .info-right-button
-    navDarkButtonColor()
-    border-color $ui-dark-borderColor
-    &:active
-      border-color $ui-dark-button--focus-borderColor
-    &:focus
-      border-color $ui-button--focus-borderColor
--- a/browser/main/Detail/SnippetNoteDetail.js
+++ b/browser/main/Detail/SnippetNoteDetail.js
@@ -547,7 +547,7 @@ class SnippetNoteDetail extends React.Component {
            />
          </div>
          <div styleName='info-right'>
-            <button styleName='info-right-button'
+            <button styleName='control-trashButton'
              onClick={(e) => this.handleContextButtonClick(e)}
            >
              <svg height="17px" id="Capa_1" style={{"enableBackground":"new 0 0 753.23 753.23"}} width="17px" version="1.1" viewBox="0 0 753.23 753.23" x="0px" y="0px" xmlSpace="preserve">
--- a/browser/main/Detail/SnippetNoteDetail.styl
+++ b/browser/main/Detail/SnippetNoteDetail.styl
@@ -68,6 +68,10 @@
    &:active .update-icon
      color white

+.control-trashButton
+  float right
+  topBarButtonLight()
+
 body[data-theme="dark"]
  .root
    border-color $ui-dark-borderColor
@@ -93,3 +97,6 @@ body[data-theme="dark"]
  .override
    button
      border-color $ui-dark-borderColor
+
+  .control-trashButton
+    topBarButtonDark()
--- a/browser/styles/index.styl
+++ b/browser/styles/index.styl
@@ -139,6 +139,24 @@ modal()
  border-radius $modal-border-radius
  box-shadow 2px 2px 10px gray

+topBarButtonLight()
+  width 34px
+  height 34px
+  border-radius 17px
+  font-size 14px
+  margin 13px 7px
+  padding-top 7px
+  border none
+  color $ui-button-color
+  fill $ui-button-color
+  background-color transparent
+  &:active
+    border-color $ui-button--active-backgroundColor
+  &:hover
+    background-color $ui-button--hover-backgroundColor
+    .control-lockButton-tooltip
+      opacity 1
+
 // Dark theme
 $ui-dark-borderColor = lighten(#21252B, 20%)
 $ui-dark-backgroundColor = #1D1D1D
@@ -151,6 +169,7 @@ $ui-dark-button--active-color = white
 $ui-dark-button--active-backgroundColor = #6AA5E9
 $ui-dark-button--hover-backgroundColor = lighten($ui-dark-backgroundColor, 10%)
 $ui-dark-button--focus-borderColor = lighten(#369DCD, 25%)
+$ui-dark-topbar-button-color = #939395

 $dark-default-button-background = $ui-dark-backgroundColor
 $dark-default-button-background--hover = $ui-dark-button--hover-backgroundColor
@@ -190,6 +209,18 @@ navDarkButtonColor()
    background-color $ui-dark-button--active-backgroundColor
    color $ui-dark-button--active-color

+topBarButtonDark()
+  border-color $ui-dark-borderColor
+  color $ui-dark-topbar-button-color
+  &:hover
+    background-color $dark-default-button-background--hover
+  &:active
+    border-color $ui-dark-button--focus-borderColor
+  &:active:hover
+    background-color $ui-dark-button--active-backgroundColor
+  &:focus
+    border-color $ui-button--focus-borderColor
+
 $ui-dark-tooltip-text-color = white
 $ui-dark-tooltip-backgroundColor = alpha(#444, 70%)
 $ui-dark-tooltip-button-backgroundColor = #D1D1D1