Custom Graphs visual changes

pandora_console/godmode/reporting/graph_builder.graph_editor.php

@@ -235,8 +235,18 @@ if ($count_module_array > 0) {
         echo '<table><tr>';
 
         echo "<form method='post' action='index.php?sec=reporting&sec2=godmode/reporting/graph_builder&edit_graph=1&tab=graph_editor&change_label=1&id=".$id_graph.'&graph='.$idgs_array[$a]."'>";
+        echo '<div class="flex">';
         html_print_input_text('label', $label_array[$a], '', 30, 80, false, false);
-        html_print_submit_button('Ok', 'btn', false, '', false);
+        html_print_submit_button(
+            __('Ok'),
+            'btn',
+            false,
+            [
+                'mode'  => 'mini',
+                'class' => 'inputbuton',
+            ]
+        );
+        echo '</div>';
         echo '</form>';
 
         echo '</tr></table>';
@@ -246,14 +256,24 @@ if ($count_module_array > 0) {
         echo '<table><tr>';
 
         echo "<form method='post' action='index.php?sec=reporting&sec2=godmode/reporting/graph_builder&edit_graph=1&tab=graph_editor&change_weight=1&id=".$id_graph.'&graph='.$idgs_array[$a]."'>";
+        echo '<div class="flex">';
         html_print_input_text('weight', $weight_array[$a], '', 20, 10, false, false);
-        html_print_submit_button('Ok', 'btn', false, '', false);
+        html_print_submit_button(
+            __('Ok'),
+            'btn',
+            false,
+            [
+                'mode'  => 'mini',
+                'class' => 'inputbuton',
+            ]
+        );
+        echo '</div>';
         echo '</form>';
 
         echo '</tr></table>';
         echo '</td>';
         echo "<td class='$tdcolor' align=''>";
-        echo "<a href='index.php?sec=reporting&sec2=godmode/reporting/graph_builder&edit_graph=1&tab=graph_editor&delete_module=1&id=".$id_graph.'&delete='.$idgs_array[$a]."'>".html_print_image('images/cross.png', true, ['title' => __('Delete'), 'class' => 'invert_filter']).'</a>';
+        echo "<a href='index.php?sec=reporting&sec2=godmode/reporting/graph_builder&edit_graph=1&tab=graph_editor&delete_module=1&id=".$id_graph.'&delete='.$idgs_array[$a]."'>".html_print_image('images/delete.svg', true, ['title' => __('Delete'), 'class' => 'invert_filter main_menu_icon']).'</a>';
 
         echo '</td>';
 
@@ -275,54 +295,78 @@ $table = new stdClass();
 $table->width = '100%';
 $table->colspan[0][0] = 3;
 $table->size = [];
-$table->size[0] = '25%';
+
-$table->size[1] = '25%';
-$table->size[2] = '25%';
-$table->size[3] = '25%';
 if (defined('METACONSOLE')) {
     $table->class = 'databox data';
     $table->head[0] = __('Sort items');
     $table->head_colspan[0] = 4;
     $table->headstyle[0] = 'text-align: center';
+    $table->size[0] = '25%';
+    $table->size[1] = '25%';
+    $table->size[2] = '25%';
+    $table->size[3] = '25%';
 } else {
-    $table->data[0][0] = '<b>'.__('Sort items').'</b>';
+    $table->class = 'filter-table-adv';
+    $table->size[0] = '50%';
+    $table->size[1] = '50%';
 }
 
-$table->data[1][0] = __('Sort selected items');
+$table->data[0][0] = html_print_label_input_block(
-$table->data[1][1] = html_print_select_style(
+    __('Sort selected items'),
+    html_print_select_style(
+        [
+            'before' => __('before to'),
+            'after'  => __('after to'),
+        ],
+        'move_to',
+        '',
+        '',
+        '',
+        '',
+        0,
+        true
+    )
+);
+$table->data[0][1] = html_print_label_input_block(
+    __('Position'),
+    html_print_input_text_extended(
+        'position_to_sort',
+        1,
+        'text-position_to_sort',
+        '',
+        3,
+        10,
+        false,
+        "only_numbers('position_to_sort');",
+        '',
+        true
+    ).html_print_input_hidden('ids_items_to_sort', '', true)
+);
+
+
+$SortItems = "<form action='index.php?sec=reporting&sec2=godmode/reporting/graph_builder&tab=graph_editor&edit_graph=1&id=".$id_graph."' method='post' onsubmit='return added_ids_sorted_items_to_hidden_input();'>";
+$SortItems .= html_print_table($table, true);
+$SortItems .= html_print_input_hidden('action', 'sort_items', true);
+$SortItems .= html_print_div(
     [
-        'before' => __('before to'),
+        'class'   => 'action-buttons',
-        'after'  => __('after to'),
+        'content' => html_print_submit_button(
+            __('Sort'),
+            'srcbutton',
+            false,
+            [
+                'class' => 'mini',
+                'icon'  => 'search',
+                'mode'  => 'secondary',
+            ],
+            true
+        ),
     ],
-    'move_to',
-    '',
-    '',
-    '',
-    '',
-    0,
     true
 );
-$table->data[1][2] = html_print_input_text_extended(
+$SortItems .= '</form>';
-    'position_to_sort',
-    1,
-    'text-position_to_sort',
-    '',
-    3,
-    10,
-    false,
-    "only_numbers('position_to_sort');",
-    '',
-    true
-);
-$table->data[1][2] .= html_print_input_hidden('ids_items_to_sort', '', true);
-$table->data[1][3] = html_print_submit_button(__('Sort'), 'sort_submit', false, 'class="sub upd"', true);
-$table->data[1][4] = html_print_input_hidden('action', 'sort_items', true);
 
-echo "<form action='index.php?sec=reporting&sec2=godmode/reporting/graph_builder&tab=graph_editor&edit_graph=1&id=".$id_graph."' method='post' onsubmit='return added_ids_sorted_items_to_hidden_input();'>";
+ui_toggle($SortItems, __('Sort items'), '', '', false);
-html_print_table($table);
-echo '</form>';
-
-echo '<br>';
 
 
 // Configuration form.
@@ -349,7 +393,20 @@ echo '</td>';
 echo '</tr><tr>';
 echo "<td colspan='3' align='right'></td>";
 echo '</tr></table>';
-echo "<div class='w100p'><input id='submit-add' type=submit name='store' class='sub add right' value='".__('Add')."'></div></form>";
+$ActionButtons[] = html_print_submit_button(
+    __('Add'),
+    'submit-add',
+    false,
+    [
+        'class' => 'sub ok',
+        'icon'  => 'next',
+    ],
+    true
+);
+html_print_action_buttons(
+    implode('', $ActionButtons),
+    ['type' => 'form_action']
+);
 
 ui_require_jquery_file('pandora.controls');
 ui_require_jquery_file('ajaxqueue');

pandora_console/include/styles/pandora.css

@@ -11481,3 +11481,18 @@ div[role="dialog"] {
   font-size: 11pt;
   line-height: 28px;
 }
+
+input[type="text"] + .inputbuton {
+  height: 38px;
+  border-end-start-radius: 0px;
+  border-start-start-radius: 0px;
+  width: 40px;
+  min-width: 40px;
+  padding-left: 7px;
+}
+
+input[type="text"]:has(+ .inputbuton) {
+  border-end-end-radius: 0px;
+  border-start-end-radius: 0px;
+  border-right: 0px;
+}

pandora_console/operation/reporting/graph_viewer.php

@@ -423,8 +423,7 @@ if ($view_graph) {
     );
 
     if ($graph_return) {
-        echo "<table id='graph-container' class='databox filters' cellpadding='0' cellspacing='0' style='height:100%;width:100%;overflow:hidden;'>";
+        echo '<div style="background-color: white;height: 700px;overflow-y: auto;padding-top:20px;">';
-        echo '<tr><td>';
         if (!is_ajax()) {
             echo '<div id="spinner_loading" class="loading invisible" style="display:flex;flex-direction:column-reverse;justify-content:center;align-items:center">';
             echo html_print_image('images/spinner.gif', true, ['width' => '20px']);
@@ -442,7 +441,7 @@ if ($view_graph) {
 
         echo '</div>';
 
-        echo '</td></tr></table>';
+        echo '</div>';
     } else {
         ui_print_info_message([ 'no_close' => true, 'message' => __('No data.') ]);
     }