From 0b352860cfd5ea1987dfc6cef1206d3c95cc45bd Mon Sep 17 00:00:00 2001
From: Tatiana Llorente <tatiana.llorente@artica.es>
Date: Mon, 15 Apr 2019 13:11:58 +0200
Subject: [PATCH 1/3] New style for modal window Show More - #3613

Former-commit-id: 61cb4c99ef4f586cfdf07df5262c789cdee75915
---
 pandora_console/include/ajax/events.php      | 14 ++--
 pandora_console/include/functions_events.php | 76 +++++++++++++-------
 pandora_console/include/styles/pandora.css   | 72 +++++++++++++++++++
 3 files changed, 128 insertions(+), 34 deletions(-)

diff --git a/pandora_console/include/ajax/events.php b/pandora_console/include/ajax/events.php
index 6b7be8eb28..6ba163c7ed 100644
--- a/pandora_console/include/ajax/events.php
+++ b/pandora_console/include/ajax/events.php
@@ -418,15 +418,15 @@ if ($get_extended_event) {
     }
 
     // Tabs.
-    $tabs = "<ul style='background:#ffffff !important; border-top: 0px; border-left: 0px; border-right: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; border-color: #D3D3D3;'>";
-    $tabs .= "<li><a href='#extended_event_general_page' id='link_general'>".html_print_image('images/lightning_go.png', true)."<span style='position:relative;top:-6px;left:5px;margin-right:10px;'>".__('General').'</span></a></li>';
+    $tabs = "<ul class='events_tabs'>";
+    $tabs .= "<li><a href='#extended_event_general_page' id='link_general'>".html_print_image('images/lightning_go.png', true).'<span>'.__('General').'</span></a></li>';
     if (events_has_extended_info($event['id_evento']) === true) {
-        $tabs .= "<li><a href='#extended_event_related_page' id='link_related'>".html_print_image('images/zoom.png', true)."<span style='position:relative;top:-6px;left:5px;margin-right:10px;'>".__('Related').'</span></a></li>';
+        $tabs .= "<li><a href='#extended_event_related_page' id='link_related'>".html_print_image('images/zoom.png', true).'<span>'.__('Related').'</span></a></li>';
     }
 
