diegods/homelabdspbx
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Dashboard - Use CSS grid in parent widgets (#7437)

Browse Source 
* Dashboard - Use CSS grid on parent widgets

* Update parent.php

* Update css.php

* Update template.php
This commit is contained in:
Alex
2025-07-30 09:58:11 -07:00
committed by GitHub
parent 0fc28924a1
commit cf32511d61
4 changed files with 61 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files
core/dashboard/index.php
+18 -16
View File
@@ -131,12 +131,12 @@
$parent_uuid = null; $parent_uuid = null;
foreach ($dashboard as $row) { foreach ($dashboard as $row) {
$dashboard_name = trim(preg_replace("/[^a-z0-9_ ]/", '_', strtolower($row['dashboard_name'])),'_'); $dashboard_name = trim(preg_replace("/[^a-z0-9_]/", '_', strtolower($row['dashboard_name'])),'_');
if ($widget_id == $dashboard_name) { if ($widget_id == $dashboard_name) {
if (!empty($parent_id)) { if (!empty($parent_id)) {
//find parent uuid //find parent uuid
foreach ($dashboard as $parent_row) { foreach ($dashboard as $parent_row) {
$parent_dashboard_name = trim(preg_replace("/[^a-z0-9_ ]/", '_', strtolower($parent_row['dashboard_name'])), '_'); $parent_dashboard_name = trim(preg_replace("/[^a-z0-9_]/", '_', strtolower($parent_row['dashboard_name'])), '_');
if ($parent_dashboard_name === $parent_id) { if ($parent_dashboard_name === $parent_id) {
$parent_uuid = $parent_row['dashboard_uuid']; $parent_uuid = $parent_row['dashboard_uuid'];
break; break;
@@ -285,7 +285,7 @@ div.hud_chart {
/* dashboard settings */ /* dashboard settings */
<?php <?php
foreach ($dashboard as $row) { foreach ($dashboard as $row) {
$dashboard_name = trim(preg_replace("/[^a-z0-9_ ]/", '_', strtolower($row['dashboard_name'])),'_'); $dashboard_name = trim(preg_replace("/[^a-z0-9_]/", '_', strtolower($row['dashboard_name'])),'_');
if (!empty($row['dashboard_icon_color'])) { if (!empty($row['dashboard_icon_color'])) {
echo "#".$dashboard_name." .hud_stat:has(i) {\n"; echo "#".$dashboard_name." .hud_stat:has(i) {\n";
echo " color: ".$row['dashboard_icon_color'].";\n"; echo " color: ".$row['dashboard_icon_color'].";\n";
@@ -401,12 +401,6 @@ foreach ($dashboard as $row) {
echo " height: 195px;\n"; echo " height: 195px;\n";
echo "}\n"; echo "}\n";
} }
if ($row['dashboard_column_span'] > 1) {
echo "#".$dashboard_name." div.parent_widgets.hud_content {\n";
echo " justify-content: space-evenly;\n";
echo "}\n";
}
} }
?> ?>
@@ -416,7 +410,7 @@ foreach ($dashboard as $row) {
.col-num { grid-column: span 1; } .col-num { grid-column: span 1; }
<?php <?php
foreach ($dashboard as $row) { foreach ($dashboard as $row) {
$dashboard_name = trim(preg_replace("/[^a-z0-9_ ]/", '_', strtolower($row['dashboard_name'])),'_'); $dashboard_name = trim(preg_replace("/[^a-z0-9_]/", '_', strtolower($row['dashboard_name'])),'_');
if (isset($row['dashboard_column_span']) && is_numeric($row['dashboard_column_span'])) { if (isset($row['dashboard_column_span']) && is_numeric($row['dashboard_column_span'])) {
echo "#".$dashboard_name." {\n"; echo "#".$dashboard_name." {\n";
echo " grid-column: span 1;\n"; echo " grid-column: span 1;\n";
@@ -438,8 +432,13 @@ foreach ($dashboard as $row) {
.col-num { grid-column: span 2; } .col-num { grid-column: span 2; }
<?php <?php
foreach ($dashboard as $row) { foreach ($dashboard as $row) {
$dashboard_name = trim(preg_replace("/[^a-z0-9_ ]/", '_', strtolower($row['dashboard_name'])),'_'); $dashboard_name = trim(preg_replace("/[^a-z0-9_]/", '_', strtolower($row['dashboard_name'])),'_');
if (is_numeric($row['dashboard_column_span'])) { if (is_numeric($row['dashboard_column_span']) && $row['dashboard_column_span'] > 2) {
echo "#".$dashboard_name." {\n";
echo " grid-column: span 2;\n";
echo "}\n";
}
else if (is_numeric($row['dashboard_column_span'])) {
echo "#".$dashboard_name." {\n"; echo "#".$dashboard_name." {\n";
echo " grid-column: span ".$row['dashboard_column_span'].";\n"; echo " grid-column: span ".$row['dashboard_column_span'].";\n";
echo "}\n"; echo "}\n";
@@ -465,7 +464,7 @@ foreach ($dashboard as $row) {
.col-num { grid-column: span 2; } .col-num { grid-column: span 2; }
<?php <?php
foreach ($dashboard as $row) { foreach ($dashboard as $row) {
$dashboard_name = trim(preg_replace("/[^a-z0-9_ ]/", '_', strtolower($row['dashboard_name'])),'_'); $dashboard_name = trim(preg_replace("/[^a-z0-9_]/", '_', strtolower($row['dashboard_name'])),'_');
if (is_numeric($row['dashboard_column_span'])) { if (is_numeric($row['dashboard_column_span'])) {
echo "#".$dashboard_name." {\n"; echo "#".$dashboard_name." {\n";
echo " grid-column: span ".$row['dashboard_column_span'].";\n"; echo " grid-column: span ".$row['dashboard_column_span'].";\n";
@@ -556,11 +555,11 @@ function toggle_grid_row_end_all() {
$dashboard_content = $row['dashboard_content'] ?? ''; $dashboard_content = $row['dashboard_content'] ?? '';
$dashboard_content_text_align = $row['dashboard_content_text_align'] ?? ''; $dashboard_content_text_align = $row['dashboard_content_text_align'] ?? '';
$dashboard_content_details = $row['dashboard_content_details'] ?? ''; $dashboard_content_details = $row['dashboard_content_details'] ?? '';
$dashboard_chart_type = $row['dashboard_chart_type'] ?? "doughnut"; $dashboard_chart_type = $row['dashboard_chart_type'] ?? 'doughnut';
$dashboard_label_text_color = $row['dashboard_label_text_color'] ?? $settings->get('theme', 'dashboard_label_text_color', ''); $dashboard_label_text_color = $row['dashboard_label_text_color'] ?? $settings->get('theme', 'dashboard_label_text_color', '');
$dashboard_number_text_color = $row['dashboard_number_text_color'] ?? $settings->get('theme', 'dashboard_number_text_color', ''); $dashboard_number_text_color = $row['dashboard_number_text_color'] ?? $settings->get('theme', 'dashboard_number_text_color', '');
$dashboard_number_background_color = $row['dashboard_number_background_color'] ?? $settings->get('theme', 'dashboard_number_background_color', ''); $dashboard_number_background_color = $row['dashboard_number_background_color'] ?? $settings->get('theme', 'dashboard_number_background_color', '');
$dashboard_details_state = $row['dashboard_details_state'] ?? "expanded"; $dashboard_details_state = $row['dashboard_details_state'] ?? 'expanded';
$dashboard_row_span = $row['dashboard_row_span'] ?? 2; $dashboard_row_span = $row['dashboard_row_span'] ?? 2;
//define the regex patterns //define the regex patterns
@@ -571,7 +570,7 @@ function toggle_grid_row_end_all() {
//sanitize the data //sanitize the data
$dashboard_uuid = preg_replace($uuid_pattern, '', $dashboard_uuid); $dashboard_uuid = preg_replace($uuid_pattern, '', $dashboard_uuid);
$dashboard_name = trim(preg_replace($text_pattern, '', $dashboard_name)); $dashboard_name = trim(preg_replace($text_pattern, '', $dashboard_name));
$dashboard_name_id = trim(preg_replace("/[^a-z0-9_ ]/", '_', strtolower($dashboard_name)),'_'); $dashboard_name_id = trim(preg_replace("/[^a-z0-9_]/", '_', strtolower($dashboard_name)),'_');
$dashboard_icon = preg_replace($text_pattern, '', $dashboard_icon); $dashboard_icon = preg_replace($text_pattern, '', $dashboard_icon);
$dashboard_url = trim(preg_replace($text_pattern, '', $dashboard_url)); $dashboard_url = trim(preg_replace($text_pattern, '', $dashboard_url));
$dashboard_target = trim(preg_replace($text_pattern, '', $dashboard_target)); $dashboard_target = trim(preg_replace($text_pattern, '', $dashboard_target));
@@ -719,10 +718,13 @@ function toggle_grid_row_end_all() {
onAdd: function (evt) { onAdd: function (evt) {
evt.item.classList.add('parent_widget'); evt.item.classList.add('parent_widget');
update_widget_order(); update_widget_order();
let current_row_end = evt.item.style.gridRowEnd;
evt.item.style.gridColumn = current_row_end;
}, },
onRemove: function (evt) { onRemove: function (evt) {
evt.item.classList.remove('parent_widget'); evt.item.classList.remove('parent_widget');
update_widget_order(); update_widget_order();
evt.item.style.gridColumn = '';
}, },
}); });
}); });
core/dashboard/resources/dashboard/parent.php
+41 -17
View File
@@ -53,6 +53,11 @@
$sql .= "dashboard_description "; $sql .= "dashboard_description ";
$sql .= "from v_dashboard as d "; $sql .= "from v_dashboard as d ";
$sql .= "where dashboard_enabled = 'true' "; $sql .= "where dashboard_enabled = 'true' ";
$sql .= "and dashboard_uuid in (";
$sql .= " select dashboard_uuid from v_dashboard_groups where group_uuid in (";
$sql .= " ".$group_uuids_in." ";
$sql .= " )";
$sql .= ")";
$sql .= "and dashboard_parent_uuid = :dashboard_uuid "; $sql .= "and dashboard_parent_uuid = :dashboard_uuid ";
$sql .= "order by dashboard_order, dashboard_name asc "; $sql .= "order by dashboard_order, dashboard_name asc ";
$parameters['dashboard_uuid'] = $dashboard_uuid; $parameters['dashboard_uuid'] = $dashboard_uuid;
@@ -70,26 +75,35 @@
<style> <style>
div.parent_widgets .hud_content {
align-content: center;
}
div.parent_widgets { div.parent_widgets {
max-width: 100%;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
row-gap: 1rem; row-gap: 1rem;
} }
div.parent_widget div.hud_box:first-of-type { div.parent_widget div.hud_box:first-of-type {
min-width: 120px; /*min-width: 120px;*/
flex: 0 0 33.3333%; background: rgba(0,0,0,0);
box-sizing: border-box; border: 0px dashed rgba(0,0,0,0);
box-shadow: none; box-shadow: none;
overflow: visible;
-webkit-transition: .1s; -webkit-transition: .1s;
-moz-transition: .1s; -moz-transition: .1s;
transition: .1s; transition: .1s;
} }
div.parent_widget:has(i) div.hud_box { div.parent_widget.editable div.hud_box:first-of-type {
max-height: 89.5px; border: 1px dashed rgba(0,0,0,0.4);
}
div.parent_widget:not(:has(.parent_widgets)) .hud_content {
align-content: center;
}
div.parent_widget div.hud_chart {
padding: 7px;
} }
div.parent_widget:hover:has(i) div.hud_box, div.parent_widget:hover:has(i) div.hud_box,
@@ -103,7 +117,7 @@ div.parent_widget.editable:hover:has(i) div.hud_box {
/* dashboard settings */ /* dashboard settings */
<?php <?php
foreach ($parent_widgets as $row) { foreach ($parent_widgets as $row) {
$dashboard_name = trim(preg_replace("/[^a-z0-9_ ]/", '_', strtolower($row['dashboard_name'])),'_'); $dashboard_name = trim(preg_replace("/[^a-z0-9_]/", '_', strtolower($row['dashboard_name'])),'_');
if (!empty($row['dashboard_icon_color'])) { if (!empty($row['dashboard_icon_color'])) {
echo "#".$dashboard_name." .hud_stat:has(i) {\n"; echo "#".$dashboard_name." .hud_stat:has(i) {\n";
echo " color: ".$row['dashboard_icon_color'].";\n"; echo " color: ".$row['dashboard_icon_color'].";\n";
@@ -168,6 +182,16 @@ foreach ($parent_widgets as $row) {
echo " border-radius: 5px;\n"; echo " border-radius: 5px;\n";
echo "}\n"; echo "}\n";
} }
if ($row['dashboard_column_span'] > 1) {
echo "#".$dashboard_name.".parent_widget {\n";
echo " grid-column: span ".preg_replace($number_pattern, '', $row['dashboard_column_span']).";\n";
echo "}\n";
}
else if ($row['dashboard_row_span'] > 1) {
echo "#".$dashboard_name.".parent_widget {\n";
echo " grid-column: span 2;\n";
echo "}\n";
}
} }
?> ?>
@@ -176,8 +200,8 @@ foreach ($parent_widgets as $row) {
<?php <?php
//include the dashboards //include the dashboards
echo "<div class='hud_box' style='overflow: scroll;'>\n"; echo "<div class='hud_box' style='overflow-y: auto;'>\n";
echo " <div class='parent_widgets hud_content'>\n"; echo " <div class='hud_content parent_widgets'>\n";
$x = 0; $x = 0;
foreach ($parent_widgets as $row) { foreach ($parent_widgets as $row) {
@@ -193,12 +217,12 @@ foreach ($parent_widgets as $row) {
$dashboard_content = $row['dashboard_content'] ?? ''; $dashboard_content = $row['dashboard_content'] ?? '';
$dashboard_content_text_align = $row['dashboard_content_text_align'] ?? ''; $dashboard_content_text_align = $row['dashboard_content_text_align'] ?? '';
$dashboard_content_details = $row['dashboard_content_details'] ?? ''; $dashboard_content_details = $row['dashboard_content_details'] ?? '';
$dashboard_chart_type = $row['dashboard_chart_type'] ?? "doughnut"; $dashboard_chart_type = $row['dashboard_chart_type'] ?? 'doughnut';
$dashboard_label_text_color = $row['dashboard_label_text_color'] ?? $settings->get('theme', 'dashboard_label_text_color', ''); $dashboard_label_text_color = $row['dashboard_label_text_color'] ?? $settings->get('theme', 'dashboard_label_text_color', '');
$dashboard_number_text_color = $row['dashboard_number_text_color'] ?? $settings->get('theme', 'dashboard_number_text_color', ''); $dashboard_number_text_color = $row['dashboard_number_text_color'] ?? $settings->get('theme', 'dashboard_number_text_color', '');
$dashboard_number_background_color = $row['dashboard_number_background_color'] ?? $settings->get('theme', 'dashboard_number_background_color', ''); $dashboard_number_background_color = $row['dashboard_number_background_color'] ?? $settings->get('theme', 'dashboard_number_background_color', '');
$dashboard_details_state = $row['dashboard_details_state'] ?? "expanded"; $dashboard_details_state = $row['dashboard_details_state'] ?? 'disabled';
$dashboard_row_span = $row['dashboard_row_span'] ?? 2; $dashboard_row_span = $row['dashboard_row_span'] ?? 1;
//define the regex patterns //define the regex patterns
$uuid_pattern = '/[^-A-Fa-f0-9]/'; $uuid_pattern = '/[^-A-Fa-f0-9]/';
@@ -208,7 +232,7 @@ foreach ($parent_widgets as $row) {
//sanitize the data //sanitize the data
$dashboard_uuid = preg_replace($uuid_pattern, '', $dashboard_uuid); $dashboard_uuid = preg_replace($uuid_pattern, '', $dashboard_uuid);
$dashboard_name = trim(preg_replace($text_pattern, '', $dashboard_name)); $dashboard_name = trim(preg_replace($text_pattern, '', $dashboard_name));
$dashboard_name_id = trim(preg_replace("/[^a-z0-9_ ]/", '_', strtolower($dashboard_name)),'_'); $dashboard_name_id = trim(preg_replace("/[^a-z0-9_]/", '_', strtolower($dashboard_name)),'_');
$dashboard_icon = preg_replace($text_pattern, '', $dashboard_icon); $dashboard_icon = preg_replace($text_pattern, '', $dashboard_icon);
$dashboard_url = trim(preg_replace($text_pattern, '', $dashboard_url)); $dashboard_url = trim(preg_replace($text_pattern, '', $dashboard_url));
$dashboard_target = trim(preg_replace($text_pattern, '', $dashboard_target)); $dashboard_target = trim(preg_replace($text_pattern, '', $dashboard_target));
@@ -233,7 +257,7 @@ foreach ($parent_widgets as $row) {
$parent_widget_name = $dashboard_path_array[1]; $parent_widget_name = $dashboard_path_array[1];
$path_array = glob(dirname(__DIR__, 4).'/*/'.$application_name.'/resources/dashboard/'.$parent_widget_name.'.php'); $path_array = glob(dirname(__DIR__, 4).'/*/'.$application_name.'/resources/dashboard/'.$parent_widget_name.'.php');
echo "<div class='parent_widget' onclick=\"".(!empty($dashboard_url && $dashboard_path == "dashboard/icon") ? "window.open('". $dashboard_url ."', '". $dashboard_target ."', '". $window_parameters ."')" : "")."\" id='".$dashboard_name_id."' draggable='false'>\n"; echo "<div class='parent_widget' style='grid-row-end: span ".$dashboard_row_span.";' data-state='".$dashboard_details_state."' onclick=\"".(!empty($dashboard_url && $dashboard_path == "dashboard/icon") ? "window.open('". $dashboard_url ."', '". $dashboard_target ."', '". $window_parameters ."')" : "")."\" id='".$dashboard_name_id."' draggable='false'>\n";
if (file_exists($path_array[0])) { if (file_exists($path_array[0])) {
include $path_array[0]; include $path_array[0];
} }
themes/default/css.php
+1 -1
View File
@@ -3134,7 +3134,7 @@ else { //default: white
@media(min-width: 1200px) { @media(min-width: 1200px) {
div.hud_details { div.hud_details {
height: 350px; height: 318px;
display: block; display: block;
<?php <?php
echo "background: ".($dashboard_detail_background_color[0] ?? '#ffffff').";\n"; echo "background: ".($dashboard_detail_background_color[0] ?? '#ffffff').";\n";
themes/default/template.php
+1 -1
View File
@@ -20,7 +20,7 @@
<link rel='stylesheet' type='text/css' href='{$project_path}/resources/bootstrap/css/bootstrap-tempusdominus.min.css.php'> <link rel='stylesheet' type='text/css' href='{$project_path}/resources/bootstrap/css/bootstrap-tempusdominus.min.css.php'>
<link rel='stylesheet' type='text/css' href='{$project_path}/resources/bootstrap/css/bootstrap-colorpicker.min.css.php'> <link rel='stylesheet' type='text/css' href='{$project_path}/resources/bootstrap/css/bootstrap-colorpicker.min.css.php'>
<link rel='stylesheet' type='text/css' href='{$project_path}/resources/fontawesome/css/all.min.css.php'> <link rel='stylesheet' type='text/css' href='{$project_path}/resources/fontawesome/css/all.min.css.php'>
<link rel='stylesheet' type='text/css' href='{$project_path}/themes/default/css.php?updated=202504150207'> <link rel='stylesheet' type='text/css' href='{$project_path}/themes/default/css.php?updated=202507301100'>
{*//link to custom css file *} {*//link to custom css file *}
{if !empty($settings.theme.custom_css)} {if !empty($settings.theme.custom_css)}
<link rel='stylesheet' type='text/css' href='{$settings.theme.custom_css}'> <link rel='stylesheet' type='text/css' href='{$settings.theme.custom_css}'>