From b497e573fef4254514b5a080b53adbdc0fe729af Mon Sep 17 00:00:00 2001
From: daniel <daniel.barbero@artica.es>
Date: Thu, 23 Nov 2023 14:18:29 +0100
Subject: [PATCH] fix modal events sound bottom bar pandora_enterprise#12378

---
 pandora_console/images/desacoplar-ventana.svg | 14 +++++
 pandora_console/images/minimizar.svg          |  7 +++
 .../include/javascript/pandora_events.js      | 62 ++++---------------
 pandora_console/include/styles/events.css     |  4 ++
 .../include/styles/js/jquery-ui_custom.css    | 22 ++-----
 pandora_console/include/styles/pandora.css    | 13 ++++
 6 files changed, 55 insertions(+), 67 deletions(-)
 create mode 100644 pandora_console/images/desacoplar-ventana.svg
 create mode 100644 pandora_console/images/minimizar.svg

diff --git a/pandora_console/images/desacoplar-ventana.svg b/pandora_console/images/desacoplar-ventana.svg
new file mode 100644
index 0000000000..0b3cbca31d
--- /dev/null
+++ b/pandora_console/images/desacoplar-ventana.svg
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>Icons/Dark/20/desacoplar-ventana</title>
+    <g id="Icons/Dark/20/desacoplar-ventana" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Back" transform="translate(3, 1)">
+            <rect id="Rectangle-2" stroke="#3F3F3F" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" x="0" y="0" width="20" height="16" rx="1"></rect>
+            <path d="M3,4 C3.55228475,4 4,3.55228475 4,3 C4,2.44771525 3.55228475,2 3,2 C2.44771525,2 2,2.44771525 2,3 C2,3.55228475 2.44771525,4 3,4 Z M6,4 C6.55228475,4 7,3.55228475 7,3 C7,2.44771525 6.55228475,2 6,2 C5.44771525,2 5,2.44771525 5,3 C5,3.55228475 5.44771525,4 6,4 Z M9,4 C9.55228475,4 10,3.55228475 10,3 C10,2.44771525 9.55228475,2 9,2 C8.44771525,2 8,2.44771525 8,3 C8,3.55228475 8.44771525,4 9,4 Z" id="Oval-2" fill="#3F3F3F"></path>
+        </g>
+        <g id="Front" transform="translate(0, 8)">
+            <rect id="Rectangle-2" fill="#3F3F3F" x="0" y="0" width="20" height="16" rx="1"></rect>
+            <path d="M3,4 C3.55228475,4 4,3.55228475 4,3 C4,2.44771525 3.55228475,2 3,2 C2.44771525,2 2,2.44771525 2,3 C2,3.55228475 2.44771525,4 3,4 Z M6,4 C6.55228475,4 7,3.55228475 7,3 C7,2.44771525 6.55228475,2 6,2 C5.44771525,2 5,2.44771525 5,3 C5,3.55228475 5.44771525,4 6,4 Z M9,4 C9.55228475,4 10,3.55228475 10,3 C10,2.44771525 9.55228475,2 9,2 C8.44771525,2 8,2.44771525 8,3 C8,3.55228475 8.44771525,4 9,4 Z" id="Oval-2" fill="#FFFFFF"></path>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/pandora_console/images/minimizar.svg b/pandora_console/images/minimizar.svg
new file mode 100644
index 0000000000..957268b4ea
--- /dev/null
+++ b/pandora_console/images/minimizar.svg
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>Icons/Dark/20/minimizar</title>
+    <g id="Icons/Dark/20/minimizar" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <rect id="Rectangle" fill="#3F3F3F" x="2" y="18" width="20" height="4" rx="2"></rect>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/pandora_console/include/javascript/pandora_events.js b/pandora_console/include/javascript/pandora_events.js
index 86b84376c5..eb93608ff9 100644
--- a/pandora_console/include/javascript/pandora_events.js
+++ b/pandora_console/include/javascript/pandora_events.js
@@ -1004,6 +1004,7 @@ function openSoundEventsDialog(settings, dialog_parameters, reload) {
       modal: false,
       width: 600,
       height: 600,
+      dialogClass: "modal-sound",
       open: function() {
         $.ajax({
           method: "post",
@@ -1064,10 +1065,10 @@ function openSoundEventsDialog(settings, dialog_parameters, reload) {
 
             if (reload == false && dialog_parameters != undefined) {
               if ($("#button-start-search").hasClass("play")) {
-                $("#filter_id").val(dialog_parameters["filter_id"]);
-                $("#interval").val(dialog_parameters["interval"]);
-                $("#time_sound").val(dialog_parameters["time_sound"]);
-                $("#sound_id").val(dialog_parameters["sound_id"]);
+                $("#filter_id").val(dialog_parameters.filter_id);
+                $("#interval").val(dialog_parameters.interval);
+                $("#time_sound").val(dialog_parameters.time_sound);
+                $("#sound_id").val(dialog_parameters.sound_id);
 
                 $("#filter_id").trigger("change");
                 $("#interval").trigger("change");
@@ -1124,14 +1125,15 @@ function openSoundEventsDialog(settings, dialog_parameters, reload) {
 }
 
 function openSoundEventModal(settings) {
+  var win = "";
   if ($("#hidden-metaconsole_activated").val() === "1") {
-    var win = open(
+    win = open(
       "../../operation/events/sound_events.php",
       "day_123",
       "width=600,height=500"
     );
   } else {
-    var win = open(
+    win = open(
       "operation/events/sound_events.php",
       "day_123",
       "width=600,height=500"
@@ -1502,11 +1504,6 @@ $(document).ajaxSend(function(event, jqXHR, ajaxOptions) {
       typeof requestBody.includes === "function" &&
       requestBody.includes("drawConsoleSound=1")
     ) {
-      console.log(
-        "AJAX request sent with drawConsoleSound=1:",
-        ajaxOptions.url
-      );
-
       // Find the dialog element by the aria-describedby attribute
       var dialog = $('[aria-describedby="modal-sound"]');
 
@@ -1516,62 +1513,32 @@ $(document).ajaxSend(function(event, jqXHR, ajaxOptions) {
       // Add the minimize button before the close button
       var minimizeButton = $("<button>", {
         class:
-          "ui-corner-all ui-widget ui-button-icon-only ui-window-minimize ui-dialog-titlebar-minimize",
+          "ui-corner-all ui-widget ui-button-icon-only ui-window-minimize ui-dialog-titlebar-minimize minimize-buttom-image",
         type: "button",
-        title: "Minimize",
-        style: "float: right;margin-right: 1.5em;"
+        title: "Minimize"
       }).insertBefore(closeButton);
 
-      // Add the minimize icon to the minimize button
-      $("<span>", {
-        class: "ui-button-icon ui-icon ui-icon-minusthick",
-        style: "background-color: #fff;"
-      }).appendTo(minimizeButton);
-
-      $("<span>", {
-        class: "ui-button-icon-space"
-      })
-        .html(" ")
-        .appendTo(minimizeButton);
-
       // Add the disengage button before the minimize button
       var disengageButton = $("<button>", {
         class:
-          "ui-corner-all ui-widget ui-button-icon-only ui-dialog-titlebar-disengage",
+          "ui-corner-all ui-widget ui-button-icon-only ui-dialog-titlebar-disengage disengage-buttom-image",
         type: "button",
-        title: "Disengage",
-        style: "float: right;margin-right: 0.5em; position:relative;"
+        title: "Disengage"
       }).insertBefore(minimizeButton);
 
-      // Add the disengage icon to the disengage button
-      $("<span>", {
-        class: "ui-button-icon ui-icon ui-icon-circle-triangle-n",
-        style: "background-color: #fff;"
-      }).appendTo(disengageButton);
-
-      $("<span>", {
-        class: "ui-button-icon-space"
-      })
-        .html(" ")
-        .appendTo(disengageButton);
-
       minimizeButton.click(function(e) {
-        console.log("here");
         if ($("#minimize_arrow_event_sound").hasClass("arrow_menu_up")) {
-          console.log("arrow_menu_up");
           $("#minimize_arrow_event_sound").removeClass("arrow_menu_up");
           $("#minimize_arrow_event_sound").addClass("arrow_menu_down");
         } else if (
           $("#minimize_arrow_event_sound").hasClass("arrow_menu_down")
         ) {
-          console.log("arrow_menu_down");
           $("#minimize_arrow_event_sound").removeClass("arrow_menu_down");
           $("#minimize_arrow_event_sound").addClass("arrow_menu_up");
         }
 
         if (!dialog.data("isMinimized")) {
           $(".ui-widget-overlay").hide();
-          console.log("Minimize Window");
           dialog.data("originalPos", dialog.position());
           dialog.data("originalSize", {
             width: dialog.width(),
@@ -1582,7 +1549,6 @@ $(document).ajaxSend(function(event, jqXHR, ajaxOptions) {
           dialog.animate(
             {
               height: "40px",
-              top: 0,
               top: $(window).height() - 100
             },
             200,
@@ -1597,17 +1563,13 @@ $(document).ajaxSend(function(event, jqXHR, ajaxOptions) {
             },
             5
           );
-          //dialog.find(".ui-dialog-content").hide();
         } else {
-          console.log("Restore Window");
           $(".ui-widget-overlay").show();
-          //dialog.find(".ui-dialog-content").show();
           dialog.data("isMinimized", false);
 
           dialog.animate(
             {
               height: "40px",
-              top: 0,
               top: $(window).height() - 100
             },
             5
diff --git a/pandora_console/include/styles/events.css b/pandora_console/include/styles/events.css
index edf5014385..1a66ba7174 100644
--- a/pandora_console/include/styles/events.css
+++ b/pandora_console/include/styles/events.css
@@ -538,3 +538,7 @@ div.container-filter-buttons {
 .ui-state-active {
   border-radius: 0px !important;
 }
+
+.ui-dialog.modal-sound .ui-widget-header {
+  display: flex !important;
+}
diff --git a/pandora_console/include/styles/js/jquery-ui_custom.css b/pandora_console/include/styles/js/jquery-ui_custom.css
index 9c17d7fdab..5802fc9155 100644
--- a/pandora_console/include/styles/js/jquery-ui_custom.css
+++ b/pandora_console/include/styles/js/jquery-ui_custom.css
@@ -46,15 +46,10 @@
 }
 
 .ui-dialog .ui-dialog-titlebar-minimize {
-  position: absolute;
-  right: 1.5em;
-  width: 21px;
-  margin: 0px 0 0 0;
-  padding: 1px;
+  position: relative;
   height: 20px;
-  bottom: 30%;
-  top: 2em;
-  background-color: #fff !important;
+  width: 20px;
+  margin-right: 1px;
 }
 
 .ui-dialog .ui-dialog-titlebar-minimize:hover {
@@ -63,16 +58,9 @@
 
 .ui-dialog .ui-dialog-titlebar-disengage {
   position: relative;
-  right: 1.5em;
-  width: 21px;
-  margin: 0px 0 0 0;
-  padding: 1px;
   height: 20px;
-  bottom: 30%;
-  background-color: #fff !important;
-  -ms-transform: scale(1.2);
-  -webkit-transform: scale(1.2);
-  transform: scale(1.2);
+  width: 20px;
+  margin-right: 5px;
 }
 
 .ui-dialog .ui-dialog-titlebar-disengage:hover {
diff --git a/pandora_console/include/styles/pandora.css b/pandora_console/include/styles/pandora.css
index 7c740bba2b..30d1a3af44 100644
--- a/pandora_console/include/styles/pandora.css
+++ b/pandora_console/include/styles/pandora.css
@@ -12792,3 +12792,16 @@ tr.shown td.details-control {
   position: relative;
   top: -92px;
 }
+
+.disengage-buttom-image {
+  background-color: rgb(51, 51, 51);
+  mask: url(../../images/desacoplar-ventana.svg) no-repeat right / contain;
+  -webkit-mask: url(../../images/desacoplar-ventana.svg) no-repeat right /
+    contain;
+}
+
+.minimize-buttom-image {
+  background-color: rgb(51, 51, 51);
+  mask: url(../../images/minimizar.svg) no-repeat right / contain;
+  -webkit-mask: url(../../images/minimizar.svg) no-repeat right / contain;
+}