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

86
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 TPL = `<div class="note-map-widget" style="position: relative;">
const TPL = `<div class="note-map-widget">
<style>
.note-detail-note-map {
height: 100%;
@ -34,60 +34,76 @@ const TPL = `<div class="note-map-widget" style="position: relative;">
/* Style Ui Element to Drag Nodes */
.fixnodes-type-switcher {
position: absolute;
top: 10px;
left: 45%;
display: flex;
align-items: center;
bottom: 10px;
left: 10px;
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 */
input[type="range"] {
.fixnodes-type-switcher input[type="range"] {
/* removing default appearance */
-webkit-appearance: none;
appearance: none;
margin-left: 15px;
width:50%
width: 150px;
}
/* Changing slider tracker */
input[type="range"]::-webkit-slider-runnable-track {
height: 6px;
background: #ccc;
border-radius: 16px;
.fixnodes-type-switcher input[type="range"]::-webkit-slider-runnable-track {
height: 4px;
background-color: var(--main-border-color);
border-radius: 4px;
}
/* Changing Slider Thumb */
.fixnodes-type-switcher input[type="range"]::-webkit-slider-thumb {
/* removing default appearance */
-webkit-appearance: none;
appearance: none;
/* creating a custom design */
height: 15px;
width: 15px;
margin-top:-5px;
background-color: var(--accented-background-color);
border: 1px solid var(--main-text-color);
border-radius: 50%;
}
/* Changing Slider Thumb*/
input[type="range"]::-webkit-slider-thumb {
/* removing default appearance */
-webkit-appearance: none;
appearance: none;
/* creating a custom design */
height: 15px;
width: 15px;
margin-top:-4px;
background-color: #661822;
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 */
</style>
<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-sitemap" title="${t("note-map.button-tree-map")}" data-type="tree"></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 tn-tool-button" title="${t("note-map.button-tree-map")}" data-type="tree"></button>
</div>
<! UI for dragging Notes and link force >
<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>
<input type="range" class=" slider" min="1" title="${t("note_map.link-distance")}" max="100" value="40" >
<div class=" btn-group-sm fixnodes-type-switcher" role="group">
<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" >
</div>
<div class="style-resolver"></div>
@ -163,6 +179,7 @@ export default class NoteMapWidget extends NoteContextAwareWidget {
private themeStyle!: string;
private $container!: JQuery<HTMLElement>;
private $styleResolver!: JQuery<HTMLElement>;
private $fixNodesButton!: JQuery<HTMLElement>;
graph!: ForceGraph;
private noteIdToSizeMap!: Record<string, number>;
private zoomLevel!: number;
@ -182,6 +199,7 @@ export default class NoteMapWidget extends NoteContextAwareWidget {
this.$container = this.$widget.find(".note-map-container");
this.$styleResolver = this.$widget.find(".style-resolver");
this.$fixNodesButton = this.$widget.find(".fixnodes-type-switcher > button");
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);
});
// 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) => {
// Reading the status of the Drag nodes Ui element. Changing it´s color when activated.
// Reading Force value of the link distance.
this.$fixNodesButton.on("click", async (event) => {
this.fixNodes = !this.fixNodes;
event.target.style.backgroundColor = this.fixNodes ? "#661822" : "transparent";
this.$fixNodesButton.toggleClass("toggled", this.fixNodes);
});
super.doRender();