Merge branch 'master' into table-editor

2025-12-13 09:46:22 +00:00 · 2018-09-04 10:54:49 +02:00
parent a79db03093 fdfa3bb8f5
commit 6603f46678
15 changed files with 98 additions and 27 deletions
--- a/browser/components/CodeEditor.js
+++ b/browser/components/CodeEditor.js
@@ -24,7 +24,6 @@ export default class CodeEditor extends React.Component {
  constructor (props) {
    super(props)

-    this.state = { isReady: false }
    this.scrollHandler = _.debounce(this.handleScroll.bind(this), 100, {
      leading: false,
      trailing: true
@@ -240,7 +239,6 @@ export default class CodeEditor extends React.Component {
    CodeMirror.Vim.defineEx('wq', 'wq', this.quitEditor)
    CodeMirror.Vim.defineEx('qw', 'qw', this.quitEditor)
    CodeMirror.Vim.map('ZZ', ':q', 'normal')
-    this.setState({ isReady: true })

    this.textEditorInterface = new TextEditorInterface(this.editor)
    this.tableEditor = new TableEditor(this.textEditorInterface)
@@ -671,8 +669,7 @@ export default class CodeEditor extends React.Component {
        style={{
          fontFamily,
          fontSize: fontSize,
-          width: width,
-          opacity: this.state.isReady ? '1' : '0'
+          width: width
        }}
        onDrop={e => this.handleDropImage(e)}
      />
--- a/browser/components/MarkdownEditor.js
+++ b/browser/components/MarkdownEditor.js
@@ -6,7 +6,6 @@ import CodeEditor from 'browser/components/CodeEditor'
 import MarkdownPreview from 'browser/components/MarkdownPreview'
 import eventEmitter from 'browser/main/lib/eventEmitter'
 import { findStorage } from 'browser/lib/findStorage'
-import debounceRender from 'react-debounce-render'

 class MarkdownEditor extends React.Component {
  constructor (props) {
@@ -314,4 +313,4 @@ MarkdownEditor.propTypes = {
  ignorePreviewPointerEvents: PropTypes.bool
 }

-export default debounceRender(CSSModules(MarkdownEditor, styles))
+export default CSSModules(MarkdownEditor, styles)
--- a/browser/components/MarkdownPreview.js
+++ b/browser/components/MarkdownPreview.js
@@ -180,9 +180,7 @@ const defaultCodeBlockFontFamily = [
 export default class MarkdownPreview extends React.Component {
  constructor (props) {
    super(props)
-    this.state = {
-      isReady: false
-    }
+
    this.contextMenuHandler = e => this.handleContextMenu(e)
    this.mouseDownHandler = e => this.handleMouseDown(e)
    this.mouseUpHandler = e => this.handleMouseUp(e)
@@ -457,7 +455,6 @@ export default class MarkdownPreview extends React.Component {
    eventEmitter.on('export:save-md', this.saveAsMdHandler)
    eventEmitter.on('export:save-html', this.saveAsHtmlHandler)
    eventEmitter.on('print', this.printHandler)
-    setTimeout(() => this.setState({ isReady: true }))
  }

  componentWillUnmount () {
@@ -850,11 +847,7 @@ export default class MarkdownPreview extends React.Component {
        className={
          className != null ? 'MarkdownPreview ' + className : 'MarkdownPreview'
        }
-        style={
-          this.state.isReady
-            ? Object.assign(style, { opacity: '1' })
-            : Object.assign(style, { opacity: '0' })
-        }
+        style={style}
        tabIndex={tabIndex}
        ref='root'
      />
--- a/browser/components/SnippetTab.styl
+++ b/browser/components/SnippetTab.styl
@@ -136,4 +136,48 @@ body[data-theme="solarized-dark"]
    color $ui-solarized-dark-text-color

  .deleteButton
-    color alpha($ui-solarized-dark-text-color, 30%)
+    color alpha($ui-solarized-dark-text-color, 30%)
+
+body[data-theme="monokai"]
+  .root
+    color $ui-monokai-text-color
+    border-color $ui-dark-borderColor
+    &:hover
+      background-color $ui-monokai-noteDetail-backgroundColor
+      .deleteButton
+        color $ui-monokai-text-color
+        &:hover
+          background-color darken($ui-monokai-noteDetail-backgroundColor, 15%)
+        &:active
+          color $ui-monokai-text-color
+          background-color $ui-dark-button--active-backgroundColor
+
+  .root--active
+    color $ui-monokai-text-color
+    border-color $ui-monokai-borderColor
+    &:hover
+      background-color $ui-monokai-noteDetail-backgroundColor
+      .deleteButton
+        color $ui-monokai-text-color
+        &:hover
+          background-color darken($ui-monokai-noteDetail-backgroundColor, 15%)
+        &:active
+          color $ui-monokai-text-color
+          background-color $ui-dark-button--active-backgroundColor
+
+  .button
+    border none
+    color $ui-monokai-text-color
+    background-color transparent
+    transition color background-color 0.15s
+    border-left 4px solid transparent
+    &:hover
+      color $ui-monokai-text-color
+      background-color $ui-monokai-noteDetail-backgroundColor
+
+  .input
+    background-color $ui-monokai-noteDetail-backgroundColor
+    color $ui-monokai-text-color
+
+  .deleteButton
+    color alpha($ui-monokai-text-color, 30%)
--- a/browser/components/markdown.styl
+++ b/browser/components/markdown.styl
@@ -257,6 +257,7 @@ table
  display block
  width 100%
  margin 0 0 1em
+  overflow-x auto
  thead
    tr
      background-color tableHeadBgColor
--- a/browser/main/Detail/SnippetNoteDetail.js
+++ b/browser/main/Detail/SnippetNoteDetail.js
@@ -573,11 +573,12 @@ class SnippetNoteDetail extends React.Component {
  }

  addSnippet () {
+    const { config } = this.props
    const { note } = this.state

    note.snippets = note.snippets.concat([{
      name: '',
-      mode: 'Plain Text',
+      mode: config.editor.snippetDefaultLanguage || 'text',
      content: ''
    }])
    const snippetIndex = note.snippets.length - 1
--- a/browser/main/NewNoteButton/index.js
+++ b/browser/main/NewNoteButton/index.js
@@ -34,14 +34,15 @@ class NewNoteButton extends React.Component {
  }

  handleNewNoteButtonClick (e) {
-    const { location, dispatch } = this.props
+    const { location, dispatch, config } = this.props
    const { storage, folder } = this.resolveTargetFolder()

    modal.open(NewNoteModal, {
      storage: storage.key,
      folder: folder.key,
      dispatch,
-      location
+      location,
+      config
    })
  }

--- a/browser/main/modals/NewNoteModal.js
+++ b/browser/main/modals/NewNoteModal.js
@@ -61,7 +61,7 @@ class NewNoteModal extends React.Component {
  handleSnippetNoteButtonClick (e) {
    AwsMobileAnalyticsConfig.recordDynamicCustomEvent('ADD_SNIPPET')
    AwsMobileAnalyticsConfig.recordDynamicCustomEvent('ADD_ALLNOTE')
-    const { storage, folder, dispatch, location } = this.props
+    const { storage, folder, dispatch, location, config } = this.props

    dataApi
      .createNote(storage, {
@@ -72,7 +72,7 @@ class NewNoteModal extends React.Component {
        snippets: [
          {
            name: '',
-            mode: 'text',
+            mode: config.editor.snippetDefaultLanguage || 'text',
            content: ''
          }
        ]
--- a/browser/main/modals/PreferencesModal/ConfigTab.styl
+++ b/browser/main/modals/PreferencesModal/ConfigTab.styl
@@ -24,7 +24,7 @@
  line-height 30px

 .group-section-label
-  width 150px
+  width 200px
  text-align left
  margin-right 10px
  font-size 14px
--- a/browser/main/modals/PreferencesModal/UiTab.js
+++ b/browser/main/modals/PreferencesModal/UiTab.js
@@ -85,6 +85,7 @@ class UiTab extends React.Component {
        displayLineNumbers: this.refs.editorDisplayLineNumbers.checked,
        switchPreview: this.refs.editorSwitchPreview.value,
        keyMap: this.refs.editorKeyMap.value,
+        snippetDefaultLanguage: this.refs.editorSnippetDefaultLanguage.value,
        scrollPastEnd: this.refs.scrollPastEnd.checked,
        fetchUrlTitle: this.refs.editorFetchUrlTitle.checked,
        enableTableEditor: this.refs.enableTableEditor.checked
@@ -388,6 +389,22 @@ class UiTab extends React.Component {
            </div>
          </div>

+          <div styleName='group-section'>
+            <div styleName='group-section-label'>
+              {i18n.__('Snippet Default Language')}
+            </div>
+            <div styleName='group-section-control'>
+              <select value={config.editor.snippetDefaultLanguage}
+                ref='editorSnippetDefaultLanguage'
+                onChange={(e) => this.handleUIChange(e)}
+              >
+                {
+                  _.sortBy(CodeMirror.modeInfo.map(mode => mode.name)).map(name => (<option key={name} value={name}>{name}</option>))
+                }
+              </select>
+            </div>
+          </div>
+
          <div styleName='group-checkBoxSection'>
            <label>
              <input onChange={(e) => this.handleUIChange(e)}
--- a/browser/styles/index.styl
+++ b/browser/styles/index.styl
@@ -5,7 +5,7 @@ $danger-color = #c9302c
 $danger-lighten-color = lighten(#c9302c, 5%)

 // Layouts
-$statusBar-height = 22px
+$statusBar-height = 28px
 $sideNav-width = 200px
 $sideNav--folded-width = 44px
 $topBar-height = 60px
@@ -377,7 +377,7 @@ $ui-monokai-button--active-backgroundColor = #f92672
 $ui-monokai-button--hover-backgroundColor = lighten($ui-dark-backgroundColor, 10%)
 $ui-monokai-button--focus-borderColor = lighten(#369DCD, 25%)

-modalmonokai()
+modalMonokai()
  position relative
  z-index $modal-z-index
  width 100%