From 77fbeb435161df1d114834ab514ac7604c13f693 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Sat, 22 Mar 2025 13:06:00 +0200
Subject: [PATCH] refactor(note_map): extract floating button style

---
 src/public/app/widgets/note_map.ts | 19 ++-----------------
 src/public/stylesheets/style.css   | 24 ++++++++++++++++++++++++
 2 files changed, 26 insertions(+), 17 deletions(-)

diff --git a/src/public/app/widgets/note_map.ts b/src/public/app/widgets/note_map.ts
index 45cefa1d9..21cf7e808 100644
--- a/src/public/app/widgets/note_map.ts
+++ b/src/public/app/widgets/note_map.ts
@@ -19,25 +19,10 @@ const TPL = `<div class="note-map-widget">
             overflow: hidden;
         }
 
-        .map-type-switcher {
-            position: absolute;
-            top: 10px;
-            left: 10px;
-            z-index: 10; /* should be below dropdown (note actions) */
-        }
-
-        .map-type-switcher button.bx {
-            font-size: 130%;
-            padding: 1px 10px 1px 10px;
-        }
-
         /* Style Ui Element to Drag Nodes */
         .fixnodes-type-switcher {
-            position: absolute;
             display: flex;
             align-items: center;
-            bottom: 10px;
-            left: 10px;
             z-index: 10; /* should be below dropdown (note actions) */
             border-radius: .2rem;
         }
@@ -94,14 +79,14 @@ const TPL = `<div class="note-map-widget">
 
     </style>
 
-    <div class="btn-group btn-group-sm map-type-switcher" role="group">
+    <div class="btn-group btn-group-sm map-type-switcher content-floating-buttons top-left" role="group">
       <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">
+    <div class="btn-group-sm fixnodes-type-switcher content-floating-buttons bottom-left" 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>
diff --git a/src/public/stylesheets/style.css b/src/public/stylesheets/style.css
index 5f9bad71a..35583e318 100644
--- a/src/public/stylesheets/style.css
+++ b/src/public/stylesheets/style.css
@@ -1758,3 +1758,27 @@ footer.file-footer button {
 .ck-content .admonition.important::before { content: "\ea7c"; }
 .ck-content .admonition.caution::before { content: "\eac7"; }
 .ck-content .admonition.warning::before { content: "\eac5"; }
+
+/*
+ * In-content floating buttons
+ */
+
+.content-floating-buttons {
+    position: absolute;
+    z-index: 10; /* should be below dropdown (note actions) */
+}
+
+.content-floating-buttons.top-left {
+    top: 10px;
+    left: 10px;
+}
+
+.content-floating-buttons.bottom-left {
+    bottom: 10px;
+    left: 10px;
+}
+
+.content-floating-buttons button.bx {
+    font-size: 130%;
+    padding: 1px 10px 1px 10px;
+}
\ No newline at end of file