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

Fix the behavior of a feature which locks the editor

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 () {

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 () {
+  handleToggleLockButton (event, noteStatus) {
-    this.setState({editorStatus: this.refs.content.state.status})
+    // 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">

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()

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

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">

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()

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