#11386 Fix changes in soun event dialog

pandora_console/include/ajax/events.php

@@ -2525,7 +2525,7 @@ if ($drawConsoleSound === true) {
                     'label'      => __('Start'),
                     'type'       => 'button',
                     'name'       => 'start-search',
-                    'attributes' => [ 'class' => 'play' ],
+                    'attributes' => [ 'class' => 'play secondary' ],
                     'return'     => true,
                 ],
                 'div',

pandora_console/include/functions_html.php

@@ -3617,6 +3617,7 @@ function html_print_button($label='OK', $name='', $disabled=false, $script='', $
     $classes = '';
     $fixedId = '';
     $iconStyle = '';
+    $minimize_arrow = false;
     // $spanStyle = 'margin-top: 4px;';
     $spanStyle = '';
     if (empty($name) === true) {
@@ -3654,6 +3655,8 @@ function html_print_button($label='OK', $name='', $disabled=false, $script='', $
                 $buttonType = ($attr_array['type'] ?? 'button');
                 $buttonAttributes = $value;
                 break;
+            } else if ($attribute === 'minimize-arrow') {
+                $minimize_arrow = true;
             } else {
                 $attributes .= $attribute.'="'.$value.'" ';
             }
@@ -3678,15 +3681,30 @@ function html_print_button($label='OK', $name='', $disabled=false, $script='', $
         $iconDiv = '';
     }
 
+    if ($minimize_arrow === true) {
+        $minimezeDiv = html_print_div(
+            [
+                'id'    => 'minimize_arrow_event_sound',
+                'style' => 'background-color:transparent; right: 1em; margin-left:0.5em; position:relative; display:none;',
+                'class' => 'arrow_menu_down w30p',
+            ],
+            true
+        );
+    } else {
+        $minimezeDiv = '';
+    }
+
     // Defined id. Is usable for span and button.
     // TODO. Check if will be proper use button or submit when where appropiate.
     $mainId = ((empty($fixedId) === false) ? $fixedId : 'button-'.$name);
 
     if ($imageButton === false) {
-        $content = '<span id="span-'.$mainId.'" style="'.$spanStyle.'" class="font_11">'.$label.'</span>';
+        $content = $minimezeDiv;
+        $content .= '<span id="span-'.$mainId.'" style="'.$spanStyle.'" class="font_11">'.$label.'</span>';
         $content .= $iconDiv;
     } else {
-        $content = $iconDiv;
+        $content = $minimezeDiv;
+        $content .= $iconDiv;
     }
 
     // In case of not selected button type, in this case, will be normal button.

pandora_console/include/javascript/pandora_events.js

@@ -951,8 +951,24 @@ function openSoundEventsDialog(settings) {
     $("#modal-sound").hasClass("ui-dialog-content") &&
     $("#modal-sound").dialog("isOpen")
   ) {
+    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");
+      $(".ui-dialog-titlebar-minimize").trigger("click");
+    } 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");
+      $(".ui-dialog-titlebar-minimize").trigger("click");
+    }
     return;
   }
+  //Modify button
+  $("#minimize_arrow_event_sound").removeClass("arrow_menu_down");
+  $("#minimize_arrow_event_sound").addClass("arrow_menu_up");
+  $("#minimize_arrow_event_sound").show();
+
   // Initialize modal.
   $("#modal-sound")
     .empty()
@@ -994,6 +1010,25 @@ function openSoundEventsDialog(settings) {
               if (mode == 0) {
                 action = true;
               }
+              if ($("#button-start-search").hasClass("play")) {
+                $("#modal-sound").css({
+                  height: "500px"
+                });
+                $("#modal-sound")
+                  .parent()
+                  .css({
+                    height: "550px"
+                  });
+              } else {
+                $("#modal-sound").css({
+                  height: "450px"
+                });
+                $("#modal-sound")
+                  .parent()
+                  .css({
+                    height: "500px"
+                  });
+              }
 
               action_events_sound(action, settings);
             });
@@ -1035,6 +1070,7 @@ function openSoundEventsDialog(settings) {
         });
       },
       close: function() {
+        $("#minimize_arrow_event_sound").hide();
         remove_audio();
         $(this).dialog("destroy");
       }
@@ -1065,6 +1101,7 @@ function openSoundEventModal(settings) {
   }
 
   settings = JSON.parse(atob(settings));
