Merge pull request #979 from BoostIO/fix-layout

Fix layout

browser/components/NavToggleButton.styl

@@ -2,7 +2,7 @@
   navButtonColor()
   display block
   position absolute
-  right 5px
+  left 5px
   bottom 5px
   border-radius 16.5px
   height 34px

browser/components/NoteItem.js

@@ -73,7 +73,7 @@ const NoteItem = ({ isActive, note, dateDisplay, handleNoteClick, handleNoteCont
         ? <i styleName='item-star' className='fa fa-star' /> : ''
       }
       {note.isPinned && !pathname.match(/\/home|\/starred|\/trash/)
-        ? <i styleName='item-pin' className='fa fa-map-pin' /> : ''
+        ? <i styleName='item-pin' className='fa fa-thumb-tack' /> : ''
       }
       {note.type === 'MARKDOWN_NOTE'
         ? <TodoProcess todoStatus={getTodoStatus(note.content)} />

browser/components/NoteItem.styl

@@ -126,6 +126,17 @@ $control-height = 30px
   padding 0
   border-radius 17px
 
+.item-pin
+  position absolute
+  right -21px
+  bottom 28px
+  width 34px
+  height 34px
+  color #E54D42
+  font-size 14px
+  padding 0
+  border-radius 17px
+
 body[data-theme="dark"]
   .root
     border-color $ui-dark-borderColor

browser/components/SideNavFilter.styl

@@ -17,12 +17,12 @@
   .menu-button-label
     color $ui-text-color
   &:hover
-    background-color $ui-button--active-backgroundColor
+    background-color alpha($ui-button--active-backgroundColor, 50%)
     color #e74c3c
     .menu-button-label
       color $ui-text-color
   &:active, &:active:hover
-    background-color $ui-button--active-backgroundColor
+    background-color alpha($ui-button--active-backgroundColor, 50%)
     color #e74c3c
     .menu-button-label
       color $ui-text-color
@@ -34,12 +34,12 @@
   .menu-button-label
     color $ui-text-color
   &:hover
-    background-color $ui-button--active-backgroundColor
+    background-color alpha($ui-button--active-backgroundColor, 50%)
     color #F9BF3B
     .menu-button-label
       color $ui-text-color
   &:active, &:active:hover
-    background-color $ui-button--active-backgroundColor
+    background-color alpha($ui-button--active-backgroundColor, 50%)
     color #F9BF3B
     .menu-button-label
       color $ui-text-color
@@ -88,7 +88,7 @@ body[data-theme="dark"]
     .menu-button-label
       color $ui-dark-text-color
     &:hover
-      background-color $ui-dark-button--active-backgroundColor
+      background-color alpha($ui-dark-button--active-backgroundColor, 50%)
       color #c0392b
       .menu-button-label
         color $ui-dark-text-color
@@ -99,7 +99,7 @@ body[data-theme="dark"]
     .menu-button-label
       color $ui-dark-text-color
     &:hover
-      background-color $ui-dark-button--active-backgroundColor
+      background-color alpha($ui-dark-button--active-backgroundColor, 50%)
       color $ui-favorite-star-button-color
       .menu-button-label
         color $ui-dark-text-color

browser/components/StorageItem.styl

@@ -30,7 +30,7 @@
   background-color $ui-button--active-backgroundColor
   &:hover
     color $ui-text-color
-    background-color $ui-button--active-backgroundColor
+    background-color alpha($ui-button--active-backgroundColor, 50%)
 
 .folderList-item-name
   display block
@@ -86,7 +86,7 @@ body[data-theme="dark"]
     color $ui-dark-text-color
     background-color $ui-dark-button--active-backgroundColor
     &:active
-      background-color $ui-dark-button--active-backgroundColor
+      background-color alpha($ui-dark-button--active-backgroundColor, 50%)
     &:hover
       color $ui-dark-text-color
-      background-color $ui-dark-button--active-backgroundColor
+      background-color alpha($ui-dark-button--active-backgroundColor, 50%)

browser/components/TagListItem.styl

@@ -31,6 +31,9 @@
   border none
   overflow ellipsis
   font-size 12px
+  &:hover
+    background-color alpha($ui-button--active-backgroundColor, 60%)
+    transition 0.2s
 
 .tagList-item-name
   display block
@@ -43,3 +46,22 @@
   border-color transparent
   overflow hidden
   text-overflow ellipsis
+
+body[data-theme="dark"]
+  .tagList-item
+    color $ui-dark-inactive-text-color
+    &:hover
+      color $ui-dark-text-color
+      background-color alpha($ui-dark-button--active-backgroundColor, 20%)
+    &:active
+      color $ui-dark-text-color
+      background-color $ui-dark-button--active-backgroundColor
+
+  .tagList-item-active
+    background-color $ui-dark-button--active-backgroundColor
+    color $ui-dark-text-color
+    &:active
+      background-color alpha($ui-dark-button--active-backgroundColor, 50%)
+    &:hover
+      color $ui-dark-text-color
+      background-color alpha($ui-dark-button--active-backgroundColor, 50%)

browser/main/NewNoteButton/NewNoteButton.styl

@@ -13,8 +13,7 @@ $control-height = 34px
 .control
   position absolute
   top 13px
-  left 8px
+  right 7px
-  right 8px
   height $control-height
   overflow hidden
   display flex

browser/main/NoteList/index.js

@@ -524,13 +524,13 @@ class NoteList extends React.Component {
       >
         <div styleName='control'>
           <div styleName='control-sortBy'>
-            <i className='fa fa-bolt' />
+            <i className='fa fa-angle-down' />
             <select styleName='control-sortBy-select'
               value={config.sortBy}
               onChange={(e) => this.handleSortByChange(e)}
             >
-              <option value='UPDATED_AT'>Last Updated</option>
+              <option value='UPDATED_AT'>Updated</option>
-              <option value='CREATED_AT'>Creation Time</option>
+              <option value='CREATED_AT'>Created</option>
               <option value='ALPHABETICAL'>Alphabetically</option>
             </select>
           </div>

browser/main/SideNav/SideNav.styl

@@ -6,88 +6,59 @@
   color $ui-text-color
 
 .top
-  height $topBar-height
+  height 45px
 
 .top-menu
   navButtonColor()
-  height $topBar-height
+  position absolute
-  padding 0 15px
+  top 22px
-  font-size 12px
+  right 5px
-  width 33%
-  text-align center
   &:hover
     color $ui-text-color
   &:active, &:active:hover
     color $ui-text-color
     background-color alpha($ui-button--active-backgroundColor, 20%)
 
-.active-button
+.switch-buttons
-  background-color $ui-button--active-color
+  background-color transparent
+  border 1px solid $ui-borderColor
+  width 110px
+  height 25px
+  margin 20px auto 0px auto
+  border-radius 1px
 
 .non-active-button
-  background-color $ui-button-color
+  navButtonColor()
+  font-weight 600
+  width 54px
+  height 23px
+
+.active-button
+  @extend .non-active-button
+  background-color $ui-button--active-backgroundColor
+  color $ui-text-color
+  &:hover
+    background-color alpha($ui-button--active-backgroundColor, 70%)
+    color alpha($ui-text-color, 70%)
+  &:active, &:active:hover
+    background-color $ui-button--active-backgroundColor
 
 .top-menu-label
   margin-left 5px
   overflow ellipsis
 
+.tag-title
+  height 65px
+  position relative
+  left 15px
+  p
+    color $ui-text-color
+
 .tagList
   absolute left right
   bottom 37px
-  top 80px
   overflow-y auto
-
+  position relative
-.root--folded
-  @extend .root
-  width 44px
-  .top-menu
-    width 44px - 1
-    text-align center
-    &:hover .top-menu-label
-      transition opacity 0.15s
-      opacity 1
-  .top-menu-label
-    position fixed
-    display inline-block
-    height 30px
-    left 32px
-    padding 0 10px
-    margin-top -8px
-    opacity 0
-    margin-left 0
-    overflow hidden
-    background-color $ui-tooltip-backgroundColor
-    z-index 10
-    color white
-    line-height 30px
-    border-top-right-radius 2px
-    border-bottom-right-radius 2px
-    pointer-events none
-    font-size 12px
-  .menu-button, .menu-button--active
-    text-align center
-    &:hover .menu-button-label
-      transition opacity 0.15s
-      opacity 1
-
-  .menu-button-label
-    position fixed
-    display inline-block
-    height 32px
-    left 44px
-    padding 0 10px
-    margin-top -8px
-    margin-left 0
-    overflow ellipsis
-    background-color $ui-tooltip-backgroundColor
-    z-index 10
-    color white
-    line-height 32px
-    border-top-right-radius 2px
-    border-bottom-right-radius 2px
-    pointer-events none
-    opacity 0
-    font-size 12px
 
 body[data-theme="dark"]
   .root, .root--folded
@@ -104,3 +75,27 @@ body[data-theme="dark"]
       background-color alpha($ui-dark-button--active-backgroundColor, 20%)
     &:hover
       background-color alpha($ui-dark-button--active-backgroundColor, 20%)
+
+  .switch-buttons
+    border-color $ui-dark-borderColor
+
+  .non-active-button
+    navDarkButtonColor()
+
+  .active-button
+    @extend .non-active-button
+    background-color $ui-dark-button--active-backgroundColor
+    color $ui-dark-text-color
+    &:hover
+      background-color alpha($ui-dark-button--active-backgroundColor, 70%)
+      color alpha($ui-dark-text-color, 70%)
+    &:active
+      color $ui-dark-text-color
+      background-color alpha($ui-dark-button--active-backgroundColor, 60%)
+    &:active, &:active:hover
+      color $ui-dark-text-color
+      background-color $ui-dark-button--active-backgroundColor
+
+  .tag-title
+    p
+      color alpha($ui-dark-text-color, 60%)

browser/main/SideNav/index.js

@@ -145,11 +145,13 @@ class SideNav extends React.Component {
             <button styleName={isTagActive ? 'non-active-button' : 'active-button'} onClick={this.handleSwitchFoldersButtonClick.bind(this)}>Folders</button>
             <button styleName={isTagActive ? 'active-button' : 'non-active-button'} onClick={this.handleSwitchTagsButtonClick.bind(this)}>Tags</button>
           </div>
-          <button styleName='top-menu'
+          <div>
-            onClick={(e) => this.handleMenuButtonClick(e)}
+            <button styleName='top-menu'
-          >
+              onClick={(e) => this.handleMenuButtonClick(e)}
-            <i className='fa fa-wrench fa-fw' />
+            >
-          </button>
+              <i className='fa fa-wrench fa-fw' />
+            </button>
+          </div>
         </div>
         {this.SideNavComponent(isFolded, storageList)}
       </div>

browser/main/modals/PreferencesModal/Crowdfunding.js

@@ -0,0 +1,52 @@
+import React from 'react'
+import CSSModules from 'browser/lib/CSSModules'
+import styles from './Crowdfunding.styl'
+import ConfigManager from 'browser/main/lib/ConfigManager'
+import store from 'browser/main/store'
+
+const electron = require('electron')
+const { shell, remote } = electron
+
+class Crowdfunding extends React.Component {
+  constructor (props) {
+    super(props)
+
+    this.state = {
+      config: this.props.config
+    }
+  }
+
+  handleLinkClick (e) {
+    shell.openExternal(e.currentTarget.href)
+    e.preventDefault()
+  }
+
+  render () {
+    return (
+      <div styleName='root'>
+        <div styleName='header'>Crowdfunding</div>
+        <p>Dear all,</p>
+        <br />
+        <p>Thanks for your using!</p>
+        <p>Boostnote is used in about 200 countries and regions, it is a awesome developer community.</p>
+        <br />
+        <p>To continue supporting this growth, and to satisfy community expectations,</p>
+        <p>we would like to invest more time in this project.</p>
+        <br />
+        <p>If you like this project and see its potential, you can help!</p>
+        <br />
+        <p>Thanks,</p>
+        <p>Boostnote maintainers.</p>
+        <br />
+        <button styleName='cf-link'>
+          <a href='https://salt.bountysource.com/teams/boostnote' onClick={(e) => this.handleLinkClick(e)}>Support via Bountysource</a>
+        </button>
+      </div>
+    )
+  }
+}
+
+Crowdfunding.propTypes = {
+}
+
+export default CSSModules(Crowdfunding, styles)

browser/main/modals/PreferencesModal/Crowdfunding.styl

@@ -0,0 +1,30 @@
+@import('./Tab')
+
+.root
+  padding 15px
+  white-space pre
+  line-height 1.4
+  color alpha($ui-text-color, 90%)
+  width 100%
+  font-size 14px
+p
+  font-size 16px
+
+.cf-link
+  width 250px
+  height 35px
+  border-radius 2px
+  border none
+  background-color alpha(#1EC38B, 90%)
+  &:hover
+    background-color #1EC38B
+    transition 0.2s
+  a
+    text-decoration none
+    color white
+    font-weight 600
+    font-size 16px
+
+body[data-theme="dark"]
+  p
+    color $ui-dark-text-color

browser/main/modals/PreferencesModal/HotkeyTab.js

@@ -94,7 +94,7 @@ class HotkeyTab extends React.Component {
             </div>
           </div>
           <div styleName='group-section'>
-            <div styleName='group-section-label'>Toggle Finder(popup)</div>
+            <div styleName='group-section-label'>Toggle Finder (Quick search)</div>
             <div styleName='group-section-control'>
               <input styleName='group-section-control-input'
                 onChange={(e) => this.handleHotkeyChange(e)}

browser/main/modals/PreferencesModal/InfoTab.js

@@ -76,7 +76,7 @@ class InfoTab extends React.Component {
           <li>
             <a href='https://salt.bountysource.com/teams/boostnote'
               onClick={(e) => this.handleLinkClick(e)}
-            >Donate via Bountysource</a> : Thank you for your support 🎉
+            >Crowdfunding</a> : Thank you for your support 🎉
           </li>
           <li>
             <a href='https://github.com/BoostIO/Boostnote/issues'

browser/main/modals/PreferencesModal/PreferencesModal.styl

@@ -25,7 +25,7 @@ top-bar--height = 50px
   absolute top left right
   top top-bar--height
   left 0
-  width 140px
+  width 170px
   margin-left 10px
   margin-top 20px
   background-color $ui-backgroundColor
@@ -33,7 +33,7 @@ top-bar--height = 50px
 .nav-button
   font-size 14px
   text-align left
-  width 120px
+  width 150px
   margin 5px 0
   padding 7px 0
   padding-left 10px
@@ -56,7 +56,7 @@ top-bar--height = 50px
 .content
   absolute left right bottom
   top top-bar--height
-  left 140px
+  left 170px
   margin-top 10px
   overflow-y auto
 

browser/main/modals/PreferencesModal/index.js

@@ -4,6 +4,7 @@ import { connect } from 'react-redux'
 import HotkeyTab from './HotkeyTab'
 import UiTab from './UiTab'
 import InfoTab from './InfoTab'
+import Crowdfunding from './Crowdfunding'
 import StoragesTab from './StoragesTab'
 import ModalEscButton from 'browser/components/ModalEscButton'
 import CSSModules from 'browser/lib/CSSModules'
@@ -64,6 +65,13 @@ class Preferences extends React.Component {
             config={config}
           />
         )
+      case 'CROWDFUNDING':
+        return (
+          <Crowdfunding
+            dispatch={dispatch}
+            config={config}
+          />
+        )
       case 'STORAGES':
       default:
         return (
@@ -94,7 +102,8 @@ class Preferences extends React.Component {
       {target: 'STORAGES', label: 'Storages'},
       {target: 'HOTKEY', label: 'Hotkey'},
       {target: 'UI', label: 'UI'},
-      {target: 'INFO', label: 'Info'}
+      {target: 'INFO', label: 'Info'},
+      {target: 'CROWDFUNDING', label: 'Crowdfunding'}
     ]
 
     let navButtons = tabs.map((tab) => {