Tools/Notes
1
0
Fork 0
mirror of https://github.com/TriliumNext/Notes.git synced 2025-07-27 18:12:29 +08:00
Code Issues Packages Projects Releases Wiki Activity

client: note map: improve the appearance

Browse Source
This commit is contained in:
Adorian Doran 2025-02-23 06:17:57 +02:00
parent 2380d0af85
commit 1dfa4a8bc2
1 changed files with 52 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

68
src/public/app/widgets/note_map.ts
View File

@ -12,7 +12,7 @@ import type FNote from "../entities/fnote.js";
const esc = utils.escapeHtml; const esc = utils.escapeHtml;
const TPL = `<div class="note-map-widget" style="position: relative;"> const TPL = `<div class="note-map-widget">
<style> <style>
.note-detail-note-map { .note-detail-note-map {
height: 100%; height: 100%;
@ -34,60 +34,76 @@ const TPL = `<div class="note-map-widget" style="position: relative;">
/* Style Ui Element to Drag Nodes */ /* Style Ui Element to Drag Nodes */
.fixnodes-type-switcher { .fixnodes-type-switcher {
position: absolute; position: absolute;
top: 10px; display: flex;
left: 45%; align-items: center;
bottom: 10px;
left: 10px;
z-index: 10; /* should be below dropdown (note actions) */ z-index: 10; /* should be below dropdown (note actions) */
border-radius:0.2rem; border-radius: .2rem;
}
.fixnodes-type-switcher button.toggled {
background: var(--active-item-background-color);
color: var(--active-item-text-color);
} }
/* Start of styling the slider */ /* Start of styling the slider */
input[type="range"] { .fixnodes-type-switcher input[type="range"] {
/* removing default appearance */ /* removing default appearance */
-webkit-appearance: none; -webkit-appearance: none;
appearance: none; appearance: none;
margin-left: 15px; margin-left: 15px;
width:50% width: 150px;
} }
/* Changing slider tracker */ /* Changing slider tracker */
input[type="range"]::-webkit-slider-runnable-track { .fixnodes-type-switcher input[type="range"]::-webkit-slider-runnable-track {
height: 6px; height: 4px;
background: #ccc; background-color: var(--main-border-color);
border-radius: 16px; border-radius: 4px;
} }
/* Changing Slider Thumb */ /* Changing Slider Thumb */
input[type="range"]::-webkit-slider-thumb { .fixnodes-type-switcher input[type="range"]::-webkit-slider-thumb {
/* removing default appearance */ /* removing default appearance */
-webkit-appearance: none; -webkit-appearance: none;
appearance: none; appearance: none;
/* creating a custom design */ /* creating a custom design */
height: 15px; height: 15px;
width: 15px; width: 15px;
margin-top:-4px; margin-top:-5px;
background-color: #661822; background-color: var(--accented-background-color);
border: 1px solid var(--main-text-color);
border-radius: 50%; border-radius: 50%;
}
.fixnodes-type-switcher input[type="range"]::-moz-range-track {
background-color: var(--main-border-color);
border-radius: 4px;
}
.fixnodes-type-switcher input[type="range"]::-moz-range-thumb {
background-color: var(--accented-background-color);
border-color: var(--main-text-color);
height: 10px;
width: 10px;
}
/* End of styling the slider */ /* End of styling the slider */
</style> </style>
<div class="btn-group btn-group-sm map-type-switcher" role="group"> <div class="btn-group btn-group-sm map-type-switcher" role="group">
<button type="button" class="btn bx bx-network-chart" title="${t("note-map.button-link-map")}" data-type="link"></button> <button type="button" class="btn bx bx-network-chart tn-tool-button" title="${t("note-map.button-link-map")}" data-type="link"></button>
<button type="button" class="btn bx bx-sitemap" title="${t("note-map.button-tree-map")}" data-type="tree"></button> <button type="button" class="btn bx bx-sitemap tn-tool-button" title="${t("note-map.button-tree-map")}" data-type="tree"></button>
</div> </div>
<! UI for dragging Notes and link force > <! UI for dragging Notes and link force >
<div class=" btn-group-sm fixnodes-type-switcher" role="group"> <div class=" btn-group-sm fixnodes-type-switcher" role="group">
<button type="button" class="btn bx bx-expand" title="${t("note_map.fix-nodes")}" data-type="moveable"></button> <button type="button" data-toggle="button" class="btn bx bx-lock-alt tn-tool-button" title="${t("note_map.fix-nodes")}" data-type="moveable"></button>
<input type="range" class="slider" min="1" title="${t("note_map.link-distance")}" max="100" value="40" > <input type="range" class="slider" min="1" title="${t("note_map.link-distance")}" max="100" value="40" >
</div> </div>
<div class="style-resolver"></div> <div class="style-resolver"></div>
@ -163,6 +179,7 @@ export default class NoteMapWidget extends NoteContextAwareWidget {
private themeStyle!: string; private themeStyle!: string;
private $container!: JQuery<HTMLElement>; private $container!: JQuery<HTMLElement>;
private $styleResolver!: JQuery<HTMLElement>; private $styleResolver!: JQuery<HTMLElement>;
private $fixNodesButton!: JQuery<HTMLElement>;
graph!: ForceGraph; graph!: ForceGraph;
private noteIdToSizeMap!: Record<string, number>; private noteIdToSizeMap!: Record<string, number>;
private zoomLevel!: number; private zoomLevel!: number;
@ -182,6 +199,7 @@ export default class NoteMapWidget extends NoteContextAwareWidget {
this.$container = this.$widget.find(".note-map-container"); this.$container = this.$widget.find(".note-map-container");
this.$styleResolver = this.$widget.find(".style-resolver"); this.$styleResolver = this.$widget.find(".style-resolver");
this.$fixNodesButton = this.$widget.find(".fixnodes-type-switcher > button");
new ResizeObserver(() => this.setDimensions()).observe(this.$container[0]); new ResizeObserver(() => this.setDimensions()).observe(this.$container[0]);
@ -191,11 +209,11 @@ export default class NoteMapWidget extends NoteContextAwareWidget {
await attributeService.setLabel(this.noteId ?? "", "mapType", type); await attributeService.setLabel(this.noteId ?? "", "mapType", type);
}); });
// Reading the status of the Drag nodes Ui element. Changing it´s color when activated. Reading Force value of the link distance. // Reading the status of the Drag nodes Ui element. Changing it´s color when activated.
// Reading Force value of the link distance.
this.$widget.find(".fixnodes-type-switcher").on("click", async (event) => { this.$fixNodesButton.on("click", async (event) => {
this.fixNodes = !this.fixNodes; this.fixNodes = !this.fixNodes;
event.target.style.backgroundColor = this.fixNodes ? "#661822" : "transparent"; this.$fixNodesButton.toggleClass("toggled", this.fixNodes);
}); });
super.doRender(); super.doRender();