+
   // Check modal exists and is open.
   if (
     $("#modal-sound").hasClass("ui-dialog-content") &&
@@ -1379,7 +1416,7 @@ $(document).ajaxSend(function(event, jqXHR, ajaxOptions) {
         "ui-corner-all ui-widget ui-button-icon-only ui-dialog-titlebar-disengage",
       type: "button",
       title: "Disengage",
-      style: "float: right;margin-right: 3.2em;"
+      style: "float: right;margin-right: 0.5em; position:relative;"
     }).insertBefore(minimizeButton);
 
     // Add the disengage icon to the disengage button
@@ -1394,7 +1431,17 @@ $(document).ajaxSend(function(event, jqXHR, ajaxOptions) {
       .html(" ")
       .appendTo(disengageButton);
 
-    // Define the minimize button functionality
+    // Define the minimize button functionality;
+    function hidden_dialog() {
+      setTimeout(function() {
+        dialog.hide();
+      }, 200);
+    }
+    function show_dialog() {
+      setTimeout(function() {
+        dialog.show();
+      }, 50);
+    }
     minimizeButton.click(function(e) {
       if (!dialog.data("isMinimized")) {
         $(".ui-widget-overlay").hide();
@@ -1410,9 +1457,11 @@ $(document).ajaxSend(function(event, jqXHR, ajaxOptions) {
           {
             height: "40px",
             top: 0,
-            top: $(window).height() - 50
+            top: $(window).height() - 100
           },
-          200
+          200,
+          "linear",
+          hidden_dialog()
         );
         dialog.css({ height: "" });
 
@@ -1427,7 +1476,9 @@ $(document).ajaxSend(function(event, jqXHR, ajaxOptions) {
             height: dialog.data("originalSize").height + "px",
             top: dialog.data("originalPos").top + "px"
           },
-          200
+          200,
+          "linear",
+          show_dialog()
         );
       }
     });
@@ -1457,7 +1508,7 @@ $(document).ajaxSend(function(event, jqXHR, ajaxOptions) {
                 200
               );
             }
-
+            /*
             var $el = $('[aria-describedby="modal-sound"]').find(
               ".ui-dialog-title"
             );
@@ -1482,7 +1533,7 @@ $(document).ajaxSend(function(event, jqXHR, ajaxOptions) {
               $("style")
                 .last()
                 .remove();
-            }, flashingDuration);
+            }, flashingDuration);*/
             break;
           }
         }
@@ -1517,7 +1568,7 @@ $(document).ajaxSend(function(event, jqXHR, ajaxOptions) {
 
     // Set CSS properties for #modal-sound
     $("#modal-sound").css({
-      height: "auto",
+      height: "450px",
       margin: "0px"
     });
 

pandora_console/include/styles/js/jquery-ui_custom.css

@@ -54,7 +54,7 @@
   padding: 1px;
   height: 20px;
   bottom: 30%;
-  top: 1.3em;
+  top: 2em;
   background-color: #fff !important;
 }
 
@@ -63,14 +63,13 @@
 }
 
 .ui-dialog .ui-dialog-titlebar-disengage {
-  position: absolute;
+  position: relative;
   right: 1.5em;
   width: 21px;
   margin: 0px 0 0 0;
   padding: 1px;
   height: 20px;
   bottom: 30%;
-  top: 0.7em;
   background-color: #fff !important;
   -ms-transform: scale(1.2);
   -webkit-transform: scale(1.2);

pandora_console/include/styles/pandora.css

@@ -12333,3 +12333,72 @@ tr[id^="network_component-plugin-wmi-fields-dynamicMacroRow-"] input,
 tr[id^="network_component-plugin-snmp-fields-dynamicMacroRow-"] input {
   width: 100% !important;
 }
+
+.animation-blink {
+  -webkit-animation: glowing 1500ms infinite;
+  -moz-animation: glowing 1500ms infinite;
+  -o-animation: glowing 1500ms infinite;
+  animation: glowing 1500ms infinite;
+  background: #b20000 !important;
+  border-color: #ff0000 !important;
+}
+
+@-webkit-keyframes glowing {
+  0% {
+    background-color: #b20000;
+    -webkit-box-shadow: 0 0 3px #b20000;
+  }
+  50% {
+    background-color: #ff0000;
+    -webkit-box-shadow: 0 0 40px #ff0000;
+  }
+  100% {
+    background-color: #b20000;
+    -webkit-box-shadow: 0 0 3px #b20000;
+  }
+}
+
+@-moz-keyframes glowing {
+  0% {
+    background-color: #b20000;
+    -moz-box-shadow: 0 0 3px #b20000;
+  }
+  50% {
+    background-color: #ff0000;
+    -moz-box-shadow: 0 0 40px #ff0000;
+  }
+  100% {
+    background-color: #b20000;
+    -moz-box-shadow: 0 0 3px #b20000;
+  }
+}
+
+@-o-keyframes glowing {
+  0% {
+    background-color: #b20000;
+    box-shadow: 0 0 3px #b20000;
+  }
+  50% {
+    background-color: #ff0000;
+    box-shadow: 0 0 40px #ff0000;
+  }
+  100% {
+    background-color: #b20000;
+    box-shadow: 0 0 3px #b20000;
+  }
+}
+
+@keyframes glowing {
+  0% {
+    background-color: #b20000;
+    box-shadow: 0 0 3px #b20000;
+  }
+  50% {
+    background-color: #ff0000;
+    box-shadow: 0 0 40px #ff0000;
+  }
+  100% {
+    background-color: #b20000;
+    box-shadow: 0 0 3px #b20000;
+  }
+}

pandora_console/include/styles/sound_events.css

@@ -214,11 +214,10 @@ div.container-button-play > button#button-start-search {
   text-align: left;
 }
 
-.actions-sound-modal .buttons-sound-modal button.play,
+.actions-sound-modal .buttons-sound-modal button.play {
-.actions-sound-modal .buttons-sound-modal input[type="button"].play {
+  background: url(../../images/play-white.png), transparent !important;
-  background: url(../../images/play-white.png), transparent;
+  background-repeat: no-repeat !important;
-  background-repeat: no-repeat;
+  background-position: 82px 14px !important;
-  background-position: 82px 14px;
   color: #ffffff;
   padding-left: 20px;
   border: 0;

pandora_console/operation/events/events.php

@@ -2699,8 +2699,9 @@ if (check_acl(
         false,
         'openSoundEventsDialog("'.$data_sound.'")',
         [
-            'icon'  => 'sound',
+            'icon'           => 'sound',
-            'style' => 'margin-right: 25% !important',
+            'style'          => 'margin-right: 25% !important',
+            'minimize-arrow' => true,
         ],
         true
     );

pandora_console/operation/events/sound_events.php

@@ -60,22 +60,22 @@ echo '<head>';
 ?>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title><?php echo __('Acoustic console'); ?></title>
-<link rel="stylesheet" href="<?php echo $config['homeurl']; ?>include/styles/pandora_minimal.css" type="text/css" />
+<link rel="stylesheet" href="../../include/styles/pandora_minimal.css" type="text/css" />
-<link rel="stylesheet" href="<?php echo $config['homeurl']; ?>include/styles/js/jquery-ui.min.css" type="text/css" />
+<link rel="stylesheet" href="../../include/styles/js/jquery-ui.min.css" type="text/css" />
-<link rel="stylesheet" href="<?php echo $config['homeurl']; ?>include/styles/js/jquery-ui_custom.css" type="text/css" />
+<link rel="stylesheet" href="../../include/styles/js/jquery-ui_custom.css" type="text/css" />
-<link rel="stylesheet" href="<?php echo $config['homeurl']; ?>include/styles/select2.min.css" type="text/css" />
+<link rel="stylesheet" href="../../include/styles/select2.min.css" type="text/css" />
-<link rel="stylesheet" href="<?php echo $config['homeurl']; ?>include/styles/pandora.css" type="text/css" />
+<link rel="stylesheet" href="../../include/styles/pandora.css" type="text/css" />
 <?php
 echo ui_require_css_file('wizard', 'include/styles/', true);
 echo ui_require_css_file('discovery', 'include/styles/', true);
 echo ui_require_css_file('sound_events', 'include/styles/', true);
 ?>
-<script type='text/javascript' src='<?php echo $config['homeurl']; ?>include/javascript/jquery.current.js'></script>
+<script type='text/javascript' src='../../include/javascript/jquery.current.js'></script>
-<script type='text/javascript' src='<?php echo $config['homeurl']; ?>include/javascript/jquery.pandora.js'></script>
+<script type='text/javascript' src='../../include/javascript/jquery.pandora.js'></script>
-<script type='text/javascript' src='<?php echo $config['homeurl']; ?>include/javascript/jquery-ui.min.js'></script>
+<script type='text/javascript' src='../../include/javascript/jquery-ui.min.js'></script>
-<script type='text/javascript' src='<?php echo $config['homeurl']; ?>include/javascript/select2.min.js'></script>
+<script type='text/javascript' src='../../include/javascript/select2.min.js'></script>
-<script type='text/javascript' src='<?php echo $config['homeurl']; ?>include/javascript/pandora.js'></script>
+<script type='text/javascript' src='../../include/javascript/pandora.js'></script>
-<script type='text/javascript' src='<?php echo $config['homeurl']; ?>include/javascript/pandora_ui.js'></script>
+<script type='text/javascript' src='../../include/javascript/pandora_ui.js'></script>
 
 <?php
 echo '<link rel="icon" href="../../'.ui_get_favicon().'" type="image/ico" />';
@@ -516,7 +516,18 @@ $(document).ready(function(){
         if (mode == 0) {
             action = true;
         }
-
+        if ($("#button-start-search").hasClass("play")){
+            $("#modal-sound").css({
+                height: "500px"
+            });
+            $("#modal-sound").parent().css({
+                height: "800px"
+            });
+        } else {
+            $("#modal-sound").css({
+                height: "450px"
+            });
+        }
         action_events_sound(action);
     });