Dashboard - Add row span setting (#7007)

core/dashboard/app_config.php

@@ -117,6 +117,11 @@
 		$apps[$x]['db'][$y]['fields'][$z]['search_by'] = '';
 		$apps[$x]['db'][$y]['fields'][$z]['description']['en-us'] = 'Enter the dashboard column span.';
 		$z++;
+		$apps[$x]['db'][$y]['fields'][$z]['name'] = 'dashboard_row_span';
+		$apps[$x]['db'][$y]['fields'][$z]['type'] = 'numeric';
+		$apps[$x]['db'][$y]['fields'][$z]['search_by'] = '';
+		$apps[$x]['db'][$y]['fields'][$z]['description']['en-us'] = 'Enter the dashboard row span.';
+		$z++;
 		$apps[$x]['db'][$y]['fields'][$z]['name'] = 'dashboard_details_state';
 		$apps[$x]['db'][$y]['fields'][$z]['type'] = 'text';
 		$apps[$x]['db'][$y]['fields'][$z]['search_by'] = 'expanded';

core/dashboard/app_languages.php

@@ -650,6 +650,58 @@ $text['description-dashboard_column_span']['zh-cn'] = "输入仪表板小部件
 $text['description-dashboard_column_span']['ja-jp'] = "ダッシュボード ウィジェットの列スパンを入力します。";
 $text['description-dashboard_column_span']['ko-kr'] = "대시보드 위젯 열 범위를 입력합니다.";
 
+$text['label-dashboard_row_span']['en-us'] = "Row Span";
+$text['label-dashboard_row_span']['en-gb'] = "Row Span";
+$text['label-dashboard_row_span']['ar-eg'] = "";
+$text['label-dashboard_row_span']['de-at'] = "";
+$text['label-dashboard_row_span']['de-ch'] = "";
+$text['label-dashboard_row_span']['de-de'] = "";
+$text['label-dashboard_row_span']['el-gr'] = "";
+$text['label-dashboard_row_span']['es-cl'] = "";
+$text['label-dashboard_row_span']['es-mx'] = "";
+$text['label-dashboard_row_span']['fr-ca'] = "";
+$text['label-dashboard_row_span']['fr-fr'] = "";
+$text['label-dashboard_row_span']['he-il'] = "";
+$text['label-dashboard_row_span']['it-it'] = "";
+$text['label-dashboard_row_span']['nl-nl'] = "";
+$text['label-dashboard_row_span']['pl-pl'] = "";
+$text['label-dashboard_row_span']['pt-br'] = "";
+$text['label-dashboard_row_span']['pt-pt'] = "";
+$text['label-dashboard_row_span']['ro-ro'] = "";
+$text['label-dashboard_row_span']['ru-ru'] = "";
+$text['label-dashboard_row_span']['sv-se'] = "";
+$text['label-dashboard_row_span']['uk-ua'] = "";
+$text['label-dashboard_row_span']['tr-tr'] = "";
+$text['label-dashboard_row_span']['zh-cn'] = "";
+$text['label-dashboard_row_span']['ja-jp'] = "";
+$text['label-dashboard_row_span']['ko-kr'] = "";
+
+$text['description-dashboard_row_span']['en-us'] = "Enter the dashboard widget row span.";
+$text['description-dashboard_row_span']['en-gb'] = "Enter the dashboard widget row span.";
+$text['description-dashboard_row_span']['ar-eg'] = "";
+$text['description-dashboard_row_span']['de-at'] = "";
+$text['description-dashboard_row_span']['de-ch'] = "";
+$text['description-dashboard_row_span']['de-de'] = "";
+$text['description-dashboard_row_span']['el-gr'] = "";
+$text['description-dashboard_row_span']['es-cl'] = "";
+$text['description-dashboard_row_span']['es-mx'] = "";
+$text['description-dashboard_row_span']['fr-ca'] = "";
+$text['description-dashboard_row_span']['fr-fr'] = "";
+$text['description-dashboard_row_span']['he-il'] = "";
+$text['description-dashboard_row_span']['it-it'] = "";
+$text['description-dashboard_row_span']['nl-nl'] = "";
+$text['description-dashboard_row_span']['pl-pl'] = "";
+$text['description-dashboard_row_span']['pt-br'] = "";
+$text['description-dashboard_row_span']['pt-pt'] = "";
+$text['description-dashboard_row_span']['ro-ro'] = "";
+$text['description-dashboard_row_span']['ru-ru'] = "";
+$text['description-dashboard_row_span']['sv-se'] = "";
+$text['description-dashboard_row_span']['uk-ua'] = "";
+$text['description-dashboard_row_span']['tr-tr'] = "";
+$text['description-dashboard_row_span']['zh-cn'] = "";
+$text['description-dashboard_row_span']['ja-jp'] = "";
+$text['description-dashboard_row_span']['ko-kr'] = "";
+
 $text['label-dashboard_details_state']['en-us'] = "Details State";
 $text['label-dashboard_details_state']['en-gb'] = "Details State";
 $text['label-dashboard_details_state']['ar-eg'] = "تفاصيل الدولة";

core/dashboard/dashboard_edit.php

@@ -49,6 +49,7 @@
 	$dashboard_number_text_color = '';
 	$dashboard_groups = [];
 	$dashboard_column_span = '';
+	$dashboard_row_span = '';
 	$dashboard_details_state = '';
 	$dashboard_order = '';
 	$dashboard_enabled = $row["dashboard_enabled"] ?? 'true';
@@ -79,6 +80,7 @@
 		$dashboard_background_color = $_POST["dashboard_background_color"] ?? '';
 		$dashboard_detail_background_color = $_POST["dashboard_detail_background_color"] ?? '';
 		$dashboard_column_span = $_POST["dashboard_column_span"] ?? '';
+		$dashboard_row_span = $_POST["dashboard_row_span"] ?? '';
 		$dashboard_details_state = $_POST["dashboard_details_state"] ?? '';
 		$dashboard_order = $_POST["dashboard_order"] ?? '';
 		$dashboard_enabled = $_POST["dashboard_enabled"] ?? 'false';
@@ -209,6 +211,7 @@
 			$array['dashboard'][0]['dashboard_background_color'] = $dashboard_background_color;
 			$array['dashboard'][0]['dashboard_detail_background_color'] = $dashboard_detail_background_color;
 			$array['dashboard'][0]['dashboard_column_span'] = $dashboard_column_span;
+			$array['dashboard'][0]['dashboard_row_span'] = $dashboard_row_span;
 			$array['dashboard'][0]['dashboard_details_state'] = $dashboard_details_state;
 			$array['dashboard'][0]['dashboard_order'] = $dashboard_order;
 			$array['dashboard'][0]['dashboard_enabled'] = $dashboard_enabled;
@@ -262,6 +265,7 @@
 		$sql .= " dashboard_background_color, ";
 		$sql .= " dashboard_detail_background_color, ";
 		$sql .= " dashboard_column_span, ";
+		$sql .= " dashboard_row_span, ";
 		$sql .= " dashboard_details_state, ";
 		$sql .= " dashboard_order, ";
 		$sql .= " dashboard_enabled, ";
@@ -283,6 +287,7 @@
 			$dashboard_background_color = $row["dashboard_background_color"];
 			$dashboard_detail_background_color = $row["dashboard_detail_background_color"];
 			$dashboard_column_span = $row["dashboard_column_span"];
+			$dashboard_row_span = $row["dashboard_row_span"];
 			$dashboard_details_state = $row["dashboard_details_state"];
 			$dashboard_order = $row["dashboard_order"];
 			$dashboard_enabled = $row["dashboard_enabled"] ?? 'false';
@@ -317,6 +322,11 @@
 		$dashboard_detail_background_color = json_decode($dashboard_detail_background_color, true);
 	}
 
