Merge branch 'master' of https://github.com/BoostIO/Boostnote

2025-12-19 12:41:43 +00:00 · 2018-10-18 12:07:40 +07:00
parent d0171a8933 71ae42056f
commit 43bd0b0dd5
53 changed files with 1075 additions and 63 deletions
--- a/browser/main/modals/PreferencesModal/ConfigTab.styl
+++ b/browser/main/modals/PreferencesModal/ConfigTab.styl
@@ -138,6 +138,10 @@ colorMonokaiControl()
  background-color $ui-monokai-button-backgroundColor
  color $ui-monokai-text-color

+colorDraculaControl()
+  border none
+  background-color $ui-dracula-button-backgroundColor
+  color $ui-dracula-text-color

 body[data-theme="dark"]
  .root
@@ -220,3 +224,30 @@ body[data-theme="monokai"]
  .group-section-control
    select, .group-section-control-input
      colorMonokaiControl()
+
+body[data-theme="dracula"]
+  .root
+    color $ui-dracula-text-color
+
+  .group-header
+    color $ui-dracula-text-color
+    border-color $ui-dracula-borderColor
+
+  .group-header2
+    color $ui-dracula-text-color
+
+  .group-section-control-input
+    border-color $ui-dracula-borderColor
+
+  .group-control
+    border-color $ui-dracula-borderColor
+  .group-control-leftButton
+    colorDarkDefaultButton()
+    border-color $ui-dracula-borderColor
+  .group-control-rightButton
+    colorDraculaPrimaryButton()
+  .group-hint
+    colorDraculaControl()
+  .group-section-control
+    select, .group-section-control-input
+      colorDraculaControl()
--- a/browser/main/modals/PreferencesModal/Crowdfunding.styl
+++ b/browser/main/modals/PreferencesModal/Crowdfunding.styl
@@ -29,7 +29,7 @@ p
 body[data-theme="dark"]
  p
    color $ui-dark-text-color
-    
+
 body[data-theme="solarized-dark"]
  .root
    color $ui-solarized-dark-text-color
@@ -41,3 +41,9 @@ body[data-theme="monokai"]
    color $ui-monokai-text-color
  p
    color $ui-monokai-text-color
+
+body[data-theme="dracula"]
+  .root
+    color $ui-dracula-text-color
+  p
+    color $ui-dracula-text-color
--- a/browser/main/modals/PreferencesModal/FolderItem.styl
+++ b/browser/main/modals/PreferencesModal/FolderItem.styl
@@ -154,3 +154,26 @@ body[data-theme="monokai"]

  .folderItem-right-dangerButton
    colorMonokaiPrimaryButton()
+
+body[data-theme="dracula"]
+  .folderItem
+    &:hover
+      background-color $ui-dracula-button-backgroundColor
+
+  .folderItem-left-danger
+    color $danger-color
+
+  .folderItem-left-key
+    color $ui-dark-inactive-text-color
+
+  .folderItem-left-colorButton
+    colorDraculaPrimaryButton()
+
+  .folderItem-right-button
+    colorDraculaPrimaryButton()
+
+  .folderItem-right-confirmButton
+    colorDraculaPrimaryButton()
+
+  .folderItem-right-dangerButton
+    colorDraculaPrimaryButton()
--- a/browser/main/modals/PreferencesModal/InfoTab.styl
+++ b/browser/main/modals/PreferencesModal/InfoTab.styl
@@ -60,7 +60,7 @@
 body[data-theme="dark"]
  .root
    color alpha($tab--dark-text-color, 80%)
-    
+

 body[data-theme="solarized-dark"]
  .root
@@ -75,3 +75,10 @@ body[data-theme="monokai"]
 .list
  a
    color $ui-monokai-active-color
+
+body[data-theme="dracula"]
+  .root
+    color $ui-dracula-text-color
+.list
+  a
+    color $ui-dracula-active-color
--- a/browser/main/modals/PreferencesModal/PreferencesModal.styl
+++ b/browser/main/modals/PreferencesModal/PreferencesModal.styl
@@ -90,7 +90,7 @@ body[data-theme="dark"]
    background-color $dark-primary-button-background--active
    &:hover
      color white
-      
+

 body[data-theme="solarized-dark"]
  .root
