Dashboard - Add row span setting (#7007)
This commit is contained in:
@@ -81,6 +81,7 @@
|
||||
$sql .= "dashboard_background_color, \n";
|
||||
$sql .= "dashboard_detail_background_color, \n";
|
||||
$sql .= "dashboard_column_span, \n";
|
||||
$sql .= "dashboard_row_span, \n";
|
||||
$sql .= "dashboard_details_state, \n";
|
||||
$sql .= "dashboard_order, \n";
|
||||
$sql .= "cast(dashboard_enabled as text), \n";
|
||||
@@ -221,7 +222,7 @@
|
||||
grid-gap: 1rem;
|
||||
}
|
||||
|
||||
div.hud_container {
|
||||
div.hud_content {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
@@ -233,15 +234,17 @@ div.hud_chart {
|
||||
padding-top: 7px;
|
||||
}
|
||||
|
||||
span.hud_stat { padding-bottom: 27px; }
|
||||
|
||||
/* Dashboard settings */
|
||||
<?php
|
||||
foreach($dashboard as $row) {
|
||||
$dashboard_name = str_replace(" ", "_", strtolower($row['dashboard_name']));
|
||||
$background_color = json_decode($row['dashboard_background_color'], true);
|
||||
$detail_background_color = json_decode($row['dashboard_detail_background_color'], true);
|
||||
echo "#".$dashboard_name." .hud_box .hud_container {";
|
||||
$dashboard_row_span = $row['dashboard_row_span'] ?? 2;
|
||||
if (!isset($row['dashboard_row_span']) && in_array($dashboard_name, ["new_messages", "missed_calls", "recent_calls"])) {
|
||||
$dashboard_row_span = 1;
|
||||
}
|
||||
echo "#".$dashboard_name." .hud_box .hud_content {";
|
||||
echo " background: ".$background_color[0].";";
|
||||
echo " background-image: linear-gradient(to right, ".$background_color[1]." 0%, ".$background_color[0]." 30%, ".$background_color[0]." 70%, ".$background_color[1]." 100%);";
|
||||
echo "}";
|
||||
@@ -256,6 +259,35 @@ span.hud_stat { padding-bottom: 27px; }
|
||||
echo " background: ".$detail_background_color[0].";";
|
||||
echo " background-image: linear-gradient(to right, ".$detail_background_color[1]." 0%, ".$detail_background_color[0]." 30%, ".$detail_background_color[0]." 70%, ".$detail_background_color[1]." 100%);";
|
||||
echo "}";
|
||||
|
||||
switch ($dashboard_row_span) {
|
||||
case 1:
|
||||
echo "#".$dashboard_name." .hud_content {\n";
|
||||
echo " height: 89.5px;\n";
|
||||
echo "}\n";
|
||||
echo "#".$dashboard_name." .hud_stat {\n";
|
||||
echo " line-height: 0.1;\n";
|
||||
echo " font-size: 30pt;\n";
|
||||
echo "}\n";
|
||||
echo "#".$dashboard_name." .hud_chart {\n";
|
||||
echo " height: 50px;\n";
|
||||
echo "}\n";
|
||||
echo "#".$dashboard_name." div.hud_content .fas {\n";
|
||||
echo " line-height: 0.1;\n";
|
||||
echo " font-size: 30pt;\n";
|
||||
echo "}\n";
|
||||
break;
|
||||
case 2:
|
||||
echo "#".$dashboard_name." .hud_content {\n";
|
||||
echo " height: 195px;\n";
|
||||
echo "}\n";
|
||||
break;
|
||||
case 3:
|
||||
echo "#".$dashboard_name." .hud_content {\n";
|
||||
echo " height: 300.5px;\n";
|
||||
echo "}\n";
|
||||
break;
|
||||
}
|
||||
}
|
||||
?>
|
||||
|
||||
@@ -343,9 +375,17 @@ span.hud_stat { padding-bottom: 27px; }
|
||||
|
||||
<script>
|
||||
function toggle_grid_row_end(dashboard_name) {
|
||||
var widget = document.getElementById(dashboard_name.toLowerCase().replace(/ /g, "_"));
|
||||
var widget = document.getElementById(dashboard_name.toLowerCase().replace(/ /g, '_'));
|
||||
var state = widget.getAttribute('data-state');
|
||||
var current_row_end = widget.style.gridRowEnd;
|
||||
widget.style.gridRowEnd = (current_row_end == 'span 2') ? 'span 5' : 'span 2';
|
||||
|
||||
if (state == 'expanded') {
|
||||
widget.style.gridRowEnd = 'span ' + (Number(current_row_end.replace('span ', '')) - 3);
|
||||
widget.dataset.state = "contracted";
|
||||
} else {
|
||||
widget.style.gridRowEnd = 'span ' + (Number(current_row_end.replace('span ', '')) + 3);
|
||||
widget.dataset.state = 'expanded';
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -361,10 +401,19 @@ function toggle_grid_row_end(dashboard_name) {
|
||||
$dashboard_chart_type = $row['dashboard_chart_type'];
|
||||
$dashboard_heading_text_color = $row['dashboard_heading_text_color'] ?? $settings->get('theme', 'dashboard_heading_text_color');
|
||||
$dashboard_number_text_color = $row['dashboard_number_text_color'] ?? $settings->get('theme', 'dashboard_number_text_color');
|
||||
$dashboard_details_state = $row['dashboard_details_state'];
|
||||
$grid_row_end = (!isset($dashboard_details_state) && in_array($dashboard_name, ["New Messages", "Missed Calls", "Recent Calls"]) ? "grid-row-end: span 2;" : ($dashboard_details_state == "expanded" || empty($dashboard_details_state) ? "grid-row-end: span 5;" : "grid-row-end: span 2;"));
|
||||
$dashboard_details_state = $row['dashboard_details_state'] ?? "expanded";
|
||||
$dashboard_row_span = $row['dashboard_row_span'] ?? 2;
|
||||
if (!isset($row['dashboard_details_state']) && in_array($dashboard_name, ["New Messages", "Missed Calls", "Recent Calls"])) {
|
||||
$dashboard_details_state = "hidden";
|
||||
}
|
||||
if ($dashboard_details_state == "expanded") {
|
||||
$dashboard_row_span += 3;
|
||||
}
|
||||
if (!isset($row['dashboard_row_span']) && !isset($row['dashboard_details_state']) && in_array($dashboard_name, ["New Messages", "Missed Calls", "Recent Calls"])) {
|
||||
$dashboard_row_span = 1;
|
||||
}
|
||||
|
||||
echo "<div class='widget' style='".$grid_row_end."' id='".str_replace(" ", "_", strtolower($row['dashboard_name']))."' draggable='false'>\n";
|
||||
echo "<div class='widget' style='grid-row-end: span ".$dashboard_row_span.";' data-state='".$dashboard_details_state."' id='".str_replace(" ", "_", strtolower($dashboard_name))."' draggable='false'>\n";
|
||||
include($row['dashboard_path']);
|
||||
echo "</div>\n";
|
||||
$x++;
|
||||
|
||||
Reference in New Issue
Block a user