From 3634aab8077d840691d817ff1f925240b2ea7268 Mon Sep 17 00:00:00 2001
From: "jose.gonzalez@pandorafms.com" <jose.gonzalez@pandorafms.com>
Date: Mon, 24 Oct 2022 19:54:15 +0200
Subject: [PATCH] Code improvement

---
 pandora_console/include/functions_html.php | 85 ++++++++--------------
 pandora_console/include/styles/pandora.css | 67 ++++++++++++-----
 2 files changed, 77 insertions(+), 75 deletions(-)

diff --git a/pandora_console/include/functions_html.php b/pandora_console/include/functions_html.php
index 4b10ba8917..4d3ae6abc5 100644
--- a/pandora_console/include/functions_html.php
+++ b/pandora_console/include/functions_html.php
@@ -3329,56 +3329,19 @@ function html_print_input_color($name, $value, $id='', $class=false, $return=fal
  */
 function html_print_submit_button($label='OK', $name='', $disabled=false, $attributes='', $return=false)
 {
-    if (empty($name) === true) {
-        $name = 'unnamed';
+    if (is_string($attributes) === true) {
+        $attributes = [];
     }
 
-    // Icon for show in button.
-    $iconToUse = '';
-    $attributesOutput = '';
-    if (is_array($attributes) === true) {
-        foreach ($attributes as $attribute => $value) {
-            if ($attribute === 'icon') {
-                $iconToUse = $value;
-            } else if ($attribute === 'secondary') {
-                $secondary = true;
-            } else {
-                $attributesOutput .= $attribute.'="'.$value.'" ';
-            }
-        }
-    } else if (empty($attributes) === false && is_string($attributes) === true) {
-        $tmpData = explode(' ', $attributes);
-        $iconToUse = $tmpData[(array_search('sub', $tmpData) + 1)];
-        $iconToUse = preg_replace('([^A-Za-z])', '', $iconToUse);
-    }
+    $attributes['type'] = 'submit';
 
-    // $secondary = true;
-    // Transform secondary boolean to string.
-    $secondary = ($secondary === true) ? ' secondary' : '';
-
-    if (empty($iconToUse) === false) {
-        $iconDiv = html_print_div(
-            [
-                'style' => '',
-                'class' => sprintf(
-                    'subIcon %s%s',
-                    $iconToUse,
-                    $secondary
-                ),
-            ],
-            true
-        );
-    } else {
-        $iconDiv = '';
-    }
-
-    $output = sprintf(
-        '<button class="submitButton%s"%s%s>%s%s</button>',
-        $secondary,
-        ($disabled === true) ? ' disabled' : '',
-        $attributesOutput,
+    $output = html_print_button(
         $label,
-        $iconDiv
+        $name,
+        $disabled,
+        '',
+        $attributes,
+        true
     );
 
     if ($return === false) {
@@ -3407,6 +3370,7 @@ function html_print_submit_button($label='OK', $name='', $disabled=false, $attri
 function html_print_button($label='OK', $name='', $disabled=false, $script='', $attributes='', $return=false, $imageButton=false, $modal=false, $message='')
 {
     $output = '';
+    $classes = '';
 
     if (empty($name) === true) {
         $name = 'unnamed';
@@ -3420,8 +3384,14 @@ function html_print_button($label='OK', $name='', $disabled=false, $script='', $
         foreach ($attr_array as $attribute => $value) {
             if ($attribute === 'icon') {
                 $iconToUse = $value;
-            } else if ($attribute === 'secondary') {
-                $secondary = true;
+            } else if ($attribute === 'mode') {
+                $buttonMode = $value;
+                $classes .= ' '.$value;
+            } else if ($attribute === 'type') {
+                $buttonType = $value;
+                $classes .= ' '.$value.'Button';
+            } else if ($attribute === 'class') {
+                $classes .= ' '.$value;
             } else {
                 $attributes .= $attribute.'="'.$value.'" ';
             }
@@ -3432,18 +3402,14 @@ function html_print_button($label='OK', $name='', $disabled=false, $script='', $
         $iconToUse = preg_replace('([^A-Za-z])', '', $iconToUse);
     }
 
-    // $secondary = true;
-    // Transform secondary boolean to string.
-    $secondary = ($secondary === true) ? ' secondary' : '';
-
     if (empty($iconToUse) === false) {
         $iconDiv = html_print_div(
             [
                 'style' => '',
                 'class' => sprintf(
-                    'subIcon %s%s',
+                    'subIcon %s %s',
                     $iconToUse,
-                    $secondary
+                    (isset($buttonMode) === true) ? $buttonMode : ''
                 ),
             ],
             true
@@ -3459,9 +3425,16 @@ function html_print_button($label='OK', $name='', $disabled=false, $script='', $
         $content = $iconDiv;
     }
 
+    // In case of not selected button type, in this case, will be normal button.
+    if (isset($buttonType) === false || ($buttonType !== 'button' && $buttonType !== 'submit')) {
+        $buttonType = 'button';
+        $classes .= ' buttonButton';
+    }
+
     $output = sprintf(
-        '<button type="button" class="inputButton %s " %s %s %s %s %s > %s </button>',
-        $secondary,
+        '<button type="%s" class="%s" %s %s %s %s %s >%s</button>',
+        $buttonType,
+        $classes,
         (empty($name) === false) ? ' name="'.$name.'"' : '',
         (empty($name) === false) ? ' id="button-'.$name.'"' : '',
         (empty($label) === false) ? ' value="'.$label.'"' : '',
diff --git a/pandora_console/include/styles/pandora.css b/pandora_console/include/styles/pandora.css
index e47d1f3afd..fee3efcb72 100644
--- a/pandora_console/include/styles/pandora.css
+++ b/pandora_console/include/styles/pandora.css
@@ -9044,7 +9044,7 @@ input[type="submit"].secondary:active {
   color: #0d312f;
 }
 
-button.inputButton,
+button.buttonButton,
 button.submitButton {
   display: flex;
   justify-content: space-between;
@@ -9063,8 +9063,43 @@ button.submitButton {
   cursor: pointer;
 }
 
-button.inputButton:not(.secondary),
-button.submitButton:not(.secondary) {
+button.buttonButton.mini,
+button.submitButton.mini {
+  height: 32px;
+}
+
+button.buttonButton.link,
+button.submitButton.link {
+  height: 32px;
+  text-decoration: underline;
+  box-shadow: none;
+  background: rgba(0, 0, 0, 0) !important;
+  border-color: rgba(0, 0, 0, 0) !important;
+  color: #14524f;
+}
+
+button.buttonButton.link > div,
+button.submitButton.link > div {
+  color: #14524f;
+}
+
+button.buttonButton.link:hover,
+button.submitButton.link:hover,
+button.buttonButton.link > div:hover,
+button.submitButton.link > div:hover {
+  background-color: #e1e7ee;
+}
+
+button.buttonButton.link:hover,
+button.submitButton.link:hover,
+button.buttonButton.link > div:hover,
+button.submitButton.link > div:hover {
+  color: #fff;
+  background-color: #96a2bf;
+}
+
+button.buttonButton:not(.secondary):not(.link),
+button.submitButton:not(.secondary):not(.link) {
   background: linear-gradient(
     90deg,
     #14524f 0%,
@@ -9076,24 +9111,18 @@ button.submitButton:not(.secondary) {
   transition: ease-in 0.3s;
 }
 
-button.inputButton:hover,
+button.buttonButton:hover,
 button.submitButton:hover {
-  background-position: -100% 0;
-  /*border: 5px solid #1d7873;*/
+  background-position: -100% 0 !important;
 }
 
-button.inputButton:active,
+button.buttonButton:active,
 button.submitButton:active {
   transition: ease-in 100ms;
   border: 2px solid #57ea82;
 }
-/*button.inputButton:active,
-button.submitButton:active {
-  transition: ease-in 100ms;
-  background-color: #0d312f;
-}*/
 
-button.inputButton > div,
+button.buttonButton > div,
 button.submitButton > div {
   background-color: #fff;
   width: 2rem;
@@ -9101,36 +9130,36 @@ button.submitButton > div {
   margin-left: 1rem;
 }
 
-button.inputButton.secondary,
+button.buttonButton.secondary,
 button.submitButton.secondary {
   background-color: #fff;
   color: #14524f;
   border: 2px solid #14524f;
 }
 
-button.inputButton.secondary > div,
+button.buttonButton.secondary > div,
 button.submitButton.secondary > div {
   background-color: #14524f !important;
 }
 
-button.inputButton.secondary:hover,
+button.buttonButton.secondary:hover,
 button.submitButton.secondary:hover {
   color: #1d7873 !important;
   border-color: #1d7873 !important;
 }
 
-button.inputButton.secondary:hover > div,
+button.buttonButton.secondary:hover > div,
 button.submitButton.secondary:hover > div {
   background-color: #1d7873 !important;
 }
 
-button.inputButton.secondary:active,
+button.buttonButton.secondary:active,
 button.submitButton.secondary:active {
   color: #0d312f !important;
   border-color: #0d312f !important;
 }
 
-button.inputButton.secondary:active > div,
+button.buttonButton.secondary:active > div,
 button.submitButton.secondary:active > div {
   background-color: #0d312f !important;
 }