diff --git a/ISSUE_TEMPLATE.md b/ISSUE_TEMPLATE.md index 1f5ada57..5554c4b8 100644 --- a/ISSUE_TEMPLATE.md +++ b/ISSUE_TEMPLATE.md @@ -1,15 +1,25 @@ # Current behavior # Expected behavior + + # Steps to reproduce + + 1. 2. 3. diff --git a/browser/components/CodeEditor.js b/browser/components/CodeEditor.js index 304171ba..c36a50c1 100644 --- a/browser/components/CodeEditor.js +++ b/browser/components/CodeEditor.js @@ -292,6 +292,10 @@ export default class CodeEditor extends React.Component { this.editor.on('cursorActivity', this.editorActivityHandler) this.editor.on('changes', this.editorActivityHandler) } + + this.setState({ + clientWidth: this.refs.root.clientWidth + }) } expandSnippet (line, cursor, cm, snippets) { @@ -441,6 +445,14 @@ export default class CodeEditor extends React.Component { this.editor.setOption('extraKeys', this.defaultKeyMap) } + if (this.state.clientWidth !== this.refs.root.clientWidth) { + this.setState({ + clientWidth: this.refs.root.clientWidth + }) + + needRefresh = true + } + if (needRefresh) { this.editor.refresh() } diff --git a/browser/components/MarkdownEditor.js b/browser/components/MarkdownEditor.js index 4c195797..70df16a0 100644 --- a/browser/components/MarkdownEditor.js +++ b/browser/components/MarkdownEditor.js @@ -250,7 +250,7 @@ class MarkdownEditor extends React.Component { : 'codeEditor--hide' } ref='code' - mode='GitHub Flavored Markdown' + mode='Boost Flavored Markdown' value={value} theme={config.editor.theme} keyMap={config.editor.keyMap} diff --git a/browser/components/MarkdownEditor.styl b/browser/components/MarkdownEditor.styl index 13455e5d..c8fe2e49 100644 --- a/browser/components/MarkdownEditor.styl +++ b/browser/components/MarkdownEditor.styl @@ -16,7 +16,6 @@ .preview display block absolute top bottom left right - z-index 100 background-color white height 100% width 100% diff --git a/browser/components/MarkdownPreview.js b/browser/components/MarkdownPreview.js index 5376a773..e69f312e 100755 --- a/browser/components/MarkdownPreview.js +++ b/browser/components/MarkdownPreview.js @@ -17,8 +17,11 @@ import copy from 'copy-to-clipboard' import mdurl from 'mdurl' import exportNote from 'browser/main/lib/dataApi/exportNote' import { escapeHtmlCharacters } from 'browser/lib/utils' +import context from 'browser/lib/context' +import i18n from 'browser/lib/i18n' +import fs from 'fs' -const { remote } = require('electron') +const { remote, shell } = require('electron') const attachmentManagement = require('../main/lib/dataApi/attachmentManagement') const { app } = remote @@ -27,6 +30,8 @@ const fileUrl = require('file-url') const dialog = remote.dialog +const uri2path = require('file-uri-to-path') + const markdownStyle = require('!!css!stylus?sourceMap!./markdown.styl')[0][1] const appPath = fileUrl( process.env.NODE_ENV === 'production' ? app.getAppPath() : path.resolve() @@ -161,7 +166,6 @@ const scrollBarDarkStyle = ` } ` -const { shell } = require('electron') const OSX = global.process.platform === 'darwin' const defaultFontFamily = ['helvetica', 'arial', 'sans-serif'] @@ -219,8 +223,32 @@ export default class MarkdownPreview extends React.Component { } } - handleContextMenu (e) { - this.props.onContextMenu(e) + handleContextMenu (event) { + // If a contextMenu handler was passed to us, use it instead of the self-defined one -> return + if (_.isFunction(this.props.onContextMenu)) { + this.props.onContextMenu(event) + return + } + // No contextMenu was passed to us -> execute our own link-opener + if (event.target.tagName.toLowerCase() === 'a') { + const href = event.target.href + const isLocalFile = href.startsWith('file:') + if (isLocalFile) { + const absPath = uri2path(href) + try { + if (fs.lstatSync(absPath).isFile()) { + context.popup([ + { + label: i18n.__('Show in explorer'), + click: (e) => shell.showItemInFolder(absPath) + } + ]) + } + } catch (e) { + console.log('Error while evaluating if the file is locally available', e) + } + } + } } handleDoubleClick (e) { @@ -397,6 +425,7 @@ export default class MarkdownPreview extends React.Component { case 'dark': case 'solarized-dark': case 'monokai': + case 'dracula': return scrollBarDarkStyle default: return scrollBarStyle @@ -455,6 +484,10 @@ 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) + eventEmitter.on('config-renew', () => { + this.markdown.updateConfig() + this.rewriteIframe() + }) } componentWillUnmount () { diff --git a/browser/components/MarkdownSplitEditor.js b/browser/components/MarkdownSplitEditor.js index ddc9d7e0..d714125a 100644 --- a/browser/components/MarkdownSplitEditor.js +++ b/browser/components/MarkdownSplitEditor.js @@ -145,7 +145,7 @@ class MarkdownSplitEditor extends React.Component { styleName='codeEditor' ref='code' width={this.state.codeEditorWidthInPercent + '%'} - mode='GitHub Flavored Markdown' + mode='Boost Flavored Markdown' value={value} theme={config.editor.theme} keyMap={config.editor.keyMap} diff --git a/browser/components/NoteItem.js b/browser/components/NoteItem.js index 5073dc73..600b7e2d 100644 --- a/browser/components/NoteItem.js +++ b/browser/components/NoteItem.js @@ -74,24 +74,22 @@ const NoteItem = ({ ? note.title : {i18n.__('Empty note')}} - {['ALL', 'STORAGE'].includes(viewType) && -
-
{dateDisplay}
-
-
- {viewType === 'ALL' && storageName} - {viewType === 'STORAGE' && folderName} -
+
+
{dateDisplay}
+
+
+ {viewType === 'ALL' && storageName} + {viewType === 'STORAGE' && folderName}
-
} - +
+
{note.tags.length > 0 diff --git a/browser/components/NoteItem.styl b/browser/components/NoteItem.styl index 017ef6d0..a31f00a4 100644 --- a/browser/components/NoteItem.styl +++ b/browser/components/NoteItem.styl @@ -368,13 +368,13 @@ body[data-theme="monokai"] .item-title .item-title-icon .item-bottom-time - color $ui-monokai-text-color + color $ui-monokai-active-color .item-bottom-tagList-item background-color alpha(white, 10%) color $ui-monokai-text-color &:hover // background-color alpha($ui-monokai-button--active-backgroundColor, 60%) - color #c0392b + color #f92672 .item-bottom-tagList-item background-color alpha(#fff, 20%) @@ -394,3 +394,76 @@ body[data-theme="monokai"] .item-bottom-tagList-empty color $ui-inactive-text-color vertical-align middle + +body[data-theme="dracula"] + .root + border-color $ui-dracula-borderColor + background-color $ui-dracula-noteList-backgroundColor + + .item + border-color $ui-dracula-borderColor + background-color $ui-dracula-noteList-backgroundColor + &:hover + transition 0.15s + // background-color alpha($ui-dracula-noteList-backgroundColor, 20%) + color $ui-dracula-text-color + .item-title + .item-title-icon + .item-bottom-time + transition 0.15s + color $ui-dracula-text-color + .item-bottom-tagList-item + transition 0.15s + background-color alpha($ui-dracula-noteList-backgroundColor, 20%) + color $ui-dracula-text-color + &:active + transition 0.15s + background-color $ui-dracula-noteList-backgroundColor + color $ui-dracula-text-color + .item-title + .item-title-icon + .item-bottom-time + transition 0.15s + color $ui-dracula-text-color + .item-bottom-tagList-item + transition 0.15s + background-color alpha($ui-dracula-noteList-backgroundColor, 10%) + color $ui-dracula-text-color + + .item-wrapper + border-color alpha($ui-dracula-button-backgroundColor, 60%) + + .item--active + border-color $ui-dracula-borderColor + background-color $ui-dracula-button-backgroundColor + .item-wrapper + border-color transparent + .item-title + .item-title-icon + .item-bottom-time + color $ui-dracula-active-color + .item-bottom-tagList-item + background-color alpha(#f8f8f2, 10%) + color $ui-dracula-text-color + &:hover + // background-color alpha($ui-dracula-button--active-backgroundColor, 60%) + color #ff79c6 + .item-bottom-tagList-item + background-color alpha(#f8f8f2, 20%) + + .item-title + color $ui-inactive-text-color + + .item-title-icon + color $ui-inactive-text-color + + .item-title-empty + color $ui-inactive-text-color + + .item-bottom-tagList-item + background-color alpha($ui-dark-button--active-backgroundColor, 40%) + color $ui-inactive-text-color + + .item-bottom-tagList-empty + color $ui-inactive-text-color + vertical-align middle \ No newline at end of file diff --git a/browser/components/NoteItemSimple.styl b/browser/components/NoteItemSimple.styl index 04f57fdc..70b74be7 100644 --- a/browser/components/NoteItemSimple.styl +++ b/browser/components/NoteItemSimple.styl @@ -240,7 +240,7 @@ body[data-theme="monokai"] .item-simple-title-icon .item-simple-bottom-time transition 0.15s - color $ui-solarized-dark-text-color + color $ui-monokai-text-color .item-simple-bottom-tagList-item transition 0.15s background-color alpha(#fff, 20%) @@ -286,3 +286,67 @@ body[data-theme="monokai"] .item-simple-right-storageName padding-left 4px opacity 0.4 + +body[data-theme="dracula"] + .root + border-color $ui-dracula-borderColor + background-color $ui-dracula-noteList-backgroundColor + + .item-simple + border-color $ui-dracula-borderColor + background-color $ui-dracula-noteList-backgroundColor + &:hover + transition 0.15s + background-color alpha($ui-dracula-button-backgroundColor, 60%) + color $ui-dracula-text-color + .item-simple-title + .item-simple-title-empty + .item-simple-title-icon + .item-simple-bottom-time + transition 0.15s + color $ui-dracula-text-color + .item-simple-bottom-tagList-item + transition 0.15s + background-color alpha(#f8f8f2, 20%) + color $ui-dracula-text-color + &:active + transition 0.15s + background-color $ui-dracula-button--active-backgroundColor + color $ui-dracula-text-color + .item-simple-title + .item-simple-title-empty + .item-simple-title-icon + .item-simple-bottom-time + transition 0.15s + color $ui-dracula-text-color + .item-simple-bottom-tagList-item + transition 0.15s + background-color alpha(#f8f8f2, 10%) + color $ui-dracula-text-color + + .item-simple--active + border-color $ui-dracula-borderColor + background-color $ui-dracula-button--active-backgroundColor + .item-simple-wrapper + border-color transparent + .item-simple-title + .item-simple-title-empty + .item-simple-title-icon + .item-simple-bottom-time + color $ui-dracula-text-color + .item-simple-bottom-tagList-item + background-color alpha(#f8f8f2, 10%) + color $ui-dracula-text-color + &:hover + // background-color alpha($ui-dark-button--active-backgroundColor, 60%) + color #c0392b + .item-simple-bottom-tagList-item + background-color alpha(#f8f8f2, 20%) + .item-simple-title + color $ui-dark-text-color + border-bottom $ui-dark-borderColor + .item-simple-right + float right + .item-simple-right-storageName + padding-left 4px + opacity 0.4 \ No newline at end of file diff --git a/browser/components/RealtimeNotification.styl b/browser/components/RealtimeNotification.styl index 0365d8c9..36330c48 100644 --- a/browser/components/RealtimeNotification.styl +++ b/browser/components/RealtimeNotification.styl @@ -51,4 +51,15 @@ body[data-theme="monokai"] border none background-color $ui-monokai-button-backgroundColor &:hover - color #5CB85C \ No newline at end of file + color #5CB85C + +body[data-theme="dracula"] + .notification-area + background-color none + + .notification-link + color $ui-dracula-text-color + border none + background-color $ui-dracula-button-backgroundColor + &:hover + color #ff79c6 \ No newline at end of file diff --git a/browser/components/SideNavFilter.styl b/browser/components/SideNavFilter.styl index c9dbd861..1da8c7e4 100644 --- a/browser/components/SideNavFilter.styl +++ b/browser/components/SideNavFilter.styl @@ -263,4 +263,46 @@ body[data-theme="monokai"] background-color $ui-monokai-button-backgroundColor color $ui-monokai-text-color .menu-button-label - color $ui-monokai-text-color \ No newline at end of file + color $ui-monokai-text-color + +body[data-theme="dracula"] + .menu-button + &:active + background-color $ui-dracula-noteList-backgroundColor + color $ui-dracula-text-color + &:hover + background-color $ui-dracula-button-backgroundColor + color $ui-dracula-text-color + + .menu-button--active + color $ui-dracula-text-color + background-color $ui-dracula-button-backgroundColor + .menu-button-label + color $ui-dracula-text-color + &:hover + background-color $ui-dracula-button-backgroundColor + color $ui-dracula-text-color + .menu-button-label + color $ui-dracula-text-color + + .menu-button-star--active + color $ui-dracula-text-color + background-color $ui-dracula-button-backgroundColor + .menu-button-label + color $ui-dracula-text-color + &:hover + background-color $ui-dracula-button-backgroundColor + color $ui-dracula-text-color + .menu-button-label + color $ui-dracula-text-color + + .menu-button-trash--active + color $ui-dracula-text-color + background-color $ui-dracula-button-backgroundColor + .menu-button-label + color $ui-dracula-text-color + &:hover + background-color $ui-dracula-button-backgroundColor + color $ui-dracula-text-color + .menu-button-label + color $ui-dracula-text-color \ No newline at end of file diff --git a/browser/components/SnippetTab.styl b/browser/components/SnippetTab.styl index 02f88f8c..a31b8594 100644 --- a/browser/components/SnippetTab.styl +++ b/browser/components/SnippetTab.styl @@ -180,4 +180,48 @@ body[data-theme="monokai"] color $ui-monokai-text-color .deleteButton - color alpha($ui-monokai-text-color, 30%) \ No newline at end of file + color alpha($ui-monokai-text-color, 30%) + +body[data-theme="dracula"] + .root + color $ui-dracula-text-color + border-color $ui-dark-borderColor + &:hover + background-color $ui-dracula-noteDetail-backgroundColor + .deleteButton + color $ui-dracula-text-color + &:hover + background-color darken($ui-dracula-noteDetail-backgroundColor, 15%) + &:active + color $ui-dracula-text-color + background-color $ui-dark-button--active-backgroundColor + + .root--active + color $ui-dracula-text-color + border-color $ui-dracula-borderColor + &:hover + background-color $ui-dracula-noteDetail-backgroundColor + .deleteButton + color $ui-dracula-text-color + &:hover + background-color darken($ui-dracula-noteDetail-backgroundColor, 15%) + &:active + color $ui-dracula-text-color + background-color $ui-dark-button--active-backgroundColor + + .button + border none + color $ui-dracula-text-color + background-color transparent + transition color background-color 0.15s + border-left 4px solid transparent + &:hover + color $ui-dracula-text-color + background-color $ui-dracula-noteDetail-backgroundColor + + .input + background-color $ui-dracula-noteDetail-backgroundColor + color $ui-dracula-text-color + + .deleteButton + color alpha($ui-dracula-text-color, 30%) \ No newline at end of file diff --git a/browser/components/StorageItem.styl b/browser/components/StorageItem.styl index 0a1b4525..df8cbbc6 100644 --- a/browser/components/StorageItem.styl +++ b/browser/components/StorageItem.styl @@ -156,4 +156,23 @@ body[data-theme="monokai"] background-color $ui-monokai-button-backgroundColor &:hover color $ui-monokai-text-color - background-color $ui-monokai-button-backgroundColor \ No newline at end of file + background-color $ui-monokai-button-backgroundColor + +body[data-theme="dracula"] + .folderList-item + &:hover + background-color $ui-dracula-button-backgroundColor + color $ui-dracula-text-color + &:active + color $ui-dracula-text-color + background-color $ui-dracula-button-backgroundColor + + .folderList-item--active + @extend .folderList-item + color $ui-dracula-text-color + background-color $ui-dracula-button-backgroundColor + &:active + background-color $ui-dracula-button-backgroundColor + &:hover + color $ui-dracula-text-color + background-color $ui-dracula-button-backgroundColor \ No newline at end of file diff --git a/browser/components/TodoListPercentage.styl b/browser/components/TodoListPercentage.styl index 6116cd58..7b6a7d61 100644 --- a/browser/components/TodoListPercentage.styl +++ b/browser/components/TodoListPercentage.styl @@ -39,7 +39,7 @@ body[data-theme="dark"] .percentageText color $ui-dark-text-color - + body[data-theme="solarized-dark"] .percentageBar background-color #002b36 @@ -52,10 +52,20 @@ body[data-theme="solarized-dark"] body[data-theme="monokai"] .percentageBar - background-color #f92672 + background-color: $ui-monokai-borderColor .progressBar - background-color: #373831 + background-color $ui-monokai-active-color .percentageText - color #fdf6e3 \ No newline at end of file + color $ui-monokai-text-color + +body[data-theme="dracula"] + .percentageBar + background-color $ui-dracula-borderColor + + .progressBar + background-color: $ui-dracula-active-color + + .percentageText + color $ui-dracula-text-color diff --git a/browser/components/markdown.styl b/browser/components/markdown.styl index fb30742d..e091331b 100644 --- a/browser/components/markdown.styl +++ b/browser/components/markdown.styl @@ -80,6 +80,9 @@ li &.checked text-decoration line-through opacity 0.5 + &.taskListItem.checked + text-decoration line-through + opacity 0.5 div.math-rendered text-align center .math-failed @@ -361,7 +364,7 @@ for name, val in admonition_types .admonition.{name} @extend $admonition border-left-color: val[color] - + .admonition.{name}>.admonition-title @extend $admonition-title border-bottom-color: .1rem solid rgba(val[color], 0.2) @@ -476,5 +479,34 @@ body[data-theme="monokai"] border-color themeMonokaiTableBorder &:last-child border-right solid 1px themeMonokaiTableBorder + kbd + background-color themeDarkBackground + +themeDraculaTableOdd = $ui-dracula-noteDetail-backgroundColor +themeDraculaTableEven = darken($ui-dracula-noteDetail-backgroundColor, 10%) +themeDraculaTableHead = themeDraculaTableEven +themeDraculaTableBorder = themeDarkBorder + +body[data-theme="dracula"] + color $ui-dracula-text-color + border-color themeDarkBorder + background-color $ui-dracula-noteDetail-backgroundColor + table + thead + tr + background-color themeDraculaTableHead + th + border-color themeDraculaTableBorder + &:last-child + border-right solid 1px themeDraculaTableBorder + tbody + tr:nth-child(2n + 1) + background-color themeDraculaTableOdd + tr:nth-child(2n) + background-color themeDraculaTableEven + td + border-color themeDraculaTableBorder + &:last-child + border-right solid 1px themeDraculaTableBorder kbd background-color themeDarkBackground \ No newline at end of file diff --git a/browser/components/render/MermaidRender.js b/browser/components/render/MermaidRender.js index 12dce327..e8784d9d 100644 --- a/browser/components/render/MermaidRender.js +++ b/browser/components/render/MermaidRender.js @@ -2,8 +2,8 @@ import mermaidAPI from 'mermaid' // fixes bad styling in the mermaid dark theme const darkThemeStyling = ` -.loopText tspan { - fill: white; +.loopText tspan { + fill: white; }` function getRandomInt (min, max) { @@ -21,7 +21,7 @@ function getId () { function render (element, content, theme) { try { - let isDarkTheme = theme === 'dark' || theme === 'solarized-dark' || theme === 'monokai' + let isDarkTheme = theme === 'dark' || theme === 'solarized-dark' || theme === 'monokai' || theme === 'dracula' mermaidAPI.initialize({ theme: isDarkTheme ? 'dark' : 'default', themeCSS: isDarkTheme ? darkThemeStyling : '' diff --git a/browser/lib/markdown.js b/browser/lib/markdown.js index e6a3ce4e..5da961aa 100644 --- a/browser/lib/markdown.js +++ b/browser/lib/markdown.js @@ -7,6 +7,7 @@ import _ from 'lodash' import ConfigManager from 'browser/main/lib/ConfigManager' import katex from 'katex' import { lastFindInArray } from './utils' +import ee from 'browser/main/lib/eventEmitter' function createGutter (str, firstLineNumber) { if (Number.isNaN(firstLineNumber)) firstLineNumber = 1 @@ -20,7 +21,7 @@ function createGutter (str, firstLineNumber) { class Markdown { constructor (options = {}) { - const config = ConfigManager.get() + let config = ConfigManager.get() const defaultOptions = { typographer: config.preview.smartQuotes, linkify: true, @@ -152,7 +153,8 @@ class Markdown { } }) this.md.use(require('markdown-it-kbd')) - this.md.use(require('markdown-it-admonition')) + + this.md.use(require('markdown-it-admonition'), {types: ['note', 'hint', 'attention', 'caution', 'danger', 'error']}) this.md.use(require('./markdown-it-frontmatter')) const deflate = require('markdown-it-plantuml/lib/deflate') @@ -226,7 +228,11 @@ class Markdown { if (!liToken.attrs) { liToken.attrs = [] } - liToken.attrs.push(['class', 'taskListItem']) + if (config.preview.lineThroughCheckbox) { + liToken.attrs.push(['class', `taskListItem${match[1] !== ' ' ? ' checked' : ''}`]) + } else { + liToken.attrs.push(['class', 'taskListItem']) + } } content = `` } @@ -263,6 +269,9 @@ class Markdown { } // FIXME We should not depend on global variable. window.md = this.md + this.updateConfig = () => { + config = ConfigManager.get() + } } render (content) { diff --git a/browser/main/Detail/Detail.styl b/browser/main/Detail/Detail.styl index 49a634f3..1b7bd606 100644 --- a/browser/main/Detail/Detail.styl +++ b/browser/main/Detail/Detail.styl @@ -23,7 +23,7 @@ body[data-theme="dark"] border-left 1px solid $ui-dark-borderColor .empty-message color $ui-dark-inactive-text-color - + body[data-theme="solarized-dark"] .root background-color $ui-solarized-dark-noteDetail-backgroundColor @@ -37,3 +37,10 @@ body[data-theme="monokai"] border-left 1px solid $ui-monokai-borderColor .empty-message color $ui-monokai-text-color + +body[data-theme="dracula"] + .root + background-color $ui-dracula-noteDetail-backgroundColor + border-left 1px solid $ui-dracula-borderColor + .empty-message + color $ui-dracula-text-color \ No newline at end of file diff --git a/browser/main/Detail/FolderSelect.styl b/browser/main/Detail/FolderSelect.styl index cfdc2734..fe045e3a 100644 --- a/browser/main/Detail/FolderSelect.styl +++ b/browser/main/Detail/FolderSelect.styl @@ -36,7 +36,7 @@ height 34px width 20px line-height 34px - + .search-input vertical-align middle position relative @@ -71,7 +71,7 @@ overflow ellipsis cursor pointer &:hover - background-color $ui-button--hover-backgroundColor + background-color $ui-button--hover-backgroundColor .search-optionList-item--active @extend .search-optionList-item @@ -159,3 +159,29 @@ body[data-theme="monokai"] color $ui-monokai-button--active-color .search-optionList-item-name-surfix color $ui-monokai-inactive-text-color + +body[data-theme="dracula"] + .root + color $ui-dracula-text-color + &:hover + color #f8f8f2 + background-color $ui-dark-button--hover-backgroundColor + border-color $ui-dracula-borderColor + + .search-optionList + color #f8f8f2 + border-color $ui-dracula-borderColor + background-color $ui-dracula-button-backgroundColor + + .search-optionList-item + &:hover + background-color lighten($ui-dracula-button--hover-backgroundColor, 15%) + + .search-optionList-item--active + background-color $ui-dracula-button--active-backgroundColor + color $ui-dracula-button--active-color + &:hover + background-color $ui-dark-button--hover-backgroundColor + color $ui-dracula-button--active-color + .search-optionList-item-name-surfix + color $ui-dracula-inactive-text-color diff --git a/browser/main/Detail/InfoPanel.styl b/browser/main/Detail/InfoPanel.styl index 2a73ca7e..1f774174 100644 --- a/browser/main/Detail/InfoPanel.styl +++ b/browser/main/Detail/InfoPanel.styl @@ -257,3 +257,43 @@ body[data-theme="monokai"] color $ui-dark-inactive-text-color &:hover color $ui-monokai-text-color + +body[data-theme="dracula"] + .control-infoButton-panel + background-color $ui-dracula-noteList-backgroundColor + + .control-infoButton-panel-trash + background-color $ui-dracula-noteList-backgroundColor + + .modification-date + color $ui-dracula-text-color + + .modification-date-desc + color $ui-inactive-text-color + + .infoPanel-defaul-count + color $ui-dracula-text-color + + .infoPanel-sub-count + color $ui-inactive-text-color + + .infoPanel-default + color $ui-dracula-text-color + + .infoPanel-sub + color $ui-inactive-text-color + + .infoPanel-noteLink + background-color alpha($ui-dracula-borderColor, 20%) + color $ui-dracula-text-color + + [id=export-wrap] + button + color $ui-dark-inactive-text-color + &:hover + background-color alpha($ui-dracula-borderColor, 20%) + color $ui-dracula-text-color + p + color $ui-dark-inactive-text-color + &:hover + color $ui-dracula-text-color \ No newline at end of file diff --git a/browser/main/Detail/MarkdownNoteDetail.styl b/browser/main/Detail/MarkdownNoteDetail.styl index b27dc80e..cdfeaf3a 100644 --- a/browser/main/Detail/MarkdownNoteDetail.styl +++ b/browser/main/Detail/MarkdownNoteDetail.styl @@ -76,3 +76,8 @@ body[data-theme="monokai"] .root border-left 1px solid $ui-monokai-borderColor background-color $ui-monokai-noteDetail-backgroundColor + +body[data-theme="dracula"] + .root + border-left 1px solid $ui-dracula-borderColor + background-color $ui-dracula-noteDetail-backgroundColor \ No newline at end of file diff --git a/browser/main/Detail/NoteDetailInfo.styl b/browser/main/Detail/NoteDetailInfo.styl index 7166a497..1ca46516 100644 --- a/browser/main/Detail/NoteDetailInfo.styl +++ b/browser/main/Detail/NoteDetailInfo.styl @@ -98,8 +98,13 @@ body[data-theme="solarized-dark"] .info border-color $ui-solarized-dark-borderColor background-color $ui-solarized-dark-noteDetail-backgroundColor - + body[data-theme="monokai"] .info border-color $ui-monokai-borderColor - background-color $ui-monokai-noteDetail-backgroundColor \ No newline at end of file + background-color $ui-monokai-noteDetail-backgroundColor + +body[data-theme="dracula"] + .info + border-color $ui-dracula-borderColor + background-color $ui-dracula-noteDetail-backgroundColor \ No newline at end of file diff --git a/browser/main/Detail/SnippetNoteDetail.js b/browser/main/Detail/SnippetNoteDetail.js index fefba2ce..9356a02c 100644 --- a/browser/main/Detail/SnippetNoteDetail.js +++ b/browser/main/Detail/SnippetNoteDetail.js @@ -759,6 +759,7 @@ class SnippetNoteDetail extends React.Component { this.handleChange(e)} />
diff --git a/browser/main/Detail/SnippetNoteDetail.styl b/browser/main/Detail/SnippetNoteDetail.styl index f8ca48cc..e3bb31c6 100644 --- a/browser/main/Detail/SnippetNoteDetail.styl +++ b/browser/main/Detail/SnippetNoteDetail.styl @@ -169,4 +169,21 @@ body[data-theme="monokai"] .tabList background-color $ui-monokai-noteDetail-backgroundColor - color $ui-monokai-text-color \ No newline at end of file + color $ui-monokai-text-color + +body[data-theme="dracula"] + .root + border-left 1px solid $ui-dracula-borderColor + background-color $ui-dracula-noteDetail-backgroundColor + + .body + background-color $ui-dracula-noteDetail-backgroundColor + + .body .description textarea + background-color $ui-dracula-noteDetail-backgroundColor + color $ui-dracula-text-color + border 1px solid $ui-dracula-borderColor + + .tabList + background-color $ui-dracula-noteDetail-backgroundColor + color $ui-dracula-text-color \ No newline at end of file diff --git a/browser/main/Detail/TagSelect.js b/browser/main/Detail/TagSelect.js index e01d503b..eb160e4c 100644 --- a/browser/main/Detail/TagSelect.js +++ b/browser/main/Detail/TagSelect.js @@ -88,6 +88,11 @@ class TagSelect extends React.Component { this.refs.newTag.input.focus() } + handleTagLabelClick (tag) { + const { router } = this.context + router.push(`/tags/${tag}`) + } + handleTagRemoveButtonClick (tag) { this.removeTagByCallback((value, tag) => { value.splice(value.indexOf(tag), 1) @@ -182,7 +187,7 @@ class TagSelect extends React.Component { - #{tag} + this.handleTagLabelClick(tag)}>#{tag}
-
{i18n.__('Toggle editor mode')}
+
{i18n.__('Toggle Editor Mode')}
this.handleHotkeyChange(e)} diff --git a/browser/main/modals/PreferencesModal/InfoTab.styl b/browser/main/modals/PreferencesModal/InfoTab.styl index 491fc4d4..44f2d9ae 100644 --- 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 diff --git a/browser/main/modals/PreferencesModal/PreferencesModal.styl b/browser/main/modals/PreferencesModal/PreferencesModal.styl index d21f6c28..7004259b 100644 --- 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 \ No newline at end of file diff --git a/browser/main/modals/PreferencesModal/SnippetList.js b/browser/main/modals/PreferencesModal/SnippetList.js index 512ae997..3790eb3f 100644 --- 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 { diff --git a/browser/main/modals/PreferencesModal/SnippetTab.js b/browser/main/modals/PreferencesModal/SnippetTab.js index e35ecd69..b83fa205 100644 --- 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} />
+
+
+ +
+
{i18n.__('Snippet name')}
diff --git a/browser/main/modals/PreferencesModal/SnippetTab.styl b/browser/main/modals/PreferencesModal/SnippetTab.styl index 02307b64..dd22b72e 100644 --- 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() \ No newline at end of file diff --git a/browser/main/modals/PreferencesModal/StorageItem.styl b/browser/main/modals/PreferencesModal/StorageItem.styl index 29dfbd0b..adcc483e 100644 --- a/browser/main/modals/PreferencesModal/StorageItem.styl +++ b/browser/main/modals/PreferencesModal/StorageItem.styl @@ -9,13 +9,17 @@ box-sizing border-box border-bottom $default-border margin-bottom 5px + display flex .header-label - float left cursor pointer &:hover .header-label-editButton opacity 1 + flex 1 + white-space nowrap + text-overflow ellipsis + overflow hidden .header-label-path color $ui-inactive-text-color @@ -38,8 +42,8 @@ outline none .header-control - float right - + -webkit-box-flex: 1 + white-space nowrap .header-control-button width 30px height 25px diff --git a/browser/main/modals/PreferencesModal/StoragesTab.js b/browser/main/modals/PreferencesModal/StoragesTab.js index ad7472d2..046b24e6 100644 --- a/browser/main/modals/PreferencesModal/StoragesTab.js +++ b/browser/main/modals/PreferencesModal/StoragesTab.js @@ -70,7 +70,7 @@ class StoragesTab extends React.Component { }) return (
-
{i18n.__('Storages')}
+
{i18n.__('Storage Locations')}
{storageList.length > 0 ? storageList :
{i18n.__('No storage found.')}
diff --git a/browser/main/modals/PreferencesModal/StoragesTab.styl b/browser/main/modals/PreferencesModal/StoragesTab.styl index 9804d7e7..9a1a0ef8 100644 --- 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 \ No newline at end of file diff --git a/browser/main/modals/PreferencesModal/UiTab.js b/browser/main/modals/PreferencesModal/UiTab.js index 1b7d3672..97f3877c 100644 --- a/browser/main/modals/PreferencesModal/UiTab.js +++ b/browser/main/modals/PreferencesModal/UiTab.js @@ -40,7 +40,7 @@ class UiTab extends React.Component { this.handleSettingError = (err) => { this.setState({UiAlert: { type: 'error', - message: err.message != null ? err.message : i18n.__('Error occurs!') + message: err.message != null ? err.message : i18n.__('An error occurred!') }}) } ipc.addListener('APP_SETTING_DONE', this.handleSettingDone) @@ -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() } } @@ -125,7 +126,7 @@ class UiTab extends React.Component { this.props.haveToSave({ tab: 'UI', type: 'warning', - message: i18n.__('You have to save!') + message: i18n.__('Unsaved Changes!') }) } }) @@ -187,6 +188,7 @@ class UiTab extends React.Component { +
@@ -498,7 +500,7 @@ class UiTab extends React.Component {
-
{i18n.__('Code block Theme')}
+
{i18n.__('Code Block Theme')}
this.handleUIChange(e)} + checked={this.state.config.preview.lineThroughCheckbox} + ref='lineThroughCheckbox' + type='checkbox' + />  + {i18n.__('Allow line through checkbox')} + +