-    $tabs .= "<li><a href='#extended_event_details_page' id='link_details'>".html_print_image('images/zoom.png', true)."<span style='position:relative;top:-6px;left:5px;margin-right:10px;'>".__('Details').'</span></a></li>';
-    $tabs .= "<li><a href='#extended_event_custom_fields_page' id='link_custom_fields'>".html_print_image('images/custom_field_col.png', true)."<span style='position:relative;top:-6px;left:5px;margin-right:10px;'>".__('Agent fields').'</span></a></li>';
-    $tabs .= "<li><a href='#extended_event_comments_page' id='link_comments'>".html_print_image('images/pencil.png', true)."<span style='position:relative;top:-6px;left:5px;margin-right:10px;'>".__('Comments').'</span></a></li>';
+    $tabs .= "<li><a href='#extended_event_details_page' id='link_details'>".html_print_image('images/zoom.png', true).'<span>'.__('Details').'</span></a></li>';
+    $tabs .= "<li><a href='#extended_event_custom_fields_page' id='link_custom_fields'>".html_print_image('images/custom_field_col.png', true).'<span>'.__('Agent fields').'</span></a></li>';
+    $tabs .= "<li><a href='#extended_event_comments_page' id='link_comments'>".html_print_image('images/pencil.png', true).'<span>'.__('Comments').'</span></a></li>';
 
     if (!$readonly
         && ((tags_checks_event_acl(
@@ -546,7 +546,7 @@ if ($get_extended_event) {
 
     $loading = '<div id="response_loading" style="display:none">'.html_print_image('images/spinner.gif', true).'</div>';
 
-    $out = '<div id="tabs" style="height:95%; overflow: auto">'.$tabs.$notifications.$loading.$general.$details.$related.$custom_fields.$comments.$responses.$custom_data.html_print_input_hidden('id_event', $event['id_evento']).'</div>';
+    $out = '<div id="tabs">'.$tabs.$notifications.$loading.$general.$details.$related.$custom_fields.$comments.$responses.$custom_data.html_print_input_hidden('id_event', $event['id_evento']).'</div>';
 
     $js = '<script>
 	$(function() {
diff --git a/pandora_console/include/functions_events.php b/pandora_console/include/functions_events.php
index 0182c2141b..4bbea6037f 100644
--- a/pandora_console/include/functions_events.php
+++ b/pandora_console/include/functions_events.php
@@ -2521,9 +2521,7 @@ function events_page_custom_fields($event)
     $table->width = '100%';
     $table->data = [];
     $table->head = [];
-    $table->style[0] = 'width:35%; font-weight: bold; text-align: left; height: 23px;';
-    $table->style[1] = 'text-align: left; height: 23px;';
-    $table->class = 'alternate rounded_cells';
+    $table->class = 'events_show_more_table';
 
     $all_customs_fields = (bool) check_acl(
         $config['id_user'],
@@ -2671,11 +2669,9 @@ function events_page_details($event, $server='')
     $table_details->width = '100%';
     $table_details->data = [];
     $table_details->head = [];
-    $table_details->cellspacing = 2;
-    $table_details->cellpadding = 2;
-    $table_details->style[0] = 'width:35%; font-weight: bold; text-align: left; height: 23px;';
-    $table_details->style[1] = 'text-align: left; height: 23px;';
-    $table_details->class = 'alternate rounded_cells';
+    $table_details->cellspacing = 0;
+    $table_details->cellpadding = 0;
+    $table_details->class = 'events_show_more_table';
 
     /*
      * Useless switch.
@@ -3137,14 +3133,12 @@ function events_page_general($event)
 
     // General.
     $table_general = new stdClass;
-    $table_general->cellspacing = 2;
-    $table_general->cellpadding = 2;
+    $table_general->cellspacing = 0;
+    $table_general->cellpadding = 0;
     $table_general->width = '100%';
     $table_general->data = [];
     $table_general->head = [];
-    $table_general->style[0] = 'width:35%; font-weight: bold; text-align: left; height: 23px;';
-    $table_general->style[1] = 'text-align: left; height: 23px;';
-    $table_general->class = 'alternate rounded_cells';
+    $table_general->class = 'events_show_more_table';
 
     $data = [];
     $data[0] = __('Event ID');
@@ -3185,10 +3179,17 @@ function events_page_general($event)
 
     $data = [];
     $data[0] = __('Type');
-    $data[1] = events_print_type_img(
+    /*
+        $data[1] = events_print_type_img(
         $event['event_type'],
         true
-    ).' '.events_print_type_description($event['event_type'], true);
+    ).' '.events_print_type_description($event['event_type'], true);*/
+    $data[1] = events_print_type_description($event['event_type'], true);
+    $data[2] = events_print_type_img(
+        $event['event_type'],
+        true
+    );
+
     $table_general->data[] = $data;
 
     $data = [];
@@ -3208,8 +3209,21 @@ function events_page_general($event)
     $data = [];
     $data[0] = __('Severity');
     $event_criticity = get_priority_name($event['criticity']);
-
-    $data[1] = html_print_image(
+    /*
+        $data[1] = html_print_image(
+        $img_sev,
+        true,
+        [
+            'class'  => 'image_status',
+            'width'  => 12,
+            'height' => 12,
+            'title'  => $event_criticity,
+        ]
+        );
+        $data[1] .= ' '.$event_criticity;
+    */
+    $data[1] = $event_criticity;
+    $data[2] = html_print_image(
         $img_sev,
         true,
         [
@@ -3219,7 +3233,6 @@ function events_page_general($event)
             'title'  => $event_criticity,
         ]
     );
-    $data[1] .= ' '.$event_criticity;
     $table_general->data[] = $data;
 
     // Get Status.
@@ -3227,7 +3240,9 @@ function events_page_general($event)
 
     $data = [];
     $data[0] = __('Status');
-    $data[1] = html_print_image($event_st['img'], true).' '.$event_st['title'];
+    // $data[1] = html_print_image($event_st['img'], true).' '.$event_st['title'];
+    $data[1] = $event_st['title'];
+    $data[2] = html_print_image($event_st['img'], true);
     $table_general->data[] = $data;
 
     // If event is validated, show who and when acknowleded it.
@@ -3250,12 +3265,11 @@ function events_page_general($event)
 
     $data = [];
     $data[0] = __('Group');
-    $data[1] = '';
+    $data[1] = groups_get_name($event['id_grupo']);
     if (!$config['show_group_name']) {
-        $data[1] = ui_print_group_icon($event['id_grupo'], true);
+        $data[2] = ui_print_group_icon($event['id_grupo'], true);
     }
 
-    $data[1] .= groups_get_name($event['id_grupo']);
     $table_general->data[] = $data;
 
     $data = [];
@@ -3281,6 +3295,16 @@ function events_page_general($event)
 
     $table_general->data[] = $data;
 
+    $table_data = $table_general->data;
+    $table_data_total = count($table_data);
+
+    for ($i = 0; $i <= $table_data_total; $i++) {
+        if (count($table_data[$i]) == 2) {
+            $table_general->colspan[$i][1] = 2;
+            $table_general->style[2] = 'text-align:center; width:10%;';
+        }
+    }
+
     $general = '<div id="extended_event_general_page" class="extended_event_pages">'.html_print_table($table_general, true).'</div>';
 
     return $general;
@@ -3304,9 +3328,7 @@ function events_page_comments($event, $childrens_ids=[])
     $table_comments->width = '100%';
     $table_comments->data = [];
     $table_comments->head = [];
-    $table_comments->style[0] = 'width:35%; vertical-align: top; text-align: left;';
-    $table_comments->style[1] = 'text-align: left;';
-    $table_comments->class = 'alternate rounded_cells';
+    $table_comments->class = 'events_show_more_table';
 
     $event_comments = $event['user_comment'];
     $event_comments = str_replace(["\n", '&#x0a;'], '<br>', $event_comments);
@@ -3411,9 +3433,9 @@ function events_page_comments($event, $childrens_ids=[])
         $childrens_ids
     ))) && $config['show_events_in_local'] == false || $config['event_replication'] == false
     ) {
-        $comments_form = '<br><div id="comments_form" style="width:98%;">'.html_print_textarea('comment', 3, 10, '', 'style="min-height: 15px; width: 100%; disabled"', true);
+        $comments_form = '<br><div id="comments_form" style="width:98%;">'.html_print_textarea('comment', 3, 10, '', 'style="min-height: 15px; padding:0; width: 100%; disabled"', true);
 
-        $comments_form .= '<br><div style="text-align:right;">'.html_print_button(__('Add comment'), 'comment_button', false, 'event_comment();', 'class="sub next"', true).'</div><br></div>';
+        $comments_form .= '<br><div style="text-align:right; margin-top:10px;">'.html_print_button(__('Add comment'), 'comment_button', false, 'event_comment();', 'class="sub next"', true).'</div><br></div>';
     } else {
         $comments_form = ui_print_message(
             __('If event replication is ongoing, it won\'t be possible to enter comments here. This option is only to allow local pandora users to see comments, but not to operate with them. The operation, when event replication is enabled, must be done only in the Metaconsole.')
diff --git a/pandora_console/include/styles/pandora.css b/pandora_console/include/styles/pandora.css
index 00e48c9b1b..f3713ccd89 100644
--- a/pandora_console/include/styles/pandora.css
+++ b/pandora_console/include/styles/pandora.css
@@ -3618,6 +3618,78 @@ div.simple_value > a > span.text p {
   cursor: pointer;
 }
 
+.events_show_more_table {
+  border-spacing: 0px;
+  text-align: left;
+}
+
+/* Modal window - Show More */
+table.events_show_more_table tr:nth-child(odd) td {
+  background-color: #ffffff;
+}
+table.events_show_more_table tr:nth-child(even) td {
+  background-color: #f5f5f5;
+  border-top: 1px solid #cacaca;
+  border-bottom: 1px solid #cacaca;
+}
+
+table.events_show_more_table tr td {
+  height: 22px;
+  padding: 4px;
+}
+
+table.events_show_more_table tr td:first-child {
+  width: 35%;
+  font-weight: bold;
+  padding-left: 20px;
+}
+
+ul.events_tabs {
+  background: #ffffff !important;
+  border: 0px;
+  display: flex;
+  justify-content: space-between;
+  padding: 0px !important;
+}
+
+ul.events_tabs:before,
+ul.events_tabs:after {
+  content: none !important;
+}
+
+ul.events_tabs > li {
+  margin: 0 !important;
+  width: 20%;
+  text-align: center;
+  float: none !important;
+  outline-width: 0;
+}
+
+ul.events_tabs > li.ui-state-default {
+  background: #fff !important;
+  border: none !important;
+  border-bottom: 2px solid black !important;
+}
+
+ul.events_tabs > li a {
+  text-align: center;
+  float: none !important;
+  padding: 8px !important;
+  display: block;
+}
+
+ul.events_tabs > li span {
+  position: relative;
+  top: -6px;
+  left: 5px;
+  margin-right: 10px;
+}
+
+ul.events_tabs > li.ui-tabs-active {
+  border-bottom: 2px solid #82b92e !important;
+  border-top: 2px solid #82b92e !important;
+}
+
 /*
  * ---------------------------------------------------------------------
  * - modal window and edit user 									-

From a930d15d443c800b1c54cee0bb4edde00e4e73c1 Mon Sep 17 00:00:00 2001
From: Tatiana Llorente <tatiana.llorente@artica.es>
Date: Mon, 15 Apr 2019 13:15:11 +0200
Subject: [PATCH 2/3] New style for modal window Show More - #3613

Former-commit-id: 3855d8463e3ba6709ec111c867d0534c704db1a7
---
 pandora_console/include/functions_events.php | 19 -------------------
 1 file changed, 19 deletions(-)

diff --git a/pandora_console/include/functions_events.php b/pandora_console/include/functions_events.php
index 4bbea6037f..274e2f97ea 100644
--- a/pandora_console/include/functions_events.php
+++ b/pandora_console/include/functions_events.php
@@ -3179,11 +3179,6 @@ function events_page_general($event)
 
     $data = [];
     $data[0] = __('Type');
-    /*
-        $data[1] = events_print_type_img(
-        $event['event_type'],
-        true
-    ).' '.events_print_type_description($event['event_type'], true);*/
     $data[1] = events_print_type_description($event['event_type'], true);
     $data[2] = events_print_type_img(
         $event['event_type'],
@@ -3209,19 +3204,6 @@ function events_page_general($event)
     $data = [];
     $data[0] = __('Severity');
     $event_criticity = get_priority_name($event['criticity']);
-    /*
-        $data[1] = html_print_image(
-        $img_sev,
-        true,
-        [
-            'class'  => 'image_status',
-            'width'  => 12,
-            'height' => 12,
-            'title'  => $event_criticity,
-        ]
-        );
-        $data[1] .= ' '.$event_criticity;
-    */
     $data[1] = $event_criticity;
     $data[2] = html_print_image(
         $img_sev,
@@ -3240,7 +3222,6 @@ function events_page_general($event)
 
     $data = [];
     $data[0] = __('Status');
-    // $data[1] = html_print_image($event_st['img'], true).' '.$event_st['title'];
     $data[1] = $event_st['title'];
     $data[2] = html_print_image($event_st['img'], true);
     $table_general->data[] = $data;

From 77941953a249895c364984e749179520ceec2a6e Mon Sep 17 00:00:00 2001
From: Tatiana Llorente <tatiana.llorente@artica.es>
Date: Fri, 26 Apr 2019 11:57:41 +0200
Subject: [PATCH 3/3] New style for modal window Show More. Tabs: Responses,
 Related, Custom data. - #3613

Former-commit-id: 48ed0a69416232a9016b6aaff76378954ddacdc1
---
 .../include/ajax/events_extended.php          |  4 +--
 pandora_console/include/functions_events.php  | 34 +++++++++----------
 .../include/javascript/pandora_events.js      |  4 +--
 3 files changed, 20 insertions(+), 22 deletions(-)

diff --git a/pandora_console/include/ajax/events_extended.php b/pandora_console/include/ajax/events_extended.php
index 4993014ddf..9c6ea27482 100644
--- a/pandora_console/include/ajax/events_extended.php
+++ b/pandora_console/include/ajax/events_extended.php
@@ -82,11 +82,9 @@ if ($get_extended_info == 1) {
     $table->width = '100%';
     $table->data = [];
     $table->head = [];
-    $table->style[0] = 'min-width:120px; text-align: left;';
-    $table->style[1] = 'text-align: left;';
     $table->cellspacing = 2;
     $table->cellpadding = 2;
-    $table->class = 'alternate rounded_cells';
+    $table->class = 'events_show_more_table';
 
     $output = [];
     $output[] = '<b>'.__('Timestamp').'</b>';
diff --git a/pandora_console/include/functions_events.php b/pandora_console/include/functions_events.php
index 274e2f97ea..257ef75f19 100644
--- a/pandora_console/include/functions_events.php
+++ b/pandora_console/include/functions_events.php
@@ -1987,9 +1987,9 @@ function events_page_responses($event, $childrens_ids=[])
     $table_responses->width = '100%';
     $table_responses->data = [];
     $table_responses->head = [];
-    $table_responses->style[0] = 'width:35%; font-weight: bold; text-align: left; height: 23px;';
-    $table_responses->style[1] = 'text-align: left; height: 23px; text-align: right;';
-    $table_responses->class = 'alternate rounded_cells';
+    $table_responses->style[0] = 'height:30px';
+    $table_responses->style[2] = 'text-align:right;';
+    $table_responses->class = 'events_show_more_table';
 
     if (tags_checks_event_acl($config['id_user'], $event['id_grupo'], 'EM', $event['clean_tags'], $childrens_ids)) {
         // Owner.
@@ -2056,7 +2056,7 @@ function events_page_responses($event, $childrens_ids=[])
             -1,
             true
         );
-        $data[1] .= html_print_button(
+        $data[2] .= html_print_button(
             __('Update'),
             'owner_button',
             false,
@@ -2136,7 +2136,7 @@ function events_page_responses($event, $childrens_ids=[])
     );
 
     if (!$status_blocked) {
-        $data[1] .= html_print_button(
+        $data[2] .= html_print_button(
             __('Update'),
             'status_button',
             false,
@@ -2151,7 +2151,8 @@ function events_page_responses($event, $childrens_ids=[])
     // Comments.
     $data = [];
     $data[0] = __('Comment');
-    $data[1] = html_print_button(
+    $data[1] = '';
+    $data[2] = html_print_button(
         __('Add comment'),
         'comment_button',
         false,
@@ -2173,8 +2174,9 @@ function events_page_responses($event, $childrens_ids=[])
         // Delete.
         $data = [];
         $data[0] = __('Delete event');
-        $data[1] = '<form method="post">';
-        $data[1] .= html_print_button(
+        $data[1] = '';
+        $data[2] = '<form method="post">';
+        $data[2] .= html_print_button(
             __('Delete event'),
             'delete_button',
             false,
@@ -2182,13 +2184,13 @@ function events_page_responses($event, $childrens_ids=[])
             'class="sub cancel"',
             true
         );
-        $data[1] .= html_print_input_hidden('delete', 1, true);
-        $data[1] .= html_print_input_hidden(
+        $data[2] .= html_print_input_hidden('delete', 1, true);
+        $data[2] .= html_print_input_hidden(
             'validate_ids',
             $event['id_evento'],
             true
         );
-        $data[1] .= '</form>';
+        $data[2] .= '</form>';
 
         $table_responses->data[] = $data;
     }
@@ -2229,7 +2231,7 @@ function events_page_responses($event, $childrens_ids=[])
             $server_id = 0;
         }
 
-        $data[1] .= html_print_button(
+        $data[2] .= html_print_button(
             __('Execute'),
             'custom_response_button',
             false,
@@ -2249,14 +2251,14 @@ function events_page_responses($event, $childrens_ids=[])
 				$('.params_rows').remove();
 				
 				$('#responses_table')
-					.append('<tr class=\"params_rows\"><td style=\"text-align:left; font-weight: bolder;\">".__('Description')."</td><td style=\"text-align:left;\">'+description+'</td></tr>');
+					.append('<tr class=\"params_rows\"><td>".__('Description')."</td><td style=\"text-align:left; height:30px;\" colspan=\"2\">'+description+'</td></tr>');
 				
 				if (params.length == 1 && params[0] == '') {
 					return;
 				}
 				
 				$('#responses_table')
-					.append('<tr class=\"params_rows\"><td style=\"text-align:left; padding-left:20px;\" colspan=\"2\">".__('Parameters')."</td></tr>');
+					.append('<tr class=\"params_rows\"><td style=\"text-align:left; padding-left:20px; height:30px;\" colspan=\"3\">".__('Parameters')."</td></tr>');
 				
 				for (i = 0; i < params.length; i++) {
 					add_row_param('responses_table',params[i]);
@@ -2981,9 +2983,7 @@ function events_page_custom_data($event)
     $table->width = '100%';
     $table->data = [];
     $table->head = [];
-    $table->style[0] = 'width:35%; font-weight: bold; text-align: left;';
-    $table->style[1] = 'text-align: left;';
-    $table->class = 'alternate rounded_cells';
+    $table->class = 'events_show_more_table';
 
     $json_custom_data = base64_decode($event['custom_data']);
     $custom_data = json_decode($json_custom_data);
diff --git a/pandora_console/include/javascript/pandora_events.js b/pandora_console/include/javascript/pandora_events.js
index 42d67fffd6..1f1ff42c3f 100644
--- a/pandora_console/include/javascript/pandora_events.js
+++ b/pandora_console/include/javascript/pandora_events.js
@@ -365,9 +365,9 @@ function get_event_name(event_id, meta, history) {
 
 function add_row_param(id_table, param) {
   $("#" + id_table).append(
-    '<tr class="params_rows"><td style="text-align:left; padding-left:40px;">' +
+    '<tr class="params_rows"><td style="text-align:left; padding-left:40px; font-weight: normal; font-style: italic;">' +
       param +
-      '</td><td style="text-align:left"><input type="text" name="' +
+      '</td><td style="text-align:left" colspan="2"><input type="text" name="' +
       param +
       '" id="' +
       param +