Merge pull request #979 from BoostIO/fix-layout

Fix layout
2025-12-13 01:36:22 +00:00 · 2017-10-15 17:54:59 +09:00
parent 7a4052ede3 dedf36f704
commit 1beae4403a
16 changed files with 209 additions and 89 deletions
--- 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
--- 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)} />
--- 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
--- 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
--- 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%)
--- 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%)
--- 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
--- 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>
--- 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%)
--- 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>
--- 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)
--- a/browser/main/modals/PreferencesModal/Crowdfunding.styl
+++ b/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
--- a/browser/main/modals/PreferencesModal/HotkeyTab.js
+++ b/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)}
--- a/browser/main/modals/PreferencesModal/InfoTab.js
+++ b/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'
--- a/browser/main/modals/PreferencesModal/PreferencesModal.styl
+++ b/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

--- a/browser/main/modals/PreferencesModal/index.js
+++ b/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) => {