From ebb7cbfe6c5e2deb5a5e2861d22cc5064d246f71 Mon Sep 17 00:00:00 2001
From: Daniel Barbero Martin <daniel.barbero@artica.es>
Date: Tue, 5 Nov 2019 15:12:24 +0100
Subject: [PATCH] Fix styles css

---
 pandora_console/general/header.php            |  1 +
 .../include/class/Diagnostics.class.php       |  1 +
 pandora_console/include/functions_html.php    |  2 +-
 pandora_console/include/javascript/pandora.js | 27 +++++++++--
 .../include/styles/diagnostics.css            |  8 ++++
 pandora_console/include/styles/discovery.css  | 45 ++++++++++++++-----
 6 files changed, 70 insertions(+), 14 deletions(-)

diff --git a/pandora_console/general/header.php b/pandora_console/general/header.php
index e060cf96f6..157388a43e 100644
--- a/pandora_console/general/header.php
+++ b/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'); ?>';
diff --git a/pandora_console/include/class/Diagnostics.class.php b/pandora_console/include/class/Diagnostics.class.php
index 43f3d948b4..af65aa8066 100644
--- a/pandora_console/include/class/Diagnostics.class.php
+++ b/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 = [];
diff --git a/pandora_console/include/functions_html.php b/pandora_console/include/functions_html.php
index ca809a727f..4a3dd7f9a6 100644
--- a/pandora_console/include/functions_html.php
+++ b/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>';
diff --git a/pandora_console/include/javascript/pandora.js b/pandora_console/include/javascript/pandora.js
index f3737eabdf..ae78cbd614 100644
--- a/pandora_console/include/javascript/pandora.js
+++ b/pandora_console/include/javascript/pandora.js
@@ -1962,13 +1962,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" },
-                    show: { duration: 200 }
+                    position: {
+                      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;
                 }
 
diff --git a/pandora_console/include/styles/diagnostics.css b/pandora_console/include/styles/diagnostics.css
index 3b541ac523..8de918e308 100644
--- a/pandora_console/include/styles/diagnostics.css
+++ b/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;
+}
diff --git a/pandora_console/include/styles/discovery.css b/pandora_console/include/styles/discovery.css
index 2095e98b8e..5e19c2ed51 100644
--- a/pandora_console/include/styles/discovery.css
+++ b/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;
+}