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/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 b3d59b47..e69f312e 100755 --- a/browser/components/MarkdownPreview.js +++ b/browser/components/MarkdownPreview.js @@ -425,6 +425,7 @@ export default class MarkdownPreview extends React.Component { case 'dark': case 'solarized-dark': case 'monokai': + case 'dracula': return scrollBarDarkStyle default: return scrollBarStyle @@ -483,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.styl b/browser/components/NoteItem.styl index e545ed99..a31f00a4 100644 --- a/browser/components/NoteItem.styl +++ b/browser/components/NoteItem.styl @@ -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 4bb6f2b1..70b74be7 100644 --- a/browser/components/NoteItemSimple.styl +++ b/browser/components/NoteItemSimple.styl @@ -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 94e75599..7b6a7d61 100644 --- a/browser/components/TodoListPercentage.styl +++ b/browser/components/TodoListPercentage.styl @@ -58,4 +58,14 @@ body[data-theme="monokai"] background-color $ui-monokai-active-color .percentageText - color $ui-monokai-text-color \ 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 15f89f89..bc5c0a49 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 @@ -531,4 +534,41 @@ body[data-theme="monokai"] border-color themeDarkBorder dd border-color themeDarkBorder - background-color $ui-monokai-noteDetail-backgroundColor \ No newline at end of file + background-color $ui-monokai-noteDetail-backgroundColor + +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 + dl + border-color themeDarkBorder + background-color themeDraculaTableHead + dt + border-color themeDarkBorder + dd + border-color themeDarkBorder + background-color $ui-dracula-noteDetail-backgroundColor 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 4095600f..9d70c461 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, @@ -226,7 +227,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 = `` } @@ -266,6 +271,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.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.styl b/browser/main/Detail/TagSelect.styl index 90341de3..c6b13f3c 100644 --- a/browser/main/Detail/TagSelect.styl +++ b/browser/main/Detail/TagSelect.styl @@ -76,3 +76,14 @@ body[data-theme="monokai"] .tag-label color $ui-monokai-text-color + +body[data-theme="dracula"] + .tag + background-color $ui-dracula-tag-backgroundColor + + .tag-removeButton + border-color $ui-dracula-button--focus-borderColor + background-color transparent + + .tag-label + color $ui-dracula-borderColor diff --git a/browser/main/Detail/ToggleModeButton.styl b/browser/main/Detail/ToggleModeButton.styl index 7ede0576..73f5acbd 100644 --- a/browser/main/Detail/ToggleModeButton.styl +++ b/browser/main/Detail/ToggleModeButton.styl @@ -63,3 +63,10 @@ body[data-theme="monokai"] .active background-color #f92672 box-shadow 2px 0px 7px #222222 + +body[data-theme="dracula"] + .control-toggleModeButton + background-color #44475a + .active + background-color #bd93f9 + box-shadow 2px 0px 7px #222222 diff --git a/browser/main/Main.js b/browser/main/Main.js index 65bde538..5fe9d493 100644 --- a/browser/main/Main.js +++ b/browser/main/Main.js @@ -141,7 +141,7 @@ class Main extends React.Component { componentDidMount () { const { dispatch, config } = this.props - const supportedThemes = ['dark', 'white', 'solarized-dark', 'monokai'] + const supportedThemes = ['dark', 'white', 'solarized-dark', 'monokai', 'dracula'] if (supportedThemes.indexOf(config.ui.theme) !== -1) { document.body.setAttribute('data-theme', config.ui.theme) diff --git a/browser/main/NewNoteButton/NewNoteButton.styl b/browser/main/NewNoteButton/NewNoteButton.styl index e8e4b5f0..75a9061c 100644 --- a/browser/main/NewNoteButton/NewNoteButton.styl +++ b/browser/main/NewNoteButton/NewNoteButton.styl @@ -79,3 +79,7 @@ body[data-theme="solarized-dark"] body[data-theme="monokai"] .root, .root--expanded background-color $ui-monokai-noteList-backgroundColor + +body[data-theme="dracula"] + .root, .root--expanded + background-color $ui-dracula-noteList-backgroundColor \ No newline at end of file diff --git a/browser/main/NoteList/NoteList.styl b/browser/main/NoteList/NoteList.styl index ea261208..73959c9b 100644 --- a/browser/main/NoteList/NoteList.styl +++ b/browser/main/NoteList/NoteList.styl @@ -84,7 +84,7 @@ body[data-theme="dark"] color $ui-dark-inactive-text-color &:hover color $ui-dark-text-color - + .control-button--active color $ui-dark-text-color &:active @@ -109,7 +109,7 @@ body[data-theme="solarized-dark"] color $ui-solarized-dark-inactive-text-color &:hover color $ui-solarized-dark-text-color - + .control-button--active color $ui-solarized-dark-text-color &:active @@ -138,3 +138,27 @@ body[data-theme="monokai"] color $ui-monokai-text-color &:active color $ui-monokai-text-color + +body[data-theme="dracula"] + .root + border-color $ui-dracula-borderColor + background-color $ui-dracula-noteList-backgroundColor + + .control + background-color $ui-dracula-noteList-backgroundColor + border-color $ui-dracula-borderColor + + .control-sortBy-select + &:hover + transition 0.2s + color $ui-dracula-text-color + + .control-button + color $ui-dracula-inactive-text-color + &:hover + color $ui-dracula-text-color + + .control-button--active + color $ui-dracula-text-color + &:active + color $ui-dracula-text-color \ No newline at end of file diff --git a/browser/main/SideNav/SideNav.styl b/browser/main/SideNav/SideNav.styl index ecab70d0..9fa6d4fa 100644 --- a/browser/main/SideNav/SideNav.styl +++ b/browser/main/SideNav/SideNav.styl @@ -19,7 +19,7 @@ text-align center - + .top-menu-label margin-left 5px overflow ellipsis @@ -122,3 +122,8 @@ body[data-theme="monokai"] .root, .root--folded background-color $ui-monokai-backgroundColor border-right 1px solid $ui-monokai-borderColor + +body[data-theme="dracula"] + .root, .root--folded + background-color $ui-dracula-backgroundColor + border-right 1px solid $ui-dracula-borderColor \ No newline at end of file diff --git a/browser/main/StatusBar/StatusBar.styl b/browser/main/StatusBar/StatusBar.styl index 52cc4b02..83cf2088 100644 --- a/browser/main/StatusBar/StatusBar.styl +++ b/browser/main/StatusBar/StatusBar.styl @@ -34,7 +34,7 @@ color $ui-active-color span margin-left 5px - + .update navButtonColor() height 24px @@ -80,3 +80,14 @@ body[data-theme="monokai"] color $ui-monokai-active-color &:active color $ui-monokai-active-color + +body[data-theme="dracula"] + navButtonColor() + .zoom + border-color $ui-dark-borderColor + color $ui-dracula-text-color + &:hover + transition 0.15s + color $ui-dracula-active-color + &:active + color $ui-dracula-active-color \ No newline at end of file diff --git a/browser/main/TopBar/TopBar.styl b/browser/main/TopBar/TopBar.styl index 7654f66f..61b21fc5 100644 --- a/browser/main/TopBar/TopBar.styl +++ b/browser/main/TopBar/TopBar.styl @@ -256,3 +256,25 @@ body[data-theme="monokai"] input background-color $ui-monokai-noteList-backgroundColor color $ui-monokai-text-color + +body[data-theme="dracula"] + .root, .root--expanded + background-color $ui-dracula-noteList-backgroundColor + + .control + border-color $ui-dracula-borderColor + .control-search + background-color $ui-dracula-noteList-backgroundColor + + .control-search-icon + absolute top bottom left + line-height 32px + width 35px + color $ui-dracula-inactive-text-color + background-color $ui-dracula-noteList-backgroundColor + + .control-search-input + background-color $ui-dracula-noteList-backgroundColor + input + background-color $ui-dracula-noteList-backgroundColor + color $ui-dracula-text-color \ No newline at end of file diff --git a/browser/main/global.styl b/browser/main/global.styl index 815cff4e..e04060c2 100644 --- a/browser/main/global.styl +++ b/browser/main/global.styl @@ -18,6 +18,9 @@ body ::-webkit-scrollbar width 12px +::-webkit-scrollbar-corner + background-color: transparent; + ::-webkit-scrollbar-thumb background-color rgba(0, 0, 0, 0.15) @@ -162,6 +165,15 @@ body[data-theme="monokai"] .sortableItemHelper color: $ui-monokai-text-color +body[data-theme="dracula"] + ::-webkit-scrollbar-thumb + background-color rgba(0, 0, 0, 0.3) + .ModalBase + .modalBack + background-color $ui-dracula-backgroundColor + .sortableItemHelper + color: $ui-dracula-text-color + body[data-theme="default"] .SideNav ::-webkit-scrollbar-thumb background-color rgba(255, 255, 255, 0.3) diff --git a/browser/main/lib/ConfigManager.js b/browser/main/lib/ConfigManager.js index 5ffb1bc7..1727deb8 100644 --- a/browser/main/lib/ConfigManager.js +++ b/browser/main/lib/ConfigManager.js @@ -65,7 +65,8 @@ export const DEFAULT_CONFIG = { smartArrows: false, allowCustomCSS: false, customCSS: '', - sanitize: 'STRICT' // 'STRICT', 'ALLOW_STYLES', 'NONE' + sanitize: 'STRICT', // 'STRICT', 'ALLOW_STYLES', 'NONE' + lineThroughCheckbox: true }, blog: { type: 'wordpress', // Available value: wordpress, add more types in the future plz @@ -147,6 +148,8 @@ function set (updates) { document.body.setAttribute('data-theme', 'solarized-dark') } else if (newConfig.ui.theme === 'monokai') { document.body.setAttribute('data-theme', 'monokai') + } else if (newConfig.ui.theme === 'dracula') { + document.body.setAttribute('data-theme', 'dracula') } else { document.body.setAttribute('data-theme', 'default') } diff --git a/browser/main/modals/CreateFolderModal.styl b/browser/main/modals/CreateFolderModal.styl index 1b96e123..93848683 100644 --- 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() \ No newline at end of file diff --git a/browser/main/modals/NewNoteModal.styl b/browser/main/modals/NewNoteModal.styl index db14133f..c82b9376 100644 --- 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 \ No newline at end of file diff --git a/browser/main/modals/PreferencesModal/ConfigTab.styl b/browser/main/modals/PreferencesModal/ConfigTab.styl index b146486d..255165ce 100644 --- 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() \ No newline at end of file diff --git a/browser/main/modals/PreferencesModal/Crowdfunding.styl b/browser/main/modals/PreferencesModal/Crowdfunding.styl index 326867d3..6d72290b 100644 --- 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 \ No newline at end of file diff --git a/browser/main/modals/PreferencesModal/FolderItem.styl b/browser/main/modals/PreferencesModal/FolderItem.styl index f4a44675..2ded3ada 100644 --- 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() \ No newline at end of file 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/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 a45e1387..97f3877c 100644 --- 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 { +
@@ -512,6 +514,16 @@ class UiTab extends React.Component {
+
+ +