From 9365541f5ceb2b0cb53caa8736ebc4f36739d482 Mon Sep 17 00:00:00 2001
From: Francesco Boccacci <boccacci.francesco@gmail.com>
Date: Tue, 11 Feb 2025 15:00:33 +0100
Subject: [PATCH] Allow to customize close tooltip text (sidebar panel) (#712)

* :sparkles: Customize enable and tooltip property of close sidebar panel button

* :bug: handle closeAllPanels method when enabled

* :sparkles: Add internal Vue $gui sidebar method and attributes to handle sidebar close button

* :bug: missing $gui.

* font-family

* revert application state solution

---------

Co-authored-by: Raruto <Raruto@users.noreply.github.com>
---
 src/components/App.vue          | 20 ++++++++++++--------
 src/components/QueryBuilder.vue |  1 -
 src/store/application.js        |  8 ++++++--
 3 files changed, 18 insertions(+), 11 deletions(-)

diff --git a/src/components/App.vue b/src/components/App.vue
index 2dc544b15..75c628e6e 100644
--- a/src/components/App.vue
+++ b/src/components/App.vue
@@ -211,7 +211,7 @@
         >
           <div id="g3w-sidebarpanel-header-placeholder">
             <div
-              style  = "display: flex;"
+              style  = "display: flex; margin-bottom: 5px;"
               :style = "{ justifyContent: app.sidebar.title ? 'space-between' : 'flex-end' }"
             >
 
@@ -235,15 +235,19 @@
                   <i :class = "$fa('arrow-left')" class = "fa-stack-1x panel-icon"></i>
                 </span>
                 <span
-                  @click.stop        = "closeAllPanels"
-                  data-placement     = "left"
-                  data-toggle        = "tooltip"
-                  data-container     = "body"
-                  v-t-tooltip.create = "'close'"
-                  class              = "skin-tooltip-left g3w-span-button close-pane-button fa-stack"
+                  @click.stop              = "app.sidebar.btn_close && closeAllPanels()"
+                  data-toggle              = "tooltip"
+                  data-container           = "body"
+                  v-t-tooltip:right.create = "app.sidebar.tooltip_close || 'close'"
+                  :current-tooltip         = "app.sidebar.tooltip_close || 'close'"
+                  class                    = "skin-tooltip-left g3w-span-button close-pane-button fa-stack"
                 >
                   <i :class = "$fa('circle')" class = "fa-stack-1x panel-button"></i>
-                  <i :class = "$fa('close')"  class = "fa-stack-1x panel-icon"></i>
+                  <i
+                    :style = "{ opacity: app.sidebar.btn_close ? '1' : '0.7', cursor: app.sidebar.btn_close ? 'pointer' : 'not-allowed' }"
+                    :class = "$fa('close')"
+                    class  = "fa-stack-1x panel-icon">
+                  </i>
                 </span>
               </div>
 
diff --git a/src/components/QueryBuilder.vue b/src/components/QueryBuilder.vue
index 46cde5517..c7837aa26 100644
--- a/src/components/QueryBuilder.vue
+++ b/src/components/QueryBuilder.vue
@@ -375,7 +375,6 @@ export default {
 
 <style scoped>
 #query_builder {
-  font-family: monospace;
   margin-bottom: 0;
   height: 100%;
   display: flex;
diff --git a/src/store/application.js b/src/store/application.js
index 640c08ffe..7a7e9aa7f 100644
--- a/src/store/application.js
+++ b/src/store/application.js
@@ -103,7 +103,7 @@ const STATE = Vue.observable({
        * @since v3.11.0
        * true open, false hide - icons only
        */
-      open    : true
+      open    : true,
     },
 
     layout: {
@@ -160,7 +160,11 @@ const STATE = Vue.observable({
     /** DOM element where insert the component/panel  */
     parent:     null,
     /** barstack state. It stores the panel array */
-    contentsdata: [], // Array<{ content, options }> 
+    contentsdata: [], // Array<{ content, options }>
+    /** @since 3.11.3 - whether to enable close button  */
+    btn_close: true,
+    /** @since 3.11.3 - custom tooltip for close button */
+    tooltip_close: 'close',
   },
 
   contentsdata: [],