From 1dfa4a8bc201f2e1092796d800fc77ed1c351ae2 Mon Sep 17 00:00:00 2001
From: Adorian Doran <adorian@esevo.ro>
Date: Sun, 23 Feb 2025 06:17:57 +0200
Subject: [PATCH] client: note map: improve the appearance

---
 src/public/app/widgets/note_map.ts | 86 ++++++++++++++++++------------
 1 file changed, 52 insertions(+), 34 deletions(-)

diff --git a/src/public/app/widgets/note_map.ts b/src/public/app/widgets/note_map.ts
index f8c34f9d5..c6cb53ea7 100644
--- a/src/public/app/widgets/note_map.ts
+++ b/src/public/app/widgets/note_map.ts
@@ -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();