From f8dd8ebf1a30f6e14166d9f2dee584e392d50da3 Mon Sep 17 00:00:00 2001 From: zadam Date: Wed, 2 Jun 2021 21:23:40 +0200 Subject: [PATCH] dark theme tweaks --- package-lock.json | 84 +++++++------ .../app/widgets/buttons/button_widget.js | 6 +- .../app/widgets/section_widgets/link_map.js | 36 ++++-- src/public/app/widgets/standard_top_widget.js | 112 ------------------ src/public/app/widgets/tab_row.js | 17 ++- src/public/stylesheets/themes.css | 62 ++++------ src/public/stylesheets/tree.css | 6 +- 7 files changed, 113 insertions(+), 210 deletions(-) delete mode 100644 src/public/app/widgets/standard_top_widget.js diff --git a/package-lock.json b/package-lock.json index 169677b74..fda11afa6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -711,9 +711,9 @@ "dev": true }, "@types/eslint": { - "version": "7.2.11", - "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-7.2.11.tgz", - "integrity": "sha512-WYhv//5K8kQtsSc9F1Kn2vHzhYor6KpwPbARH7hwYe3C3ETD0EVx/3P5qQybUoaBEuUa9f/02JjBiXFWalYUmw==", + "version": "7.2.13", + "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-7.2.13.tgz", + "integrity": "sha512-LKmQCWAlnVHvvXq4oasNUMTJJb2GwSyTY8+1C7OH5ILR8mPLaljv1jxL1bXW3xB3jFbQxTKxJAvI8PyjB09aBg==", "dev": true, "requires": { "@types/estree": "*", @@ -1038,9 +1038,9 @@ } }, "acorn": { - "version": "8.2.2", - "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.2.2.tgz", - "integrity": "sha512-VrMS8kxT0e7J1EX0p6rI/E0FbfOVcvBpbIqHThFv+f8YrZIlMfVotYcXKVPmTvPW8sW5miJzfUFrrvthUZg8VQ==", + "version": "8.3.0", + "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.3.0.tgz", + "integrity": "sha512-tqPKHZ5CaBJw0Xmy0ZZvLs1qTV+BNFSyvn77ASXkpBNfIRk8ev26fKrD9iLGwGA9zedPao52GSHzq8lyZG0NUw==", "dev": true }, "acorn-globals": { @@ -1943,9 +1943,9 @@ "dev": true }, "caniuse-lite": { - "version": "1.0.30001228", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001228.tgz", - "integrity": "sha512-QQmLOGJ3DEgokHbMSA8cj2a+geXqmnpyOFT0lhQV6P3/YOJvGDEwoedcwxEQ30gJIwIIunHIicunJ2rzK5gB2A==", + "version": "1.0.30001233", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001233.tgz", + "integrity": "sha512-BmkbxLfStqiPA7IEzQpIk0UFZFf3A4E6fzjPJ6OR+bFC2L8ES9J8zGA/asoi47p8XDVkev+WJo2I2Nc8c/34Yg==", "dev": true }, "caseless": { @@ -3823,9 +3823,9 @@ } }, "electron-to-chromium": { - "version": "1.3.735", - "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.735.tgz", - "integrity": "sha512-cp7MWzC3NseUJV2FJFgaiesdrS+A8ZUjX5fLAxdRlcaPDkaPGFplX930S5vf84yqDp4LjuLdKouWuVOTwUfqHQ==", + "version": "1.3.743", + "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.743.tgz", + "integrity": "sha512-K2wXfo9iZQzNJNx67+Pld0DRF+9bYinj62gXCdgPhcu1vidwVuLPHQPPFnCdO55njWigXXpfBiT90jGUPbw8Zg==", "dev": true }, "electron-window-state": { @@ -5192,14 +5192,25 @@ "dev": true }, "jest-worker": { - "version": "26.6.2", - "resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-26.6.2.tgz", - "integrity": "sha512-KWYVV1c4i+jbMpaBC+U++4Va0cp8OisU185o73T1vo99hqi7w8tSJfUXYswwqqrjzwxa6KpRK54WhPvwf5w6PQ==", + "version": "27.0.2", + "resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-27.0.2.tgz", + "integrity": "sha512-EoBdilOTTyOgmHXtw/cPc+ZrCA0KJMrkXzkrPGNwLmnvvlN1nj7MPrxpT7m+otSv2e1TLaVffzDnE/LB14zJMg==", "dev": true, "requires": { "@types/node": "*", "merge-stream": "^2.0.0", - "supports-color": "^7.0.0" + "supports-color": "^8.0.0" + }, + "dependencies": { + "supports-color": { + "version": "8.1.1", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz", + "integrity": "sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==", + "dev": true, + "requires": { + "has-flag": "^4.0.0" + } + } } }, "jimp": { @@ -5799,11 +5810,18 @@ "integrity": "sha512-QBmA/G2y+IfeS4oktet3qRZ+P5kPhCKRXxXnQEudYqUaEioAU1/Lq2us3D/t1Jfo4hE9REQPrbB7K5sOczJVIw==" }, "mime-types": { - "version": "2.1.30", - "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.30.tgz", - "integrity": "sha512-crmjA4bLtR8m9qLpHvgxSChT+XoSlZi8J4n/aIdn3z92e/U47Z0V/yl+Wh9W046GgFVAmoNR/fmdbZYcSSIUeg==", + "version": "2.1.31", + "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.31.tgz", + "integrity": "sha512-XGZnNzm3QvgKxa8dpzyhFTHmpP3l5YNusmne07VUOXxou9CqUqYa/HBy124RqtVh/O2pECas/MOcsDgpilPOPg==", "requires": { - "mime-db": "1.47.0" + "mime-db": "1.48.0" + }, + "dependencies": { + "mime-db": { + "version": "1.48.0", + "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.48.0.tgz", + "integrity": "sha512-FM3QwxV+TnZYQ2aRqhlKBMHxk10lTbMt3bBkMAp54ddrNeVSfcQYOOKuGuy3Ddrm38I04If834fOUSq1yzslJQ==" + } } }, "mimic-fn": { @@ -7825,12 +7843,12 @@ } }, "terser-webpack-plugin": { - "version": "5.1.2", - "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-5.1.2.tgz", - "integrity": "sha512-6QhDaAiVHIQr5Ab3XUWZyDmrIPCHMiqJVljMF91YKyqwKkL5QHnYMkrMBy96v9Z7ev1hGhSEw1HQZc2p/s5Z8Q==", + "version": "5.1.3", + "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-5.1.3.tgz", + "integrity": "sha512-cxGbMqr6+A2hrIB5ehFIF+F/iST5ZOxvOmy9zih9ySbP1C2oEWQSOUS+2SNBTjzx5xLKO4xnod9eywdfq1Nb9A==", "dev": true, "requires": { - "jest-worker": "^26.6.2", + "jest-worker": "^27.0.2", "p-limit": "^3.1.0", "schema-utils": "^3.0.0", "serialize-javascript": "^5.0.1", @@ -8257,9 +8275,9 @@ "integrity": "sha512-qBIvFLGiBpLjfwmYAaHPXsn+ho5xZnGvyGvsarywGNc8VyQJUMHJ8OBKGGrPER0okBeMDaan4mNBlgBROxuI8w==" }, "webpack": { - "version": "5.37.1", - "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.37.1.tgz", - "integrity": "sha512-btZjGy/hSjCAAVHw+cKG+L0M+rstlyxbO2C+BOTaQ5/XAnxkDrP5sVbqWhXgo4pL3X2dcOib6rqCP20Zr9PLow==", + "version": "5.38.1", + "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.38.1.tgz", + "integrity": "sha512-OqRmYD1OJbHZph6RUMD93GcCZy4Z4wC0ele4FXyYF0J6AxO1vOSuIlU1hkS/lDlR9CDYBz64MZRmdbdnFFoT2g==", "dev": true, "requires": { "@types/eslint-scope": "^3.7.0", @@ -8272,7 +8290,7 @@ "chrome-trace-event": "^1.0.2", "enhanced-resolve": "^5.8.0", "es-module-lexer": "^0.4.0", - "eslint-scope": "^5.1.1", + "eslint-scope": "5.1.1", "events": "^3.2.0", "glob-to-regexp": "^0.4.1", "graceful-fs": "^4.2.4", @@ -8283,8 +8301,8 @@ "schema-utils": "^3.0.0", "tapable": "^2.1.1", "terser-webpack-plugin": "^5.1.1", - "watchpack": "^2.0.0", - "webpack-sources": "^2.1.1" + "watchpack": "^2.2.0", + "webpack-sources": "^2.3.0" } }, "webpack-cli": { @@ -8327,9 +8345,9 @@ } }, "webpack-sources": { - "version": "2.2.0", - "resolved": "https://registry.npmjs.org/webpack-sources/-/webpack-sources-2.2.0.tgz", - "integrity": "sha512-bQsA24JLwcnWGArOKUxYKhX3Mz/nK1Xf6hxullKERyktjNMC4x8koOeaDNTA2fEJ09BdWLbM/iTW0ithREUP0w==", + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/webpack-sources/-/webpack-sources-2.3.0.tgz", + "integrity": "sha512-WyOdtwSvOML1kbgtXbTDnEW0jkJ7hZr/bDByIwszhWd/4XX1A3XMkrbFMsuH4+/MfLlZCUzlAdg4r7jaGKEIgQ==", "dev": true, "requires": { "source-list-map": "^2.0.1", diff --git a/src/public/app/widgets/buttons/button_widget.js b/src/public/app/widgets/buttons/button_widget.js index 88ce6fef8..fdf0832b0 100644 --- a/src/public/app/widgets/buttons/button_widget.js +++ b/src/public/app/widgets/buttons/button_widget.js @@ -21,12 +21,10 @@ export default class ButtonWidget extends NoteContextAwareWidget { this.$widget = $(TPL); this.overflowing(); - if (this.settings.command) { - this.$widget.on("click", () => this.triggerCommand(this.settings.command)); - } - if (this.settings.onClick) { this.$widget.on("click", () => this.settings.onClick(this)); + } else { + this.$widget.on("click", () => this.triggerCommand(this.settings.command)); } this.$widget.attr("data-placement", this.settings.titlePlacement); diff --git a/src/public/app/widgets/section_widgets/link_map.js b/src/public/app/widgets/section_widgets/link_map.js index 51a037d21..cf285bb43 100644 --- a/src/public/app/widgets/section_widgets/link_map.js +++ b/src/public/app/widgets/section_widgets/link_map.js @@ -22,12 +22,19 @@ const TPL = ` font-size: 180%; z-index: 1000; } + + .style-resolver { + color: var(--muted-text-color); + display: none; + }
+ +
`; export default class LinkMapWidget extends NoteContextAwareWidget { @@ -69,6 +76,8 @@ export default class LinkMapWidget extends NoteContextAwareWidget { this.openState = 'small'; }); + this.$styleResolver = this.$widget.find('.style-resolver'); + this.overflowing(); window.addEventListener('resize', () => { @@ -123,6 +132,12 @@ export default class LinkMapWidget extends NoteContextAwareWidget { this.$container.empty(); + this.css = { + fontFamily: this.$container.css("font-family"), + textColor: this.rgb2hex(this.$container.css("color")), + mutedTextColor: this.rgb2hex(this.$styleResolver.css("color")) + }; + await libraryLoader.requireLibrary(libraryLoader.FORCE_GRAPH); this.graph = ForceGraph()(this.$container[0]) @@ -146,7 +161,7 @@ export default class LinkMapWidget extends NoteContextAwareWidget { .linkDirectionalArrowLength(4) .linkDirectionalArrowRelPos(1) .linkWidth(2) - .linkColor("#ddd") + .linkColor(() => this.css.mutedTextColor) .d3VelocityDecay(0.2) .onNodeClick(node => this.nodeClicked(node)); @@ -243,10 +258,10 @@ export default class LinkMapWidget extends NoteContextAwareWidget { return; } - ctx.font = '3px MontserratLight'; + ctx.font = '3px ' + this.css.fontFamily; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; - ctx.fillStyle = "grey"; + ctx.fillStyle = this.css.mutedTextColor; const {source, target} = link; @@ -285,15 +300,15 @@ export default class LinkMapWidget extends NoteContextAwareWidget { } if (!node.expanded) { - ctx.fillStyle = "white"; - ctx.font = 10 + 'px MontserratLight'; + ctx.fillStyle = this.css.textColor; + ctx.font = 10 + 'px ' + this.css.fontFamily; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; ctx.fillText("+", x, y + 0.5); } - ctx.fillStyle = "#555"; - ctx.font = 5 + 'px MontserratLight'; + ctx.fillStyle = this.css.textColor; + ctx.font = 5 + 'px ' + this.css.fontFamily; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; @@ -319,6 +334,13 @@ export default class LinkMapWidget extends NoteContextAwareWidget { return colour; } + rgb2hex(rgb) { + return `#${rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/) + .slice(1) + .map(n => parseInt(n, 10).toString(16).padStart(2, '0')) + .join('')}` + } + entitiesReloadedEvent({loadResults}) { if (loadResults.getAttributes().find(attr => attr.type === 'relation' && (attr.noteId === this.noteId || attr.value === this.noteId))) { this.refresh(); diff --git a/src/public/app/widgets/standard_top_widget.js b/src/public/app/widgets/standard_top_widget.js deleted file mode 100644 index 5e346ef9c..000000000 --- a/src/public/app/widgets/standard_top_widget.js +++ /dev/null @@ -1,112 +0,0 @@ -import BasicWidget from "./basic_widget.js"; -import HistoryNavigationWidget from "./history_navigation.js"; -import protectedSessionHolder from "../services/protected_session_holder.js"; -import protectedSessionService from "../services/protected_session.js"; -import QuickSearchWidget from "./quick_search.js"; - -const TPL = ` -
- - -
- - - - - - - - - - - -
- -
-
`; - -export default class StandardTopWidget extends BasicWidget { - doRender() { - this.$widget = $(TPL); - this.overflowing(); - - const historyNavigationWidget = new HistoryNavigationWidget(); - this.child(historyNavigationWidget); - - this.$widget.prepend(historyNavigationWidget.render()); - - const quickSearchWidget = new QuickSearchWidget(); - this.child(quickSearchWidget); - - this.$widget.append(quickSearchWidget.render()); - - this.$enterProtectedSessionButton = this.$widget.find(".enter-protected-session-button"); - this.$enterProtectedSessionButton.on('click', protectedSessionService.enterProtectedSession); - this.$enterProtectedSessionButton.toggle(!protectedSessionHolder.isProtectedSessionAvailable()); - - this.$leaveProtectedSessionButton = this.$widget.find(".leave-protected-session-button"); - this.$leaveProtectedSessionButton.on('click', protectedSessionService.leaveProtectedSession); - this.$leaveProtectedSessionButton.toggle(protectedSessionHolder.isProtectedSessionAvailable()); - - return this.$widget; - } - - protectedSessionStartedEvent() { - this.$enterProtectedSessionButton.hide(); - this.$leaveProtectedSessionButton.show(); - } -} diff --git a/src/public/app/widgets/tab_row.js b/src/public/app/widgets/tab_row.js index ef3a8fb02..f28d39a02 100644 --- a/src/public/app/widgets/tab_row.js +++ b/src/public/app/widgets/tab_row.js @@ -79,9 +79,9 @@ const TAB_ROW_TPL = ` .note-new-tab { position: absolute; left: 0; - width: 40px; - height: 40px; - padding: 3px; + width: 36px; + height: 36px; + padding: 1px; border: 0; margin: 0; z-index: 1; @@ -130,12 +130,14 @@ const TAB_ROW_TPL = ` border-radius: 8px; overflow: hidden; pointer-events: all; - background-color: var(--accented-background-color); + color: var(--inactive-tab-text-color); + background-color: var(--inactive-tab-background-color); } .note-tab-row .note-tab[active] .note-tab-wrapper { font-weight: bold; - background-color : var(--active-item-background-color); + color: var(--active-tab-text-color); + background-color : var(--active-tab-background-color); } .note-tab-row .note-tab[is-mini] .note-tab-wrapper { @@ -148,7 +150,6 @@ const TAB_ROW_TPL = ` vertical-align: top; overflow: hidden; white-space: nowrap; - color: var(--muted-text-color); } .note-tab-row .note-tab .note-tab-icon { @@ -161,10 +162,6 @@ const TAB_ROW_TPL = ` margin-left: 0; } - .note-tab-row .note-tab[active] .note-tab-title { - color: var(--main-text-color); - } - .note-tab-row .note-tab .note-tab-drag-handle { position: absolute; top: 0; diff --git a/src/public/stylesheets/themes.css b/src/public/stylesheets/themes.css index 08a9a2336..63cf27cb6 100644 --- a/src/public/stylesheets/themes.css +++ b/src/public/stylesheets/themes.css @@ -12,7 +12,6 @@ --main-border-color: #ccc; --accented-background-color: #f5f5f5; --more-accented-background-color: #ddd; - --header-background-color: #fff; --button-background-color: transparent; --button-disabled-background-color: #ddd; --button-border-color: #ddd; @@ -41,63 +40,34 @@ --launcher-sidebar-background-color: #F3F3F3; --launcher-sidebar-text-color: #333; -} -body.theme-black { - --main-background-color: black; - --main-text-color: white; - --main-border-color: #ddd; - --accented-background-color: #222; - --more-accented-background-color: #444; - --header-background-color: black; - --button-background-color: #333; - --button-border-color: #444; - --button-text-color: white; - --button-border-radius: 5px; - --primary-button-background-color: #888; - --primary-button-text-color: white; - --primary-button-border-color: #999; - --muted-text-color: #ccc; - --input-text-color: white; - --input-background-color: black; - --hover-item-text-color: black; - --hover-item-background-color: #aaa; - --active-item-text-color: black; - --active-item-background-color: #ccc; - --menu-text-color: white; - --menu-background-color: #222; - --tooltip-background-color: black; - --link-color: lightskyblue; - --modal-background-color: black; - --modal-backdrop-color: #444; - --scrollbar-border-color: #888; -} + --active-tab-background-color: #ddd; + --active-tab-text-color: black; -body.theme-black .CodeMirror { - filter: invert(100%) hue-rotate(180deg); + --inactive-tab-background-color: #f5f5f5; + --inactive-tab-text-color: #666; } body.theme-dark { --main-background-color: #333; - --main-text-color: white; + --main-text-color: #ccc; --main-border-color: #aaa; --accented-background-color: #555; --more-accented-background-color: #777; - --header-background-color: #333; --button-background-color: transparent; - --button-border-color: transparent; + --button-border-color: #ccc; --button-text-color: currentColor; --button-border-radius: 5px; --primary-button-background-color: #888; --primary-button-text-color: white; --primary-button-border-color: #999; - --muted-text-color: #ccc; - --input-text-color: white; + --muted-text-color: #bbb; + --input-text-color: #ccc; --input-background-color: #333; --hover-item-text-color: black; --hover-item-background-color: #333; --active-item-text-color: black; - --active-item-background-color: #999; + --active-item-background-color: #777; --menu-text-color: white; --menu-background-color: #222; --tooltip-background-color: #333; @@ -107,10 +77,20 @@ body.theme-dark { --scrollbar-border-color: #888; --tree-sidebar-background-color: #1f1f1f; - --tree-sidebar-text-color: #807c7c; + --tree-sidebar-text-color: #8D8888; --launcher-sidebar-background-color: #1f1f1f; - --launcher-sidebar-text-color: #807c7c; + --launcher-sidebar-text-color: #8D8888; + + --active-tab-background-color: #666; + --active-tab-text-color: #ccc; + + --inactive-tab-background-color: #444; + --inactive-tab-text-color: #bbb; +} + +body.theme-dark ::-webkit-calendar-picker-indicator { + filter: invert(1); } body.theme-dark .CodeMirror { diff --git a/src/public/stylesheets/tree.css b/src/public/stylesheets/tree.css index ad7ba2e68..9e356d9aa 100644 --- a/src/public/stylesheets/tree.css +++ b/src/public/stylesheets/tree.css @@ -15,7 +15,8 @@ ul.fancytree-container { } .fancytree-node { - padding: 5px; + padding: 4px; + border: 1px solid transparent; display: block; cursor: pointer; overflow: hidden; @@ -128,9 +129,8 @@ span.fancytree-selected { } span.fancytree-node:hover { - background-color: var(--active-item-background-color) !important; border-radius: 5px; - border: 0; + border: 1px solid var(--main-border-color); } .fancytree-title:hover, span.fancytree-node:hover .fancytree-title {