Merge remote-tracking branch 'origin/ent-4752-Herramientas-de-diagnostico' into ent-EDF

Conflicts:
	pandora_console/include/javascript/pandora.js

pandora_console/general/header.php

@@ -639,6 +639,7 @@ if ($config['menu_type'] == 'classic') {
         // Require specific CSS and JS.
         ui_require_css_file('wizard');
         ui_require_css_file('discovery');
+        ui_require_css_file('diagnostics');
         ?>
         var btn_ok_text = '<?php echo __('Send'); ?>';
         var btn_cancel_text = '<?php echo __('Cancel'); ?>';

pandora_console/include/class/Diagnostics.class.php

@@ -1801,6 +1801,7 @@ class Diagnostics extends Wizard
             'id'       => 'modal_form_feedback',
             'onsubmit' => 'return false;',
             'class'    => 'modal',
+            'extra'    => 'novalidate',
         ];
 
         $inputs = [];

pandora_console/include/functions_html.php

@@ -1905,7 +1905,7 @@ function html_print_button($label='OK', $name='', $disabled=false, $script='', $
  */
 function html_print_textarea($name, $rows, $columns, $value='', $attributes='', $return=false, $class='')
 {
-    $output = '<textarea id="textarea_'.$name.'" name="'.$name.'" cols="'.$columns.'" rows="'.$rows.'" '.$attributes.'" class="'.$class.'">';
+    $output = '<textarea id="textarea_'.$name.'" name="'.$name.'" cols="'.$columns.'" rows="'.$rows.'" '.$attributes.' class="'.$class.'">';
     // $output .= io_safe_input ($value);
     $output .= ($value);
     $output .= '</textarea>';

pandora_console/include/javascript/pandora.js

@@ -1984,13 +1984,34 @@ function load_modal(settings) {
 
           $("#" + settings.form + " :input").each(function() {
             if (this.checkValidity() === false) {
-              $(this).prop("title", this.validationMessage);
+              $(this).attr("title", this.validationMessage);
               $(this).tooltip({
                 tooltipClass: "uitooltip",
-                position: { my: "right bottom", at: "right bottom" },
+                position: {
-                show: { duration: 200 }
+                  my: "right bottom",
+                  at: "right top",
+                  using: function(position, feedback) {
+                    $(this).css(position);
+                    $("<div>")
+                      .addClass("arrow")
+                      .addClass(feedback.vertical)
+                      .addClass(feedback.horizontal)
+                      .appendTo(this);
+                  }
+                }
               });
               $(this).tooltip("open");
+
+              var element = $(this);
+              setTimeout(
+                function(element) {
+                  element.tooltip("destroy");
+                  element.removeAttr("title");
+                },
+                3000,
+                element
+              );
+
               flagError = true;
             }
 

pandora_console/include/styles/diagnostics.css

@@ -56,3 +56,11 @@
   margin: 30px;
   font-style: italic;
 }
+
+#modal_form_feedback {
+  margin: 10px;
+}
+
+#div-what-happened label {
+  margin-bottom: 10px;
+}

pandora_console/include/styles/discovery.css

@@ -272,20 +272,11 @@ a.ext_link {
   font-size: 8pt;
 }
 
-input:invalid,
-input[type="email"]:invalid {
-  border-bottom-color: #fb4444;
-}
-
-textarea:invalid {
-  border-color: #fb4444;
-}
-
 div.ui-tooltip.ui-corner-all.ui-widget-shadow.ui-widget.ui-widget-content.uitooltip {
   background: grey;
   opacity: 0.9;
   border-radius: 4px;
-  box-shadow: 0 0 0px #fff;
+  box-shadow: 6px 5px 9px -9px black;
   padding: 6px;
 }
 
@@ -297,3 +288,37 @@ div.ui-tooltip.ui-corner-all.ui-widget-shadow.ui-widget.ui-widget-content.uitool
   letter-spacing: 0.03pt;
   font-size: 8pt;
 }
+
+.arrow {
+  width: 70px;
+  height: 16px;
+  overflow: hidden;
+  position: absolute;
+  left: 50%;
+  margin-left: -35px;
+  bottom: -16px;
+}
+.arrow.top {
+  top: -16px;
+  bottom: auto;
+}
+.arrow.left {
+  left: 50%;
+}
+.arrow:after {
+  background: grey;
+  content: "";
+  position: absolute;
+  left: 20px;
+  top: -20px;
+  width: 25px;
+  height: 25px;
+  box-shadow: 6px 5px 9px -9px black;
+  -webkit-transform: rotate(45deg);
+  -ms-transform: rotate(45deg);
+  transform: rotate(45deg);
+}
+.arrow.top:after {
+  bottom: -20px;
+  top: auto;
+}