moved style button to selection panel, added close buttons to bottm and sidebar

Author: Mnikley

src/graph/core.js

@@ -911,6 +911,9 @@ class GraphCoreManager {
         case "y":
           this.cache.ui.toggleStylingPanel();
           break;
+        case "l":
+          await this.cache.ui.toggleLassoSelection();
+          break;
         default:
           break;
       }

src/graph_lens_lite.html

@@ -32,7 +32,6 @@ <h3>Graph Lens Lite</h3>
           <button id="metricsToggleBtn" class="showOnLoad medium-btn" title="Toggle network metrics panel (M)" onclick="cache.metrics.toggleUI()">📊</button>
           <button id="dataToggleBtn" class="showOnLoad medium-btn" title="Toggle data editor (D)" onclick="cache.ui.toggleDataEditor()">🔢</button>
           <button id="queryToggleBtn" class="showOnLoad medium-btn" title="Toggle query editor (Q)" onclick="cache.ui.toggleQueryEditor()">📝</button>
-          <button id="styleToggleBtn" class="showOnLoad medium-btn" title="Open styling panel (Y)" onclick="cache.ui.toggleStylingPanel()">🎨</button>
           <button id="editBtn" class="showOnLoad medium-btn" title="Toggle Edit mode (E)" onclick="cache.ui.toggleEditMode()">⚙️</button>
         </div>
       </div>
@@ -81,6 +80,7 @@ <h5 class="purple">Shown:
       <button id="deselectEdgesBtn" class="tiny-btn red disabled" title="Clear edge selection"
               onclick="cache.sm.toggleSelectionForAllEdges(false)">×</button>
       <hr>
+      <button id="styleToggleBtn" class="small-btn showOnLoad" title="Open styling panel (Y)" onclick="cache.ui.toggleStylingPanel()">🎨</button>
       <div id="lassoWrapper" class="showOnLoad small-btn"><button id="lassoToggleBtn" class="lasso-icon" title="Toggle lasso selection (L)" onclick="cache.ui.toggleLassoSelection()"></button></div>
       <div class="button-separator"></div>
       <button class="small-btn disabled" title="Reset style for selected elements" id="resetSelectedElementsStyleBtn"
@@ -102,6 +102,8 @@ <h5 class="purple">Shown:
     <div id="innerGraphContainer"></div>
   </div>
   <div id="rightSidebar">
+    <button id="rightSidebarCloseBtn" class="small-btn red panel-close-btn" title="Close styling panel"
+            onclick="cache.ui.toggleStylingPanel()">×</button>
     <div id="rightSidebarContentContainer">
 <!--      <div class="header-row">-->
 <!--        <h3>Styling Panel</h3>-->
@@ -115,6 +117,8 @@ <h5 class="purple">Shown:
   </div>
 </div>
 <div id="bottomBar">
+  <button id="bottomBarCloseBtn" class="small-btn red panel-close-btn" title="Close bottom panel"
+          onclick="cache.ui.closeBottomBar()">×</button>
   <div class="resize-handle"></div>
   <div id="queryEditor" class="editor-panel">
     <div id="queryOverlay" aria-hidden="true"></div>

src/managers/ui.js

@@ -180,6 +180,31 @@ class UIManager {
     }, 300);
   }
 
+  async closeBottomBar() {
+    const queryBtn = document.getElementById("queryToggleBtn");
+    const dataBtn = document.getElementById("dataToggleBtn");
+
+    if (dataBtn.classList.contains("highlight")) {
+      await this.toggleDataEditor();
+      return;
+    }
+
+    if (queryBtn.classList.contains("highlight")) {
+      this.toggleQueryEditor();
+      return;
+    }
+
+    const bottomBar = document.getElementById("bottomBar");
+    if (bottomBar.classList.contains("active")) {
+      this.hideBottomBar();
+      setTimeout(() => {
+        if (this.cache.graph) {
+          this.cache.graph.resize();
+        }
+      }, 300);
+    }
+  }
+
   async toggleDataEditor() {
     const queryBtn = document.getElementById("queryToggleBtn");
     const dataBtn = document.getElementById("dataToggleBtn");

src/style.css

@@ -43,6 +43,7 @@ body, html {
     flex-direction: column;
     flex-shrink: 0;
     border-left: 0 solid #ccc;
+    position: relative;
 }
 
 #rightSidebar.active {
@@ -119,6 +120,13 @@ body, html {
     position: relative;
 }
 
+.panel-close-btn {
+    position: absolute;
+    top: 8px;
+    right: 8px;
+    z-index: 1002;
+}
+
 .resize-shadow-bar {
     position: fixed;
     left: 0;