Merge branch 'master' into add-delete-hotkey

2025-12-13 09:46:22 +00:00 · 2018-10-23 09:16:29 -05:00
parent ca038937e9 f92da16544
commit 642c62d8ce
66 changed files with 1354 additions and 101 deletions
--- a/browser/main/modals/CreateFolderModal.styl
+++ b/browser/main/modals/CreateFolderModal.styl
@@ -128,3 +128,29 @@ body[data-theme="monokai"]

  .control-confirmButton
    colorMonokaiPrimaryButton()
+
+body[data-theme="dracula"]
+  .root
+    modalDracula()
+    width 500px
+    height 270px
+    overflow hidden
+    position relative
+
+  .header
+    background-color transparent
+    border-color $ui-dark-borderColor
+    color $ui-dracula-text-color
+
+  .control-folder-label
+    color $ui-dracula-text-color
+
+  .control-folder-input
+    border 1px solid $ui-input--create-folder-modal
+    color white
+
+   .description
+    color $ui-inactive-text-color
+
+  .control-confirmButton
+    colorDraculaPrimaryButton()
--- a/browser/main/modals/NewNoteModal.styl
+++ b/browser/main/modals/NewNoteModal.styl
@@ -97,3 +97,20 @@ body[data-theme="monokai"]

  .description
    color $ui-monokai-text-color
+
+body[data-theme="dracula"]
+  .root
+    background-color transparent
+
+  .header
+    color $ui-dracula-text-color
+
+  .control-button
+    border-color $ui-dracula-borderColor
+    color $ui-dracula-text-color
+    background-color transparent
+    &:focus
+      colorDraculaPrimaryButton()
+
+  .description
+    color $ui-dracula-text-color
--- 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.js
+++ b/browser/main/modals/PreferencesModal/Crowdfunding.js
@@ -23,21 +23,29 @@ class Crowdfunding extends React.Component {
    return (
      <div styleName='root'>
        <div styleName='header'>{i18n.__('Crowdfunding')}</div>
-        <p>{i18n.__('Dear Boostnote users,')}</p>
-        <br />
        <p>{i18n.__('Thank you for using Boostnote!')}</p>
-        <p>{i18n.__('Boostnote is used in about 200 different countries and regions by an awesome community of developers.')}</p>
        <br />
-        <p>{i18n.__('To support our growing userbase, and satisfy community expectations,')}</p>
-        <p>{i18n.__('we would like to invest more time and resources in this project.')}</p>
+        <p>{i18n.__('We launched IssueHunt which is an issue-based crowdfunding / sourcing platform for open source projects.')}</p>
+        <p>{i18n.__('Anyone can put a bounty on not only a bug but also on OSS feature requests listed on IssueHunt. Collected funds will be distributed to project owners and contributors.')}</p>
        <br />
-        <p>{i18n.__('If you use Boostnote and see its potential, help us out by supporting the project on OpenCollective!')}</p>
+        <p>{i18n.__('### Sustainable Open Source Ecosystem')}</p>
+        <p>{i18n.__('We discussed about open-source ecosystem and IssueHunt concept with the Boostnote team repeatedly. We actually also discussed with Matz who father of Ruby.')}</p>
+        <p>{i18n.__('The original reason why we made IssueHunt was to reward our contributors of Boostnote project. We’ve got tons of Github stars and hundred of contributors in two years.')}</p>
+        <p>{i18n.__('We thought that it will be nice if we can pay reward for our contributors.')}</p>
        <br />
-        <p>{i18n.__('Thanks,')}</p>
+        <p>{i18n.__('### We believe Meritocracy')}</p>
+        <p>{i18n.__('We think developers who has skill and did great things must be rewarded properly.')}</p>
+        <p>{i18n.__('OSS projects are used in everywhere on the internet, but no matter how they great, most of owners of those projects need to have another job to sustain their living.')}</p>
+        <p>{i18n.__('It sometimes looks like exploitation.')}</p>
+        <p>{i18n.__('We’ve realized IssueHunt could enhance sustainability of open-source ecosystem.')}</p>
+        <br />
+        <p>{i18n.__('As same as issues of Boostnote are already funded on IssueHunt, your open-source projects can be also started funding from now.')}</p>
+        <br />
+        <p>{i18n.__('Thank you,')}</p>
        <p>{i18n.__('The Boostnote Team')}</p>
        <br />
        <button styleName='cf-link'>
-          <a href='https://opencollective.com/boostnoteio' onClick={(e) => this.handleLinkClick(e)}>{i18n.__('Support via OpenCollective')}</a>
+          <a href='http://bit.ly/issuehunt-from-boostnote-app' onClick={(e) => this.handleLinkClick(e)}>{i18n.__('See IssueHunt')}</a>
        </button>
      </div>
    )
--- 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.js
+++ b/browser/main/modals/PreferencesModal/InfoTab.js
@@ -84,7 +84,7 @@ class InfoTab extends React.Component {
              >{i18n.__('GitHub')}</a>
            </li>
            <li>
-              <a href='https://boostlog.io/@junp1234'
+              <a href='https://medium.com/boostnote'
                onClick={(e) => this.handleLinkClick(e)}
              >{i18n.__('Blog')}</a>
            </li>
--- 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
@@ -89,7 +89,9 @@ class UiTab extends React.Component {
        snippetDefaultLanguage: this.refs.editorSnippetDefaultLanguage.value,
        scrollPastEnd: this.refs.scrollPastEnd.checked,
        fetchUrlTitle: this.refs.editorFetchUrlTitle.checked,
-        enableTableEditor: this.refs.enableTableEditor.checked
+        enableTableEditor: this.refs.enableTableEditor.checked,
+        enableFrontMatterTitle: this.refs.enableFrontMatterTitle.checked,
+        frontMatterTitleField: this.refs.frontMatterTitleField.value
      },
      preview: {
        fontSize: this.refs.previewFontSize.value,
@@ -107,6 +109,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 +190,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>
@@ -426,6 +430,31 @@ class UiTab extends React.Component {
            </div>
          </div>

+          <div styleName='group-section'>
+            <div styleName='group-section-label'>
+              {i18n.__('Front matter title field')}
+            </div>
+            <div styleName='group-section-control'>
+              <input styleName='group-section-control-input'
+                ref='frontMatterTitleField'
+                value={config.editor.frontMatterTitleField}
+                onChange={(e) => this.handleUIChange(e)}
+                type='text'
+              />
+            </div>
+          </div>
+
+          <div styleName='group-checkBoxSection'>
+            <label>
+              <input onChange={(e) => this.handleUIChange(e)}
+                checked={this.state.config.editor.enableFrontMatterTitle}
+                ref='enableFrontMatterTitle'
+                type='checkbox'
+              />&nbsp;
+              {i18n.__('Extract title from front matter')}
+            </label>
+          </div>
+
          <div styleName='group-checkBoxSection'>
            <label>
              <input onChange={(e) => this.handleUIChange(e)}
@@ -512,6 +541,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)}