From 1648a40e57cae8bc35e886e88be176f6206a6636 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Sun, 8 Dec 2024 17:12:57 +0200
Subject: [PATCH] feat(mindmap): integrate node map stylesheet into component

---
 .vscode/settings.json                         |   3 +
 src/public/app/services/library_loader.js     |   3 -
 .../app/widgets/type_widgets/mind_map.js      | 114 +++++++++++++++++-
 3 files changed, 116 insertions(+), 4 deletions(-)

diff --git a/.vscode/settings.json b/.vscode/settings.json
index c964f3aea..1a141254a 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -21,4 +21,7 @@
     "github-actions.workflows.pinned.workflows": [
         ".github/workflows/nightly.yml"
     ],
+    "[css]": {
+        "editor.defaultFormatter": "vscode.css-language-features"
+    },
 }
diff --git a/src/public/app/services/library_loader.js b/src/public/app/services/library_loader.js
index db66cc876..6a85d8984 100644
--- a/src/public/app/services/library_loader.js
+++ b/src/public/app/services/library_loader.js
@@ -98,9 +98,6 @@ const MIND_ELIXIR = {
     js: [
         "node_modules/mind-elixir/dist/MindElixir.iife.js",
         "node_modules/@mind-elixir/node-menu/dist/node-menu.umd.cjs"
-    ],
-    css: [
-        "node_modules/@mind-elixir/node-menu/dist/style.css"
     ]
 };
 
diff --git a/src/public/app/widgets/type_widgets/mind_map.js b/src/public/app/widgets/type_widgets/mind_map.js
index 8c6086a84..d22248d78 100644
--- a/src/public/app/widgets/type_widgets/mind_map.js
+++ b/src/public/app/widgets/type_widgets/mind_map.js
@@ -16,7 +16,119 @@ const TPL = `
         .note-detail-mind-map .mind-map-container {
             height: 100%;
         }
-    </style>
+
+        .mind-elixir .node-menu {
+            position: absolute;
+            right: 20px;
+            top: 20px;
+            background: #fff;
+            border-radius: 5px;
+            box-shadow: 0 1px 2px #0003;
+            width: 240px;
+            box-sizing: border-box;
+            padding: 0 15px 15px;
+            transition: .3s all
+        }
+
+        .mind-elixir .node-menu.close {
+            height: 30px;
+            width: 46px;
+            overflow: hidden
+        }
+
+        .mind-elixir .node-menu .button-container {
+            padding: 3px 0;
+            direction: rtl
+        }
+
+        .mind-elixir .node-menu #nm-tag {
+            margin-top: 20px
+        }
+
+        .mind-elixir .node-menu .nm-fontsize-container {
+            display: flex;
+            justify-content: space-around;
+            margin-bottom: 20px
+        }
+
+        .mind-elixir .node-menu .nm-fontsize-container div {
+            height: 36px;
+            width: 36px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            box-shadow: 0 1px 2px #0003;
+            background-color: #fff;
+            color: tomato;
+            border-radius: 100%
+        }
+
+        .mind-elixir .node-menu .nm-fontcolor-container {
+            margin-bottom: 10px
+        }
+
+        .mind-elixir .node-menu input,
+        .mind-elixir .node-menu textarea {
+            background: #f7f9fa;
+            border: 1px solid #dce2e6;
+            border-radius: 3px;
+            padding: 5px;
+            margin: 10px 0;
+            width: 100%;
+            box-sizing: border-box
+        }
+
+        .mind-elixir .node-menu textarea {
+            resize: none
+        }
+
+        .mind-elixir .node-menu .split6 {
+            display: inline-block;
+            width: 16.66%;
+            margin-bottom: 5px
+        }
+
+        .mind-elixir .node-menu .palette {
+            border-radius: 100%;
+            width: 21px;
+            height: 21px;
+            border: 1px solid #edf1f2;
+            margin: auto
+        }
+
+        .mind-elixir .node-menu .nmenu-selected,
+        .mind-elixir .node-menu .palette:hover {
+            box-shadow: tomato 0 0 0 2px;
+            background-color: #c7e9fa
+        }
+
+        .mind-elixir .node-menu .size-selected {
+            background-color: tomato !important;
+            border-color: tomato;
+            fill: #fff;
+            color: #fff
+        }
+
+        .mind-elixir .node-menu .size-selected svg {
+            color: #fff
+        }
+
+        .mind-elixir .node-menu .bof {
+            text-align: center
+        }
+
+        .mind-elixir .node-menu .bof span {
+            display: inline-block;
+            font-size: 14px;
+            border-radius: 4px;
+            padding: 2px 5px
+        }
+
+        .mind-elixir .node-menu .bof .selected {
+            background-color: tomato;
+            color: #fff
+        }
+</style>
 </div>
 `;