nsinnovations/fusionpbx
2
0
Fork 0
mirror of https://github.com/fusionpbx/fusionpbx.git synced 2025-12-30 00:53:50 +00:00
Code Issues 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

20
core/dashboard/index.php
View File

@@ -401,12 +401,6 @@ foreach ($dashboard as $row) {
echo " height: 195px;\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";
}
}
?>
@@ -439,7 +433,12 @@ foreach ($dashboard as $row) {
<?php
foreach ($dashboard as $row) {
$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 " grid-column: span ".$row['dashboard_column_span'].";\n";
echo "}\n";
@@ -556,11 +555,11 @@ function toggle_grid_row_end_all() {
$dashboard_content = $row['dashboard_content'] ?? '';
$dashboard_content_text_align = $row['dashboard_content_text_align'] ?? '';
$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_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_details_state = $row['dashboard_details_state'] ?? "expanded";
$dashboard_details_state = $row['dashboard_details_state'] ?? 'expanded';
$dashboard_row_span = $row['dashboard_row_span'] ?? 2;
//define the regex patterns
@@ -719,10 +718,13 @@ function toggle_grid_row_end_all() {
onAdd: function (evt) {
evt.item.classList.add('parent_widget');
update_widget_order();
let current_row_end = evt.item.style.gridRowEnd;
evt.item.style.gridColumn = current_row_end;
},
onRemove: function (evt) {
evt.item.classList.remove('parent_widget');
update_widget_order();
evt.item.style.gridColumn = '';
},
});
});

54
core/dashboard/resources/dashboard/parent.php
View File

@@ -53,6 +53,11 @@
$sql .= "dashboard_description ";
$sql .= "from v_dashboard as d ";
$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 .= "order by dashboard_order, dashboard_name asc ";
$parameters['dashboard_uuid'] = $dashboard_uuid;
@@ -70,26 +75,35 @@
<style>
div.parent_widgets .hud_content {
align-content: center;
}
div.parent_widgets {
max-width: 100%;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
row-gap: 1rem;
}
div.parent_widget div.hud_box:first-of-type {
min-width: 120px;
flex: 0 0 33.3333%;
box-sizing: border-box;
/*min-width: 120px;*/
background: rgba(0,0,0,0);
border: 0px dashed rgba(0,0,0,0);
box-shadow: none;
overflow: visible;
-webkit-transition: .1s;
-moz-transition: .1s;
transition: .1s;
}
div.parent_widget:has(i) div.hud_box {
max-height: 89.5px;
div.parent_widget.editable div.hud_box:first-of-type {
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,
@@ -168,6 +182,16 @@ foreach ($parent_widgets as $row) {
echo " border-radius: 5px;\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
//include the dashboards
echo "<div class='hud_box' style='overflow: scroll;'>\n";
echo " <div class='parent_widgets hud_content'>\n";
echo "<div class='hud_box' style='overflow-y: auto;'>\n";
echo " <div class='hud_content parent_widgets'>\n";
$x = 0;
foreach ($parent_widgets as $row) {
@@ -193,12 +217,12 @@ foreach ($parent_widgets as $row) {
$dashboard_content = $row['dashboard_content'] ?? '';
$dashboard_content_text_align = $row['dashboard_content_text_align'] ?? '';
$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_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_details_state = $row['dashboard_details_state'] ?? "expanded";
$dashboard_row_span = $row['dashboard_row_span'] ?? 2;
$dashboard_details_state = $row['dashboard_details_state'] ?? 'disabled';
$dashboard_row_span = $row['dashboard_row_span'] ?? 1;
//define the regex patterns
$uuid_pattern = '/[^-A-Fa-f0-9]/';
@@ -233,7 +257,7 @@ foreach ($parent_widgets as $row) {
$parent_widget_name = $dashboard_path_array[1];
$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])) {
include $path_array[0];
}

2
themes/default/css.php
View File

@@ -3134,7 +3134,7 @@ else { //default: white
@media(min-width: 1200px) {
div.hud_details {
height: 350px;
height: 318px;
display: block;
<?php
echo "background: ".($dashboard_detail_background_color[0] ?? '#ffffff').";\n";

2
themes/default/template.php
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-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}/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 *}
{if !empty($settings.theme.custom_css)}
<link rel='stylesheet' type='text/css' href='{$settings.theme.custom_css}'>