@@ -139,3 +139,27 @@ body[data-theme="monokai"]
    background-color $ui-monokai-button--active-backgroundColor
    &:hover
      color white
+
+body[data-theme="dracula"]
+  .root
+    background-color transparent
+  .top-bar
+    background-color transparent
+    border-color $ui-dracula-borderColor
+    p
+      color $ui-dracula-text-color
+  .nav
+    background-color transparent
+    border-color $ui-dracula-borderColor
+  .nav-button
+    background-color transparent
+    color $ui-dracula-text-color
+    &:hover
+      color $ui-dracula-text-color
+
+  .nav-button--active
+    @extend .nav-button
+    color $ui-dracula-button--active-color
+    background-color $ui-dracula-button--active-backgroundColor
+    &:hover
+      color #f8f8f2
--- a/browser/main/modals/PreferencesModal/SnippetList.js
+++ b/browser/main/modals/PreferencesModal/SnippetList.js
@@ -55,7 +55,11 @@ class SnippetList extends React.Component {

  defineSnippetStyleName (snippet) {
    const { currentSnippet } = this.props
-    if (currentSnippet == null) return
+
+    if (currentSnippet == null) {
+      return 'snippet-item'
+    }
+
    if (currentSnippet.id === snippet.id) {
      return 'snippet-item-selected'
    } else {
--- a/browser/main/modals/PreferencesModal/SnippetTab.js
+++ b/browser/main/modals/PreferencesModal/SnippetTab.js
@@ -6,6 +6,9 @@ import i18n from 'browser/lib/i18n'
 import dataApi from 'browser/main/lib/dataApi'
 import SnippetList from './SnippetList'
 import eventEmitter from 'browser/main/lib/eventEmitter'
+import copy from 'copy-to-clipboard'
+
+const path = require('path')

 class SnippetTab extends React.Component {
  constructor (props) {
@@ -16,6 +19,17 @@ class SnippetTab extends React.Component {
    this.changeDelay = null
  }

+  notify (title, options) {
+    if (global.process.platform === 'win32') {
+      options.icon = path.join(
+        'file://',
+        global.__dirname,
+        '../../resources/app.png'
+      )
+    }
+    return new window.Notification(title, options)
+  }
+
  handleSnippetNameOrPrefixChange () {
    clearTimeout(this.changeDelay)
    this.changeDelay = setTimeout(() => {
@@ -27,12 +41,14 @@ class SnippetTab extends React.Component {

  handleSnippetSelect (snippet) {
    const { currentSnippet } = this.state
-    if (currentSnippet === null || currentSnippet.id !== snippet.id) {
-      dataApi.fetchSnippet(snippet.id).then(changedSnippet => {
-        // notify the snippet editor to load the content of the new snippet
-        this.snippetEditor.onSnippetChanged(changedSnippet)
-        this.setState({currentSnippet: changedSnippet})
-      })
+    if (snippet !== null) {
+      if (currentSnippet === null || currentSnippet.id !== snippet.id) {
+        dataApi.fetchSnippet(snippet.id).then(changedSnippet => {
+          // notify the snippet editor to load the content of the new snippet
+          this.snippetEditor.onSnippetChanged(changedSnippet)
+          this.setState({currentSnippet: changedSnippet})
+        })
+      }
    }
  }

@@ -54,6 +70,17 @@ class SnippetTab extends React.Component {
    }
  }

+  handleCopySnippet (e) {
+    const showCopyNotification = this.props.config.ui.showCopyNotification
+    copy(this.state.currentSnippet.content)
+    if (showCopyNotification) {
+      this.notify('Saved to Clipboard!', {
+        body: 'Paste it wherever you want!',
+        silent: true
+      })
+    }
+  }
+
  render () {
    const { config, storageKey } = this.props
    const { currentSnippet } = this.state
@@ -70,6 +97,13 @@ class SnippetTab extends React.Component {
          onSnippetDeleted={this.handleDeleteSnippet.bind(this)}
          currentSnippet={currentSnippet} />
        <div styleName='snippet-detail' style={{visibility: currentSnippet ? 'visible' : 'hidden'}}>
+          <div styleName='group-section'>
+            <div styleName='group-section-control'>
+              <button styleName='group-control-rightButton'
+                onClick={e => this.handleCopySnippet(e)}>{i18n.__('Copy')}
+              </button>
+            </div>
+          </div>
          <div styleName='group-section'>
            <div styleName='group-section-label'>{i18n.__('Snippet name')}</div>
            <div styleName='group-section-control'>
--- a/browser/main/modals/PreferencesModal/SnippetTab.styl
+++ b/browser/main/modals/PreferencesModal/SnippetTab.styl
@@ -196,3 +196,19 @@ body[data-theme="monokai"]
    color white
  .group-control-button
    colorMonokaiPrimaryButton()
+
+body[data-theme="dracula"]
+  .snippets
+    background $ui-dracula-backgroundColor
+    .snippet-item
+      color #f8f8f2
+      &::after
+        background $ui-dracula-borderColor
+      &:hover
+        background darken($ui-dracula-backgroundColor, 5)
+    .snippet-item-selected
+      background darken($ui-dracula-backgroundColor, 5)
+  .snippet-detail
+    color #f8f8f2
+  .group-control-button
+    colorDraculaPrimaryButton()
--- a/browser/main/modals/PreferencesModal/StoragesTab.styl
+++ b/browser/main/modals/PreferencesModal/StoragesTab.styl
@@ -158,7 +158,7 @@ body[data-theme="dark"]
  .addStorage-body-control-cancelButton
    colorDarkDefaultButton()
    border-color $ui-dark-borderColor
-    
+


 body[data-theme="solarized-dark"]
@@ -236,3 +236,41 @@ body[data-theme="monokai"]
  .addStorage-body-control-cancelButton
    colorDarkDefaultButton()
    border-color $ui-monokai-borderColor
+
+body[data-theme="dracula"]
+  .root
+    color $ui-dracula-text-color
+
+  .folderList-item
+    border-bottom $ui-dracula-borderColor
+
+  .folderList-empty
+    color $ui-dracula-text-color
+
+  .list-empty
+    color $ui-dracula-text-color
+  .list-control-addStorageButton
+    border-color $ui-dracula-button-backgroundColor
+    background-color $ui-dracula-button-backgroundColor
+    color $ui-dracula-text-color
+
+  .addStorage-header
+    color $ui-dracula-text-color
+    border-color $ui-dracula-borderColor
+
+  .addStorage-body-section-name-input
+    border-color $$ui-dracula-borderColor
+
+  .addStorage-body-section-type-description
+    color $ui-dracula-text-color
+
+  .addStorage-body-section-path-button
+    colorPrimaryButton()
+  .addStorage-body-control
+    border-color $ui-dracula-borderColor
+
+  .addStorage-body-control-createButton
+    colorDarkPrimaryButton()
+  .addStorage-body-control-cancelButton
+    colorDarkDefaultButton()
+    border-color $ui-dracula-borderColor
--- a/browser/main/modals/PreferencesModal/UiTab.js
+++ b/browser/main/modals/PreferencesModal/UiTab.js
@@ -107,6 +107,7 @@ class UiTab extends React.Component {
        smartArrows: this.refs.previewSmartArrows.checked,
        sanitize: this.refs.previewSanitize.value,
        allowCustomCSS: this.refs.previewAllowCustomCSS.checked,
+        lineThroughCheckbox: this.refs.lineThroughCheckbox.checked,
        customCSS: this.customCSSCM.getCodeMirror().getValue()
      }
    }
@@ -187,6 +188,7 @@ class UiTab extends React.Component {
                <option value='white'>{i18n.__('White')}</option>
                <option value='solarized-dark'>{i18n.__('Solarized Dark')}</option>
                <option value='monokai'>{i18n.__('Monokai')}</option>
+                <option value='dracula'>{i18n.__('Dracula')}</option>
                <option value='dark'>{i18n.__('Dark')}</option>
              </select>
            </div>
@@ -512,6 +514,16 @@ class UiTab extends React.Component {
              </select>
            </div>
          </div>
+          <div styleName='group-checkBoxSection'>
+            <label>
+              <input onChange={(e) => this.handleUIChange(e)}
+                checked={this.state.config.preview.lineThroughCheckbox}
+                ref='lineThroughCheckbox'
+                type='checkbox'
+              />&nbsp;
+              {i18n.__('Allow line through checkbox')}
+            </label>
+          </div>
          <div styleName='group-checkBoxSection'>
            <label>
              <input onChange={(e) => this.handleUIChange(e)}