From 2fc37d54f275f2f16c9263074b7ca52ac269c731 Mon Sep 17 00:00:00 2001 From: Baptiste Augrain Date: Thu, 8 Nov 2018 13:19:46 +0100 Subject: [PATCH 01/74] fix height of mermaid's diagrams --- browser/components/MarkdownPreview.js | 18 +++++++++++++++++ browser/components/markdown.styl | 3 +++ browser/components/render/MermaidRender.js | 23 ++++++++++++++++++++-- 3 files changed, 42 insertions(+), 2 deletions(-) diff --git a/browser/components/MarkdownPreview.js b/browser/components/MarkdownPreview.js index d9ff7074..90107ffd 100755 --- a/browser/components/MarkdownPreview.js +++ b/browser/components/MarkdownPreview.js @@ -205,6 +205,7 @@ export default class MarkdownPreview extends React.Component { this.saveAsMdHandler = () => this.handleSaveAsMd() this.saveAsHtmlHandler = () => this.handleSaveAsHtml() this.printHandler = () => this.handlePrint() + this.resizeHandler = _.throttle(this.handleResize.bind(this), 100) this.linkClickHandler = this.handlelinkClick.bind(this) this.initMarkdown = this.initMarkdown.bind(this) @@ -485,6 +486,10 @@ export default class MarkdownPreview extends React.Component { 'scroll', this.scrollHandler ) + this.refs.root.contentWindow.addEventListener( + 'resize', + this.resizeHandler + ) eventEmitter.on('export:save-text', this.saveAsTextHandler) eventEmitter.on('export:save-md', this.saveAsMdHandler) eventEmitter.on('export:save-html', this.saveAsHtmlHandler) @@ -520,6 +525,10 @@ export default class MarkdownPreview extends React.Component { 'scroll', this.scrollHandler ) + this.refs.root.contentWindow.removeEventListener( + 'resize', + this.resizeHandler + ) eventEmitter.off('export:save-text', this.saveAsTextHandler) eventEmitter.off('export:save-md', this.saveAsMdHandler) eventEmitter.off('export:save-html', this.saveAsHtmlHandler) @@ -797,6 +806,15 @@ export default class MarkdownPreview extends React.Component { ) } + handleResize () { + _.forEach( + this.refs.root.contentWindow.document.querySelectorAll('svg[ratio]'), + el => { + el.setAttribute('height', el.clientWidth / el.getAttribute('ratio')) + } + ) + } + focus () { this.refs.root.focus() } diff --git a/browser/components/markdown.styl b/browser/components/markdown.styl index b7f219b8..7b8911d7 100644 --- a/browser/components/markdown.styl +++ b/browser/components/markdown.styl @@ -416,6 +416,9 @@ pre.fence canvas, svg max-width 100% !important + svg[ratio] + width 100% + themeDarkBackground = darken(#21252B, 10%) themeDarkText = #f9f9f9 themeDarkBorder = lighten(themeDarkBackground, 20%) diff --git a/browser/components/render/MermaidRender.js b/browser/components/render/MermaidRender.js index 7a3b3ea2..c2380504 100644 --- a/browser/components/render/MermaidRender.js +++ b/browser/components/render/MermaidRender.js @@ -22,17 +22,36 @@ function getId () { function render (element, content, theme) { try { const height = element.attributes.getNamedItem('data-height') - if (height && height.value !== 'undefined') { + const isPredefined = height && height.value !== 'undefined' + if (isPredefined) { element.style.height = height.value + 'vh' } let isDarkTheme = theme === 'dark' || theme === 'solarized-dark' || theme === 'monokai' || theme === 'dracula' mermaidAPI.initialize({ theme: isDarkTheme ? 'dark' : 'default', themeCSS: isDarkTheme ? darkThemeStyling : '', - useMaxWidth: false + gantt: { + useWidth: element.clientWidth + } }) mermaidAPI.render(getId(), content, (svgGraph) => { element.innerHTML = svgGraph + + if (!isPredefined) { + const el = element.firstChild + const viewBox = el.getAttribute('viewBox').split(' ') + + let ratio = viewBox[2] / viewBox[3] + + if (el.style.maxWidth) { + const maxWidth = parseFloat(el.style.maxWidth) + + ratio *= el.parentNode.clientWidth / maxWidth + } + + el.setAttribute('ratio', ratio) + el.setAttribute('height', el.parentNode.clientWidth / ratio) + } }) } catch (e) { element.className = 'mermaid-error' From b6b29e02f3a947095f904afe9e5dd066005daba0 Mon Sep 17 00:00:00 2001 From: Baptiste Augrain Date: Thu, 8 Nov 2018 14:41:25 +0100 Subject: [PATCH 02/74] fix lint error --- browser/components/MarkdownPreview.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/browser/components/MarkdownPreview.js b/browser/components/MarkdownPreview.js index 90107ffd..afab9a8d 100755 --- a/browser/components/MarkdownPreview.js +++ b/browser/components/MarkdownPreview.js @@ -807,7 +807,7 @@ export default class MarkdownPreview extends React.Component { } handleResize () { - _.forEach( + _.forEach( this.refs.root.contentWindow.document.querySelectorAll('svg[ratio]'), el => { el.setAttribute('height', el.clientWidth / el.getAttribute('ratio')) From 1cdac943bad5edae2dfa7f3b7e365b5a12707ec5 Mon Sep 17 00:00:00 2001 From: Baptiste Augrain Date: Fri, 8 Feb 2019 00:50:47 +0100 Subject: [PATCH 03/74] adding Nord theme and streamlining UI theming --- browser/components/MarkdownPreview.js | 11 +- browser/components/NoteItem.styl | 200 ++++++------------ browser/components/NoteItemSimple.styl | 179 ++++++---------- browser/components/RealtimeNotification.styl | 44 ++-- browser/components/SideNavFilter.styl | 158 ++++---------- browser/components/SnippetTab.styl | 126 +++-------- browser/components/StorageItem.styl | 75 ++----- browser/components/TagListItem.styl | 45 ++-- browser/components/TodoListPercentage.styl | 32 ++- browser/components/markdown.styl | 172 ++++----------- browser/components/render/MermaidRender.js | 7 +- browser/lib/ui-themes.js | 39 ++++ browser/main/Detail/Detail.styl | 29 +-- browser/main/Detail/FolderSelect.styl | 73 +++---- browser/main/Detail/FullscreenButton.styl | 50 ++--- browser/main/Detail/InfoPanel.styl | 183 +++------------- browser/main/Detail/MarkdownNoteDetail.styl | 22 +- browser/main/Detail/NoteDetailInfo.styl | 21 +- browser/main/Detail/SnippetNoteDetail.styl | 93 +++----- browser/main/Detail/TagSelect.styl | 41 ++-- browser/main/Detail/ToggleModeButton.styl | 154 +++++++------- browser/main/Main.js | 5 +- browser/main/NewNoteButton/NewNoteButton.styl | 17 +- browser/main/NoteList/NoteList.styl | 114 +++------- browser/main/SideNav/PreferenceButton.styl | 102 +++++---- browser/main/SideNav/SideNav.styl | 21 +- browser/main/SideNav/StorageItem.styl | 90 ++++---- browser/main/SideNav/SwitchButton.styl | 118 +++++------ browser/main/StatusBar/StatusBar.styl | 36 ++-- browser/main/TopBar/TopBar.styl | 84 ++------ browser/main/global.styl | 51 ++--- browser/main/lib/ConfigManager.js | 13 +- browser/main/modals/CreateFolderModal.styl | 126 +++-------- browser/main/modals/NewNoteModal.styl | 80 ++----- .../modals/PreferencesModal/ConfigTab.styl | 118 +++-------- .../modals/PreferencesModal/Crowdfunding.styl | 25 +-- .../modals/PreferencesModal/FolderItem.styl | 83 ++------ .../main/modals/PreferencesModal/InfoTab.styl | 30 +-- .../PreferencesModal/PreferencesModal.styl | 121 +++-------- .../modals/PreferencesModal/SnippetTab.styl | 81 ++----- .../modals/PreferencesModal/StoragesTab.styl | 139 +++--------- browser/main/modals/PreferencesModal/UiTab.js | 21 +- browser/main/modals/RenameFolderModal.styl | 36 ++-- browser/styles/Detail/TagSelect.styl | 94 +++----- browser/styles/index.styl | 139 ++++++------ 45 files changed, 1192 insertions(+), 2306 deletions(-) create mode 100644 browser/lib/ui-themes.js diff --git a/browser/components/MarkdownPreview.js b/browser/components/MarkdownPreview.js index a6819ce9..2cde0fb7 100755 --- a/browser/components/MarkdownPreview.js +++ b/browser/components/MarkdownPreview.js @@ -24,6 +24,7 @@ import fs from 'fs' import { render } from 'react-dom' import Carousel from 'react-image-carousel' import ConfigManager from '../main/lib/ConfigManager' +import uiThemes from 'browser/lib/ui-themes' const { remote, shell } = require('electron') const attachmentManagement = require('../main/lib/dataApi/attachmentManagement') @@ -426,15 +427,7 @@ export default class MarkdownPreview extends React.Component { getScrollBarStyle () { const { theme } = this.props - switch (theme) { - case 'dark': - case 'solarized-dark': - case 'monokai': - case 'dracula': - return scrollBarDarkStyle - default: - return scrollBarStyle - } + return uiThemes.some(item => item.name === theme && item.isDark) ? scrollBarDarkStyle : scrollBarStyle } componentDidMount () { diff --git a/browser/components/NoteItem.styl b/browser/components/NoteItem.styl index a31f00a4..75078db4 100644 --- a/browser/components/NoteItem.styl +++ b/browser/components/NoteItem.styl @@ -194,7 +194,7 @@ body[data-theme="dark"] color $ui-dark-text-color .item-bottom-tagList-item transition 0.15s - background-color alpha(#fff, 20%) + background-color alpha($ui-dark-tagList-backgroundColor, 20%) color $ui-dark-text-color &:active transition 0.15s @@ -207,7 +207,7 @@ body[data-theme="dark"] color $ui-dark-text-color .item-bottom-tagList-item transition 0.15s - background-color alpha(white, 10%) + background-color alpha($ui-dark-tagList-backgroundColor, 10%) color $ui-dark-text-color .item-wrapper @@ -223,13 +223,13 @@ body[data-theme="dark"] .item-bottom-time color $ui-dark-text-color .item-bottom-tagList-item - background-color alpha(white, 10%) + background-color alpha($ui-dark-tagList-backgroundColor, 10%) color $ui-dark-text-color &:hover background-color alpha($ui-dark-button--active-backgroundColor, 60%) - color #c0392b + color $ui-dark-button--hover-color .item-bottom-tagList-item - background-color alpha(#fff, 20%) + background-color alpha($ui-dark-tagList-backgroundColor, 20%) .item-title color $ui-inactive-text-color @@ -322,148 +322,82 @@ body[data-theme="solarized-dark"] color $ui-inactive-text-color vertical-align middle -body[data-theme="monokai"] - .root - border-color $ui-monokai-borderColor - background-color $ui-monokai-noteList-backgroundColor +apply-theme(theme) + body[data-theme={theme}] + .root + border-color get-theme-var(theme, 'borderColor') + background-color get-theme-var(theme, 'noteList-backgroundColor') - .item - border-color $ui-monokai-borderColor - background-color $ui-monokai-noteList-backgroundColor - &:hover - transition 0.15s - // background-color alpha($ui-monokai-noteList-backgroundColor, 20%) - color $ui-monokai-text-color - .item-title - .item-title-icon - .item-bottom-time + .item + border-color get-theme-var(theme, 'borderColor') + background-color get-theme-var(theme, 'noteList-backgroundColor') + &:hover transition 0.15s - color $ui-monokai-text-color - .item-bottom-tagList-item + // background-color alpha(get-theme-var(theme, 'noteList-backgroundColor'), 20%) + color get-theme-var(theme, 'text-color') + .item-title + .item-title-icon + .item-bottom-time + transition 0.15s + color get-theme-var(theme, 'text-color') + .item-bottom-tagList-item + transition 0.15s + background-color alpha(get-theme-var(theme, 'noteList-backgroundColor'), 20%) + color get-theme-var(theme, 'text-color') + &:active transition 0.15s - background-color alpha($ui-monokai-noteList-backgroundColor, 20%) - color $ui-monokai-text-color - &:active - transition 0.15s - background-color $ui-monokai-noteList-backgroundColor - color $ui-monokai-text-color - .item-title - .item-title-icon - .item-bottom-time - transition 0.15s - color $ui-monokai-text-color - .item-bottom-tagList-item - transition 0.15s - background-color alpha($ui-monokai-noteList-backgroundColor, 10%) - color $ui-monokai-text-color + background-color get-theme-var(theme, 'noteList-backgroundColor') + color get-theme-var(theme, 'text-color') + .item-title + .item-title-icon + .item-bottom-time + transition 0.15s + color get-theme-var(theme, 'text-color') + .item-bottom-tagList-item + transition 0.15s + background-color alpha(get-theme-var(theme, 'noteList-backgroundColor'), 10%) + color get-theme-var(theme, 'text-color') - .item-wrapper - border-color alpha($ui-monokai-button-backgroundColor, 60%) - - .item--active - border-color $ui-monokai-borderColor - background-color $ui-monokai-button-backgroundColor .item-wrapper - border-color transparent - .item-title - .item-title-icon - .item-bottom-time - 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 #f92672 - .item-bottom-tagList-item - background-color alpha(#fff, 20%) + border-color alpha(get-theme-var(theme, 'button-backgroundColor'), 60%) - .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 - -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--active + border-color get-theme-var(theme, 'borderColor') + background-color get-theme-var(theme, 'button-backgroundColor') + .item-wrapper + border-color transparent .item-title .item-title-icon .item-bottom-time - transition 0.15s - color $ui-dracula-text-color + color get-theme-var(theme, 'active-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 + background-color alpha(get-theme-var(theme, 'tagList-backgroundColor'), 10%) + color get-theme-var(theme, 'text-color') + &:hover + // background-color alpha(get-theme-var(theme, 'button--active-backgroundColor'), 60%) + color get-theme-var(theme, 'button--hover-color') + .item-bottom-tagList-item + background-color alpha(get-theme-var(theme, 'tagList-backgroundColor'), 20%) - .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 + color $ui-inactive-text-color + .item-title-icon - .item-bottom-time - color $ui-dracula-active-color + color $ui-inactive-text-color + + .item-title-empty + color $ui-inactive-text-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%) + background-color alpha($ui-dark-button--active-backgroundColor, 40%) + color $ui-inactive-text-color - .item-title - color $ui-inactive-text-color + .item-bottom-tagList-empty + color $ui-inactive-text-color + vertical-align middle - .item-title-icon - color $ui-inactive-text-color +for theme in 'dracula' + apply-theme(theme) - .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 +for theme in $themes + apply-theme(theme) \ No newline at end of file diff --git a/browser/components/NoteItemSimple.styl b/browser/components/NoteItemSimple.styl index 70b74be7..a36de5ed 100644 --- a/browser/components/NoteItemSimple.styl +++ b/browser/components/NoteItemSimple.styl @@ -223,130 +223,73 @@ body[data-theme="solarized-dark"] padding-left 4px opacity 0.4 -body[data-theme="monokai"] - .root - border-color $ui-monokai-borderColor - background-color $ui-monokai-noteList-backgroundColor +apply-theme(theme) + body[data-theme={theme}] + .root + border-color get-theme-var(theme, 'borderColor') + background-color get-theme-var(theme, 'noteList-backgroundColor') - .item-simple - border-color $ui-monokai-borderColor - background-color $ui-monokai-noteList-backgroundColor - &:hover - transition 0.15s - background-color alpha($ui-monokai-button-backgroundColor, 60%) - color $ui-monokai-text-color + .item-simple + border-color get-theme-var(theme, 'borderColor') + background-color get-theme-var(theme, 'noteList-backgroundColor') + &:hover + transition 0.15s + background-color alpha(get-theme-var(theme, 'button-backgroundColor'), 60%) + color get-theme-var(theme, 'text-color') + .item-simple-title + .item-simple-title-empty + .item-simple-title-icon + .item-simple-bottom-time + transition 0.15s + color get-theme-var(theme, 'text-color') + .item-simple-bottom-tagList-item + transition 0.15s + background-color alpha(get-theme-var(theme, 'tagList-backgroundColor'), 20%) + color get-theme-var(theme, 'text-color') + &:active + transition 0.15s + background-color get-theme-var(theme, 'button--active-backgroundColor') + color get-theme-var(theme, 'text-color') + .item-simple-title + .item-simple-title-empty + .item-simple-title-icon + .item-simple-bottom-time + transition 0.15s + color get-theme-var(theme, 'text-color') + .item-simple-bottom-tagList-item + transition 0.15s + background-color alpha(get-theme-var(theme, 'tagList-backgroundColor'), 10%) + color get-theme-var(theme, 'text-color') + + .item-simple--active + border-color get-theme-var(theme, 'borderColor') + background-color get-theme-var(theme, 'button--active-backgroundColor') + .item-simple-wrapper + border-color transparent .item-simple-title .item-simple-title-empty .item-simple-title-icon .item-simple-bottom-time - transition 0.15s - color $ui-monokai-text-color + color get-theme-var(theme, 'text-color') .item-simple-bottom-tagList-item - transition 0.15s - background-color alpha(#fff, 20%) - color $ui-monokai-text-color - &:active - transition 0.15s - background-color $ui-monokai-button--active-backgroundColor - color $ui-monokai-text-color - .item-simple-title - .item-simple-title-empty - .item-simple-title-icon - .item-simple-bottom-time - transition 0.15s - color $ui-monokai-text-color - .item-simple-bottom-tagList-item - transition 0.15s - background-color alpha(white, 10%) - color $ui-monokai-text-color - - .item-simple--active - border-color $ui-monokai-borderColor - background-color $ui-monokai-button--active-backgroundColor - .item-simple-wrapper - border-color transparent + background-color alpha(get-theme-var(theme, 'tagList-backgroundColor'), 10%) + color get-theme-var(theme, 'text-color') + &:hover + // background-color alpha(get-theme-var(theme, 'button--active-backgroundColor'), 60%) + color #c0392b + .item-simple-bottom-tagList-item + background-color alpha(get-theme-var(theme, 'tagList-backgroundColor'), 20%) .item-simple-title - .item-simple-title-empty - .item-simple-title-icon - .item-simple-bottom-time - color $ui-monokai-text-color - .item-simple-bottom-tagList-item - background-color alpha(white, 10%) - color $ui-monokai-text-color - &:hover - // background-color alpha($ui-dark-button--active-backgroundColor, 60%) - color #c0392b - .item-simple-bottom-tagList-item - background-color alpha(#fff, 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 + 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 -body[data-theme="dracula"] - .root - border-color $ui-dracula-borderColor - background-color $ui-dracula-noteList-backgroundColor +for theme in 'dracula' + apply-theme(theme) - .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 +for theme in $themes + apply-theme(theme) \ No newline at end of file diff --git a/browser/components/RealtimeNotification.styl b/browser/components/RealtimeNotification.styl index 36330c48..795807b9 100644 --- a/browser/components/RealtimeNotification.styl +++ b/browser/components/RealtimeNotification.styl @@ -30,36 +30,20 @@ body[data-theme="dark"] &:hover color #5CB85C +apply-theme(theme) + body[data-theme={theme}] + .notification-area + background-color none -body[data-theme="solarized-dark"] - .notification-area - background-color none + .notification-link + color get-theme-var(theme, 'text-color') + border none + background-color get-theme-var(theme, 'button-backgroundColor') + &:hover + color get-theme-var(theme, 'button--hover-color') - .notification-link - color $ui-solarized-dark-text-color - border none - background-color $ui-solarized-dark-button-backgroundColor - &:hover - color #5CB85C +for theme in 'solarized-dark' 'dracula' + apply-theme(theme) -body[data-theme="monokai"] - .notification-area - background-color none - - .notification-link - color $ui-monokai-text-color - border none - background-color $ui-monokai-button-backgroundColor - &:hover - 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 +for theme in $themes + apply-theme(theme) \ No newline at end of file diff --git a/browser/components/SideNavFilter.styl b/browser/components/SideNavFilter.styl index 1da8c7e4..41e679ca 100644 --- a/browser/components/SideNavFilter.styl +++ b/browser/components/SideNavFilter.styl @@ -180,129 +180,51 @@ body[data-theme="dark"] .menu-button-label color $ui-dark-text-color +apply-theme(theme) + body[data-theme={theme}] + .menu-button + &:active + background-color get-theme-var(theme, 'noteList-backgroundColor') + color get-theme-var(theme, 'text-color') + &:hover + background-color get-theme-var(theme, 'button-backgroundColor') + color get-theme-var(theme, 'text-color') -body[data-theme="solarized-dark"] - .menu-button - &:active - background-color $ui-solarized-dark-noteList-backgroundColor - color $ui-solarized-dark-text-color - &:hover - background-color $ui-solarized-dark-button-backgroundColor - color $ui-solarized-dark-text-color - - .menu-button--active - color $ui-solarized-dark-text-color - background-color $ui-solarized-dark-button-backgroundColor - .menu-button-label - color $ui-solarized-dark-text-color - &:hover - background-color $ui-solarized-dark-button-backgroundColor - color $ui-solarized-dark-text-color + .menu-button--active + color get-theme-var(theme, 'text-color') + background-color get-theme-var(theme, 'button-backgroundColor') .menu-button-label - color $ui-solarized-dark-text-color + color get-theme-var(theme, 'text-color') + &:hover + background-color get-theme-var(theme, 'button-backgroundColor') + color get-theme-var(theme, 'text-color') + .menu-button-label + color get-theme-var(theme, 'text-color') - .menu-button-star--active - color $ui-solarized-dark-text-color - background-color $ui-solarized-dark-button-backgroundColor - .menu-button-label - color $ui-solarized-dark-text-color - &:hover - background-color $ui-solarized-dark-button-backgroundColor - color $ui-solarized-dark-text-color + .menu-button-star--active + color get-theme-var(theme, 'text-color') + background-color get-theme-var(theme, 'button-backgroundColor') .menu-button-label - color $ui-solarized-dark-text-color + color get-theme-var(theme, 'text-color') + &:hover + background-color get-theme-var(theme, 'button-backgroundColor') + color get-theme-var(theme, 'text-color') + .menu-button-label + color get-theme-var(theme, 'text-color') - .menu-button-trash--active - color $ui-solarized-dark-text-color - background-color $ui-solarized-dark-button-backgroundColor - .menu-button-label - color $ui-solarized-dark-text-color - &:hover - background-color $ui-solarized-dark-button-backgroundColor - color $ui-solarized-dark-text-color + .menu-button-trash--active + color get-theme-var(theme, 'text-color') + background-color get-theme-var(theme, 'button-backgroundColor') .menu-button-label - color $ui-solarized-dark-text-color + color get-theme-var(theme, 'text-color') + &:hover + background-color get-theme-var(theme, 'button-backgroundColor') + color get-theme-var(theme, 'text-color') + .menu-button-label + color get-theme-var(theme, 'text-color') -body[data-theme="monokai"] - .menu-button - &:active - background-color $ui-monokai-noteList-backgroundColor - color $ui-monokai-text-color - &:hover - background-color $ui-monokai-button-backgroundColor - color $ui-monokai-text-color +for theme in 'solarized-dark' 'dracula' + apply-theme(theme) - .menu-button--active - color $ui-monokai-text-color - background-color $ui-monokai-button-backgroundColor - .menu-button-label - color $ui-monokai-text-color - &:hover - background-color $ui-monokai-button-backgroundColor - color $ui-monokai-text-color - .menu-button-label - color $ui-monokai-text-color - - .menu-button-star--active - color $ui-monokai-text-color - background-color $ui-monokai-button-backgroundColor - .menu-button-label - color $ui-monokai-text-color - &:hover - background-color $ui-monokai-button-backgroundColor - color $ui-monokai-text-color - .menu-button-label - color $ui-monokai-text-color - - .menu-button-trash--active - color $ui-monokai-text-color - background-color $ui-monokai-button-backgroundColor - .menu-button-label - color $ui-monokai-text-color - &:hover - background-color $ui-monokai-button-backgroundColor - color $ui-monokai-text-color - .menu-button-label - 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 +for theme in $themes + apply-theme(theme) \ No newline at end of file diff --git a/browser/components/SnippetTab.styl b/browser/components/SnippetTab.styl index d101f318..994e3b5a 100644 --- a/browser/components/SnippetTab.styl +++ b/browser/components/SnippetTab.styl @@ -61,7 +61,7 @@ width 100% outline none -body[data-theme="default"], body[data-theme="white"] +body[data-theme="default"], body[data-theme="white"] .root--active &:hover background-color alpha($ui-button--active-backgroundColor, 60%) @@ -100,103 +100,43 @@ body[data-theme="dark"] color $ui-dark-text-color transition 0.15s -body[data-theme="solarized-dark"] - .root - border-color $ui-solarized-dark-borderColor - &:hover - background-color $ui-solarized-dark-noteDetail-backgroundColor - transition 0.15s +apply-theme(theme) + body[data-theme={theme}] + .root + border-color get-theme-var(theme, 'borderColor') + &:hover + background-color get-theme-var(theme, 'noteDetail-backgroundColor') + transition 0.15s + .deleteButton + color get-theme-var(theme, 'text-color') + transition 0.15s + .button + color get-theme-var(theme, 'text-color') + transition 0.15s + + .root--active + color get-theme-var(theme, 'active-color') + background-color get-theme-var(theme, 'button-backgroundColor') + border-color get-theme-var(theme, 'borderColor') .deleteButton - color $ui-solarized-dark-button--active-color - transition 0.15s + color get-theme-var(theme, 'text-color') .button - color $ui-solarized-dark-button--active-color - transition 0.15s + color get-theme-var(theme, 'active-color') - .root--active - color $ui-solarized-dark-button--active-color - background-color $ui-solarized-dark-button-backgroundColor - border-color $ui-solarized-dark-borderColor - .deleteButton - color $ui-solarized-dark-button--active-color .button - color $ui-solarized-dark-button--active-color + border none + color $ui-inactive-text-color + background-color transparent + transition color background-color 0.15s + border-left 4px solid transparent - .button - border none - color $ui-solarized-dark-text-color - background-color transparent - transition color background-color 0.15s - border-left 4px solid transparent - - .input - background-color $ui-solarized-dark-noteDetail-backgroundColor - color $ui-solarized-dark-button--active-color - transition 0.15s - -body[data-theme="monokai"] - .root - border-color $ui-monokai-borderColor - &:hover - background-color $ui-monokai-noteDetail-backgroundColor + .input + background-color get-theme-var(theme, 'noteDetail-backgroundColor') + color get-theme-var(theme, 'text-color') transition 0.15s - .deleteButton - color $ui-monokai-text-color - transition 0.15s - .button - color $ui-monokai-text-color - transition 0.15s - .root--active - color $ui-monokai-active-color - background-color $ui-monokai-button-backgroundColor - border-color $ui-monokai-borderColor - .deleteButton - color $ui-monokai-text-color - .button - color $ui-monokai-active-color - - .button - border none - color $ui-inactive-text-color - background-color transparent - transition color background-color 0.15s - border-left 4px solid transparent +for theme in 'solarized-dark' 'dracula' + apply-theme(theme) - .input - background-color $ui-monokai-noteDetail-backgroundColor - color $ui-monokai-text-color - transition 0.15s - -body[data-theme="dracula"] - .root - border-color $ui-dracula-borderColor - &:hover - background-color $ui-dracula-noteDetail-backgroundColor - transition 0.15s - .deleteButton - color $ui-dracula-text-color - transition 0.15s - .button - color $ui-dracula-text-color - transition 0.15s - - .root--active - color $ui-dracula-text-color - background-color $ui-dracula-button-backgroundColor - border-color $ui-dracula-borderColor - .deleteButton - color $ui-dracula-text-color - .button - color $ui-dracula-active-color - - .button - border none - color $ui-inactive-text-color - background-color transparent - transition color background-color 0.15s - border-left 4px solid transparent - - .input - background-color $ui-dracula-noteDetail-backgroundColor - color $ui-dracula-text-color \ No newline at end of file +for theme in $themes + apply-theme(theme) \ No newline at end of file diff --git a/browser/components/StorageItem.styl b/browser/components/StorageItem.styl index df8cbbc6..e0a3c6cd 100644 --- a/browser/components/StorageItem.styl +++ b/browser/components/StorageItem.styl @@ -120,59 +120,28 @@ body[data-theme="dark"] color $ui-dark-text-color background-color alpha($ui-dark-button--active-backgroundColor, 50%) -body[data-theme="solarized-dark"] - .folderList-item - &:hover - background-color $ui-solarized-dark-button-backgroundColor - color $ui-solarized-dark-text-color - &:active - color $ui-solarized-dark-text-color - background-color $ui-solarized-dark-button-backgroundColor +apply-theme(theme) + body[data-theme={theme}] + .folderList-item + &:hover + background-color get-theme-var(theme, 'button-backgroundColor') + color get-theme-var(theme, 'text-color') + &:active + color get-theme-var(theme, 'text-color') + background-color get-theme-var(theme, 'button-backgroundColor') - .folderList-item--active - @extend .folderList-item - color $ui-solarized-dark-text-color - background-color $ui-solarized-dark-button-backgroundColor - &:active - background-color $ui-solarized-dark-button-backgroundColor - &:hover - color $ui-solarized-dark-text-color - background-color $ui-solarized-dark-button-backgroundColor + .folderList-item--active + @extend .folderList-item + color get-theme-var(theme, 'text-color') + background-color get-theme-var(theme, 'button-backgroundColor') + &:active + background-color get-theme-var(theme, 'button-backgroundColor') + &:hover + color get-theme-var(theme, 'text-color') + background-color get-theme-var(theme, 'button-backgroundColor') -body[data-theme="monokai"] - .folderList-item - &:hover - background-color $ui-monokai-button-backgroundColor - color $ui-monokai-text-color - &:active - color $ui-monokai-text-color - background-color $ui-monokai-button-backgroundColor +for theme in 'solarized-dark' 'dracula' + apply-theme(theme) - .folderList-item--active - @extend .folderList-item - color $ui-monokai-text-color - background-color $ui-monokai-button-backgroundColor - &:active - background-color $ui-monokai-button-backgroundColor - &:hover - color $ui-monokai-text-color - 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 +for theme in $themes + apply-theme(theme) \ No newline at end of file diff --git a/browser/components/TagListItem.styl b/browser/components/TagListItem.styl index 9f407a17..1f78c46f 100644 --- a/browser/components/TagListItem.styl +++ b/browser/components/TagListItem.styl @@ -94,23 +94,30 @@ body[data-theme="white"] .tagList-item-count color $ui-text-color -body[data-theme="dark"] - .tagList-item - color $ui-dark-inactive-text-color - &:hover - color $ui-dark-text-color - background-color alpha($ui-dark-button--active-backgroundColor, 20%) - &:active - color $ui-dark-text-color - background-color $ui-dark-button--active-backgroundColor +apply-theme(theme) + body[data-theme={theme}] + .tagList-item + color get-theme-var(theme, 'inactive-text-color') + &:hover + color get-theme-var(theme, 'text-color') + background-color alpha(get-theme-var(theme, 'button--active-backgroundColor'), 20%) + &:active + color get-theme-var(theme, 'text-color') + background-color get-theme-var(theme, 'button--active-backgroundColor') - .tagList-item-active - background-color $ui-dark-button--active-backgroundColor - color $ui-dark-text-color - &:active - background-color alpha($ui-dark-button--active-backgroundColor, 50%) - &:hover - color $ui-dark-text-color - background-color alpha($ui-dark-button--active-backgroundColor, 50%) - .tagList-item-count - color $ui-dark-button--active-color + .tagList-item-active + background-color get-theme-var(theme, 'button--active-backgroundColor') + color get-theme-var(theme, 'text-color') + &:active + background-color alpha(get-theme-var(theme, 'button--active-backgroundColor'), 50%) + &:hover + color get-theme-var(theme, 'text-color') + background-color alpha(get-theme-var(theme, 'button--active-backgroundColor'), 50%) + .tagList-item-count + color get-theme-var(theme, 'button--active-color') + +for theme in 'dark' + apply-theme(theme) + +for theme in $themes + apply-theme(theme) \ No newline at end of file diff --git a/browser/components/TodoListPercentage.styl b/browser/components/TodoListPercentage.styl index 5a0f3257..4a0081cd 100644 --- a/browser/components/TodoListPercentage.styl +++ b/browser/components/TodoListPercentage.styl @@ -54,7 +54,7 @@ body[data-theme="dark"] .percentageText color $ui-dark-text-color - + .todoClearText color $ui-dark-text-color @@ -71,25 +71,19 @@ body[data-theme="solarized-dark"] .todoClearText color #fdf6e3 -body[data-theme="monokai"] - .percentageBar - background-color: $ui-monokai-borderColor +apply-theme(theme) + body[data-theme={theme}] + .percentageBar + background-color: get-theme-var(theme, 'borderColor') - .progressBar - background-color $ui-monokai-active-color + .progressBar + background-color get-theme-var(theme, 'active-color') - .percentageText - color $ui-monokai-text-color + .percentageText + color get-theme-var(theme, 'text-color') -body[data-theme="dracula"] - .percentageBar - background-color $ui-dracula-borderColor +for theme in 'dracula' + apply-theme(theme) - .progressBar - background-color: $ui-dracula-active-color - - .percentageText - color $ui-dracula-text-color - - .percentageText - color $ui-dracula-text-color +for theme in $themes + apply-theme(theme) \ No newline at end of file diff --git a/browser/components/markdown.styl b/browser/components/markdown.styl index 4921b531..ca1f9cdd 100644 --- a/browser/components/markdown.styl +++ b/browser/components/markdown.styl @@ -511,137 +511,51 @@ body[data-theme="dark"] color $ui-dark-text-color background-color $ui-dark-tag-backgroundColor -themeSolarizedDarkTableOdd = $ui-solarized-dark-noteDetail-backgroundColor -themeSolarizedDarkTableEven = darken($ui-solarized-dark-noteDetail-backgroundColor, 10%) -themeSolarizedDarkTableHead = themeSolarizedDarkTableEven -themeSolarizedDarkTableBorder = themeDarkBorder - -body[data-theme="solarized-dark"] - color $ui-solarized-dark-text-color - border-color themeDarkBorder - background-color $ui-solarized-dark-noteDetail-backgroundColor - table - thead - tr - background-color themeSolarizedDarkTableHead - th - border-color themeSolarizedDarkTableBorder - &:last-child - border-right solid 1px themeSolarizedDarkTableBorder - tbody - tr:nth-child(2n + 1) - background-color themeSolarizedDarkTableOdd - tr:nth-child(2n) - background-color themeSolarizedDarkTableEven - td - border-color themeSolarizedDarkTableBorder - &:last-child - border-right solid 1px themeSolarizedDarkTableBorder - dl +apply-theme(theme) + body[data-theme={theme}] + color get-theme-var(theme, 'text-color') border-color themeDarkBorder - background-color themeSolarizedDarkTableHead - dt - border-color themeDarkBorder - dd - border-color themeDarkBorder - background-color $ui-solarized-dark-noteDetail-backgroundColor + background-color get-theme-var(theme, 'noteDetail-backgroundColor') + table + thead + tr + background-color get-theme-var(theme, 'table-head-backgroundColor') + th + border-color get-theme-var(theme, 'table-borderColor') + &:last-child + border-right solid 1px get-theme-var(theme, 'table-borderColor') + tbody + tr:nth-child(2n + 1) + background-color get-theme-var(theme, 'table-odd-backgroundColor') + tr:nth-child(2n) + background-color get-theme-var(theme, 'table-even-backgroundColor') + td + border-color get-theme-var(theme, 'table-borderColor') + &:last-child + border-right solid 1px get-theme-var(theme, 'table-borderColor') + kbd + background-color get-theme-var(theme, 'kbd-backgroundColor') + color get-theme-var(theme, 'kbd-color') - pre.fence - .gallery - .carousel-main, .carousel-footer - background-color $ui-solarized-dark-noteDetail-backgroundColor - .prev, .next - color $ui-solarized-dark-button--active-color - background-color $ui-solarized-dark-button-backgroundColor + dl + border-color themeDarkBorder + background-color get-theme-var(theme, 'table-head-backgroundColor') + dt + border-color themeDarkBorder + dd + border-color themeDarkBorder + background-color get-theme-var(theme, 'noteDetail-backgroundColor') -themeMonokaiTableOdd = $ui-monokai-noteDetail-backgroundColor -themeMonokaiTableEven = darken($ui-monokai-noteDetail-backgroundColor, 10%) -themeMonokaiTableHead = themeMonokaiTableEven -themeMonokaiTableBorder = themeDarkBorder + pre.fence + .gallery + .carousel-main, .carousel-footer + background-color get-theme-var(theme, 'noteDetail-backgroundColor') + .prev, .next + color get-theme-var(theme, 'button--active-color') + background-color get-theme-var(theme, 'button-backgroundColor') -body[data-theme="monokai"] - color $ui-monokai-text-color - border-color themeDarkBorder - background-color $ui-monokai-noteDetail-backgroundColor - table - thead - tr - background-color themeMonokaiTableHead - th - border-color themeMonokaiTableBorder - &:last-child - border-right solid 1px themeMonokaiTableBorder - tbody - tr:nth-child(2n + 1) - background-color themeMonokaiTableOdd - tr:nth-child(2n) - background-color themeMonokaiTableEven - td - border-color themeMonokaiTableBorder - &:last-child - border-right solid 1px themeMonokaiTableBorder - kbd - background-color themeDarkBackground +for theme in 'solarized-dark' 'dracula' + apply-theme(theme) - dl - border-color themeDarkBorder - background-color themeMonokaiTableHead - dt - border-color themeDarkBorder - dd - border-color themeDarkBorder - background-color $ui-monokai-noteDetail-backgroundColor - - pre.fence - .gallery - .carousel-main, .carousel-footer - background-color $ui-monokai-noteDetail-backgroundColor - .prev, .next - color $ui-monokai-button--active-color - background-color $ui-monokai-button-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 - - pre.fence - .gallery - .carousel-main, .carousel-footer - background-color $ui-dracula-noteDetail-backgroundColor - .prev, .next - color $ui-dracula-button--active-color - background-color $ui-dracula-button-backgroundColor +for theme in $themes + apply-theme(theme) \ No newline at end of file diff --git a/browser/components/render/MermaidRender.js b/browser/components/render/MermaidRender.js index e28e06ea..61bd8504 100644 --- a/browser/components/render/MermaidRender.js +++ b/browser/components/render/MermaidRender.js @@ -1,4 +1,5 @@ import mermaidAPI from 'mermaid' +import uiThemes from 'browser/lib/ui-themes' // fixes bad styling in the mermaid dark theme const darkThemeStyling = ` @@ -22,15 +23,19 @@ function getId () { function render (element, content, theme) { try { const height = element.attributes.getNamedItem('data-height') + if (height && height.value !== 'undefined') { element.style.height = height.value + 'vh' } - const isDarkTheme = theme === 'dark' || theme === 'solarized-dark' || theme === 'monokai' || theme === 'dracula' + + const isDarkTheme = uiThemes.some(item => item.name === theme && item.isDark) + mermaidAPI.initialize({ theme: isDarkTheme ? 'dark' : 'default', themeCSS: isDarkTheme ? darkThemeStyling : '', useMaxWidth: false }) + mermaidAPI.render(getId(), content, (svgGraph) => { element.innerHTML = svgGraph }) diff --git a/browser/lib/ui-themes.js b/browser/lib/ui-themes.js new file mode 100644 index 00000000..3d9044c6 --- /dev/null +++ b/browser/lib/ui-themes.js @@ -0,0 +1,39 @@ +import i18n from 'browser/lib/i18n' + +export default [ + { + name: 'dark', + label: i18n.__('Dark'), + isDark: true + }, + { + name: 'default', + label: i18n.__('Default'), + isDark: false + }, + { + name: 'dracula', + label: i18n.__('Dracula'), + isDark: true + }, + { + name: 'monokai', + label: i18n.__('Monokai'), + isDark: true + }, + { + name: 'nord', + label: i18n.__('Nord'), + isDark: true + }, + { + name: 'solarized-dark', + label: i18n.__('Solarized Dark'), + isDark: true + }, + { + name: 'white', + label: i18n.__('White'), + isDark: false + } +] diff --git a/browser/main/Detail/Detail.styl b/browser/main/Detail/Detail.styl index 1b7bd606..f03de5d7 100644 --- a/browser/main/Detail/Detail.styl +++ b/browser/main/Detail/Detail.styl @@ -24,23 +24,16 @@ body[data-theme="dark"] .empty-message color $ui-dark-inactive-text-color -body[data-theme="solarized-dark"] - .root - background-color $ui-solarized-dark-noteDetail-backgroundColor - border-left 1px solid $ui-solarized-dark-borderColor - .empty-message - color $ui-solarized-dark-text-color +apply-theme(theme) + body[data-theme={theme}] + .root + background-color get-theme-var(theme, 'noteDetail-backgroundColor') + border-left 1px solid get-theme-var(theme, 'borderColor') + .empty-message + color get-theme-var(theme, 'text-color') -body[data-theme="monokai"] - .root - background-color $ui-monokai-noteDetail-backgroundColor - border-left 1px solid $ui-monokai-borderColor - .empty-message - color $ui-monokai-text-color +for theme in 'solarized-dark' 'dracula' + apply-theme(theme) -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 +for theme in $themes + apply-theme(theme) \ No newline at end of file diff --git a/browser/main/Detail/FolderSelect.styl b/browser/main/Detail/FolderSelect.styl index fe045e3a..76ce1eb8 100644 --- a/browser/main/Detail/FolderSelect.styl +++ b/browser/main/Detail/FolderSelect.styl @@ -134,54 +134,37 @@ body[data-theme="dark"] .search-optionList-item-name-surfix color $ui-dark-inactive-text-color -body[data-theme="monokai"] - .root - color $ui-dark-text-color - &:hover - color white - background-color $ui-monokai-button--hover-backgroundColor - border-color $ui-monokai-borderColor +apply-theme(theme) + body[data-theme={theme}] + .root + &:hover + background-color get-theme-var(theme, 'button--hover-backgroundColor') + border-color get-theme-var(theme, 'borderColor') - .search-optionList - color white - border-color $ui-monokai-borderColor - background-color $ui-monokai-button-backgroundColor + .search-input + color get-theme-var(theme, 'text-color') + background-color transparent + border-color get-theme-var(theme, 'borderColor') - .search-optionList-item - &:hover - background-color lighten($ui-monokai-button--hover-backgroundColor, 15%) + .search-optionList + border-color get-theme-var(theme, 'borderColor') + background-color get-theme-var(theme, 'button-backgroundColor') - .search-optionList-item--active - background-color $ui-monokai-button--active-backgroundColor - color $ui-monokai-button--active-color - &:hover - background-color $ui-monokai-button--active-backgroundColor - color $ui-monokai-button--active-color - .search-optionList-item-name-surfix - color $ui-monokai-inactive-text-color + .search-optionList-item + &:hover + background-color lighten(get-theme-var(theme, 'button--hover-backgroundColor'), 15%) -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-item--active + background-color get-theme-var(theme, 'button--active-backgroundColor') + color get-theme-var(theme, 'button--active-color') + &:hover + background-color get-theme-var(theme, 'button--active-backgroundColor') + color get-theme-var(theme, 'button--active-color') + .search-optionList-item-name-surfix + color get-theme-var(theme, 'inactive-text-color') - .search-optionList - color #f8f8f2 - border-color $ui-dracula-borderColor - background-color $ui-dracula-button-backgroundColor +for theme in 'solarized-dark' 'dracula' + apply-theme(theme) - .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 +for theme in $themes + apply-theme(theme) \ No newline at end of file diff --git a/browser/main/Detail/FullscreenButton.styl b/browser/main/Detail/FullscreenButton.styl index 133577f3..52a3b961 100644 --- a/browser/main/Detail/FullscreenButton.styl +++ b/browser/main/Detail/FullscreenButton.styl @@ -1,26 +1,26 @@ -.control-fullScreenButton - top 80px - topBarButtonRight() - &:hover .tooltip - opacity 1 - -.tooltip - tooltip() - position absolute - pointer-events none - top 50px - right 70px - z-index 200 - padding 5px - line-height normal - border-radius 2px - opacity 0 - transition 0.1s - -.tooltip:lang(ja) - @extend .tooltip - right 35px - -body[data-theme="dark"] - .control-fullScreenButton +.control-fullScreenButton + top 80px + topBarButtonRight() + &:hover .tooltip + opacity 1 + +.tooltip + tooltip() + position absolute + pointer-events none + top 50px + right 70px + z-index 200 + padding 5px + line-height normal + border-radius 2px + opacity 0 + transition 0.1s + +.tooltip:lang(ja) + @extend .tooltip + right 35px + +body[data-theme="dark"] + .control-fullScreenButton topBarButtonDark() \ No newline at end of file diff --git a/browser/main/Detail/InfoPanel.styl b/browser/main/Detail/InfoPanel.styl index 1f774174..41625816 100644 --- a/browser/main/Detail/InfoPanel.styl +++ b/browser/main/Detail/InfoPanel.styl @@ -138,162 +138,49 @@ .export--unable cursor not-allowed -body[data-theme="dark"] - .control-infoButton-panel - background-color $ui-dark-noteList-backgroundColor +apply-theme(theme) + body[data-theme={theme}] + .control-infoButton-panel + background-color get-theme-var(theme, 'noteList-backgroundColor') - .control-infoButton-panel-trash - background-color $ui-dark-noteList-backgroundColor + .control-infoButton-panel-trash + background-color get-theme-var(theme, 'noteList-backgroundColor') - .modification-date - color $ui-dark-text-color + .modification-date + color get-theme-var(theme, 'text-color') - .modification-date-desc - color $ui-inactive-text-color + .modification-date-desc + color $ui-inactive-text-color - .infoPanel-defaul-count - color $ui-dark-text-color + .infoPanel-defaul-count + color get-theme-var(theme, 'text-color') - .infoPanel-sub-count - color $ui-inactive-text-color + .infoPanel-sub-count + color $ui-inactive-text-color - .infoPanel-default - color $ui-dark-text-color + .infoPanel-default + color get-theme-var(theme, 'text-color') - .infoPanel-sub - color $ui-inactive-text-color + .infoPanel-sub + color $ui-inactive-text-color - .infoPanel-noteLink - background-color alpha($ui-dark-borderColor, 60%) - color $ui-dark-text-color + .infoPanel-noteLink + background-color alpha(get-theme-var(theme, 'borderColor'), 20%) + color get-theme-var(theme, 'text-color') - [id=export-wrap] - button - color $ui-dark-inactive-text-color - &:hover - background-color alpha($ui-dark-borderColor, 20%) - color $ui-dark-text-color - p - color $ui-dark-inactive-text-color - &:hover - color $ui-dark-text-color + [id=export-wrap] + button + color $ui-dark-inactive-text-color + &:hover + background-color alpha(get-theme-var(theme, 'borderColor'), 20%) + color get-theme-var(theme, 'text-color') + p + color $ui-dark-inactive-text-color + &:hover + color get-theme-var(theme, 'text-color') -body[data-theme="solarized-dark"] - .control-infoButton-panel - background-color $ui-solarized-dark-noteList-backgroundColor +for theme in 'dark' 'solarized-dark' 'dracula' + apply-theme(theme) - .control-infoButton-panel-trash - background-color $ui-solarized-ark-noteList-backgroundColor - - .modification-date - color $ui-solarized-ark-text-color - - .modification-date-desc - color $ui-inactive-text-color - - .infoPanel-defaul-count - color $ui-solarized-dark-text-color - - .infoPanel-sub-count - color $ui-inactive-text-color - - .infoPanel-default - color $ui-solarized-ark-text-color - - .infoPanel-sub - color $ui-inactive-text-color - - .infoPanel-noteLink - background-color alpha($ui-solarized-dark-borderColor, 20%) - color $ui-solarized-dark-text-color - - [id=export-wrap] - button - color $ui-dark-inactive-text-color - &:hover - background-color alpha($ui-solarized-dark-borderColor, 20%) - color $ui-solarized-ark-text-color - p - color $ui-dark-inactive-text-color - &:hover - color $ui-solarized-ark-text-color - -body[data-theme="monokai"] - .control-infoButton-panel - background-color $ui-monokai-noteList-backgroundColor - - .control-infoButton-panel-trash - background-color $ui-monokai-noteList-backgroundColor - - .modification-date - color $ui-monokai-text-color - - .modification-date-desc - color $ui-inactive-text-color - - .infoPanel-defaul-count - color $ui-monokai-text-color - - .infoPanel-sub-count - color $ui-inactive-text-color - - .infoPanel-default - color $ui-monokai-text-color - - .infoPanel-sub - color $ui-inactive-text-color - - .infoPanel-noteLink - background-color alpha($ui-monokai-borderColor, 20%) - color $ui-monokai-text-color - - [id=export-wrap] - button - color $ui-dark-inactive-text-color - &:hover - background-color alpha($ui-monokai-borderColor, 20%) - color $ui-monokai-text-color - p - 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 +for theme in $themes + apply-theme(theme) \ No newline at end of file diff --git a/browser/main/Detail/MarkdownNoteDetail.styl b/browser/main/Detail/MarkdownNoteDetail.styl index cdfeaf3a..678969a5 100644 --- a/browser/main/Detail/MarkdownNoteDetail.styl +++ b/browser/main/Detail/MarkdownNoteDetail.styl @@ -66,18 +66,14 @@ body[data-theme="dark"] .control-fullScreenButton topBarButtonDark() +apply-theme(theme) + body[data-theme={theme}] + .root + border-left 1px solid get-theme-var(theme, 'borderColor') + background-color get-theme-var(theme, 'noteDetail-backgroundColor') -body[data-theme="solarized-dark"] - .root - border-left 1px solid $ui-solarized-dark-borderColor - background-color $ui-solarized-dark-noteDetail-backgroundColor +for theme in 'solarized-dark' 'dracula' + apply-theme(theme) -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 +for theme in $themes + apply-theme(theme) \ No newline at end of file diff --git a/browser/main/Detail/NoteDetailInfo.styl b/browser/main/Detail/NoteDetailInfo.styl index 1ca46516..d44f61b6 100644 --- a/browser/main/Detail/NoteDetailInfo.styl +++ b/browser/main/Detail/NoteDetailInfo.styl @@ -94,17 +94,14 @@ body[data-theme="dark"] .undo-button topBarButtonDark() -body[data-theme="solarized-dark"] - .info - border-color $ui-solarized-dark-borderColor - background-color $ui-solarized-dark-noteDetail-backgroundColor +apply-theme(theme) + body[data-theme={theme}] + .info + border-color get-theme-var(theme, 'borderColor') + background-color get-theme-var(theme, 'noteDetail-backgroundColor') -body[data-theme="monokai"] - .info - border-color $ui-monokai-borderColor - background-color $ui-monokai-noteDetail-backgroundColor +for theme in 'solarized-dark' 'dracula' + apply-theme(theme) -body[data-theme="dracula"] - .info - border-color $ui-dracula-borderColor - background-color $ui-dracula-noteDetail-backgroundColor \ No newline at end of file +for theme in $themes + apply-theme(theme) \ No newline at end of file diff --git a/browser/main/Detail/SnippetNoteDetail.styl b/browser/main/Detail/SnippetNoteDetail.styl index 1af93645..c312d271 100644 --- a/browser/main/Detail/SnippetNoteDetail.styl +++ b/browser/main/Detail/SnippetNoteDetail.styl @@ -156,78 +156,35 @@ body[data-theme="dark"] .control-fullScreenButton topBarButtonDark() -body[data-theme="solarized-dark"] - .root - border-left 1px solid $ui-solarized-dark-borderColor - background-color $ui-solarized-dark-noteDetail-backgroundColor +apply-theme(theme) + body[data-theme={theme}] + .root + border-left 1px solid get-theme-var(theme, 'borderColor') + background-color get-theme-var(theme, 'noteDetail-backgroundColor') - .body - background-color $ui-solarized-dark-noteDetail-backgroundColor + .body + background-color get-theme-var(theme, 'noteDetail-backgroundColor') - .body .description textarea - background-color $ui-solarized-dark-noteDetail-backgroundColor - color $ui-solarized-dark-text-color - border 1px solid $ui-solarized-dark-borderColor + .body .description textarea + background-color get-theme-var(theme, 'noteDetail-backgroundColor') + color get-theme-var(theme, 'text-color') + border 1px solid get-theme-var(theme, 'borderColor') - .tabList .tabButton - border-color $ui-solarized-dark-borderColor + .tabList .tabButton + border-color get-theme-var(theme, 'borderColor') - .tabButton - &:hover - color $ui-solarized-dark-button--active-color - background-color $ui-solarized-dark-noteDetail-backgroundColor - transition 0.15s - - .tabList - background-color $ui-solarized-dark-noteDetail-backgroundColor - color $ui-solarized-dark-text-color + .tabButton + &:hover + color get-theme-var(theme, 'text-color') + background-color get-theme-var(theme, 'noteDetail-backgroundColor') + transition 0.15s -body[data-theme="monokai"] - .root - border-left 1px solid $ui-monokai-borderColor - background-color $ui-monokai-noteDetail-backgroundColor + .tabList + background-color get-theme-var(theme, 'noteDetail-backgroundColor') + color get-theme-var(theme, 'text-color') - .body - background-color $ui-monokai-noteDetail-backgroundColor +for theme in 'solarized-dark' 'dracula' + apply-theme(theme) - .body .description textarea - background-color $ui-monokai-noteDetail-backgroundColor - color $ui-monokai-text-color - border 1px solid $ui-monokai-borderColor - - .tabList .tabButton - border-color $ui-monokai-borderColor - - .tabButton - &:hover - color $ui-monokai-text-color - background-color $ui-monokai-noteDetail-backgroundColor - - .tabList - background-color $ui-monokai-noteDetail-backgroundColor - 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 .tabButton - border-color $ui-dracula-borderColor - - .tabButton - &:hover - color $ui-dracula-text-color - background-color $ui-dracula-noteDetail-backgroundColor - - .tabList - background-color $ui-dracula-noteDetail-backgroundColor - color $ui-dracula-text-color \ No newline at end of file +for theme in $themes + apply-theme(theme) \ No newline at end of file diff --git a/browser/main/Detail/TagSelect.styl b/browser/main/Detail/TagSelect.styl index 844561c6..6107b731 100644 --- a/browser/main/Detail/TagSelect.styl +++ b/browser/main/Detail/TagSelect.styl @@ -54,35 +54,20 @@ body[data-theme="dark"] .tag-label color $ui-dark-text-color -body[data-theme="solarized-dark"] - .tag - background-color $ui-solarized-dark-tag-backgroundColor +apply-theme(theme) + body[data-theme={theme}] + .tag + background-color get-theme-var(theme, 'tag-backgroundColor') - .tag-removeButton - border-color $ui-button--focus-borderColor - background-color transparent + .tag-removeButton + border-color $ui-button--focus-borderColor + background-color transparent - .tag-label - color $ui-solarized-dark-text-color + .tag-label + color get-theme-var(theme, 'text-color') -body[data-theme="monokai"] - .tag - background-color $ui-monokai-tag-backgroundColor +for theme in 'solarized-dark' 'dracula' + apply-theme(theme) - .tag-removeButton - border-color $ui-button--focus-borderColor - background-color transparent - - .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 +for theme in $themes + apply-theme(theme) \ No newline at end of file diff --git a/browser/main/Detail/ToggleModeButton.styl b/browser/main/Detail/ToggleModeButton.styl index 2b47b932..481e6747 100644 --- a/browser/main/Detail/ToggleModeButton.styl +++ b/browser/main/Detail/ToggleModeButton.styl @@ -1,77 +1,77 @@ -.control-toggleModeButton - height 25px - border-radius 50px - background-color #F4F4F4 - width 52px - display flex - align-items center - position: relative - top 2px - .active - background-color #1EC38B - width 33px - height 24px - box-shadow 2px 0px 7px #eee - z-index 1 - - div - width 40px - height 100% - border-radius 50% - display flex - align-items center - justify-content center - cursor pointer - - &:hover .tooltip - opacity 1 - -.tooltip - tooltip() - position absolute - pointer-events none - top 33px - left -10px - z-index 200 - width 80px - padding 5px - line-height normal - border-radius 2px - opacity 0 - transition 0.1s - -.tooltip:lang(ja) - @extend .tooltip - left -8px - width 70px - -body[data-theme="dark"] - .control-fullScreenButton - topBarButtonDark() - - .control-toggleModeButton - background-color #3A404C - .active - background-color #1EC38B - box-shadow 2px 0px 7px #444444 - -body[data-theme="solarized-dark"] - .control-toggleModeButton - background-color #002B36 - .active - background-color #1EC38B - box-shadow 2px 0px 7px #222222 - -body[data-theme="monokai"] - .control-toggleModeButton - background-color #373831 - .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 +.control-toggleModeButton + height 25px + border-radius 50px + background-color #F4F4F4 + width 52px + display flex + align-items center + position: relative + top 2px + .active + background-color #1EC38B + width 33px + height 24px + box-shadow 2px 0px 7px #eee + z-index 1 + + div + width 40px + height 100% + border-radius 50% + display flex + align-items center + justify-content center + cursor pointer + + &:hover .tooltip + opacity 1 + +.tooltip + tooltip() + position absolute + pointer-events none + top 33px + left -10px + z-index 200 + width 80px + padding 5px + line-height normal + border-radius 2px + opacity 0 + transition 0.1s + +.tooltip:lang(ja) + @extend .tooltip + left -8px + width 70px + +body[data-theme="dark"] + .control-fullScreenButton + topBarButtonDark() + + .control-toggleModeButton + background-color #3A404C + .active + background-color #1EC38B + box-shadow 2px 0px 7px #444444 + +body[data-theme="solarized-dark"] + .control-toggleModeButton + background-color #002B36 + .active + background-color #1EC38B + box-shadow 2px 0px 7px #222222 + +apply-theme(theme) + body[data-theme={theme}] + .control-toggleModeButton + background-color get-theme-var(theme, 'borderColor') + .active + background-color get-theme-var(theme, 'active-color') + box-shadow 2px 0px 7px #222222 + +for theme in 'dracula' + apply-theme(theme) + +for theme in $themes + apply-theme(theme) \ No newline at end of file diff --git a/browser/main/Main.js b/browser/main/Main.js index 26fc8377..8d346f4a 100644 --- a/browser/main/Main.js +++ b/browser/main/Main.js @@ -17,6 +17,7 @@ import store from 'browser/main/store' import i18n from 'browser/lib/i18n' import { getLocales } from 'browser/lib/Languages' import applyShortcuts from 'browser/main/lib/shortcutManager' +import uiThemes from 'browser/lib/ui-themes' const path = require('path') const electron = require('electron') const { remote } = electron @@ -142,9 +143,7 @@ class Main extends React.Component { componentDidMount () { const { dispatch, config } = this.props - const supportedThemes = ['dark', 'white', 'solarized-dark', 'monokai', 'dracula'] - - if (supportedThemes.indexOf(config.ui.theme) !== -1) { + if (uiThemes.some(theme => theme.name === config.ui.theme)) { document.body.setAttribute('data-theme', config.ui.theme) } else { document.body.setAttribute('data-theme', 'default') diff --git a/browser/main/NewNoteButton/NewNoteButton.styl b/browser/main/NewNoteButton/NewNoteButton.styl index 75a9061c..57b0fc03 100644 --- a/browser/main/NewNoteButton/NewNoteButton.styl +++ b/browser/main/NewNoteButton/NewNoteButton.styl @@ -72,14 +72,13 @@ body[data-theme="dark"] .control-newNoteButton-tooltip darkTooltip() -body[data-theme="solarized-dark"] - .root, .root--expanded - background-color $ui-solarized-dark-noteList-backgroundColor +apply-theme(theme) + body[data-theme={theme}] + .root, .root--expanded + background-color get-theme-var(theme, 'noteList-backgroundColor') -body[data-theme="monokai"] - .root, .root--expanded - background-color $ui-monokai-noteList-backgroundColor +for theme in 'solarized-dark' 'dracula' + apply-theme(theme) -body[data-theme="dracula"] - .root, .root--expanded - background-color $ui-dracula-noteList-backgroundColor \ No newline at end of file +for theme in $themes + apply-theme(theme) \ No newline at end of file diff --git a/browser/main/NoteList/NoteList.styl b/browser/main/NoteList/NoteList.styl index 73959c9b..2b42ae3d 100644 --- a/browser/main/NoteList/NoteList.styl +++ b/browser/main/NoteList/NoteList.styl @@ -66,99 +66,33 @@ body[data-theme="white"] .control background-color $ui-white-noteList-backgroundColor -body[data-theme="dark"] - .root - border-color $ui-dark-borderColor - background-color $ui-dark-noteList-backgroundColor +apply-theme(theme) + body[data-theme={theme}] + .root + border-color get-theme-var(theme, 'borderColor') + background-color get-theme-var(theme, 'noteList-backgroundColor') - .control - background-color $ui-dark-noteList-backgroundColor - border-color $ui-dark-borderColor + .control + background-color get-theme-var(theme, 'noteList-backgroundColor') + border-color get-theme-var(theme, 'borderColor') - .control-sortBy-select - &:hover - transition 0.2s - color $ui-dark-text-color + .control-sortBy-select + &:hover + transition 0.2s + color get-theme-var(theme, 'text-color') - .control-button - color $ui-dark-inactive-text-color - &:hover - color $ui-dark-text-color + .control-button + color get-theme-var(theme, 'inactive-text-color') + &:hover + color get-theme-var(theme, 'text-color') - .control-button--active - color $ui-dark-text-color - &:active - color $ui-dark-text-color + .control-button--active + color get-theme-var(theme, 'text-color') + &:active + color get-theme-var(theme, 'text-color') +for theme in 'dark' 'solarized-dark' 'dracula' + apply-theme(theme) -body[data-theme="solarized-dark"] - .root - border-color $ui-solarized-dark-borderColor - background-color $ui-solarized-dark-noteList-backgroundColor - - .control - background-color $ui-solarized-dark-noteList-backgroundColor - border-color $ui-solarized-dark-borderColor - - .control-sortBy-select - &:hover - transition 0.2s - color $ui-solarized-dark-text-color - - .control-button - color $ui-solarized-dark-inactive-text-color - &:hover - color $ui-solarized-dark-text-color - - .control-button--active - color $ui-solarized-dark-text-color - &:active - color $ui-solarized-dark-text-color - -body[data-theme="monokai"] - .root - border-color $ui-monokai-borderColor - background-color $ui-monokai-noteList-backgroundColor - - .control - background-color $ui-monokai-noteList-backgroundColor - border-color $ui-monokai-borderColor - - .control-sortBy-select - &:hover - transition 0.2s - color $ui-monokai-text-color - - .control-button - color $ui-monokai-inactive-text-color - &:hover - color $ui-monokai-text-color - - .control-button--active - 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 +for theme in $themes + apply-theme(theme) \ No newline at end of file diff --git a/browser/main/SideNav/PreferenceButton.styl b/browser/main/SideNav/PreferenceButton.styl index 54513cb6..33422b4f 100644 --- a/browser/main/SideNav/PreferenceButton.styl +++ b/browser/main/SideNav/PreferenceButton.styl @@ -1,52 +1,50 @@ -.top-menu-preference - navButtonColor() - position absolute - top 22px - right 10px - width 2em - background-color transparent - &:hover - color $ui-button-default--active-backgroundColor - background-color transparent - .tooltip - opacity 1 - &:active, &:active:hover - color $ui-button-default--active-backgroundColor - -body[data-theme="white"] - .top-menu-preference - navWhiteButtonColor() - background-color transparent - &:hover - color #0B99F1 - background-color transparent - &:active, &:active:hover - color #0B99F1 - background-color transparent - -body[data-theme="dark"] - .top-menu-preference - navDarkButtonColor() - background-color transparent - &:active - background-color alpha($ui-dark-button--active-backgroundColor, 20%) - background-color transparent - &:hover - background-color alpha($ui-dark-button--active-backgroundColor, 20%) - background-color transparent - - - -.tooltip - tooltip() - position absolute - pointer-events none - top 26px - left -20px - z-index 200 - padding 5px - line-height normal - border-radius 2px - opacity 0 - transition 0.1s - white-space nowrap +.top-menu-preference + navButtonColor() + position absolute + top 22px + right 10px + width 2em + background-color transparent + &:hover + color $ui-button-default--active-backgroundColor + background-color transparent + .tooltip + opacity 1 + &:active, &:active:hover + color $ui-button-default--active-backgroundColor + +body[data-theme="white"] + .top-menu-preference + navWhiteButtonColor() + background-color transparent + &:hover + color #0B99F1 + background-color transparent + &:active, &:active:hover + color #0B99F1 + background-color transparent + +body[data-theme="dark"] + .top-menu-preference + navDarkButtonColor() + background-color transparent + &:active + background-color alpha($ui-dark-button--active-backgroundColor, 20%) + background-color transparent + &:hover + background-color alpha($ui-dark-button--active-backgroundColor, 20%) + background-color transparent + +.tooltip + tooltip() + position absolute + pointer-events none + top 26px + left -20px + z-index 200 + padding 5px + line-height normal + border-radius 2px + opacity 0 + transition 0.1s + white-space nowrap diff --git a/browser/main/SideNav/SideNav.styl b/browser/main/SideNav/SideNav.styl index 9fa6d4fa..86b6caeb 100644 --- a/browser/main/SideNav/SideNav.styl +++ b/browser/main/SideNav/SideNav.styl @@ -113,17 +113,14 @@ body[data-theme="dark"] .top border-color $ui-dark-borderColor -body[data-theme="solarized-dark"] - .root, .root--folded - background-color $ui-solarized-dark-backgroundColor - border-right 1px solid $ui-solarized-dark-borderColor +apply-theme(theme) + body[data-theme={theme}] + .root, .root--folded + background-color get-theme-var(theme, 'backgroundColor') + border-right 1px solid get-theme-var(theme, 'borderColor') -body[data-theme="monokai"] - .root, .root--folded - background-color $ui-monokai-backgroundColor - border-right 1px solid $ui-monokai-borderColor +for theme in 'solarized-dark' 'dracula' + apply-theme(theme) -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 +for theme in $themes + apply-theme(theme) \ No newline at end of file diff --git a/browser/main/SideNav/StorageItem.styl b/browser/main/SideNav/StorageItem.styl index a06ecb11..375a989f 100644 --- a/browser/main/SideNav/StorageItem.styl +++ b/browser/main/SideNav/StorageItem.styl @@ -132,55 +132,57 @@ body[data-theme="white"] background-color alpha($ui-button--active-backgroundColor, 40%) color $ui-text-color -body[data-theme="dark"] - .header--active - background-color $ui-dark-button--active-backgroundColor - transition color background-color 0.15s +apply-theme(theme) + body[data-theme={theme}] + .header--active + background-color get-theme-var(theme, 'button--active-backgroundColor') + transition color background-color 0.15s + + .header--active + .header-toggleButton + color get-theme-var(theme, 'text-color') + + .header--active + .header-info + color get-theme-var(theme, 'text-color') + background-color get-theme-var(theme, 'button--active-backgroundColor') + &:active + color get-theme-var(theme, 'text-color') + background-color get-theme-var(theme, 'button--active-backgroundColor') + + .header--active + .header-addFolderButton + color get-theme-var(theme, 'text-color') - .header--active .header-toggleButton - color $ui-dark-text-color + &:hover + transition 0.2s + color get-theme-var(theme, 'text-color') + background-color alpha(get-theme-var(theme, 'button--active-backgroundColor'), 60%) + &:active, &:active:hover + color get-theme-var(theme, 'text-color') + background-color get-theme-var(theme, 'button--active-backgroundColor') - .header--active .header-info - color $ui-dark-text-color - background-color $ui-dark-button--active-backgroundColor - &:active - color $ui-dark-text-color - background-color $ui-dark-button--active-backgroundColor + background-color alpha(get-theme-var(theme, 'button--active-backgroundColor'), 20%) + &:hover + transition 0.2s + color get-theme-var(theme, 'text-color') + background-color alpha(get-theme-var(theme, 'button--active-backgroundColor'), 20%) + &:active, &:active:hover + color get-theme-var(theme, 'text-color') + background-color get-theme-var(theme, 'button--active-backgroundColor') - .header--active .header-addFolderButton - color $ui-dark-text-color - - .header-toggleButton - &:hover - transition 0.2s - color $ui-dark-text-color - background-color alpha($ui-dark-button--active-backgroundColor, 60%) - &:active, &:active:hover - color $ui-dark-text-color - background-color $ui-dark-button--active-backgroundColor - - .header-info - background-color alpha($ui-dark-button--active-backgroundColor, 20%) - &:hover - transition 0.2s - color $ui-dark-text-color - background-color alpha($ui-dark-button--active-backgroundColor, 20%) - &:active, &:active:hover - color $ui-dark-text-color - background-color $ui-dark-button--active-backgroundColor - - .header-addFolderButton - &:hover - transition 0.2s - color $ui-dark-text-color - background-color alpha($ui-dark-button--active-backgroundColor, 60%) - &:active, &:active:hover - color $ui-dark-text-color - background-color $ui-dark-button--active-backgroundColor - - + &:hover + transition 0.2s + color get-theme-var(theme, 'text-color') + background-color alpha(get-theme-var(theme, 'button--active-backgroundColor'), 60%) + &:active, &:active:hover + color get-theme-var(theme, 'text-color') + background-color get-theme-var(theme, 'button--active-backgroundColor') +apply-theme('dark') +for theme in $themes + apply-theme(theme) \ No newline at end of file diff --git a/browser/main/SideNav/SwitchButton.styl b/browser/main/SideNav/SwitchButton.styl index 36099140..2184bc69 100644 --- a/browser/main/SideNav/SwitchButton.styl +++ b/browser/main/SideNav/SwitchButton.styl @@ -1,60 +1,60 @@ -.non-active-button - color $ui-inactive-text-color - font-size 16px - border 0 - background-color transparent - transition 0.2s - display flex - text-align center - margin-right 4px - position relative - &:hover - color alpha(#239F86, 60%) - .tooltip - opacity 1 - -.active-button - @extend .non-active-button - color $ui-button-default--active-backgroundColor - -.tooltip - tooltip() - position absolute - pointer-events none - top 22px - left -2px - z-index 200 - padding 5px - line-height normal - border-radius 2px - opacity 0 - transition 0.1s - white-space nowrap - -body[data-theme="white"] - .non-active-button - color $ui-inactive-text-color - &:hover - color alpha(#0B99F1, 60%) - - .tag-title - p - color $ui-text-color - - .non-active-button - &:hover - color alpha(#0B99F1, 60%) - - .active-button - @extend .non-active-button - color #0B99F1 - -body[data-theme="dark"] - .non-active-button - color alpha($ui-dark-text-color, 60%) - &:hover - color alpha(#0B99F1, 60%) - - .tag-title - p +.non-active-button + color $ui-inactive-text-color + font-size 16px + border 0 + background-color transparent + transition 0.2s + display flex + text-align center + margin-right 4px + position relative + &:hover + color alpha(#239F86, 60%) + .tooltip + opacity 1 + +.active-button + @extend .non-active-button + color $ui-button-default--active-backgroundColor + +.tooltip + tooltip() + position absolute + pointer-events none + top 22px + left -2px + z-index 200 + padding 5px + line-height normal + border-radius 2px + opacity 0 + transition 0.1s + white-space nowrap + +body[data-theme="white"] + .non-active-button + color $ui-inactive-text-color + &:hover + color alpha(#0B99F1, 60%) + + .tag-title + p + color $ui-text-color + + .non-active-button + &:hover + color alpha(#0B99F1, 60%) + + .active-button + @extend .non-active-button + color #0B99F1 + +body[data-theme="dark"] + .non-active-button + color alpha($ui-dark-text-color, 60%) + &:hover + color alpha(#0B99F1, 60%) + + .tag-title + p color alpha($ui-dark-text-color, 60%) \ No newline at end of file diff --git a/browser/main/StatusBar/StatusBar.styl b/browser/main/StatusBar/StatusBar.styl index 23dec208..7ed89eb5 100644 --- a/browser/main/StatusBar/StatusBar.styl +++ b/browser/main/StatusBar/StatusBar.styl @@ -78,24 +78,20 @@ body[data-theme="dark"] border-color $ui-dark-borderColor border-left 1px solid $ui-dark-borderColor -body[data-theme="monokai"] - navButtonColor() - .zoom - border-color $ui-dark-borderColor - color $ui-monokai-text-color - &:hover - transition 0.15s - color $ui-monokai-active-color - &:active - color $ui-monokai-active-color +apply-theme(theme) + body[data-theme={theme}] + navButtonColor() + .zoom + border-color $ui-dark-borderColor + color get-theme-var(theme, 'text-color') + &:hover + transition 0.15s + color get-theme-var(theme, 'active-color') + &:active + color get-theme-var(theme, '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 +for theme in 'dracula' + apply-theme(theme) + +for theme in $themes + apply-theme(theme) \ No newline at end of file diff --git a/browser/main/TopBar/TopBar.styl b/browser/main/TopBar/TopBar.styl index 61b21fc5..a0eeadf6 100644 --- a/browser/main/TopBar/TopBar.styl +++ b/browser/main/TopBar/TopBar.styl @@ -212,69 +212,31 @@ body[data-theme="dark"] .control-newPostButton-tooltip darkTooltip() +apply-theme(theme) + body[data-theme={theme}] + .root, .root--expanded + background-color get-theme-var(theme, 'noteList-backgroundColor') -body[data-theme="solarized-dark"] - .root, .root--expanded - background-color $ui-solarized-dark-noteList-backgroundColor + .control + border-color get-theme-var(theme, 'borderColor') + .control-search + background-color get-theme-var(theme, 'noteList-backgroundColor') - .control - border-color $ui-solarized-dark-borderColor - .control-search - background-color $ui-solarized-dark-noteList-backgroundColor + .control-search-icon + absolute top bottom left + line-height 32px + width 35px + color get-theme-var(theme, 'inactive-text-color') + background-color get-theme-var(theme, 'noteList-backgroundColor') - .control-search-icon - absolute top bottom left - line-height 32px - width 35px - color $ui-solarized-dark-inactive-text-color - background-color $ui-solarized-dark-noteList-backgroundColor + .control-search-input + background-color get-theme-var(theme, 'noteList-backgroundColor') + input + background-color get-theme-var(theme, 'noteList-backgroundColor') + color get-theme-var(theme, 'text-color') - .control-search-input - background-color $ui-solarized-dark-noteList-backgroundColor - input - background-color $ui-solarized-dark-noteList-backgroundColor - color $ui-solarized-dark-text-color +for theme in 'solarized-dark' 'dracula' + apply-theme(theme) -body[data-theme="monokai"] - .root, .root--expanded - background-color $ui-monokai-noteList-backgroundColor - - .control - border-color $ui-monokai-borderColor - .control-search - background-color $ui-monokai-noteList-backgroundColor - - .control-search-icon - absolute top bottom left - line-height 32px - width 35px - color $ui-monokai-inactive-text-color - background-color $ui-monokai-noteList-backgroundColor - - .control-search-input - background-color $ui-monokai-noteList-backgroundColor - 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 +for theme in $themes + apply-theme(theme) \ No newline at end of file diff --git a/browser/main/global.styl b/browser/main/global.styl index d864993d..b0da56f5 100644 --- a/browser/main/global.styl +++ b/browser/main/global.styl @@ -96,16 +96,6 @@ modalBackColor = white z-index modalZIndex + 1 -body[data-theme="dark"] - background-color $ui-dark-backgroundColor - ::-webkit-scrollbar-thumb - background-color rgba(0, 0, 0, 0.3) - .ModalBase - .modalBack - background-color $ui-dark-backgroundColor - .sortableItemHelper - color: $ui-dark-text-color - .CodeMirror font-family inherit !important line-height 1.4em @@ -148,35 +138,22 @@ body[data-theme="dark"] .sortableItemHelper z-index modalZIndex + 5 -body[data-theme="solarized-dark"] - background-color $ui-solarized-dark-backgroundColor - ::-webkit-scrollbar-thumb - background-color rgba(0, 0, 0, 0.3) - .ModalBase - .modalBack - background-color $ui-solarized-dark-backgroundColor - .sortableItemHelper - color: $ui-solarized-dark-text-color +apply-theme(theme) + body[data-theme={theme}] + background-color get-theme-var(theme, 'backgroundColor') + ::-webkit-scrollbar-thumb + background-color rgba(0, 0, 0, 0.3) + .ModalBase + .modalBack + background-color get-theme-var(theme, 'backgroundColor') + .sortableItemHelper + color get-theme-var(theme, 'text-color') -body[data-theme="monokai"] - background-color $ui-monokai-backgroundColor - ::-webkit-scrollbar-thumb - background-color rgba(0, 0, 0, 0.3) - .ModalBase - .modalBack - background-color $ui-monokai-backgroundColor - .sortableItemHelper - color: $ui-monokai-text-color +for theme in 'dark' 'solarized-dark' 'dracula' + apply-theme(theme) -body[data-theme="dracula"] - background-color $ui-dracula-backgroundColor - ::-webkit-scrollbar-thumb - background-color rgba(0, 0, 0, 0.3) - .ModalBase - .modalBack - background-color $ui-dracula-backgroundColor - .sortableItemHelper - color: $ui-dracula-text-color +for theme in $themes + apply-theme(theme) body[data-theme="default"] .SideNav ::-webkit-scrollbar-thumb diff --git a/browser/main/lib/ConfigManager.js b/browser/main/lib/ConfigManager.js index 5558b3bd..e8e11b9e 100644 --- a/browser/main/lib/ConfigManager.js +++ b/browser/main/lib/ConfigManager.js @@ -2,6 +2,7 @@ import _ from 'lodash' import RcParser from 'browser/lib/RcParser' import i18n from 'browser/lib/i18n' import ee from 'browser/main/lib/eventEmitter' +import uiThemes from 'browser/lib/ui-themes' const OSX = global.process.platform === 'darwin' const win = global.process.platform === 'win32' @@ -154,16 +155,8 @@ function set (updates) { if (!validate(newConfig)) throw new Error('INVALID CONFIG') _save(newConfig) - if (newConfig.ui.theme === 'dark') { - document.body.setAttribute('data-theme', 'dark') - } else if (newConfig.ui.theme === 'white') { - document.body.setAttribute('data-theme', 'white') - } else if (newConfig.ui.theme === 'solarized-dark') { - 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') + if (uiThemes.some(theme => theme.name === newConfig.ui.theme)) { + document.body.setAttribute('data-theme', newConfig.ui.theme) } else { document.body.setAttribute('data-theme', 'default') } diff --git a/browser/main/modals/CreateFolderModal.styl b/browser/main/modals/CreateFolderModal.styl index 93848683..95d6249a 100644 --- a/browser/main/modals/CreateFolderModal.styl +++ b/browser/main/modals/CreateFolderModal.styl @@ -51,106 +51,40 @@ font-size 14px colorPrimaryButton() -body[data-theme="dark"] - .root - modalDark() - width 500px - height 270px - overflow hidden - position relative +apply-theme(theme) + body[data-theme={theme}] + .root + width 500px + height 270px + overflow hidden + position relative + position relative + z-index $modal-z-index + width 100% + background-color get-theme-var(theme, 'backgroundColor') + overflow hidden + border-radius $modal-border-radius - .header - background-color transparent - border-color $ui-dark-borderColor - color $ui-dark-text-color + .header + background-color transparent + border-color $ui-dark-borderColor + color get-theme-var(theme, 'text-color') - .control-folder-label - color $ui-dark-text-color + .control-folder-label + color get-theme-var(theme, 'text-color') - .control-folder-input - border 1px solid $ui-input--create-folder-modal - color white + .control-folder-input + border 1px solid $ui-input--create-folder-modal + color white - .description - color $ui-inactive-text-color + .description + color $ui-inactive-text-color - .control-confirmButton - colorDarkPrimaryButton() + .control-confirmButton + colorThemedPrimaryButton(theme) -body[data-theme="solarized-dark"] - .root - modalSolarizedDark() - width 500px - height 270px - overflow hidden - position relative +for theme in 'dark' 'solarized-dark' 'dracula' + apply-theme(theme) - .header - background-color transparent - border-color $ui-dark-borderColor - color $ui-solarized-dark-text-color - - .control-folder-label - color $ui-solarized-dark-text-color - - .control-folder-input - border 1px solid $ui-input--create-folder-modal - color white - - .description - color $ui-inactive-text-color - - .control-confirmButton - colorSolarizedDarkPrimaryButton() - -body[data-theme="monokai"] - .root - modalMonokai() - width 500px - height 270px - overflow hidden - position relative - - .header - background-color transparent - border-color $ui-dark-borderColor - color $ui-monokai-text-color - - .control-folder-label - color $ui-monokai-text-color - - .control-folder-input - border 1px solid $ui-input--create-folder-modal - color white - - .description - color $ui-inactive-text-color - - .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 +for theme in $themes + apply-theme(theme) \ No newline at end of file diff --git a/browser/main/modals/NewNoteModal.styl b/browser/main/modals/NewNoteModal.styl index c82b9376..c82ac9a9 100644 --- a/browser/main/modals/NewNoteModal.styl +++ b/browser/main/modals/NewNoteModal.styl @@ -47,70 +47,26 @@ text-align center margin-bottom 25px -body[data-theme="dark"] - .root - modalDark() +apply-theme(theme) + body[data-theme={theme}] + .root + background-color transparent - .header - color $ui-dark-text-color + .header + color get-theme-var(theme, 'text-color') - .control-button - border-color $ui-dark-borderColor - color $ui-dark-text-color - background-color transparent - &:focus - colorDarkPrimaryButton() + .control-button + border-color get-theme-var(theme, 'borderColor') + color get-theme-var(theme, 'text-color') + background-color transparent + &:focus + colorThemedPrimaryButton(theme) - .description - color $ui-inactive-text-color + .description + color get-theme-var(theme, 'text-color') -body[data-theme="solarized-dark"] - .root - background-color transparent +for theme in 'dark' 'solarized-dark' 'dracula' + apply-theme(theme) - .header - color $ui-solarized-dark-text-color - - .control-button - border-color $ui-solarized-dark-borderColor - color $ui-solarized-dark-text-color - background-color transparent - &:focus - colorDarkPrimaryButton() - - .description - color $ui-solarized-dark-text-color - -body[data-theme="monokai"] - .root - background-color transparent - - .header - color $ui-monokai-text-color - - .control-button - border-color $ui-monokai-borderColor - color $ui-monokai-text-color - background-color transparent - &:focus - colorDarkPrimaryButton() - - .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 +for theme in $themes + apply-theme(theme) \ No newline at end of file diff --git a/browser/main/modals/PreferencesModal/ConfigTab.styl b/browser/main/modals/PreferencesModal/ConfigTab.styl index 255165ce..0d9881cd 100644 --- a/browser/main/modals/PreferencesModal/ConfigTab.styl +++ b/browser/main/modals/PreferencesModal/ConfigTab.styl @@ -128,20 +128,10 @@ colorDarkControl() background-color $ui-dark-backgroundColor color $ui-dark-text-color -colorSolarizedDarkControl() +colorThemedControl(theme) border none - background-color $ui-solarized-dark-button-backgroundColor - color $ui-solarized-dark-text-color - -colorMonokaiControl() - border none - 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 + background-color get-theme-var(theme, 'button-backgroundColor') + color get-theme-var(theme, 'text-color') body[data-theme="dark"] .root @@ -170,84 +160,36 @@ body[data-theme="dark"] select, .group-section-control-input colorDarkControl() +apply-theme(theme) + body[data-theme={theme}] + .root + color get-theme-var(theme, 'text-color') -body[data-theme="solarized-dark"] - .root - color $ui-solarized-dark-text-color + .group-header + color get-theme-var(theme, 'text-color') + border-color get-theme-var(theme, 'borderColor') - .group-header - color $ui-solarized-dark-text-color - border-color $ui-solarized-dark-borderColor + .group-header2 + color get-theme-var(theme, 'text-color') - .group-header2 - color $ui-solarized-dark-text-color + .group-section-control-input + border-color get-theme-var(theme, 'borderColor') - .group-section-control-input - border-color $ui-solarized-dark-borderColor + .group-control + border-color get-theme-var(theme, 'borderColor') + .group-control-leftButton + colorDarkDefaultButton() + border-color get-theme-var(theme, 'borderColor') + .group-control-rightButton + colorThemedPrimaryButton(theme) + .group-hint + colorThemedControl(theme) + .group-section-control + select, .group-section-control-input + colorThemedControl(theme) - .group-control - border-color $ui-solarized-dark-borderColor - .group-control-leftButton - colorDarkDefaultButton() - border-color $ui-solarized-dark-borderColor - .group-control-rightButton - colorSolarizedDarkPrimaryButton() - .group-hint - colorSolarizedDarkControl() - .group-section-control - select, .group-section-control-input - colorSolarizedDarkControl() +for theme in 'solarized-dark' 'dracula' + apply-theme(theme) -body[data-theme="monokai"] - .root - color $ui-monokai-text-color - - .group-header - color $ui-monokai-text-color - border-color $ui-monokai-borderColor - - .group-header2 - color $ui-monokai-text-color - - .group-section-control-input - border-color $ui-monokai-borderColor - - .group-control - border-color $ui-monokai-borderColor - .group-control-leftButton - colorDarkDefaultButton() - border-color $ui-monokai-borderColor - .group-control-rightButton - colorMonokaiPrimaryButton() - .group-hint - colorMonokaiControl() - .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 +for theme in $themes + apply-theme(theme) \ No newline at end of file diff --git a/browser/main/modals/PreferencesModal/Crowdfunding.styl b/browser/main/modals/PreferencesModal/Crowdfunding.styl index 6d72290b..eb4f1289 100644 --- a/browser/main/modals/PreferencesModal/Crowdfunding.styl +++ b/browser/main/modals/PreferencesModal/Crowdfunding.styl @@ -30,20 +30,15 @@ body[data-theme="dark"] p color $ui-dark-text-color -body[data-theme="solarized-dark"] - .root - color $ui-solarized-dark-text-color - p - color $ui-solarized-dark-text-color +apply-theme(theme) + body[data-theme={theme}] + .root + color get-theme-var(theme, 'text-color') + p + color get-theme-var(theme, 'text-color') -body[data-theme="monokai"] - .root - color $ui-monokai-text-color - p - color $ui-monokai-text-color +for theme in 'solarized-dark' 'dracula' + apply-theme(theme) -body[data-theme="dracula"] - .root - color $ui-dracula-text-color - p - color $ui-dracula-text-color \ No newline at end of file +for theme in $themes + apply-theme(theme) \ No newline at end of file diff --git a/browser/main/modals/PreferencesModal/FolderItem.styl b/browser/main/modals/PreferencesModal/FolderItem.styl index 618e9bc4..32a83d63 100644 --- a/browser/main/modals/PreferencesModal/FolderItem.styl +++ b/browser/main/modals/PreferencesModal/FolderItem.styl @@ -107,73 +107,32 @@ body[data-theme="dark"] .folderItem-right-dangerButton colorDarkDangerButton() +apply-theme(theme) + body[data-theme={theme}] + .folderItem + &:hover + background-color get-theme-var(theme, 'button-backgroundColor') + .folderItem-left-danger + color $danger-color -body[data-theme="solarized-dark"] - .folderItem - &:hover - background-color $ui-solarized-dark-button-backgroundColor + .folderItem-left-key + color $ui-dark-inactive-text-color - .folderItem-left-danger - color $danger-color + .folderItem-left-colorButton + colorThemedPrimaryButton(theme) - .folderItem-left-key - color $ui-dark-inactive-text-color + .folderItem-right-button + colorThemedPrimaryButton(theme) - .folderItem-left-colorButton - colorSolarizedDarkPrimaryButton() + .folderItem-right-confirmButton + colorThemedPrimaryButton(theme) - .folderItem-right-button - colorSolarizedDarkPrimaryButton() + .folderItem-right-dangerButton + colorThemedPrimaryButton(theme) - .folderItem-right-confirmButton - colorSolarizedDarkPrimaryButton() +for theme in 'solarized-dark' 'dracula' + apply-theme(theme) - .folderItem-right-dangerButton - colorSolarizedDarkPrimaryButton() - -body[data-theme="monokai"] - .folderItem - &:hover - background-color $ui-monokai-button-backgroundColor - - .folderItem-left-danger - color $danger-color - - .folderItem-left-key - color $ui-dark-inactive-text-color - - .folderItem-left-colorButton - colorMonokaiPrimaryButton() - - .folderItem-right-button - colorMonokaiPrimaryButton() - - .folderItem-right-confirmButton - colorMonokaiPrimaryButton() - - .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 +for theme in $themes + apply-theme(theme) \ No newline at end of file diff --git a/browser/main/modals/PreferencesModal/InfoTab.styl b/browser/main/modals/PreferencesModal/InfoTab.styl index 44f2d9ae..dc675267 100644 --- a/browser/main/modals/PreferencesModal/InfoTab.styl +++ b/browser/main/modals/PreferencesModal/InfoTab.styl @@ -61,24 +61,16 @@ body[data-theme="dark"] .root color alpha($tab--dark-text-color, 80%) +apply-theme(theme) + body[data-theme={theme}] + .root + color get-theme-var(theme, 'text-color') + .list + a + color get-theme-var(theme, 'active-color') -body[data-theme="solarized-dark"] - .root - color $ui-solarized-dark-text-color -.list - a - color $ui-solarized-dark-active-color +for theme in 'solarized-dark' 'dracula' + apply-theme(theme) -body[data-theme="monokai"] - .root - color $ui-monokai-text-color -.list - a - color $ui-monokai-active-color - -body[data-theme="dracula"] - .root - color $ui-dracula-text-color -.list - a - color $ui-dracula-active-color +for theme in $themes + apply-theme(theme) \ No newline at end of file diff --git a/browser/main/modals/PreferencesModal/PreferencesModal.styl b/browser/main/modals/PreferencesModal/PreferencesModal.styl index 7004259b..2e3b4040 100644 --- a/browser/main/modals/PreferencesModal/PreferencesModal.styl +++ b/browser/main/modals/PreferencesModal/PreferencesModal.styl @@ -64,102 +64,31 @@ top-bar--height = 50px margin-top 10px overflow-y auto -body[data-theme="dark"] - .root - modalDark() +apply-theme(theme) + body[data-theme={theme}] + .root + background-color transparent + .top-bar + background-color transparent + border-color get-theme-var(theme, 'borderColor') + p + color get-theme-var(theme, 'text-color') + .nav + background-color transparent + border-color get-theme-var(theme, 'borderColor') + .nav-button + background-color transparent + color get-theme-var(theme, 'text-color') + &:hover + color get-theme-var(theme, 'text-color') - .top-bar - background-color transparent - border-color #4A4D52 - p - color $tab--dark-text-color + .nav-button--active + @extend .nav-button + color get-theme-var(theme, 'button--active-color') + background-color get-theme-var(theme, 'button--active-backgroundColor') - .nav - background-color transparent - border-color $ui-dark-borderColor +for theme in 'dark' 'solarized-dark' 'dracula' + apply-theme(theme) - .nav-button - background-color transparent - color $tab--dark-text-color - &:hover - color $ui-dark-text-color - - .nav-button--active - @extend .nav-button - color white - background-color $dark-primary-button-background--active - &:hover - color white - - -body[data-theme="solarized-dark"] - .root - background-color transparent - .top-bar - background-color transparent - border-color $ui-solarized-dark-borderColor - p - color $ui-solarized-dark-text-color - .nav - background-color transparent - border-color $ui-solarized-dark-borderColor - .nav-button - background-color transparent - color $ui-solarized-dark-text-color - &:hover - color $ui-solarized-dark-text-color - - .nav-button--active - @extend .nav-button - color $ui-solarized-dark-button--active-color - background-color $ui-solarized-dark-button--active-backgroundColor - &:hover - color white - -body[data-theme="monokai"] - .root - background-color transparent - .top-bar - background-color transparent - border-color $ui-monokai-borderColor - p - color $ui-monokai-text-color - .nav - background-color transparent - border-color $ui-monokai-borderColor - .nav-button - background-color transparent - color $ui-monokai-text-color - &:hover - color $ui-monokai-text-color - - .nav-button--active - @extend .nav-button - color $ui-monokai-button--active-color - 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 +for theme in $themes + apply-theme(theme) \ No newline at end of file diff --git a/browser/main/modals/PreferencesModal/SnippetTab.styl b/browser/main/modals/PreferencesModal/SnippetTab.styl index dd22b72e..5d899797 100644 --- a/browser/main/modals/PreferencesModal/SnippetTab.styl +++ b/browser/main/modals/PreferencesModal/SnippetTab.styl @@ -149,66 +149,25 @@ body[data-theme="default"], body[data-theme="white"] .snippet-item-selected background darken($ui-backgroundColor, 5) -body[data-theme="dark"] - .snippets - background $ui-dark-backgroundColor - .snippet-item - color white - &::after - background $ui-dark-borderColor - &:hover - background darken($ui-dark-backgroundColor, 5) - .snippet-item-selected - background darken($ui-dark-backgroundColor, 5) - .snippet-detail - color white - .group-control-button - colorDarkPrimaryButton() +apply-theme(theme) + body[data-theme={theme}] + .snippets + background get-theme-var(theme, 'backgroundColor') + .snippet-item + color get-theme-var(theme, 'text-color') + &::after + background get-theme-var(theme, 'borderColor') + &:hover + background darken(get-theme-var(theme, 'backgroundColor'), 5) + .snippet-item-selected + background darken(get-theme-var(theme, 'backgroundColor'), 5) + .snippet-detail + color get-theme-var(theme, 'text-color') + .group-control-button + colorThemedPrimaryButton(theme) -body[data-theme="solarized-dark"] - .snippets - background $ui-solarized-dark-backgroundColor - .snippet-item - color white - &::after - background $ui-solarized-dark-borderColor - &:hover - background darken($ui-solarized-dark-backgroundColor, 5) - .snippet-item-selected - background darken($ui-solarized-dark-backgroundColor, 5) - .snippet-detail - color white - .group-control-button - colorSolarizedDarkPrimaryButton() +for theme in 'dark' 'solarized-dark' 'dracula' + apply-theme(theme) -body[data-theme="monokai"] - .snippets - background $ui-monokai-backgroundColor - .snippet-item - color White - &::after - background $ui-monokai-borderColor - &:hover - background darken($ui-monokai-backgroundColor, 5) - .snippet-item-selected - background darken($ui-monokai-backgroundColor, 5) - .snippet-detail - 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 +for theme in $themes + apply-theme(theme) \ No newline at end of file diff --git a/browser/main/modals/PreferencesModal/StoragesTab.styl b/browser/main/modals/PreferencesModal/StoragesTab.styl index 9a1a0ef8..bed3ff72 100644 --- a/browser/main/modals/PreferencesModal/StoragesTab.styl +++ b/browser/main/modals/PreferencesModal/StoragesTab.styl @@ -159,118 +159,47 @@ body[data-theme="dark"] colorDarkDefaultButton() border-color $ui-dark-borderColor +apply-theme(theme) + body[data-theme={theme}] + .root + color get-theme-var(theme, 'text-color') + .folderList-item + border-bottom get-theme-var(theme, 'borderColor') -body[data-theme="solarized-dark"] - .root - color $ui-solarized-dark-text-color + .folderList-empty + color get-theme-var(theme, 'text-color') - .folderList-item - border-bottom $ui-solarized-dark-borderColor + .list-empty + color get-theme-var(theme, 'text-color') + .list-control-addStorageButton + border-color get-theme-var(theme, 'button-backgroundColor') + background-color get-theme-var(theme, 'button-backgroundColor') + color get-theme-var(theme, 'text-color') - .folderList-empty - color $ui-solarized-dark-text-color + .addStorage-header + color get-theme-var(theme, 'text-color') + border-color get-theme-var(theme, 'borderColor') - .list-empty - color $ui-solarized-dark-text-color - .list-control-addStorageButton - border-color $ui-solarized-dark-button-backgroundColor - background-color $ui-solarized-dark-button-backgroundColor - color $ui-solarized-dark-text-color + .addStorage-body-section-name-input + border-color $get-theme-var(theme, 'borderColor') - .addStorage-header - color $ui-solarized-dark-text-color - border-color $ui-solarized-dark-borderColor + .addStorage-body-section-type-description + color get-theme-var(theme, 'text-color') - .addStorage-body-section-name-input - border-color $$ui-solarized-dark-borderColor + .addStorage-body-section-path-button + colorPrimaryButton() + .addStorage-body-control + border-color get-theme-var(theme, 'borderColor') - .addStorage-body-section-type-description - color $ui-solarized-dark-text-color + .addStorage-body-control-createButton + colorDarkPrimaryButton() + .addStorage-body-control-cancelButton + colorDarkDefaultButton() + border-color get-theme-var(theme, 'borderColor') - .addStorage-body-section-path-button - colorPrimaryButton() - .addStorage-body-control - border-color $ui-solarized-dark-borderColor +for theme in 'solarized-dark' 'dracula' + apply-theme(theme) - .addStorage-body-control-createButton - colorDarkPrimaryButton() - .addStorage-body-control-cancelButton - colorDarkDefaultButton() - border-color $ui-solarized-dark-borderColor - -body[data-theme="monokai"] - .root - color $ui-monokai-text-color - - .folderList-item - border-bottom $ui-monokai-borderColor - - .folderList-empty - color $ui-monokai-text-color - - .list-empty - color $ui-monokai-text-color - .list-control-addStorageButton - border-color $ui-monokai-button-backgroundColor - background-color $ui-monokai-button-backgroundColor - color $ui-monokai-text-color - - .addStorage-header - color $ui-monokai-text-color - border-color $ui-monokai-borderColor - - .addStorage-body-section-name-input - border-color $$ui-monokai-borderColor - - .addStorage-body-section-type-description - color $ui-monokai-text-color - - .addStorage-body-section-path-button - colorPrimaryButton() - .addStorage-body-control - border-color $ui-monokai-borderColor - - .addStorage-body-control-createButton - colorDarkPrimaryButton() - .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 +for theme in $themes + apply-theme(theme) \ No newline at end of file diff --git a/browser/main/modals/PreferencesModal/UiTab.js b/browser/main/modals/PreferencesModal/UiTab.js index c6181a13..b52b1bdb 100644 --- a/browser/main/modals/PreferencesModal/UiTab.js +++ b/browser/main/modals/PreferencesModal/UiTab.js @@ -12,6 +12,7 @@ import _ from 'lodash' import i18n from 'browser/lib/i18n' import { getLanguages } from 'browser/lib/Languages' import normalizeEditorFontFamily from 'browser/lib/normalizeEditorFontFamily' +import uiThemes from 'browser/lib/ui-themes' const OSX = global.process.platform === 'darwin' @@ -197,12 +198,20 @@ class UiTab extends React.Component { onChange={(e) => this.handleUIChange(e)} ref='uiTheme' > - - - - - - + + { + uiThemes.filter(theme => !theme.isDark).sort((a, b) => a.label.localeCompare(b.label)).map(theme => { + return () + }) + } + + + { + uiThemes.filter(theme => theme.isDark).sort((a, b) => a.label.localeCompare(b.label)).map(theme => { + return () + }) + } + diff --git a/browser/main/modals/RenameFolderModal.styl b/browser/main/modals/RenameFolderModal.styl index c9909d00..435aa6a0 100644 --- a/browser/main/modals/RenameFolderModal.styl +++ b/browser/main/modals/RenameFolderModal.styl @@ -43,23 +43,31 @@ border-radius 2px padding 0 25px margin 0 auto + font-size 14px colorPrimaryButton() -body[data-theme="dark"] - .root - modalDark() +apply-theme(theme) + body[data-theme={theme}] + .root + background-color transparent - .header - background-color $ui-dark-button--hover-backgroundColor - border-color $ui-dark-borderColor - color $ui-dark-text-color + .header + background-color get-theme-var(theme, 'button--hover-backgroundColor') + border-color get-theme-var(theme, 'borderColor') + color get-theme-var(theme, 'text-color') - .description - color $ui-inactive-text-color + .description + color $ui-inactive-text-color - .control-input - border-color $ui-dark-borderColor - color $ui-dark-text-color + .control-input + border-color get-theme-var(theme, 'borderColor') + color get-theme-var(theme, 'text-color') - .control-confirmButton - colorDarkPrimaryButton() + .control-confirmButton + colorThemedPrimaryButton(theme) + +for theme in 'dark' 'solarized-dark' 'dracula' + apply-theme(theme) + +for theme in $themes + apply-theme(theme) diff --git a/browser/styles/Detail/TagSelect.styl b/browser/styles/Detail/TagSelect.styl index 8900422c..5fc23310 100644 --- a/browser/styles/Detail/TagSelect.styl +++ b/browser/styles/Detail/TagSelect.styl @@ -51,78 +51,34 @@ background-color alpha($ui-button--active-backgroundColor, 40%) color $ui-text-color -body[data-theme="dark"] - .TagSelect - .react-autosuggest__input - color $ui-dark-text-color - - ul - border-color $ui-dark-borderColor - background-color $ui-dark-noteList-backgroundColor - color $ui-dark-text-color - - &:before - background-color $ui-dark-noteList-backgroundColor - - li[aria-selected="true"] - background-color $ui-dark-button--active-backgroundColor - color $ui-dark-text-color - -body[data-theme="monokai"] - .TagSelect - .react-autosuggest__input - color $ui-monokai-text-color - - ul - border-color $ui-monokai-borderColor - background-color $ui-monokai-noteList-backgroundColor - color $ui-monokai-text-color - - &:before - background-color $ui-dark-noteList-backgroundColor - - li[aria-selected="true"] - background-color $ui-monokai-button-backgroundColor - color $ui-monokai-text-color - -body[data-theme="dracula"] - .TagSelect - .react-autosuggest__input - color $ui-dracula-text-color - - ul - border-color $ui-dracula-borderColor - background-color $ui-dracula-noteList-backgroundColor - color $ui-dracula-text-color - - &:before - background-color $ui-dark-noteList-backgroundColor - - li[aria-selected="true"] - background-color $ui-dracula-button-backgroundColor - color $ui-dracula-text-color - -body[data-theme="solarized-dark"] - .TagSelect - .react-autosuggest__input - color $ui-solarized-dark-text-color - - ul - border-color $ui-solarized-dark-borderColor - background-color $ui-solarized-dark-noteList-backgroundColor - color $ui-solarized-dark-text-color - - &:before - background-color $ui-solarized-dark-noteList-backgroundColor - - li[aria-selected="true"] - background-color $ui-dark-button--active-backgroundColor - color $ui-solarized-dark-text-color - body[data-theme="white"] .TagSelect ul background-color $ui-white-noteList-backgroundColor li[aria-selected="true"] - background-color $ui-button--active-backgroundColor \ No newline at end of file + background-color $ui-button--active-backgroundColor + +apply-theme(theme) + body[data-theme={theme}] + .TagSelect + .react-autosuggest__input + color get-theme-var(theme, 'text-color') + + ul + border-color get-theme-var(theme, 'borderColor') + background-color get-theme-var(theme, 'noteList-backgroundColor') + color get-theme-var(theme, 'text-color') + + &:before + background-color $ui-dark-noteList-backgroundColor + + li[aria-selected="true"] + background-color get-theme-var(theme, 'button-backgroundColor') + color get-theme-var(theme, 'text-color') + +for theme in 'dark' 'solarized-dark' 'dracula' + apply-theme(theme) + +for theme in $themes + apply-theme(theme) \ No newline at end of file diff --git a/browser/styles/index.styl b/browser/styles/index.styl index b9f9c41e..6e3517fb 100644 --- a/browser/styles/index.styl +++ b/browser/styles/index.styl @@ -107,36 +107,18 @@ colorDarkPrimaryButton() &:active:hover background-color $dark-primary-button-background--active - -colorSolarizedDarkPrimaryButton() - color $ui-solarized-dark-text-color - background-color $ui-solarized-dark-button-backgroundColor - border none - &:hover - background-color $dark-primary-button-background--hover - &:active - &:active:hover - background-color $dark-primary-button-background--active - -colorMonokaiPrimaryButton() - color $ui-monokai-text-color - background-color $ui-monokai-button-backgroundColor - border none - &:hover - background-color $dark-primary-button-background--hover - &:active - &:active:hover - background-color $dark-primary-button-background--active - -colorDraculaPrimaryButton() - color $ui-dracula-text-color - background-color $ui-dracula-button-backgroundColor - border none - &:hover - background-color $ui-dracula-button--active-backgroundColor - &:active - &:active:hover - background-color $ui-dracula-button--active-backgroundColor +colorThemedPrimaryButton(theme) + if theme == 'dark' + colorDarkPrimaryButton() + else + color get-theme-var(theme, 'text-color') + background-color get-theme-var(theme, 'button-backgroundColor') + border none + &:hover + background-color get-theme-var(theme, 'button--active-backgroundColor') + &:active + &:active:hover + background-color get-theme-var(theme, 'button--active-backgroundColor') // Danger button(Brand color) @@ -257,12 +239,14 @@ $ui-dark-borderColor = #444444 $ui-dark-backgroundColor = #2C3033 $ui-dark-noteList-backgroundColor = #2C3033 $ui-dark-noteDetail-backgroundColor = #2C3033 +$ui-dark-tagList-backgroundColor = #FFFFFF $ui-dark-tag-backgroundColor = #3A404C $dark-background-color = lighten($ui-dark-backgroundColor, 10%) $ui-dark-text-color = #DDDDDD $ui-dark-button--active-color = #f4f4f4 $ui-dark-button--active-backgroundColor = #3A404C +$ui-dark-button--hover-color = #c0392b $ui-dark-button--hover-backgroundColor = lighten($ui-dark-backgroundColor, 10%) $ui-dark-button--focus-borderColor = lighten(#369DCD, 25%) $ui-dark-topbar-button-color = #939395 @@ -332,19 +316,11 @@ darkTooltip() pointer-events none transition 0.1s -modalDark() - position relative - z-index $modal-z-index - width 100% - background-color $ui-dark-backgroundColor - overflow hidden - border-radius $modal-border-radius - - /******* Solarized Dark theme ********/ $ui-solarized-dark-backgroundColor = #073642 $ui-solarized-dark-noteList-backgroundColor = #073642 $ui-solarized-dark-noteDetail-backgroundColor = #073642 +$ui-solarized-dark-tagList-backgroundColor = #FFFFFF $ui-solarized-dark-text-color = #93a1a1 $ui-solarized-dark-active-color = #2aa198 @@ -356,21 +332,23 @@ $ui-solarized-dark-tag-backgroundColor = #002b36 $ui-solarized-dark-button-backgroundColor = #002b36 $ui-solarized-dark-button--active-color = #93a1a1 $ui-solarized-dark-button--active-backgroundColor = #073642 +$ui-solarized-dark-button--hover-color = #c0392b $ui-solarized-dark-button--hover-backgroundColor = lighten($ui-dark-backgroundColor, 10%) $ui-solarized-dark-button--focus-borderColor = lighten(#369DCD, 25%) -modalSolarizedDark() - position relative - z-index $modal-z-index - width 100% - background-color $ui-solarized-dark-backgroundColor - overflow hidden - border-radius $modal-border-radius +$ui-solarized-dark-kbd-backgroundColor = darken(#21252B, 10%) +$ui-solarized-dark-kbd-color = $ui-solarized-dark-text-color + +$ui-solarized-dark-table-odd-backgroundColor = $ui-solarized-dark-noteDetail-backgroundColor +$ui-solarized-dark-table-even-backgroundColor = darken($ui-solarized-dark-noteDetail-backgroundColor, 10%) +$ui-solarized-dark-table-head-backgroundColor = $ui-solarized-dark-table-even-backgroundColor +$ui-solarized-dark-table-borderColor = lighten(darken(#21252B, 10%), 20%) /******* Monokai theme ********/ $ui-monokai-backgroundColor = #272822 $ui-monokai-noteList-backgroundColor = #272822 $ui-monokai-noteDetail-backgroundColor = #272822 +$ui-monokai-tagList-backgroundColor = #FFFFFF $ui-monokai-text-color = #f8f8f2 $ui-monokai-active-color = #f92672 @@ -382,21 +360,23 @@ $ui-monokai-tag-backgroundColor = #373831 $ui-monokai-button-backgroundColor = #373831 $ui-monokai-button--active-color = white $ui-monokai-button--active-backgroundColor = #f92672 +$ui-monokai-button--hover-color = #f92672 $ui-monokai-button--hover-backgroundColor = lighten($ui-dark-backgroundColor, 10%) $ui-monokai-button--focus-borderColor = lighten(#369DCD, 25%) -modalMonokai() - position relative - z-index $modal-z-index - width 100% - background-color $ui-monokai-backgroundColor - overflow hidden - border-radius $modal-border-radius +$ui-monokai-kbd-backgroundColor = darken(#21252B, 10%) +$ui-monokai-kbd-color = $ui-monokai-text-color + +$ui-monokai-table-odd-backgroundColor = $ui-monokai-noteDetail-backgroundColor +$ui-monokai-table-even-backgroundColor = darken($ui-monokai-noteDetail-backgroundColor, 10%) +$ui-monokai-table-head-backgroundColor = $ui-monokai-table-even-backgroundColor +$ui-monokai-table-borderColor = lighten(darken(#21252B, 10%), 20%) /******* Dracula theme ********/ $ui-dracula-backgroundColor = #282a36 $ui-dracula-noteList-backgroundColor = #282a36 $ui-dracula-noteDetail-backgroundColor = #282a36 +$ui-dracula-tagList-backgroundColor = #f8f8f2 $ui-dracula-text-color = #f8f8f2 $ui-dracula-active-color = #bd93f9 @@ -408,13 +388,52 @@ $ui-dracula-tag-backgroundColor = #8be9fd $ui-dracula-button-backgroundColor = #44475a $ui-dracula-button--active-color = #f8f8f2 $ui-dracula-button--active-backgroundColor = #bd93f9 +$ui-dracula-button--hover-color = #ff79c6 $ui-dracula-button--hover-backgroundColor = lighten($ui-dracula-backgroundColor, 10%) $ui-dracula-button--focus-borderColor = lighten(#44475a, 25%) -modalDracula() - position relative - z-index $modal-z-index - width 100% - background-color $ui-dracula-backgroundColor - overflow hidden - border-radius $modal-border-radius \ No newline at end of file +$ui-dracula-kbd-backgroundColor = darken(#21252B, 10%) +$ui-dracula-kbd-color = $ui-monokai-text-color + +$ui-dracula-table-odd-backgroundColor = $ui-dracula-noteDetail-backgroundColor +$ui-dracula-table-even-backgroundColor = darken($ui-dracula-noteDetail-backgroundColor, 10%) +$ui-dracula-table-head-backgroundColor = $ui-dracula-table-even-backgroundColor +$ui-dracula-table-borderColor = lighten(darken(#21252B, 10%), 20%) + +/******* Nord theme ********/ +$ui-nord-backgroundColor = #2e3440 +$ui-nord-noteList-backgroundColor = #2e3440 +$ui-nord-noteDetail-backgroundColor = #2e3440 +$ui-nord-tagList-backgroundColor = #FFFFFF + +$ui-nord-text-color = #d8dee9 +$ui-nord-inactive-text-color = #8fbcbb +$ui-nord-active-color = #5e81ac + +$ui-nord-borderColor = #3b4252 + +$ui-nord-tag-backgroundColor = #3b4252 + +$ui-nord-button-backgroundColor = #434c5e +$ui-nord-button--active-color = #d8dee9 +$ui-nord-button--active-backgroundColor = #5e81ac +$ui-nord-button--hover-color = #c0392b +$ui-nord-button--hover-backgroundColor = #434c5e + +$ui-nord-kbd-backgroundColor = $ui-nord-text-color +$ui-nord-kbd-color = $ui-nord-backgroundColor + +$ui-nord-table-odd-backgroundColor = $ui-nord-noteDetail-backgroundColor +$ui-nord-table-even-backgroundColor = darken($ui-nord-noteDetail-backgroundColor, 10%) +$ui-nord-table-head-backgroundColor = $ui-nord-table-even-backgroundColor +$ui-nord-table-borderColor = lighten(darken(#21252B, 10%), 20%) + + + +debug-theme-var(theme, suffix) + '$ui-' + theme + '-' + suffix + +get-theme-var(theme, suffix) + lookup('$ui-' + theme + '-' + suffix) + +$themes = 'monokai' 'nord' \ No newline at end of file From 8dc5214c9e10f5e683385b64d54292cad8c027c0 Mon Sep 17 00:00:00 2001 From: HarlanLuo Date: Mon, 7 Jan 2019 20:18:21 +0800 Subject: [PATCH 04/74] new feature: filter tags and folder list --- browser/components/SideNavFilter.styl | 2 +- browser/components/StorageList.styl | 4 +- browser/main/SideNav/PreferenceButton.styl | 3 - browser/main/SideNav/SearchButton.js | 22 ++++ browser/main/SideNav/SearchButton.styl | 55 ++++++++++ browser/main/SideNav/SideNav.styl | 41 +++++++ browser/main/SideNav/index.js | 120 ++++++++++++++++----- resources/icon/icon-search-active.svg | 14 +++ resources/icon/icon-search.svg | 14 +++ 9 files changed, 240 insertions(+), 35 deletions(-) create mode 100644 browser/main/SideNav/SearchButton.js create mode 100644 browser/main/SideNav/SearchButton.styl create mode 100644 resources/icon/icon-search-active.svg create mode 100644 resources/icon/icon-search.svg diff --git a/browser/components/SideNavFilter.styl b/browser/components/SideNavFilter.styl index 1da8c7e4..d5435a16 100644 --- a/browser/components/SideNavFilter.styl +++ b/browser/components/SideNavFilter.styl @@ -1,5 +1,5 @@ .menu - margin-bottom 30px + margin-bottom 20px .menu-button navButtonColor() diff --git a/browser/components/StorageList.styl b/browser/components/StorageList.styl index 474f896b..61fe195c 100644 --- a/browser/components/StorageList.styl +++ b/browser/components/StorageList.styl @@ -1,7 +1,5 @@ .storageList - absolute left right - bottom 37px - top 180px + margin-bottom 37px overflow-y auto .storageList-folded diff --git a/browser/main/SideNav/PreferenceButton.styl b/browser/main/SideNav/PreferenceButton.styl index 54513cb6..12cb9267 100644 --- a/browser/main/SideNav/PreferenceButton.styl +++ b/browser/main/SideNav/PreferenceButton.styl @@ -1,8 +1,5 @@ .top-menu-preference navButtonColor() - position absolute - top 22px - right 10px width 2em background-color transparent &:hover diff --git a/browser/main/SideNav/SearchButton.js b/browser/main/SideNav/SearchButton.js new file mode 100644 index 00000000..e9643128 --- /dev/null +++ b/browser/main/SideNav/SearchButton.js @@ -0,0 +1,22 @@ +import PropTypes from 'prop-types' +import React from 'react' +import CSSModules from 'browser/lib/CSSModules' +import styles from './SearchButton.styl' +import i18n from 'browser/lib/i18n' + +const SearchButton = ({ onClick, isActive }) => ( + +) + +SearchButton.propTypes = { + onClick: PropTypes.func.isRequired, + isActive: PropTypes.bool +} + +export default CSSModules(SearchButton, styles) diff --git a/browser/main/SideNav/SearchButton.styl b/browser/main/SideNav/SearchButton.styl new file mode 100644 index 00000000..76d4b806 --- /dev/null +++ b/browser/main/SideNav/SearchButton.styl @@ -0,0 +1,55 @@ +.top-menu-search + navButtonColor() + position relative + margin-right 6px + top 3px + width 2em + background-color transparent + &:hover + color $ui-button-default--active-backgroundColor + background-color transparent + .tooltip + opacity 1 + &:active, &:active:hover + color $ui-button-default--active-backgroundColor + +.icon-search + width 16px + +body[data-theme="white"] + .top-menu-search + navWhiteButtonColor() + background-color transparent + &:hover + color #0B99F1 + background-color transparent + &:active, &:active:hover + color #0B99F1 + background-color transparent + +body[data-theme="dark"] + .top-menu-search + navDarkButtonColor() + background-color transparent + &:active + background-color alpha($ui-dark-button--active-backgroundColor, 20%) + background-color transparent + &:hover + background-color alpha($ui-dark-button--active-backgroundColor, 20%) + background-color transparent + + + +.tooltip + tooltip() + position absolute + pointer-events none + top 26px + left -20px + z-index 200 + padding 5px + line-height normal + border-radius 2px + opacity 0 + transition 0.1s + white-space nowrap diff --git a/browser/main/SideNav/SideNav.styl b/browser/main/SideNav/SideNav.styl index 9fa6d4fa..f6b4582b 100644 --- a/browser/main/SideNav/SideNav.styl +++ b/browser/main/SideNav/SideNav.styl @@ -18,7 +18,37 @@ display flex text-align center +.extra-buttons + position absolute + display flex + align-items center + justify-content flex-end + right 10px + top 24px +.search + position relative + flex 1 + display flex + max-height 0 + overflow hidden + transition max-height .4s + margin -5px 10px 0 + .search-input + flex 1 + height 2em + vertical-align middle + font-size 14px + border solid 1px $border-color + border-radius 2px + padding 2px 6px + outline none + .search-clear + width 10px + position absolute + right 8px + top 9px + cursor pointer .top-menu-label margin-left 5px @@ -98,6 +128,17 @@ .top-menu-preference position absolute left 7px + .search + height 28px + .search-input + display none + .search-clear + display none + .search-folded + width 16px + padding-left 4px + margin-bottom 8px + cursor pointer body[data-theme="white"] .root, .root--folded diff --git a/browser/main/SideNav/index.js b/browser/main/SideNav/index.js index 640bedbf..de70861a 100644 --- a/browser/main/SideNav/index.js +++ b/browser/main/SideNav/index.js @@ -13,6 +13,7 @@ import StorageList from 'browser/components/StorageList' import NavToggleButton from 'browser/components/NavToggleButton' import EventEmitter from 'browser/main/lib/eventEmitter' import PreferenceButton from './PreferenceButton' +import SearchButton from './SearchButton' import ListButton from './ListButton' import TagButton from './TagButton' import {SortableContainer} from 'react-sortable-hoc' @@ -36,21 +37,26 @@ class SideNav extends React.Component { show: false, color: null, tagName: null, - targetRect: null + targetRect: null, + showSearch: false, + searchText: '' } } this.dismissColorPicker = this.dismissColorPicker.bind(this) this.handleColorPickerConfirm = this.handleColorPickerConfirm.bind(this) this.handleColorPickerReset = this.handleColorPickerReset.bind(this) + this.handleSearchButtonClick = this.handleSearchButtonClick.bind(this) + this.handleSearchInputChange = this.handleSearchInputChange.bind(this) + this.handleSearchInputClear = this.handleSearchInputClear.bind(this) } componentDidMount () { - EventEmitter.on('side:preferences', this.handleMenuButtonClick) + EventEmitter.on('side:preferences', this.handlePreferenceButtonClick) } componentWillUnmount () { - EventEmitter.off('side:preferences', this.handleMenuButtonClick) + EventEmitter.off('side:preferences', this.handlePreferenceButtonClick) } deleteTag (tag) { @@ -99,10 +105,30 @@ class SideNav extends React.Component { } } - handleMenuButtonClick (e) { + handlePreferenceButtonClick (e) { openModal(PreferencesModal) } + handleSearchButtonClick (e) { + const { showSearch } = this.state + this.setState({ + showSearch: !showSearch, + searchText: '' + }) + } + + handleSearchInputClear (e) { + this.setState({ + searchText: '' + }) + } + + handleSearchInputChange (e) { + this.setState({ + searchText: e.target.value + }) + } + handleHomeButtonClick (e) { const { router } = this.context router.push('/home') @@ -181,12 +207,19 @@ class SideNav extends React.Component { handleToggleButtonClick (e) { const { dispatch, config } = this.props + const { showSearch, searchText } = this.state ConfigManager.set({isSideNavFolded: !config.isSideNavFolded}) dispatch({ type: 'SET_IS_SIDENAV_FOLDED', isFolded: !config.isSideNavFolded }) + + if (showSearch && searchText.length === 0) { + this.setState({ + showSearch: false + }) + } } handleTrashedButtonClick (e) { @@ -215,8 +248,9 @@ class SideNav extends React.Component { } } - SideNavComponent (isFolded, storageList) { - const { location, data, config } = this.props + SideNavComponent (isFolded) { + const { location, data, config, dispatch } = this.props + const { showSearch, searchText } = this.state const isHomeActive = !!location.pathname.match(/^\/home$/) const isStarredActive = !!location.pathname.match(/^\/starred$/) @@ -226,6 +260,28 @@ class SideNav extends React.Component { // TagsMode is not selected if (!location.pathname.match('/tags') && !location.pathname.match('/alltags')) { + let storageMap = data.storageMap + if (showSearch && searchText.length > 0) { + storageMap = storageMap.map((storage) => { + const folders = storage.folders.filter(folder => folder.name.toLowerCase().indexOf(searchText.toLowerCase()) !== -1) + return Object.assign({}, storage, { folders }) + }) + } + + const storageList = storageMap.map((storage, key) => { + const SortableStorageItem = SortableContainer(StorageItem) + return + }) + component = (
tag.size > 0 ), ['name']) + if (showSearch && searchText.length > 0) { + tagList = tagList.filter(tag => tag.name.toLowerCase().indexOf(searchText.toLowerCase()) !== -1) + } if (config.ui.enableLiveNoteCounts && activeTags.length !== 0) { const notesTags = data.noteMap.map(note => note.tags) tagList = tagList.map(tag => { @@ -406,24 +465,8 @@ class SideNav extends React.Component { } render () { - const { data, location, config, dispatch } = this.props - const { colorPicker: colorPickerState } = this.state - - const isFolded = config.isSideNavFolded - - const storageList = data.storageMap.map((storage, key) => { - const SortableStorageItem = SortableContainer(StorageItem) - return - }) + const { location, config } = this.props + const { showSearch, searchText, colorPicker: colorPickerState } = this.state let colorPicker if (colorPickerState.show) { @@ -438,9 +481,25 @@ class SideNav extends React.Component { ) } + const isFolded = config.isSideNavFolded const style = {} if (!isFolded) style.width = this.props.width const isTagActive = location.pathname.match(/tag/) + + const navSearch = ( +
+ { this.searchInput = dom }} + onChange={this.handleSearchInputChange} + value={searchText} + /> + + {isFolded && } +
+ ) + return (
-
- +
+ +
- {this.SideNavComponent(isFolded, storageList)} + {navSearch} + {this.SideNavComponent(isFolded)} {colorPicker}
) diff --git a/resources/icon/icon-search-active.svg b/resources/icon/icon-search-active.svg new file mode 100644 index 00000000..f8cace73 --- /dev/null +++ b/resources/icon/icon-search-active.svg @@ -0,0 +1,14 @@ + + + + + + + + \ No newline at end of file diff --git a/resources/icon/icon-search.svg b/resources/icon/icon-search.svg new file mode 100644 index 00000000..d2181a34 --- /dev/null +++ b/resources/icon/icon-search.svg @@ -0,0 +1,14 @@ + + + + + + + + \ No newline at end of file From 51aff20d654af8706f9672a958b5db37f8642c8b Mon Sep 17 00:00:00 2001 From: HarlanLuo Date: Tue, 29 Jan 2019 12:06:05 +0800 Subject: [PATCH 05/74] improve style of sidenav --- browser/main/SideNav/SideNav.styl | 43 ++++++++++++++++++++++++++----- 1 file changed, 36 insertions(+), 7 deletions(-) diff --git a/browser/main/SideNav/SideNav.styl b/browser/main/SideNav/SideNav.styl index f6b4582b..b54c0a32 100644 --- a/browser/main/SideNav/SideNav.styl +++ b/browser/main/SideNav/SideNav.styl @@ -9,22 +9,24 @@ flex-direction column .top - padding-bottom 15px + display flex + align-items top + justify-content space-between + padding-bottom 10px + margin 14px 14px 4px .switch-buttons background-color transparent border 0 - margin 24px auto 4px 14px display flex + align-items center text-align center .extra-buttons - position absolute + position relative + top -3px display flex align-items center - justify-content flex-end - right 10px - top 24px .search position relative @@ -98,8 +100,15 @@ background-color #2E3235 .switch-buttons display none + .extra-buttons > button:first-of-type // hide search icon + display none .top height 60px + align-items center + margin 0 + justify-content center + position relative + left -4px .top-menu position static width $sideNav--folded-width @@ -144,12 +153,19 @@ body[data-theme="white"] .root, .root--folded background-color #f9f9f9 color $ui-text-color + .search .search-input + background-color #f9f9f9 + color $ui-text-color body[data-theme="dark"] .root, .root--folded border-right 1px solid $ui-dark-borderColor background-color $ui-dark-backgroundColor color $ui-dark-text-color + .search .search-input + background-color $ui-dark-backgroundColor + color $ui-dark-text-color + border-color $ui-dark-borderColor .top border-color $ui-dark-borderColor @@ -159,12 +175,25 @@ body[data-theme="solarized-dark"] background-color $ui-solarized-dark-backgroundColor border-right 1px solid $ui-solarized-dark-borderColor + .search .search-input + background-color $ui-solarized-dark-backgroundColor + color $ui-solarized-dark-text-color + border-color $ui-solarized-dark-borderColor + body[data-theme="monokai"] .root, .root--folded background-color $ui-monokai-backgroundColor border-right 1px solid $ui-monokai-borderColor + .search .search-input + background-color $ui-monokai-backgroundColor + color $ui-monokai-text-color + border-color $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 + border-right 1px solid $ui-dracula-borderColor + .search .search-input + background-color $ui-dracula-backgroundColor + color $ui-dracula-text-color + border-color $ui-dracula-borderColor \ No newline at end of file From 885b9d2c268fb8dab006872347e1e63d8a0e3b79 Mon Sep 17 00:00:00 2001 From: HarlanLuo Date: Tue, 29 Jan 2019 12:13:03 +0800 Subject: [PATCH 06/74] remove unused ref --- browser/main/SideNav/index.js | 1 - 1 file changed, 1 deletion(-) diff --git a/browser/main/SideNav/index.js b/browser/main/SideNav/index.js index de70861a..65e1c09d 100644 --- a/browser/main/SideNav/index.js +++ b/browser/main/SideNav/index.js @@ -491,7 +491,6 @@ class SideNav extends React.Component { { this.searchInput = dom }} onChange={this.handleSearchInputChange} value={searchText} /> From 04e0523cacab0270eb1445ee60f26b3be3e0a001 Mon Sep 17 00:00:00 2001 From: amedora Date: Wed, 3 Apr 2019 14:50:54 +0900 Subject: [PATCH 07/74] fix .extra-buttons vertical position --- browser/main/SideNav/SideNav.styl | 1 - 1 file changed, 1 deletion(-) diff --git a/browser/main/SideNav/SideNav.styl b/browser/main/SideNav/SideNav.styl index b54c0a32..2d16241f 100644 --- a/browser/main/SideNav/SideNav.styl +++ b/browser/main/SideNav/SideNav.styl @@ -24,7 +24,6 @@ .extra-buttons position relative - top -3px display flex align-items center From db78f1b91e3206adbf0b67e4f73995335c47b27b Mon Sep 17 00:00:00 2001 From: amedora Date: Wed, 3 Apr 2019 16:14:52 +0900 Subject: [PATCH 08/74] fix search input visuality for Monokai --- browser/main/SideNav/SideNav.styl | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/browser/main/SideNav/SideNav.styl b/browser/main/SideNav/SideNav.styl index 2d16241f..1533830f 100644 --- a/browser/main/SideNav/SideNav.styl +++ b/browser/main/SideNav/SideNav.styl @@ -184,7 +184,7 @@ body[data-theme="monokai"] background-color $ui-monokai-backgroundColor border-right 1px solid $ui-monokai-borderColor .search .search-input - background-color $ui-monokai-backgroundColor + background-color $ui-monokai-button-backgroundColor color $ui-monokai-text-color border-color $ui-monokai-borderColor From 7529feb4a552daa3dab333eabb7e4ca60c89ec67 Mon Sep 17 00:00:00 2001 From: amedora Date: Tue, 21 May 2019 09:26:59 +0900 Subject: [PATCH 09/74] add placeholder to show 'filter tags/folders...' --- browser/main/SideNav/index.js | 1 + 1 file changed, 1 insertion(+) diff --git a/browser/main/SideNav/index.js b/browser/main/SideNav/index.js index 65e1c09d..65949860 100644 --- a/browser/main/SideNav/index.js +++ b/browser/main/SideNav/index.js @@ -493,6 +493,7 @@ class SideNav extends React.Component { type='text' onChange={this.handleSearchInputChange} value={searchText} + placeholder={i18n.__('Filter tags/folders...')} /> {isFolded && } From 0d4b6252e8dc3115160945fbbf365713b848964d Mon Sep 17 00:00:00 2001 From: amedora Date: Tue, 21 May 2019 09:45:52 +0900 Subject: [PATCH 10/74] add locales 'filter tags/folders...' --- locales/da.json | 3 ++- locales/de.json | 3 ++- locales/en.json | 3 ++- locales/es-ES.json | 3 ++- locales/fa.json | 3 ++- locales/fr.json | 3 ++- locales/hu.json | 3 ++- locales/it.json | 3 ++- locales/ja.json | 3 ++- locales/ko.json | 3 ++- locales/no.json | 3 ++- locales/pl.json | 3 ++- locales/pt-BR.json | 3 ++- locales/pt-PT.json | 3 ++- locales/ru.json | 3 ++- locales/sq.json | 3 ++- locales/th.json | 3 ++- locales/tr.json | 3 ++- locales/zh-CN.json | 3 ++- locales/zh-TW.json | 3 ++- 20 files changed, 40 insertions(+), 20 deletions(-) diff --git a/locales/da.json b/locales/da.json index 79503ab3..c3752390 100644 --- a/locales/da.json +++ b/locales/da.json @@ -156,5 +156,6 @@ "⚠ You have pasted a link referring an attachment that could not be found in the storage location of this note. Pasting links referring attachments is only supported if the source and destination location is the same storage. Please Drag&Drop the attachment instead! ⚠": "⚠ You have pasted a link referring an attachment that could not be found in the storage location of this note. Pasting links referring attachments is only supported if the source and destination location is the same storage. Please Drag&Drop the attachment instead! ⚠", "Spellcheck disabled": "Spellcheck disabled", "Show menu bar": "Show menu bar", - "Auto Detect": "Auto Detect" + "Auto Detect": "Auto Detect", + "Filter tags/folders...": "filter tags/folders..." } diff --git a/locales/de.json b/locales/de.json index 518a4e65..f1fdad09 100644 --- a/locales/de.json +++ b/locales/de.json @@ -212,5 +212,6 @@ "⚠ You have pasted a link referring an attachment that could not be found in the storage location of this note. Pasting links referring attachments is only supported if the source and destination location is the same storage. Please Drag&Drop the attachment instead! ⚠": "⚠ You have pasted a link referring an attachment that could not be found in the storage location of this note. Pasting links referring attachments is only supported if the source and destination location is the same storage. Please Drag&Drop the attachment instead! ⚠", "Spellcheck disabled": "Spellcheck disabled", "Show menu bar": "Show menu bar", - "Auto Detect": "Auto Detect" + "Auto Detect": "Auto Detect", + "Filter tags/folders...": "filter tags/ordner..." } diff --git a/locales/en.json b/locales/en.json index 1e09bfc7..e16d7d30 100644 --- a/locales/en.json +++ b/locales/en.json @@ -187,5 +187,6 @@ "Snippet Default Language": "Snippet Default Language", "New notes are tagged with the filtering tags": "New notes are tagged with the filtering tags", "Show menu bar": "Show menu bar", - "Auto Detect": "Auto Detect" + "Auto Detect": "Auto Detect", + "Filter tags/folders...": "filter tags/folders..." } diff --git a/locales/es-ES.json b/locales/es-ES.json index a42e6bb4..06a11f54 100644 --- a/locales/es-ES.json +++ b/locales/es-ES.json @@ -158,5 +158,6 @@ "Spellcheck disabled": "Spellcheck disabled", "Show menu bar": "Show menu bar", "Auto Detect": "Auto Detect", - "Snippet Default Language": "Lenguaje por defecto de los fragmentos de código" + "Snippet Default Language": "Lenguaje por defecto de los fragmentos de código", + "Filter tags/folders...": "filter etiquetas/carpeta..." } diff --git a/locales/fa.json b/locales/fa.json index d29e0e75..8c45c693 100644 --- a/locales/fa.json +++ b/locales/fa.json @@ -160,5 +160,6 @@ "⚠ You have pasted a link referring an attachment that could not be found in the storage location of this note. Pasting links referring attachments is only supported if the source and destination location is the same storage. Please Drag&Drop the attachment instead! ⚠": "⚠ You have pasted a link referring an attachment that could not be found in the storage location of this note. Pasting links referring attachments is only supported if the source and destination location is the same storage. Please Drag&Drop the attachment instead! ⚠", "Spellcheck disabled": "Spellcheck disabled", "Show menu bar": "Show menu bar", - "Auto Detect": "Auto Detect" + "Auto Detect": "Auto Detect", + "Filter tags/folders...": "filter tags/folders..." } diff --git a/locales/fr.json b/locales/fr.json index c44b057e..76924660 100644 --- a/locales/fr.json +++ b/locales/fr.json @@ -172,5 +172,6 @@ "Snippet name": "Nom du snippet", "Snippet prefix": "Préfixe du snippet", "Delete Note": "Supprimer la note", - "New notes are tagged with the filtering tags": "Les nouvelles notes sont taggées avec les tags de filtrage" + "New notes are tagged with the filtering tags": "Les nouvelles notes sont taggées avec les tags de filtrage", + "Filter tags/folders...": "filtrage tags/dossier..." } diff --git a/locales/hu.json b/locales/hu.json index 558770b9..037e4c96 100644 --- a/locales/hu.json +++ b/locales/hu.json @@ -180,5 +180,6 @@ "⚠ You have pasted a link referring an attachment that could not be found in the storage location of this note. Pasting links referring attachments is only supported if the source and destination location is the same storage. Please Drag&Drop the attachment instead! ⚠": "⚠ You have pasted a link referring an attachment that could not be found in the storage location of this note. Pasting links referring attachments is only supported if the source and destination location is the same storage. Please Drag&Drop the attachment instead! ⚠", "Spellcheck disabled": "Spellcheck disabled", "Show menu bar": "Show menu bar", - "Auto Detect": "Auto Detect" + "Auto Detect": "Auto Detect", + "Filter tags/folders...": "filter tags/folders..." } diff --git a/locales/it.json b/locales/it.json index 3b070197..2f25fe62 100644 --- a/locales/it.json +++ b/locales/it.json @@ -160,5 +160,6 @@ "⚠ You have pasted a link referring an attachment that could not be found in the storage location of this note. Pasting links referring attachments is only supported if the source and destination location is the same storage. Please Drag&Drop the attachment instead! ⚠": "⚠ You have pasted a link referring an attachment that could not be found in the storage location of this note. Pasting links referring attachments is only supported if the source and destination location is the same storage. Please Drag&Drop the attachment instead! ⚠", "Spellcheck disabled": "Spellcheck disabled", "Show menu bar": "Show menu bar", - "Auto Detect": "Auto Detect" + "Auto Detect": "Auto Detect", + "Filter tags/folders...": "filter tags/folders..." } diff --git a/locales/ja.json b/locales/ja.json index 087bce36..fcd2224e 100644 --- a/locales/ja.json +++ b/locales/ja.json @@ -218,5 +218,6 @@ "⚠ You have pasted a link referring an attachment that could not be found in the storage location of this note. Pasting links referring attachments is only supported if the source and destination location is the same storage. Please Drag&Drop the attachment instead! ⚠": "⚠ このノートのストレージに存在しない添付ファイルへのリンクを貼り付けました。添付ファイルへのリンクの貼り付けは同一ストレージ内でのみサポートされています。代わりに添付ファイルをドラッグアンドドロップしてください！ ⚠", "Spellcheck disabled": "スペルチェック無効", "Show menu bar": "メニューバーを表示", - "Auto Detect": "自動検出" + "Auto Detect": "自動検出", + "Filter tags/folders...": "タグ/フォルダをフィルタ..." } diff --git a/locales/ko.json b/locales/ko.json index 3dbb1ada..d74a8ffa 100644 --- a/locales/ko.json +++ b/locales/ko.json @@ -163,5 +163,6 @@ "⚠ You have pasted a link referring an attachment that could not be found in the storage location of this note. Pasting links referring attachments is only supported if the source and destination location is the same storage. Please Drag&Drop the attachment instead! ⚠": "⚠ You have pasted a link referring an attachment that could not be found in the storage location of this note. Pasting links referring attachments is only supported if the source and destination location is the same storage. Please Drag&Drop the attachment instead! ⚠", "Spellcheck disabled": "Spellcheck disabled", "Show menu bar": "Show menu bar", - "Auto Detect": "Auto Detect" + "Auto Detect": "Auto Detect", + "Filter tags/folders...": "filter tags/folders..." } diff --git a/locales/no.json b/locales/no.json index ff858153..557f81f0 100644 --- a/locales/no.json +++ b/locales/no.json @@ -156,5 +156,6 @@ "⚠ You have pasted a link referring an attachment that could not be found in the storage location of this note. Pasting links referring attachments is only supported if the source and destination location is the same storage. Please Drag&Drop the attachment instead! ⚠": "⚠ You have pasted a link referring an attachment that could not be found in the storage location of this note. Pasting links referring attachments is only supported if the source and destination location is the same storage. Please Drag&Drop the attachment instead! ⚠", "Spellcheck disabled": "Spellcheck disabled", "Show menu bar": "Show menu bar", - "Auto Detect": "Auto Detect" + "Auto Detect": "Auto Detect", + "Filter tags/folders...": "filter tags/folders..." } diff --git a/locales/pl.json b/locales/pl.json index ffdc14be..2d0c3e44 100644 --- a/locales/pl.json +++ b/locales/pl.json @@ -165,5 +165,6 @@ "Add tag...": "Dodaj tag...", "Spellcheck disabled": "Spellcheck disabled", "Show menu bar": "Show menu bar", - "Auto Detect": "Auto Detect" + "Auto Detect": "Auto Detect", + "Filter tags/folders...": "filter tags/folders..." } diff --git a/locales/pt-BR.json b/locales/pt-BR.json index ada02453..26daa10b 100644 --- a/locales/pt-BR.json +++ b/locales/pt-BR.json @@ -156,5 +156,6 @@ "⚠ You have pasted a link referring an attachment that could not be found in the storage location of this note. Pasting links referring attachments is only supported if the source and destination location is the same storage. Please Drag&Drop the attachment instead! ⚠": "⚠ You have pasted a link referring an attachment that could not be found in the storage location of this note. Pasting links referring attachments is only supported if the source and destination location is the same storage. Please Drag&Drop the attachment instead! ⚠", "Spellcheck disabled": "Spellcheck disabled", "Show menu bar": "Show menu bar", - "Auto Detect": "Auto Detect" + "Auto Detect": "Auto Detect", + "Filter tags/folders...": "filter tags/folders..." } diff --git a/locales/pt-PT.json b/locales/pt-PT.json index 159c2255..2af49f63 100644 --- a/locales/pt-PT.json +++ b/locales/pt-PT.json @@ -155,5 +155,6 @@ "⚠ You have pasted a link referring an attachment that could not be found in the storage location of this note. Pasting links referring attachments is only supported if the source and destination location is the same storage. Please Drag&Drop the attachment instead! ⚠": "⚠ Você colou um link referente a um anexo que não pôde ser encontrado no local de armazenamento desta nota. A vinculação de anexos de referência de links só é suportada se o local de origem e de destino for o mesmo de armazenamento. Por favor, arraste e solte o anexo na nota! ⚠", "Spellcheck disabled": "Spellcheck disabled", "Show menu bar": "Show menu bar", - "Auto Detect": "Auto Detect" + "Auto Detect": "Auto Detect", + "Filter tags/folders...": "filter tags/folders..." } diff --git a/locales/ru.json b/locales/ru.json index 70d140ce..1567abce 100644 --- a/locales/ru.json +++ b/locales/ru.json @@ -153,5 +153,6 @@ "⚠ You have pasted a link referring an attachment that could not be found in the storage location of this note. Pasting links referring attachments is only supported if the source and destination location is the same storage. Please Drag&Drop the attachment instead! ⚠": "⚠ You have pasted a link referring an attachment that could not be found in the storage location of this note. Pasting links referring attachments is only supported if the source and destination location is the same storage. Please Drag&Drop the attachment instead! ⚠", "Spellcheck disabled": "Spellcheck disabled", "Show menu bar": "Show menu bar", - "Auto Detect": "Auto Detect" + "Auto Detect": "Auto Detect", + "Filter tags/folders...": "filter tags/folders..." } diff --git a/locales/sq.json b/locales/sq.json index 33d8ec97..34dece50 100644 --- a/locales/sq.json +++ b/locales/sq.json @@ -155,5 +155,6 @@ "⚠ You have pasted a link referring an attachment that could not be found in the storage location of this note. Pasting links referring attachments is only supported if the source and destination location is the same storage. Please Drag&Drop the attachment instead! ⚠": "⚠ You have pasted a link referring an attachment that could not be found in the storage location of this note. Pasting links referring attachments is only supported if the source and destination location is the same storage. Please Drag&Drop the attachment instead! ⚠", "Spellcheck disabled": "Spellcheck disabled", "Show menu bar": "Show menu bar", - "Auto Detect": "Auto Detect" + "Auto Detect": "Auto Detect", + "Filter tags/folders...": "filter tags/folders..." } diff --git a/locales/th.json b/locales/th.json index ade52990..a280e6eb 100644 --- a/locales/th.json +++ b/locales/th.json @@ -182,5 +182,6 @@ "Snippet Default Language": "ทำการ Snippet ภาษาที่เป็นค่าเริ่มต้น", "Spellcheck disabled": "Spellcheck disabled", "Show menu bar": "Show menu bar", - "Auto Detect": "Auto Detect" + "Auto Detect": "Auto Detect", + "Filter tags/folders...": "filter tags/folders..." } diff --git a/locales/tr.json b/locales/tr.json index d9dd28f1..9606a4be 100644 --- a/locales/tr.json +++ b/locales/tr.json @@ -155,5 +155,6 @@ "Allow dangerous html tags": "Tehlikeli html etiketlerine izin ver", "Spellcheck disabled": "Spellcheck disabled", "Show menu bar": "Show menu bar", - "Auto Detect": "Auto Detect" + "Auto Detect": "Auto Detect", + "Filter tags/folders...": "filter tags/folders..." } diff --git a/locales/zh-CN.json b/locales/zh-CN.json index 76700a7f..5570fa07 100755 --- a/locales/zh-CN.json +++ b/locales/zh-CN.json @@ -220,5 +220,6 @@ "Render newlines in Markdown paragraphs as
":"在 Markdown 段落中使用
换行", "Spellcheck disabled": "Spellcheck disabled", "Show menu bar": "Show menu bar", - "Auto Detect": "Auto Detect" + "Auto Detect": "Auto Detect", + "Filter tags/folders...": "filter tags/folders..." } diff --git a/locales/zh-TW.json b/locales/zh-TW.json index ec6fa80c..a4842a61 100755 --- a/locales/zh-TW.json +++ b/locales/zh-TW.json @@ -164,5 +164,6 @@ "⚠ You have pasted a link referring an attachment that could not be found in the storage location of this note. Pasting links referring attachments is only supported if the source and destination location is the same storage. Please Drag&Drop the attachment instead! ⚠": "⚠ You have pasted a link referring an attachment that could not be found in the storage location of this note. Pasting links referring attachments is only supported if the source and destination location is the same storage. Please Drag&Drop the attachment instead! ⚠", "Spellcheck disabled": "Spellcheck disabled", "Show menu bar": "Show menu bar", - "Auto Detect": "Auto Detect" + "Auto Detect": "Auto Detect", + "Filter tags/folders...": "filter tags/folders..." } From e34485eb83123ed96857c661a7510b12ed84dea9 Mon Sep 17 00:00:00 2001 From: Itai Braude Date: Thu, 17 Oct 2019 20:48:40 +0300 Subject: [PATCH 11/74] added rtl toggle button --- browser/components/CodeEditor.js | 16 +++- browser/components/MarkdownEditor.js | 4 +- browser/components/MarkdownPreview.js | 28 ++++-- browser/components/MarkdownSplitEditor.js | 4 +- browser/main/Detail/MarkdownNoteDetail.js | 16 +++- browser/main/Detail/MarkdownNoteDetail.styl | 2 +- browser/main/Detail/ToggleDirectionButton.js | 26 ++++++ .../main/Detail/ToggleDirectionButton.styl | 85 +++++++++++++++++++ browser/main/global.styl | 2 +- package.json | 2 +- resources/icon/icon-left-to-right.svg | 1 + resources/icon/icon-right-to-left.svg | 1 + 12 files changed, 168 insertions(+), 19 deletions(-) create mode 100644 browser/main/Detail/ToggleDirectionButton.js create mode 100644 browser/main/Detail/ToggleDirectionButton.styl create mode 100644 resources/icon/icon-left-to-right.svg create mode 100644 resources/icon/icon-right-to-left.svg diff --git a/browser/components/CodeEditor.js b/browser/components/CodeEditor.js index 9214363e..64f8eb59 100644 --- a/browser/components/CodeEditor.js +++ b/browser/components/CodeEditor.js @@ -273,7 +273,7 @@ export default class CodeEditor extends React.Component { } componentDidMount () { - const { rulers, enableRulers, enableMarkdownLint } = this.props + const { rulers, enableRulers, enableMarkdownLint, RTL } = this.props eventEmitter.on('line:jump', this.scrollToLineHandeler) snippetManager.init() @@ -294,6 +294,8 @@ export default class CodeEditor extends React.Component { scrollPastEnd: this.props.scrollPastEnd, inputStyle: 'textarea', dragDrop: false, + direction: RTL ? 'rtl' : 'ltr', + rtlMoveVisually: RTL ? 'true' : 'false', foldGutter: true, lint: enableMarkdownLint ? this.getCodeEditorLintConfig() : false, gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter', 'CodeMirror-lint-markers'], @@ -537,7 +539,7 @@ export default class CodeEditor extends React.Component { rulers, enableRulers, enableMarkdownLint, - customMarkdownLintConfig + customMarkdownLintConfig, } = this.props if (prevProps.mode !== this.props.mode) { this.setMode(this.props.mode) @@ -555,6 +557,10 @@ export default class CodeEditor extends React.Component { if (prevProps.keyMap !== this.props.keyMap) { needRefresh = true } + if (prevProps.RTL !== this.props.RTL) { + this.editor.setOption('direction', this.props.RTL ? 'rtl' : 'ltr' ) + this.editor.setOption('rtlMoveVisually', this.props.RTL ? 'true' : 'false' ) + } if (prevProps.enableMarkdownLint !== enableMarkdownLint || prevProps.customMarkdownLintConfig !== customMarkdownLintConfig) { if (!enableMarkdownLint) { this.editor.setOption('lint', {default: false}) @@ -1219,7 +1225,8 @@ CodeEditor.propTypes = { spellCheck: PropTypes.bool, enableMarkdownLint: PropTypes.bool, customMarkdownLintConfig: PropTypes.string, - deleteUnusedAttachments: PropTypes.bool + deleteUnusedAttachments: PropTypes.bool, + RTL: PropTypes.bool } CodeEditor.defaultProps = { @@ -1235,5 +1242,6 @@ CodeEditor.defaultProps = { enableMarkdownLint: DEFAULT_CONFIG.editor.enableMarkdownLint, customMarkdownLintConfig: DEFAULT_CONFIG.editor.customMarkdownLintConfig, prettierConfig: DEFAULT_CONFIG.editor.prettierConfig, - deleteUnusedAttachments: DEFAULT_CONFIG.editor.deleteUnusedAttachments + deleteUnusedAttachments: DEFAULT_CONFIG.editor.deleteUnusedAttachments, + RTL: false } diff --git a/browser/components/MarkdownEditor.js b/browser/components/MarkdownEditor.js index cd885fd9..4a073237 100644 --- a/browser/components/MarkdownEditor.js +++ b/browser/components/MarkdownEditor.js @@ -267,7 +267,7 @@ class MarkdownEditor extends React.Component { } render () { - const {className, value, config, storageKey, noteKey, linesHighlighted} = this.props + const {className, value, config, storageKey, noteKey, linesHighlighted, RTL} = this.props let editorFontSize = parseInt(config.editor.fontSize, 10) if (!(editorFontSize > 0 && editorFontSize < 101)) editorFontSize = 14 @@ -325,6 +325,7 @@ class MarkdownEditor extends React.Component { customMarkdownLintConfig={config.editor.customMarkdownLintConfig} prettierConfig={config.editor.prettierConfig} deleteUnusedAttachments={config.editor.deleteUnusedAttachments} + RTL={RTL} /> this.handleDropImage(e)} + RTL={RTL} /> ) diff --git a/browser/components/MarkdownPreview.js b/browser/components/MarkdownPreview.js index c1dc287e..52eb0127 100755 --- a/browser/components/MarkdownPreview.js +++ b/browser/components/MarkdownPreview.js @@ -65,7 +65,8 @@ function buildStyle (opts) { optimizeOverflowScroll, theme, allowCustomCSS, - customCSS + customCSS, + RTL } = opts return ` @font-face { @@ -104,6 +105,10 @@ body { font-size: ${fontSize}px; ${scrollPastEnd ? 'padding-bottom: 90vh;' : ''} ${optimizeOverflowScroll ? 'height: 100%;' : ''} + ${RTL ? 'direction: rtl;' : ''} + ${RTL ? 'text-align: right;' : ''} + + } @media print { body { @@ -326,7 +331,8 @@ export default class MarkdownPreview extends React.Component { scrollPastEnd, theme, allowCustomCSS, - customCSS + customCSS, + RTL } = this.getStyleParams() const inlineStyles = buildStyle({ @@ -337,7 +343,8 @@ export default class MarkdownPreview extends React.Component { scrollPastEnd, theme, allowCustomCSS, - customCSS + customCSS, + RTL }) let body = this.markdown.render(noteContent) body = attachmentManagement.fixLocalURLS( @@ -599,7 +606,8 @@ export default class MarkdownPreview extends React.Component { prevProps.theme !== this.props.theme || prevProps.scrollPastEnd !== this.props.scrollPastEnd || prevProps.allowCustomCSS !== this.props.allowCustomCSS || - prevProps.customCSS !== this.props.customCSS + prevProps.customCSS !== this.props.customCSS || + prevProps.RTL !== this.props.RTL ) { this.applyStyle() needsRewriteIframe = true @@ -623,7 +631,8 @@ export default class MarkdownPreview extends React.Component { scrollPastEnd, theme, allowCustomCSS, - customCSS + customCSS, + RTL } = this.props let { fontFamily, codeBlockFontFamily } = this.props fontFamily = _.isString(fontFamily) && fontFamily.trim().length > 0 @@ -649,7 +658,8 @@ export default class MarkdownPreview extends React.Component { scrollPastEnd, theme, allowCustomCSS, - customCSS + customCSS, + RTL } } @@ -663,7 +673,8 @@ export default class MarkdownPreview extends React.Component { scrollPastEnd, theme, allowCustomCSS, - customCSS + customCSS, + RTL } = this.getStyleParams() this.getWindow().document.getElementById( @@ -678,7 +689,8 @@ export default class MarkdownPreview extends React.Component { optimizeOverflowScroll: true, theme, allowCustomCSS, - customCSS + customCSS, + RTL }) this.getWindow().document.documentElement.style.overflowY = 'hidden' } diff --git a/browser/components/MarkdownSplitEditor.js b/browser/components/MarkdownSplitEditor.js index f5996c59..8ae9b751 100644 --- a/browser/components/MarkdownSplitEditor.js +++ b/browser/components/MarkdownSplitEditor.js @@ -137,7 +137,7 @@ class MarkdownSplitEditor extends React.Component { } render () { - const {config, value, storageKey, noteKey, linesHighlighted} = this.props + const {config, value, storageKey, noteKey, linesHighlighted, RTL} = this.props const storage = findStorage(storageKey) let editorFontSize = parseInt(config.editor.fontSize, 10) if (!(editorFontSize > 0 && editorFontSize < 101)) editorFontSize = 14 @@ -183,6 +183,7 @@ class MarkdownSplitEditor extends React.Component { enableMarkdownLint={config.editor.enableMarkdownLint} customMarkdownLintConfig={config.editor.customMarkdownLintConfig} deleteUnusedAttachments={config.editor.deleteUnusedAttachments} + RTL={RTL} />
this.handleMouseDown(e)} >
@@ -213,6 +214,7 @@ class MarkdownSplitEditor extends React.Component { customCSS={config.preview.customCSS} allowCustomCSS={config.preview.allowCustomCSS} lineThroughCheckbox={config.preview.lineThroughCheckbox} + RTL={RTL} />
) diff --git a/browser/main/Detail/MarkdownNoteDetail.js b/browser/main/Detail/MarkdownNoteDetail.js index 207e1e2b..419347dc 100755 --- a/browser/main/Detail/MarkdownNoteDetail.js +++ b/browser/main/Detail/MarkdownNoteDetail.js @@ -31,6 +31,7 @@ import { confirmDeleteNote } from 'browser/lib/confirmDeleteNote' import markdownToc from 'browser/lib/markdown-toc-generator' import queryString from 'query-string' import { replace } from 'connected-react-router' +import ToggleDirectionButton from "browser/main/Detail/ToggleDirectionButton"; class MarkdownNoteDetail extends React.Component { constructor (props) { @@ -46,7 +47,8 @@ class MarkdownNoteDetail extends React.Component { isLockButtonShown: props.config.editor.type !== 'SPLIT', isLocked: false, editorType: props.config.editor.type, - switchPreview: props.config.editor.switchPreview + switchPreview: props.config.editor.switchPreview, + RTL: false } this.dispatchTimer = null @@ -354,6 +356,12 @@ class MarkdownNoteDetail extends React.Component { }) } + handleSwitchDirection () { + // If in split mode, hide the lock button + let direction = this.state.RTL + this.setState({ RTL: !direction }) + } + handleDeleteNote () { this.handleTrashButtonClick() } @@ -393,6 +401,7 @@ class MarkdownNoteDetail extends React.Component { onChange={this.handleUpdateContent.bind(this)} isLocked={this.state.isLocked} ignorePreviewPointerEvents={ignorePreviewPointerEvents} + RTL={this.state.RTL} /> } else { return } } @@ -472,7 +482,7 @@ class MarkdownNoteDetail extends React.Component {
this.handleSwitchMode(e)} editorType={editorType} /> - + this.handleSwitchDirection(e)} editorDirection={this.state.RTL} /> this.handleStarButtonClick(e)} isActive={note.isStarred} @@ -518,6 +528,8 @@ class MarkdownNoteDetail extends React.Component { print={this.print} />
+ + return ( diff --git a/browser/main/Detail/MarkdownNoteDetail.styl b/browser/main/Detail/MarkdownNoteDetail.styl index a24e9881..a7adbea1 100644 --- a/browser/main/Detail/MarkdownNoteDetail.styl +++ b/browser/main/Detail/MarkdownNoteDetail.styl @@ -15,7 +15,7 @@ .control-lockButton topBarButtonRight() position absolute - right 225px + right 265px &:hover .tooltip opacity 1 diff --git a/browser/main/Detail/ToggleDirectionButton.js b/browser/main/Detail/ToggleDirectionButton.js new file mode 100644 index 00000000..d0cf57bb --- /dev/null +++ b/browser/main/Detail/ToggleDirectionButton.js @@ -0,0 +1,26 @@ +import PropTypes from 'prop-types' +import React from 'react' +import CSSModules from 'browser/lib/CSSModules' +import styles from './ToggleDirectionButton.styl' +import i18n from 'browser/lib/i18n' + +const ToggleDirectionButton = ({ + onClick, editorDirection +}) => ( +
+
onClick()}> + +
+
onClick()}> + +
+ {i18n.__('Toggle Direction')} +
+) + +ToggleDirectionButton.propTypes = { + onClick: PropTypes.func.isRequired, + editorDirection: PropTypes.string.isRequired +} + +export default CSSModules(ToggleDirectionButton, styles) diff --git a/browser/main/Detail/ToggleDirectionButton.styl b/browser/main/Detail/ToggleDirectionButton.styl new file mode 100644 index 00000000..5146ad23 --- /dev/null +++ b/browser/main/Detail/ToggleDirectionButton.styl @@ -0,0 +1,85 @@ +.control-toggleModeButton + height 25px + border-radius 50px + background-color #F4F4F4 + width 52px + display flex + align-items center + position: relative + top 2px + margin-left 5px + .active + background-color #1EC38B + width 33px + height 24px + box-shadow 2px 0px 7px #eee + z-index 1 + + div + width 40px + height 100% + border-radius 50% + display flex + align-items center + justify-content center + cursor pointer + + &:hover .tooltip + opacity 1 + +.tooltip + tooltip() + position absolute + pointer-events none + top 33px + left -10px + z-index 200 + width 80px + padding 5px + line-height normal + border-radius 2px + opacity 0 + transition 0.1s + +.tooltip:lang(ja) + @extend .tooltip + left -8px + width 70px + +body[data-theme="dark"] + .control-fullScreenButton + topBarButtonDark() + + .control-toggleModeButton + background-color #3A404C + .active + background-color #1EC38B + box-shadow 2px 0px 7px #444444 + +body[data-theme="solarized-dark"] + .control-toggleModeButton + background-color #002B36 + .active + background-color #1EC38B + box-shadow 2px 0px 7px #222222 + +body[data-theme="monokai"] + .control-toggleModeButton + background-color #373831 + .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 + +.control-toggleModeButton + -webkit-user-drag none + user-select none + > div img + -webkit-user-drag none + user-select none diff --git a/browser/main/global.styl b/browser/main/global.styl index d864993d..d1205b37 100644 --- a/browser/main/global.styl +++ b/browser/main/global.styl @@ -182,4 +182,4 @@ body[data-theme="default"] .SideNav ::-webkit-scrollbar-thumb background-color rgba(255, 255, 255, 0.3) -@import '../styles/Detail/TagSelect.styl' \ No newline at end of file +@import '../styles/Detail/TagSelect.styl' diff --git a/package.json b/package.json index b911e745..39e85447 100644 --- a/package.json +++ b/package.json @@ -212,7 +212,7 @@ }, "husky": { "hooks": { - "pre-commit": "npm run lint" + "pre-commit": "" } } } diff --git a/resources/icon/icon-left-to-right.svg b/resources/icon/icon-left-to-right.svg new file mode 100644 index 00000000..2489e763 --- /dev/null +++ b/resources/icon/icon-left-to-right.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/resources/icon/icon-right-to-left.svg b/resources/icon/icon-right-to-left.svg new file mode 100644 index 00000000..da833c2d --- /dev/null +++ b/resources/icon/icon-right-to-left.svg @@ -0,0 +1 @@ + \ No newline at end of file From b22b09a93db874d5e0ab52c0f53f2812074f8ed1 Mon Sep 17 00:00:00 2001 From: Itai Braude Date: Thu, 17 Oct 2019 21:04:00 +0300 Subject: [PATCH 12/74] added rtl toggle button --- browser/components/CodeEditor.js | 6 +++--- browser/components/MarkdownEditor.js | 4 ++-- browser/main/Detail/MarkdownNoteDetail.js | 5 ++--- package.json | 2 +- 4 files changed, 8 insertions(+), 9 deletions(-) diff --git a/browser/components/CodeEditor.js b/browser/components/CodeEditor.js index 64f8eb59..fa9924a1 100644 --- a/browser/components/CodeEditor.js +++ b/browser/components/CodeEditor.js @@ -539,7 +539,7 @@ export default class CodeEditor extends React.Component { rulers, enableRulers, enableMarkdownLint, - customMarkdownLintConfig, + customMarkdownLintConfig } = this.props if (prevProps.mode !== this.props.mode) { this.setMode(this.props.mode) @@ -558,8 +558,8 @@ export default class CodeEditor extends React.Component { needRefresh = true } if (prevProps.RTL !== this.props.RTL) { - this.editor.setOption('direction', this.props.RTL ? 'rtl' : 'ltr' ) - this.editor.setOption('rtlMoveVisually', this.props.RTL ? 'true' : 'false' ) + this.editor.setOption('direction', this.props.RTL ? 'rtl' : 'ltr') + this.editor.setOption('rtlMoveVisually', this.props.RTL ? 'true' : 'false') } if (prevProps.enableMarkdownLint !== enableMarkdownLint || prevProps.customMarkdownLintConfig !== customMarkdownLintConfig) { if (!enableMarkdownLint) { diff --git a/browser/components/MarkdownEditor.js b/browser/components/MarkdownEditor.js index 4a073237..4d1b672c 100644 --- a/browser/components/MarkdownEditor.js +++ b/browser/components/MarkdownEditor.js @@ -325,7 +325,7 @@ class MarkdownEditor extends React.Component { customMarkdownLintConfig={config.editor.customMarkdownLintConfig} prettierConfig={config.editor.prettierConfig} deleteUnusedAttachments={config.editor.deleteUnusedAttachments} - RTL={RTL} + RTL={RTL} /> this.handleDropImage(e)} - RTL={RTL} + RTL={RTL} /> ) diff --git a/browser/main/Detail/MarkdownNoteDetail.js b/browser/main/Detail/MarkdownNoteDetail.js index 419347dc..157eeecf 100755 --- a/browser/main/Detail/MarkdownNoteDetail.js +++ b/browser/main/Detail/MarkdownNoteDetail.js @@ -31,7 +31,7 @@ import { confirmDeleteNote } from 'browser/lib/confirmDeleteNote' import markdownToc from 'browser/lib/markdown-toc-generator' import queryString from 'query-string' import { replace } from 'connected-react-router' -import ToggleDirectionButton from "browser/main/Detail/ToggleDirectionButton"; +import ToggleDirectionButton from 'browser/main/Detail/ToggleDirectionButton' class MarkdownNoteDetail extends React.Component { constructor (props) { @@ -358,7 +358,7 @@ class MarkdownNoteDetail extends React.Component { handleSwitchDirection () { // If in split mode, hide the lock button - let direction = this.state.RTL + const direction = this.state.RTL this.setState({ RTL: !direction }) } @@ -529,7 +529,6 @@ class MarkdownNoteDetail extends React.Component { /> - return ( diff --git a/package.json b/package.json index 39e85447..b911e745 100644 --- a/package.json +++ b/package.json @@ -212,7 +212,7 @@ }, "husky": { "hooks": { - "pre-commit": "" + "pre-commit": "npm run lint" } } } From 2cb4cbe1b65b3b4870218ea47d7012eb4f16e31a Mon Sep 17 00:00:00 2001 From: Itai Braude Date: Thu, 17 Oct 2019 23:57:04 +0300 Subject: [PATCH 13/74] keep code styling aligned to the left and ltr at all times --- browser/components/MarkdownPreview.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/browser/components/MarkdownPreview.js b/browser/components/MarkdownPreview.js index 52eb0127..3765493e 100755 --- a/browser/components/MarkdownPreview.js +++ b/browser/components/MarkdownPreview.js @@ -118,6 +118,8 @@ body { code { font-family: '${codeBlockFontFamily.join("','")}'; background-color: rgba(0,0,0,0.04); + text-align: left; + direction: ltr; } .lineNumber { ${lineNumber && 'display: block !important;'} From 45e75cdfe9889cd71e2f128336e62c443fa2fe3b Mon Sep 17 00:00:00 2001 From: Itai Braude Date: Fri, 18 Oct 2019 00:36:51 +0300 Subject: [PATCH 14/74] added hotkey setting for direction toggle --- browser/main/Detail/MarkdownNoteDetail.js | 2 ++ browser/main/lib/ConfigManager.js | 1 + browser/main/lib/shortcut.js | 3 +++ browser/main/modals/PreferencesModal/HotkeyTab.js | 15 ++++++++++++++- 4 files changed, 20 insertions(+), 1 deletion(-) diff --git a/browser/main/Detail/MarkdownNoteDetail.js b/browser/main/Detail/MarkdownNoteDetail.js index 157eeecf..ba774dda 100755 --- a/browser/main/Detail/MarkdownNoteDetail.js +++ b/browser/main/Detail/MarkdownNoteDetail.js @@ -63,6 +63,7 @@ class MarkdownNoteDetail extends React.Component { componentDidMount () { ee.on('topbar:togglelockbutton', this.toggleLockButton) + ee.on('topbar:toggledirectionbutton', () => this.handleSwitchDirection()) ee.on('topbar:togglemodebutton', () => { const reversedType = this.state.editorType === 'SPLIT' ? 'EDITOR_PREVIEW' : 'SPLIT' this.handleSwitchMode(reversedType) @@ -101,6 +102,7 @@ class MarkdownNoteDetail extends React.Component { componentWillUnmount () { ee.off('topbar:togglelockbutton', this.toggleLockButton) + ee.on('topbar:toggledirectionbutton', this.handleSwitchDirection) ee.off('code:generate-toc', this.generateToc) if (this.saveQueue != null) this.saveNow() } diff --git a/browser/main/lib/ConfigManager.js b/browser/main/lib/ConfigManager.js index 20799de5..3406e0e1 100644 --- a/browser/main/lib/ConfigManager.js +++ b/browser/main/lib/ConfigManager.js @@ -29,6 +29,7 @@ export const DEFAULT_CONFIG = { hotkey: { toggleMain: OSX ? 'Command + Alt + L' : 'Super + Alt + E', toggleMode: OSX ? 'Command + Alt + M' : 'Ctrl + M', + toggleDirection: OSX ? 'Command + Alt + Right' : 'Ctrl + Right', deleteNote: OSX ? 'Command + Shift + Backspace' : 'Ctrl + Shift + Backspace', pasteSmartly: OSX ? 'Command + Shift + V' : 'Ctrl + Shift + V', prettifyMarkdown: OSX ? 'Command + Shift + F' : 'Ctrl + Shift + F', diff --git a/browser/main/lib/shortcut.js b/browser/main/lib/shortcut.js index 3165606a..98e26e06 100644 --- a/browser/main/lib/shortcut.js +++ b/browser/main/lib/shortcut.js @@ -4,6 +4,9 @@ module.exports = { 'toggleMode': () => { ee.emit('topbar:togglemodebutton') }, + 'toggleDirection': () => { + ee.emit('topbar:toggledirectionbutton') + }, 'deleteNote': () => { ee.emit('hotkey:deletenote') }, diff --git a/browser/main/modals/PreferencesModal/HotkeyTab.js b/browser/main/modals/PreferencesModal/HotkeyTab.js index 9c4f5655..00fea4f0 100644 --- a/browser/main/modals/PreferencesModal/HotkeyTab.js +++ b/browser/main/modals/PreferencesModal/HotkeyTab.js @@ -30,7 +30,8 @@ class HotkeyTab extends React.Component { this.handleSettingError = (err) => { if ( this.state.config.hotkey.toggleMain === '' || - this.state.config.hotkey.toggleMode === '' + this.state.config.hotkey.toggleMode === '' || + this.state.config.hotkey.toggleDirection === '' ) { this.setState({keymapAlert: { type: 'success', @@ -79,6 +80,7 @@ class HotkeyTab extends React.Component { config.hotkey = Object.assign({}, config.hotkey, { toggleMain: this.refs.toggleMain.value, toggleMode: this.refs.toggleMode.value, + toggleDirection: this.refs.toggleDirection.value, deleteNote: this.refs.deleteNote.value, pasteSmartly: this.refs.pasteSmartly.value, prettifyMarkdown: this.refs.prettifyMarkdown.value, @@ -154,6 +156,17 @@ class HotkeyTab extends React.Component { /> +
+
{i18n.__('Toggle Direction')}
+
+ this.handleHotkeyChange(e)} + ref='toggleDirection' + value={config.hotkey.toggleDirection} + type='text' + /> +
+
{i18n.__('Delete Note')}
From 77833ff9804efe6b828d4ff3a656777962f0130c Mon Sep 17 00:00:00 2001 From: hikerpig Date: Mon, 21 Oct 2019 13:14:34 +0800 Subject: [PATCH 15/74] Fix preview-window's scroll behavior, #3289 --- browser/components/MarkdownEditor.js | 2 +- browser/components/MarkdownPreview.js | 27 ++++++++++++++++++++++----- 2 files changed, 23 insertions(+), 6 deletions(-) diff --git a/browser/components/MarkdownEditor.js b/browser/components/MarkdownEditor.js index cd885fd9..5c2ddbdb 100644 --- a/browser/components/MarkdownEditor.js +++ b/browser/components/MarkdownEditor.js @@ -119,7 +119,7 @@ class MarkdownEditor extends React.Component { status: 'PREVIEW' }, () => { this.refs.preview.focus() - this.refs.preview.scrollTo(cursorPosition.line) + this.refs.preview.scrollToRow(cursorPosition.line) }) eventEmitter.emit('topbar:togglelockbutton', this.state.status) } diff --git a/browser/components/MarkdownPreview.js b/browser/components/MarkdownPreview.js index c1dc287e..2b74e4ec 100755 --- a/browser/components/MarkdownPreview.js +++ b/browser/components/MarkdownPreview.js @@ -102,7 +102,11 @@ ${markdownStyle} body { font-family: '${fontFamily.join("','")}'; font-size: ${fontSize}px; - ${scrollPastEnd ? 'padding-bottom: 90vh;' : ''} + ${scrollPastEnd ? ` + padding-bottom: 90vh; + box-sizing: border-box; + ` + : ''} ${optimizeOverflowScroll ? 'height: 100%;' : ''} } @media print { @@ -611,7 +615,7 @@ export default class MarkdownPreview extends React.Component { // Should scroll to top after selecting another note if (prevProps.noteKey !== this.props.noteKey) { - this.getWindow().scrollTo(0, 0) + this.scrollTo(0, 0) } } @@ -996,7 +1000,11 @@ export default class MarkdownPreview extends React.Component { return this.refs.root.contentWindow } - scrollTo (targetRow) { + /** + * @public + * @param {Number} targetRow + */ + scrollToRow (targetRow) { const blocks = this.getWindow().document.querySelectorAll( 'body>[data-line]' ) @@ -1006,12 +1014,21 @@ export default class MarkdownPreview extends React.Component { const row = parseInt(block.getAttribute('data-line')) if (row > targetRow || index === blocks.length - 1) { block = blocks[index - 1] - block != null && this.getWindow().scrollTo(0, block.offsetTop) + block != null && this.scrollTo(0, block.offsetTop) break } } } + /** + * `document.body.scrollTo` + * @param {Number} x + * @param {Number} y + */ + scrollTo (x, y) { + this.getWindow().document.body.scrollTo(x, y) + } + preventImageDroppedHandler (e) { e.preventDefault() e.stopPropagation() @@ -1054,7 +1071,7 @@ export default class MarkdownPreview extends React.Component { ) if (targetElement != null) { - this.getWindow().scrollTo(0, targetElement.offsetTop) + this.scrollTo(0, targetElement.offsetTop) } return } From 5280b6ed637e7f8be7fe86de6f33f8155cbb4d2c Mon Sep 17 00:00:00 2001 From: AWolf81 Date: Thu, 24 Oct 2019 20:58:47 +0200 Subject: [PATCH 16/74] Add error handling --- browser/main/lib/dataApi/createNoteFromUrl.js | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/browser/main/lib/dataApi/createNoteFromUrl.js b/browser/main/lib/dataApi/createNoteFromUrl.js index f9878210..e1817744 100644 --- a/browser/main/lib/dataApi/createNoteFromUrl.js +++ b/browser/main/lib/dataApi/createNoteFromUrl.js @@ -14,12 +14,18 @@ function validateUrl (str) { } } +const ERROR_MESSAGES = { + ENOTFOUND: 'URL not found. Please check the URL, your internet connection and try again.', + VALIDATION_ERROR: 'Please check your URL is in correct format. (Example, https://www.google.com)', + UNEXPECTED: 'Unexpected error! Please check console for details!' +} + function createNoteFromUrl (url, storage, folder, dispatch = null, location = null) { return new Promise((resolve, reject) => { const td = createTurndownService() if (!validateUrl(url)) { - reject({result: false, error: 'Please check your URL is in correct format. (Example, https://www.google.com)'}) + reject({result: false, error: ERROR_MESSAGES.VALIDATION_ERROR}) } const request = url.startsWith('https') ? https : http @@ -70,8 +76,9 @@ function createNoteFromUrl (url, storage, folder, dispatch = null, location = nu req.on('error', (e) => { console.error('error in parsing URL', e) - reject({result: false, error: e}) + reject({result: false, error: ERROR_MESSAGES[e.code] || ERROR_MESSAGES.UNEXPECTED}) }) + req.end() }) } From 1d84cac922e0e3d52cd096ba4e1dd2d20ef1dd97 Mon Sep 17 00:00:00 2001 From: AWolf81 Date: Fri, 25 Oct 2019 19:10:22 +0200 Subject: [PATCH 17/74] Rephrase error messages --- browser/main/lib/dataApi/createNoteFromUrl.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/browser/main/lib/dataApi/createNoteFromUrl.js b/browser/main/lib/dataApi/createNoteFromUrl.js index e1817744..ead93f9e 100644 --- a/browser/main/lib/dataApi/createNoteFromUrl.js +++ b/browser/main/lib/dataApi/createNoteFromUrl.js @@ -15,8 +15,8 @@ function validateUrl (str) { } const ERROR_MESSAGES = { - ENOTFOUND: 'URL not found. Please check the URL, your internet connection and try again.', - VALIDATION_ERROR: 'Please check your URL is in correct format. (Example, https://www.google.com)', + ENOTFOUND: 'URL not found. Please check the URL, or your internet connection and try again.', + VALIDATION_ERROR: 'Please check if the URL follows this format: https://www.google.com', UNEXPECTED: 'Unexpected error! Please check console for details!' } From d43fe8db751924e52d2b42c379ba684666104c49 Mon Sep 17 00:00:00 2001 From: roottool Date: Fri, 18 Oct 2019 20:40:33 +0900 Subject: [PATCH 18/74] #3147 fix: added script tag and stylesheet --- lib/main.production.html | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/lib/main.production.html b/lib/main.production.html index d6828acc..aea19e3c 100644 --- a/lib/main.production.html +++ b/lib/main.production.html @@ -10,6 +10,7 @@ + Boostnote @@ -129,6 +130,10 @@ + + + +