mirror/Notes
1
0
Fork 0
mirror of https://github.com/TriliumNext/Notes.git synced 2026-05-12 15:18:27 -05: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
Download Patch File Download Diff File Expand all files Collapse all files
src/public/app/widgets/buttons/button_widget.js
+2 -4
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);
src/public/app/widgets/section_widgets/link_map.js
+29 -7
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();
src/public/app/widgets/standard_top_widget.js
-112
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();
}
}
src/public/app/widgets/tab_row.js
+7 -10
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;
src/public/stylesheets/themes.css
+21 -41
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 {
src/public/stylesheets/tree.css
+3 -3
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 {