From 69bdcdd74a66942633acde365ce027fd6ea9e9e8 Mon Sep 17 00:00:00 2001
From: zadam <adam.zivner@gmail.com>
Date: Sat, 30 Jan 2021 21:28:10 +0100
Subject: [PATCH] changed sidebar widget expanders to be consistent with tree
 expanders

---
 .../app/layouts/desktop_main_window_layout.js | 11 ++++--
 src/public/app/widgets/collapsible_widget.js  | 38 ++++++++++---------
 2 files changed, 28 insertions(+), 21 deletions(-)

diff --git a/src/public/app/layouts/desktop_main_window_layout.js b/src/public/app/layouts/desktop_main_window_layout.js
index 391c31ee7..25d3adfc9 100644
--- a/src/public/app/layouts/desktop_main_window_layout.js
+++ b/src/public/app/layouts/desktop_main_window_layout.js
@@ -46,7 +46,7 @@ const RIGHT_PANE_CSS = `
 
 #right-pane .card-header {
     background: inherit;
-    padding: 6px 10px 3px 10px;
+    padding: 6px 10px 3px 0;
     width: 99%; /* to give minimal right margin */
     background-color: var(--button-background-color);
     border-color: var(--button-border-color);
@@ -91,15 +91,18 @@ const RIGHT_PANE_CSS = `
 #right-pane .widget-toggle-button {
     cursor: pointer;
     color: var(--main-text-color) !important;
-    position: relative;
-    top: 2px;
-    font-size: large;
 }
 
 #right-pane .widget-toggle-button:hover {
     text-decoration: none !important;
 }
 
+#right-pane .widget-toggle-icon {
+    position: relative;
+    top: 2px;
+    font-size: large;
+}
+
 #right-pane .body-wrapper {
     overflow: auto;
 }
diff --git a/src/public/app/widgets/collapsible_widget.js b/src/public/app/widgets/collapsible_widget.js
index 2575bea55..047c9b627 100644
--- a/src/public/app/widgets/collapsible_widget.js
+++ b/src/public/app/widgets/collapsible_widget.js
@@ -3,21 +3,24 @@ import options from "../services/options.js";
 
 const WIDGET_TPL = `
 <div class="card widget">
-    <div class="card-header">
+    <div class="card-header">    
         <div>           
-            <span class="widget-title">
-                Collapsible Group Item
-            </span>
+            <a class="widget-toggle-button no-arrow" 
+                title="Minimize/maximize widget"
+                data-toggle="collapse" data-target="#[to be set]">
+                
+                <span class="widget-toggle-icon bx"></span>
+                
+                <span class="widget-title">
+                    Collapsible Group Item
+                </span>    
+            </a>
         
             <span class="widget-header-actions"></span>
         </div>
         
         <div>
             <a class="widget-help external no-arrow bx bx-info-circle"></a>
-            &nbsp;
-            <a class="widget-toggle-button no-arrow bx bx-minus" 
-                title="Minimize/maximize widget"
-                data-toggle="collapse" data-target="#[to be set]"></a>
         </div>
     </div>
 
@@ -45,13 +48,14 @@ export default class CollapsibleWidget extends TabAwareWidget {
         this.widgetName = this.widgetTitle.replace(/[^[a-zA-Z0-9]/g, "_");
 
         this.$toggleButton = this.$widget.find('.widget-toggle-button');
+        this.$toggleIcon = this.$widget.find('.widget-toggle-icon');
 
         const collapsed = options.is(this.widgetName + 'Collapsed');
         if (!collapsed) {
             this.$bodyWrapper.collapse("show");
         }
 
-        this.updateToggleButton(collapsed);
+        this.updateToggleIcon(collapsed);
 
         // using immediate variants of the event so that the previous collapse is not caught
         this.$bodyWrapper.on('hide.bs.collapse', () => this.toggleCollapsed(true));
@@ -85,23 +89,23 @@ export default class CollapsibleWidget extends TabAwareWidget {
     }
 
     toggleCollapsed(collapse) {
-        this.updateToggleButton(collapse);
+        this.updateToggleIcon(collapse);
 
         options.save(this.widgetName + 'Collapsed', collapse.toString());
 
         this.triggerEvent(`widgetCollapsedStateChanged`, {widgetName: this.widgetName, collapse});
     }
 
-    updateToggleButton(collapse) {
+    updateToggleIcon(collapse) {
         if (collapse) {
-            this.$toggleButton
-                .addClass("bx-chevron-down")
-                .removeClass("bx-minus")
+            this.$toggleIcon
+                .addClass("bx-chevron-right")
+                .removeClass("bx-chevron-down")
                 .attr("title", "Show");
         } else {
-            this.$toggleButton
-                .addClass("bx-minus")
-                .removeClass("bx-window")
+            this.$toggleIcon
+                .addClass("bx-chevron-down")
+                .removeClass("bx-chevron-right")
                 .attr("title", "Hide");
         }
     }