zadam/trilium
1
1
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2024-09-20 15:45:58 +08:00
Code Issues Packages Projects Releases Wiki Activity

dark theme tweaks

Browse source
This commit is contained in:
zadam 2021-06-02 21:23:40 +02:00
parent 4c64bd852e
commit f8dd8ebf1a
7 changed files with 113 additions and 210 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

84
package-lock.json generated
View file

@ -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",

6
src/public/app/widgets/buttons/button_widget.js
View file

@ -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);

36
src/public/app/widgets/section_widgets/link_map.js
View file

@ -22,12 +22,19 @@ const TPL = `
font-size: 180%;
z-index: 1000;
}
.style-resolver {
color: var(--muted-text-color);
display: none;
}
</style>
<button class="bx bx-arrow-to-bottom icon-action open-full-button" title="Open full"></button>
<button class="bx bx-arrow-to-top icon-action collapse-button" style="display: none;" title="Collapse to normal size"></button>
<div class="link-map-container"></div>
<div class="style-resolver"></div>
</div>`;
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();

112
src/public/app/widgets/standard_top_widget.js
View file

@ -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 = `
<div class="standard-top-widget">
<style>
.standard-top-widget {
background-color: var(--header-background-color);
display: flex;
align-items: center;
padding-top: 4px;
height: 35px;
}
.standard-top-widget > div {
flex-shrink: 0; /* fixes https://github.com/zadam/trilium/issues/1745 */
}
.standard-top-widget button.noborder {
padding: 1px 5px 1px 5px;
font-size: 90%;
margin-bottom: 2px;
margin-top: 2px;
margin-right: 8px;
border-color: transparent !important;
}
.standard-top-widget button.btn-sm .bx {
position: relative;
top: 2px;
font-size: 120%;
}
.standard-top-widget button:hover {
border-color: var(--button-border-color) !important;
}
</style>
<div style="flex-grow: 100; display: flex;">
<button class="btn btn-sm noborder" data-trigger-command="createNoteIntoInbox">
<span class="bx bx-file-blank"></span>
New note
</button>
<button class="btn btn-sm noborder" data-trigger-command="searchNotes">
<span class="bx bx-search"></span>
Search
</button>
<button class="btn btn-sm noborder" data-trigger-command="jumpToNote">
<span class="bx bx-send"></span>
Jump to note
</button>
<button class="btn btn-sm noborder" data-trigger-command="showRecentChanges">
<span class="bx bx-history"></span>
Recent changes
</button>
<button class="btn btn-sm enter-protected-session-button noborder"
title="Enter protected session to be able to find and view protected notes">
<span class="bx bx-log-in"></span>
Enter protected session
</button>
<button class="btn btn-sm leave-protected-session-button noborder"
title="Leave protected session so that protected notes are not accessible any more.">
<span class="bx bx-log-out"></span>
Leave protected session
</button>
</div>
<div id="plugin-buttons"></div>
</div>`;
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();
}
}

17
src/public/app/widgets/tab_row.js
View file

@ -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;

62
src/public/stylesheets/themes.css
View file

@ -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 {

6
src/public/stylesheets/tree.css
View file

@ -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 {