Merge pull request BoostIO#979 from BoostIO/fix-layout

Fix layout
davidmoshal · Oct 15, 2017 · 1beae44 · 1beae44
2 parents 7a4052e + dedf36f
commit 1beae44
Show file tree

Hide file tree

Showing 16 changed files with 209 additions and 89 deletions.
diff --git a/browser/components/NavToggleButton.styl b/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

diff --git a/browser/components/NoteItem.js b/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)} />

diff --git a/browser/components/NoteItem.styl b/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

diff --git a/browser/components/SideNavFilter.styl b/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
diff --git a/browser/components/StorageItem.styl b/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%)
diff --git a/browser/components/TagListItem.styl b/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%)
diff --git a/browser/main/NewNoteButton/NewNoteButton.styl b/browser/main/NewNoteButton/NewNoteButton.styl
@@ -13,8 +13,7 @@ $control-height = 34px
 .control
   position absolute
   top 13px
-  left 8px
-  right 8px
+  right 7px
   height $control-height
   overflow hidden
   display flex

diff --git a/browser/main/NoteList/index.js b/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='CREATED_AT'>Creation Time</option>
+              <option value='UPDATED_AT'>Updated</option>
+              <option value='CREATED_AT'>Created</option>
               <option value='ALPHABETICAL'>Alphabetically</option>
             </select>
           </div>

diff --git a/browser/main/SideNav/SideNav.styl b/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
-  padding 0 15px
-  font-size 12px
-  width 33%
-  text-align center
+  position absolute
+  top 22px
+  right 5px
   &:hover
     color $ui-text-color
   &:active, &:active:hover
     color $ui-text-color
     background-color alpha($ui-button--active-backgroundColor, 20%)
 
-.active-button
-  background-color $ui-button--active-color
+.switch-buttons
+  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
-
-.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
+  position relative
 
 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%)
diff --git a/browser/main/SideNav/index.js b/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'
-            onClick={(e) => this.handleMenuButtonClick(e)}
-          >
-            <i className='fa fa-wrench fa-fw' />
-          </button>
+          <div>
+            <button styleName='top-menu'
+              onClick={(e) => this.handleMenuButtonClick(e)}
+            >
+              <i className='fa fa-wrench fa-fw' />
+            </button>
+          </div>
         </div>
         {this.SideNavComponent(isFolded, storageList)}
       </div>

diff --git a/browser/main/modals/PreferencesModal/Crowdfunding.js b/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)