Merge pull request #1121 from BoostIO/fix-note-detail-layout

Fix note detail layout

Backers.md

@@ -9,16 +9,20 @@ Boostnote is an open source project. It's an independent project with its ongoin
 ## Backers via OpenCollective
 <a href="https://opencollective.com/boostnoteio#backers" target="_blank"><img src="https://opencollective.com/boostnoteio/backers.svg?width=890"></a>
 
-- [Kazu Yokomizo](https://twitter.com/kazup_bot) - $20
+- [Ralph03](https://opencollective.com/ralph03) - $24
 
 - [Nikolas Dan](https://opencollective.com/nikolas-dan) - $20
 
 - [tatoosh11](https://twitter.com/ta11) - $10
 
+- [Alexander Borovkov](https://opencollective.com/alexander-borovkov) - $10
+
 - [Yeojong Kim](https://twitter.com/yeojoy) - $5
 
 - [Scotia Draven](https://opencollective.com/scotia-draven) - $5
 
+- [spoonhoop](https://opencollective.com/spoonhoop) - $5
+
 ## Backers via Bountysource
 https://salt.bountysource.com/teams/boostnote
 

browser/components/NoteItem.styl

@@ -149,13 +149,15 @@ body[data-theme="white"]
   .item
     background-color $ui-white-noteList-backgroundColor
     &:hover
-      background-color alpha($ui-button--active-backgroundColor, 40%)
+      background-color alpha($ui-button--active-backgroundColor, 60%)
     &:active
       background-color $ui-button--active-backgroundColor
 
   .item--active
     @extend .item
     background-color $ui-button--active-backgroundColor
+    &:hover
+      background-color alpha($ui-button--active-backgroundColor, 60%)
 
 body[data-theme="dark"]
   .root
@@ -208,7 +210,7 @@ body[data-theme="dark"]
       background-color alpha(white, 10%)
       color $ui-dark-text-color
     &:hover
-      background-color alpha($ui-dark-button--active-backgroundColor, 50%)
+      background-color alpha($ui-dark-button--active-backgroundColor, 60%)
       color #c0392b
       .item-bottom-tagList-item
         background-color alpha(#fff, 20%)

browser/components/NoteItemSimple.styl

@@ -71,13 +71,15 @@ body[data-theme="white"]
   .item-simple
     background-color $ui-white-noteList-backgroundColor
     &:hover
-      background-color alpha($ui-button--active-backgroundColor, 40%)
+      background-color alpha($ui-button--active-backgroundColor, 60%)
     &:active
       background-color $ui-button--active-backgroundColor
 
   .item-simple--active
     @extend .item-simple
     background-color $ui-button--active-backgroundColor
+    &:hover
+      background-color alpha($ui-button--active-backgroundColor, 60%)
 
 body[data-theme="dark"]
   .root
@@ -127,7 +129,7 @@ body[data-theme="dark"]
       background-color alpha(white, 10%)
       color $ui-dark-text-color
     &:hover
-      background-color alpha($ui-dark-button--active-backgroundColor, 50%)
+      background-color alpha($ui-dark-button--active-backgroundColor, 60%)
       color #c0392b
       .item-simple-bottom-tagList-item
         background-color alpha(#fff, 20%)

browser/components/TodoListPercentage.styl

@@ -1,7 +1,7 @@
 .percentageBar
   position absolute
-  top 58px
+  top 40px
-  right: 0px
+  right 0px
   left 0px
   background-color #DADFE1
   width 100%

browser/main/Detail/DetailVars.styl

@@ -3,7 +3,7 @@
  */
 
 // Margin on the left side and the right side for NoteDetail component.
-$note-detail-left-margin = 25px
+$note-detail-left-margin = 50px
-$note-detail-right-margin = 25px
+$note-detail-right-margin = 70px
 
 $note-detail-box-shadow = 2px 0 15px -8px #b1b1b1 inset

browser/main/Detail/InfoButton.js

@@ -8,7 +8,7 @@ const InfoButton = ({
   <button styleName='control-infoButton'
     onClick={onClick}
   >
-    <i className='fa fa-info infoButton' styleName='info-button' />
+    <i className='fa fa-info-circle infoButton' styleName='info-button' />
   </button>
 )
 

browser/main/Detail/InfoButton.styl

@@ -1,5 +1,5 @@
 .control-infoButton
-  float right
+  top 10px
   topBarButtonLight()
 
 .control-infoPanel

browser/main/Detail/InfoPanel.styl

@@ -11,7 +11,7 @@
 .control-infoButton-panel
   z-index 200
   margin-top 38px
-  margin-left -140px
+  right 0px
   position absolute
   padding 20px 25px 0 25px
   width 300px
@@ -33,7 +33,7 @@
 .control-infoButton-panel-trash
   z-index 200
   margin-top 45px
-  margin-left -190px
+  right 0px
   position absolute
   padding 20px 25px 0 25px
   width 300px

browser/main/Detail/MarkdownNoteDetail.js

@@ -15,6 +15,7 @@ import _ from 'lodash'
 import { findNoteTitle } from 'browser/lib/findNoteTitle'
 import AwsMobileAnalyticsConfig from 'browser/main/lib/AwsMobileAnalyticsConfig'
 import TrashButton from './TrashButton'
+import PermanentDeleteButton from './PermanentDeleteButton'
 import InfoButton from './InfoButton'
 import InfoPanel from './InfoPanel'
 import InfoPanelTrashed from './InfoPanelTrashed'
@@ -231,7 +232,7 @@ class MarkdownNoteDetail extends React.Component {
   }
 
   getToggleLockButton () {
-    return this.state.isLocked ? 'fa-lock' : 'fa-unlock'
+    return this.state.isLocked ? 'fa-eye-slash' : 'fa-eye'
   }
 
   handleDeleteKeyDown (e) {
@@ -285,7 +286,7 @@ class MarkdownNoteDetail extends React.Component {
         />
       </div>
       <div styleName='info-right'>
-        <TrashButton onClick={(e) => this.handleTrashButtonClick(e)} />
+        <PermanentDeleteButton onClick={(e) => this.handleTrashButtonClick(e)} />
         <InfoButton
           onClick={(e) => this.handleInfoButtonClick(e)}
         />
@@ -302,10 +303,6 @@ class MarkdownNoteDetail extends React.Component {
 
     const detailTopBar = <div styleName='info'>
       <div styleName='info-left'>
-        <StarButton styleName='info-left-button'
-          onClick={(e) => this.handleStarButtonClick(e)}
-          isActive={note.isStarred}
-        />
         <div styleName='info-left-top'>
           <FolderSelect styleName='info-left-top-folderSelect'
             value={this.state.note.storage + '-' + this.state.note.folder}
@@ -325,6 +322,15 @@ class MarkdownNoteDetail extends React.Component {
         />
       </div>
       <div styleName='info-right'>
+        <InfoButton
+          onClick={(e) => this.handleInfoButtonClick(e)}
+        />
+
+        <StarButton
+          onClick={(e) => this.handleStarButtonClick(e)}
+          isActive={note.isStarred}
+        />
+
         {(() => {
           const faClassName = `fa ${this.getToggleLockButton()}`
           const lockButtonComponent =
@@ -333,23 +339,20 @@ class MarkdownNoteDetail extends React.Component {
               onMouseDown={(e) => this.handleLockButtonMouseDown(e)}
             >
               <i className={faClassName} styleName='lock-button' />
-              <span styleName='control-lockButton-tooltip'>
-                {this.state.isLocked ? 'Unlock Editor' : 'Keep Editor Locked'}
-              </span>
             </button>
           return (
             this.state.isLockButtonShown ? lockButtonComponent : ''
           )
         })()}
-        <TrashButton onClick={(e) => this.handleTrashButtonClick(e)} />
+
         <button styleName='control-fullScreenButton'
           onMouseDown={(e) => this.handleFullScreenButton(e)}
         >
           <i className='fa fa-window-maximize' styleName='fullScreen-button' />
         </button>
-        <InfoButton
+
-          onClick={(e) => this.handleInfoButtonClick(e)}
+        <TrashButton onClick={(e) => this.handleTrashButtonClick(e)} />
-        />
+
         <InfoPanel
           storageName={currentOption.storage.name}
           folderName={currentOption.folder.name}

browser/main/Detail/MarkdownNoteDetail.styl

@@ -11,23 +11,15 @@
   padding-bottom 3px
 
 .control-lockButton
+  top 160px
   topBarButtonLight()
 
-.control-lockButton-tooltip
+.trashed-infopanel
-  tooltip()
+  top 40px
-  position fixed
+  position relative
-  pointer-events none
-  top 50px
-  z-index 200
-  padding 5px
-  line-height normal
-  border-radius 2px
-  opacity 0
-  transition 0.1s
 
 .control-fullScreenButton
-  float right
+  top 80px
-  padding 0 0 2px 0
   topBarButtonLight()
 
 .body

browser/main/Detail/NoteDetailInfo.styl

@@ -1,7 +1,7 @@
 @import('DetailVars')
 
-$info-height = 60px
+$info-height = 40px
-$info-margin-under-border = 27px
+$info-margin-under-border = 15px
 
 .info
   absolute top left right
@@ -13,8 +13,10 @@ $info-margin-under-border = 27px
 
 .info-left
   float left
-  padding 0 5px
+  padding 0 7px
-  margin 0px 2px
+  width 100%
+  display flex
+
 .info-left-top
   display inline-block
   height $info-height
@@ -22,12 +24,13 @@ $info-margin-under-border = 27px
 
 .info-left-top-folderSelect
   padding 0 3px
-  height 34px
+  height 40px
-  line-height 26px
+  line-height 40px
   display flex
   align-items center
   justify-content center
   border-radius 3px
+
 .info-left-button
   width 34px
   height 34px
@@ -48,7 +51,7 @@ $info-margin-under-border = 27px
 
 .info-right
   position absolute
-  right 0
+  right -20px
   top 0
   background $ui-noteDetail-backgroundColor
   bottom 1px
@@ -59,7 +62,7 @@ $info-margin-under-border = 27px
   height 34px
   border-radius 17px
   font-size 14px
-  margin 15px 7px
+  margin 5px 0px
   border none
   color $ui-button-color
   display flex
@@ -72,6 +75,7 @@ $info-margin-under-border = 27px
     border-color $ui-button--active-backgroundColor
   &:hover
     background-color alpha($ui-button--hover-backgroundColor, 60%)
+    transition 0.2s
     .control-lockButton-tooltip
       opacity 1
 

browser/main/Detail/PermanentDeleteButton.js

@@ -0,0 +1,19 @@
+import React, { PropTypes } from 'react'
+import CSSModules from 'browser/lib/CSSModules'
+import styles from './TrashButton.styl'
+
+const PermanentDeleteButton = ({
+  onClick
+}) => (
+  <button styleName='control-trashButton--in-trash'
+    onClick={(e) => onClick(e)}
+  >
+    <i className='fa fa-trash trashButton' styleName='info-button' />
+  </button>
+)
+
+PermanentDeleteButton.propTypes = {
+  onClick: PropTypes.func.isRequired
+}
+
+export default CSSModules(PermanentDeleteButton, styles)

browser/main/Detail/SnippetNoteDetail.js

@@ -583,10 +583,6 @@ class SnippetNoteDetail extends React.Component {
 
     const detailTopBar = <div styleName='info'>
       <div styleName='info-left'>
-        <StarButton styleName='info-left-button'
-          onClick={(e) => this.handleStarButtonClick(e)}
-          isActive={note.isStarred}
-        />
         <div styleName='info-left-top'>
           <FolderSelect styleName='info-left-top-folderSelect'
             value={this.state.note.storage + '-' + this.state.note.folder}
@@ -603,15 +599,21 @@ class SnippetNoteDetail extends React.Component {
         />
       </div>
       <div styleName='info-right'>
-        <TrashButton onClick={(e) => this.handleTrashButtonClick(e)} />
-        <button styleName='control-fullScreenButton'
-          onMouseDown={(e) => this.handleFullScreenButton(e)}
-        >
-          <i className='fa fa-window-maximize' styleName='fullScreen-button' />
-        </button>
         <InfoButton
           onClick={(e) => this.handleInfoButtonClick(e)}
         />
+
+        <StarButton
+          onClick={(e) => this.handleStarButtonClick(e)}
+          isActive={note.isStarred}
+        />
+
+        <button styleName='control-fullScreenButton'
+          onMouseDown={(e) => this.handleFullScreenButton(e)}>
+          <i className='fa fa-window-maximize' styleName='fullScreen-button' />
+        </button>
+
+        <TrashButton onClick={(e) => this.handleTrashButtonClick(e)} />
         <InfoPanel
           storageName={currentOption.storage.name}
           folderName={currentOption.folder.name}

browser/main/Detail/SnippetNoteDetail.styl

@@ -43,7 +43,7 @@
   overflow hidden
 
 .tabList .plusButton
-  navButtonColor()
+  navWhiteButtonColor()
   width 30px
 
 .tabView
@@ -66,8 +66,7 @@
       color white
 
 .control-fullScreenButton
-  float right
+  top 80px
-  padding 0 0 2px 0
   topBarButtonLight()
 
 body[data-theme="white"]

browser/main/Detail/StarButton.styl

@@ -1,47 +1,24 @@
 .root
-  left 7px
+  top 45px
-  top 0
+  topBarButtonLight()
-  padding 0
-  color alpha($ui-favorite-star-button-color, 60%)
   &:hover
-    transition 0.15s
+    transition 0.2s
-    background-color alpha($ui-button--active-backgroundColor, 40%)
+    color alpha($ui-favorite-star-button-color, 0.6)
-    color $ui-favorite-star-button-color
-  &:active
-    transition 0.15s
-    background-color alpha($ui-button--active-backgroundColor, 40%)
-    color $ui-favorite-star-button-color
 
 .root--active
   @extend .root
+  transition 0.15s
   color $ui-favorite-star-button-color
   &:hover
-    transition 0.15s
+    transition 0.2s
-    color $ui-favorite-star-button-color
+    color alpha($ui-favorite-star-button-color, 0.6)
-    background-color alpha($ui-button--active-backgroundColor, 40%)
-  &:active
-    transition 0.15s
-    color $ui-favorite-star-button-color
-    background-color alpha($ui-button--active-backgroundColor, 40%)
 
 .icon
   transition transform 0.15s
 
 body[data-theme="dark"]
   .root
+    topBarButtonDark()
     &:hover
-      transition 0.15s
+      transition 0.2s
-      background-color alpha($ui-dark-button--active-backgroundColor, 20%)
+      color alpha($ui-favorite-star-button-color, 0.6)
-      color $ui-favorite-star-button-color
-    &:active
-      transition 0.15s
-      background-color alpha($ui-dark-button--active-backgroundColor, 20%)
-      color $ui-favorite-star-button-color
-
-  .root--active
-    @extend .root
-    color $ui-favorite-star-button-color
-    &:hover
-      transition 0.15s
-      color $ui-favorite-star-button-color
-      background-color alpha($ui-dark-button--active-backgroundColor, 20%)

browser/main/Detail/TagSelect.styl

@@ -1,9 +1,10 @@
 .root
   display inline-block
   user-select none
-  height 23px
+  line-height 50px
+  height 50px
   vertical-align middle
-  width 300px
+  width 100%
   overflow-x scroll
   white-space nowrap
 
@@ -12,9 +13,7 @@
 
 .tag
   display inline-block
-  margin 1px 3px
+  margin 0px 2px
-  padding 0
-  height 20px
   background-color alpha($ui-tag-backgroundColor, 10%)
   border-radius 3px
   overflow hidden

browser/main/Detail/TrashButton.styl

@@ -1,5 +1,9 @@
 .control-trashButton
-  float right
+  top 120px
+  topBarButtonLight()
+
+.control-trashButton--in-trash
+  top 60px
   topBarButtonLight()
 
 .trashButton

browser/styles/index.styl

@@ -180,19 +180,21 @@ modal()
   border-radius $modal-border-radius
 
 topBarButtonLight()
+  position absolute
   width 34px
   height 34px
   border-radius 17px
   font-size 14px
-  margin 15px 7px
   border none
-  color $ui-button-color
+  color alpha($ui-button-color, 0.4)
   fill $ui-button-color
   background-color transparent
   &:active
     border-color $ui-button--active-backgroundColor
   &:hover
-    background-color alpha($ui-button--hover-backgroundColor, 60%)
+    transform scale(1.1)
+    transition 0.4s
+    color $ui-button-color
     .control-lockButton-tooltip
       opacity 1
 
@@ -282,12 +284,10 @@ topBarButtonDark()
   border-color $ui-dark-borderColor
   color $ui-dark-topbar-button-color
   &:hover
-    background-color $dark-default-button-background--hover
     color $ui-dark-tooltip-text-color
   &:active
     border-color $ui-dark-button--focus-borderColor
   &:active:hover
-    background-color $ui-dark-button--active-backgroundColor
     color $ui-dark-tooltip-text-color
   &:focus
     border-color $ui-button--focus-borderColor