+//add a default value to $dashboard_chart_type
+	if (!isset($dashboard_chart_type) && in_array($dashboard_path, ['app/voicemails/resources/dashboard/voicemails.php', 'app/xml_cdr/resources/dashboard/missed_calls.php', 'app/xml_cdr/resources/dashboard/recent_calls.php'])) {
+		$dashboard_chart_type = "number";
+	}
+
 //add a default value to $dashboard_details_state
 	if (!isset($dashboard_details_state) && in_array($dashboard_path, ['app/voicemails/resources/dashboard/voicemails.php', 'app/xml_cdr/resources/dashboard/missed_calls.php', 'app/xml_cdr/resources/dashboard/recent_calls.php'])) {
 		$dashboard_details_state = "hidden";
@@ -325,9 +335,12 @@
 		$dashboard_details_state = "expanded";
 	}
 
-//add a default value to $dashboard_chart_type
-	if (!isset($dashboard_chart_type) && in_array($dashboard_path, ['app/voicemails/resources/dashboard/voicemails.php', 'app/xml_cdr/resources/dashboard/missed_calls.php', 'app/xml_cdr/resources/dashboard/recent_calls.php'])) {
-		$dashboard_chart_type = "number";
+//add a default value to $dashboard_row_span
+	if (!isset($dashboard_row_span) && in_array($dashboard_path, ['app/voicemails/resources/dashboard/voicemails.php', 'app/xml_cdr/resources/dashboard/missed_calls.php', 'app/xml_cdr/resources/dashboard/recent_calls.php'])) {
+		$dashboard_row_span = 1;
+	}
+	if (empty($dashboard_row_span)) {
+		$dashboard_row_span = 2;
 	}
 
 //add an empty row
@@ -539,7 +552,8 @@
 		$dashboard_path == "app/domain_limits/resources/dashboard/domain_limits.php" ||
 		$dashboard_path == "app/call_forward/resources/dashboard/call_forward.php" ||
 		$dashboard_path == "app/ring_groups/resources/dashboard/ring_group_forward.php" ||
-		$dashboard_path == "app/extensions/resources/dashboard/caller_id.php") {
+		$dashboard_path == "app/extensions/resources/dashboard/caller_id.php" ||
+		$dashboard_path == "app/maintenance/resources/dashboard/maintenance.php") {
 		echo "<tr>\n";
 		echo "<td class='vncell' valign='top' align='left' nowrap='nowrap'>\n";
 		echo $text['label-dashboard_chart_type']."\n";
@@ -651,7 +665,7 @@
 	echo "<td class='vtable' style='position: relative;' align='left'>\n";
 	echo "	<select name='dashboard_column_span' class='formfld'>\n";
 	$i=1;
-	while ($i<=5) {
+	while ($i<=3) {
 		$selected = ($i == $dashboard_column_span) ? "selected" : null;
 		echo "		<option value='$i' ".$selected.">$i</option>\n";
 		$i++;
@@ -662,6 +676,24 @@
 	echo "</td>\n";
 	echo "</tr>\n";
 
+	echo "<tr>\n";
+	echo "<td class='vncell' valign='top' align='left' nowrap='nowrap'>\n";
+	echo "	".$text['label-dashboard_row_span']."\n";
+	echo "</td>\n";
+	echo "<td class='vtable' style='position: relative;' align='left'>\n";
+	echo "	<select name='dashboard_row_span' class='formfld'>\n";
+	$i=1;
+	while ($i<=3) {
+		$selected = ($i == $dashboard_row_span) ? "selected" : null;
+		echo "		<option value='$i' ".$selected.">$i</option>\n";
+		$i++;
+	}
+	echo "	</select>\n";
+	echo "<br />\n";
+	echo $text['description-dashboard_row_span']."\n";
+	echo "</td>\n";
+	echo "</tr>\n";
+
 	echo "<tr>\n";
 	echo "<td class='vncell' valign='top' align='left' nowrap='nowrap'>\n";
 	echo "	".$text['label-dashboard_details_state']."\n";

core/dashboard/index.php

@@ -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++;

core/dashboard/resources/dashboard/icon.php

@@ -11,12 +11,12 @@
 //dashboard icon
 	echo "<div class='hud_box'>\n";
 
-	echo "<div class='hud_container' ".($row['dashboard_details_state'] == "disabled" ?: "onclick=\"$('#hud_icon_details').slideToggle('fast');\"").">\n";
+	echo "<div class='hud_content' ".($row['dashboard_details_state'] == "disabled" ?: "onclick=\"$('#hud_icon_details').slideToggle('fast');\"").">\n";
 	echo "	<span class='hud_title' onclick=\"document.location.href='".$dashboard_url."'\">".$dashboard_name."</span>"; // (isset($text['label-'.$dashboard_name])) ? $text['label-'.$dashboard_name] : $dashboard_name
 	echo "	<a href='".$dashboard_url."'><span class='hud_stat'><i class=\"fas ".$dashboard_icon."\" style=\"font-size: 0.8em;\"></i></span></a>\n";
 	echo "</div>\n";
 
-	if (empty($dashboard_detail_state) || $dashboard_detail_state != "disabled") {
+	if (empty($dashboard_details_state) || $dashboard_details_state != "disabled") {
 		echo "<div class='hud_details hud_box' id='hud_icon_details'>";
 		echo "<table class='tr_hover' width='100%' cellpadding='0' cellspacing='0' border='0'>\n";
 		echo "<tr>\n";