add explicit button to show/hide right pane widgets, #1299

.idea/codeStyles/Project.xml

@@ -9,5 +9,23 @@
     <JSCodeStyleSettings version="0">
       <option name="USE_EXPLICIT_JS_EXTENSION" value="TRUE" />
     </JSCodeStyleSettings>
+    <JetCodeStyleSettings>
+      <option name="PACKAGES_TO_USE_STAR_IMPORTS">
+        <value>
+          <package name="java.util" alias="false" withSubpackages="false" />
+          <package name="kotlinx.android.synthetic" alias="false" withSubpackages="true" />
+          <package name="io.ktor" alias="false" withSubpackages="true" />
+        </value>
+      </option>
+      <option name="PACKAGES_IMPORT_LAYOUT">
+        <value>
+          <package name="" alias="false" withSubpackages="true" />
+          <package name="java" alias="false" withSubpackages="true" />
+          <package name="javax" alias="false" withSubpackages="true" />
+          <package name="kotlin" alias="false" withSubpackages="true" />
+          <package name="" alias="true" withSubpackages="true" />
+        </value>
+      </option>
+    </JetCodeStyleSettings>
   </code_scheme>
 </component>

src/public/app/layouts/desktop_main_window_layout.js

@@ -77,6 +77,17 @@ const RIGHT_PANE_CSS = `
     text-decoration: none;
 }
 
+#right-pane .widget-toggle-button {
+    cursor: pointer;
+    color: var(--main-text-color) !important;
+    position: relative;
+    top: 2px;
+}
+
+#right-pane .widget-toggle-button:hover {
+    text-decoration: none !important;
+}
+
 #right-pane .body-wrapper {
     overflow: auto;
 }

src/public/app/widgets/collapsible_widget.js

@@ -5,14 +5,20 @@ const WIDGET_TPL = `
 <div class="card widget">
     <div class="card-header">
         <div>           
-            <button class="btn btn-sm widget-title" data-toggle="collapse" data-target="#[to be set]">
+            <span class="widget-title">
                 Collapsible Group Item
-            </button>
+            </span>
-            
+        
-            <a class="widget-help external no-arrow bx bx-info-circle"></a>
+            <span class="widget-header-actions"></span>
         </div>
         
-        <div class="widget-header-actions"></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>
 
     <div id="[to be set]" class="collapse body-wrapper" style="transition: none; ">
@@ -38,13 +44,18 @@ export default class CollapsibleWidget extends TabAwareWidget {
         // not using constructor name because of webpack mangling class names ...
         this.widgetName = this.widgetTitle.replace(/[^[a-zA-Z0-9]/g, "_");
 
-        if (!options.is(this.widgetName + 'Collapsed')) {
+        this.$toggleButton = this.$widget.find('.widget-toggle-button');
+
+        const collapsed = options.is(this.widgetName + 'Collapsed');
+        if (!collapsed) {
             this.$bodyWrapper.collapse("show");
         }
 
+        this.updateToggleButton(collapsed);
+
         // using immediate variants of the event so that the previous collapse is not caught
-        this.$bodyWrapper.on('hide.bs.collapse', () => this.saveCollapsed(true));
+        this.$bodyWrapper.on('hide.bs.collapse', () => this.toggleCollapsed(true));
-        this.$bodyWrapper.on('show.bs.collapse', () => this.saveCollapsed(false));
+        this.$bodyWrapper.on('show.bs.collapse', () => this.toggleCollapsed(false));
 
         this.$body = this.$bodyWrapper.find('.card-body');
 
@@ -66,19 +77,41 @@ export default class CollapsibleWidget extends TabAwareWidget {
         }
 
         this.$headerActions = this.$widget.find('.widget-header-actions');
-        this.$headerActions.append(...this.headerActions);
+        let headerActions = this.headerActions;
+
+        if (headerActions.length > 0) {
+            headerActions = ["(", ...headerActions, ")"];
+        }
+
+        this.$headerActions.append(...headerActions);
 
         this.initialized = this.doRenderBody();
 
         this.decorateWidget();
     }
 
-    saveCollapsed(collapse) {
+    toggleCollapsed(collapse) {
+        this.updateToggleButton(collapse);
+
         options.save(this.widgetName + 'Collapsed', collapse.toString());
 
         this.triggerEvent(`widgetCollapsedStateChanged`, {widgetName: this.widgetName, collapse});
     }
 
+    updateToggleButton(collapse) {
+        if (collapse) {
+            this.$toggleButton
+                .addClass("bx-window")
+                .removeClass("bx-minus")
+                .attr("title", "Show");
+        } else {
+            this.$toggleButton
+                .addClass("bx-minus")
+                .removeClass("bx-window")
+                .attr("title", "Hide");
+        }
+    }
+
     /**
      * This event is used to synchronize collapsed state of all the tab-cached widgets since they are all rendered
      * separately but should behave uniformly for the user.