Dashboard - Add gradient background color settings (#6972)

* Dashboard - Add gradient background color setting

core/dashboard/app_config.php

@@ -72,43 +72,46 @@
 		$apps[$x]['db'][$y]['fields'][$z]['search_by'] = '';
 		$apps[$x]['db'][$y]['fields'][$z]['description']['en-us'] = 'Enter the dashboard path.';
 		$z++;
-
-$apps[$x]['db'][$y]['fields'][$z]['name'] = 'dashboard_url';
-$apps[$x]['db'][$y]['fields'][$z]['type'] = 'text';
-$apps[$x]['db'][$y]['fields'][$z]['search_by'] = '';
-$apps[$x]['db'][$y]['fields'][$z]['description']['en-us'] = 'Enter the dashboard url.';
-$z++;
-$apps[$x]['db'][$y]['fields'][$z]['name'] = 'dashboard_icon';
-$apps[$x]['db'][$y]['fields'][$z]['type'] = 'text';
-$apps[$x]['db'][$y]['fields'][$z]['search_by'] = '';
-$apps[$x]['db'][$y]['fields'][$z]['description']['en-us'] = 'Enter the dashboard icon.';
-$z++;
-
-		$apps[$x]['db'][$y]['fields'][$z]['name'] = 'dashboard_chart_type';
+		$apps[$x]['db'][$y]['fields'][$z]['name'] = 'dashboard_url';
 		$apps[$x]['db'][$y]['fields'][$z]['type'] = 'text';
 		$apps[$x]['db'][$y]['fields'][$z]['search_by'] = '';
-		$apps[$x]['db'][$y]['fields'][$z]['description']['en-us'] = 'Enter the chart type.';
+		$apps[$x]['db'][$y]['fields'][$z]['description']['en-us'] = 'Enter the dashboard url.';
 		$z++;
-		$apps[$x]['db'][$y]['fields'][$z]['name'] = 'dashboard_heading_background_color';
+		$apps[$x]['db'][$y]['fields'][$z]['name'] = 'dashboard_icon';
 		$apps[$x]['db'][$y]['fields'][$z]['type'] = 'text';
 		$apps[$x]['db'][$y]['fields'][$z]['search_by'] = '';
-		$apps[$x]['db'][$y]['fields'][$z]['description']['en-us'] = 'Enter the heading background color.';
+		$apps[$x]['db'][$y]['fields'][$z]['description']['en-us'] = 'Enter the dashboard icon.';
+		$z++;
+		$apps[$x]['db'][$y]['fields'][$z]['name'] = 'dashboard_chart_type';
+		$apps[$x]['db'][$y]['fields'][$z]['type'] = 'text';
+		$apps[$x]['db'][$y]['fields'][$z]['search_by'] = '';
+		$apps[$x]['db'][$y]['fields'][$z]['description']['en-us'] = 'Enter the chart type.';
 		$z++;
 		$apps[$x]['db'][$y]['fields'][$z]['name'] = 'dashboard_heading_text_color';
 		$apps[$x]['db'][$y]['fields'][$z]['type'] = 'text';
 		$apps[$x]['db'][$y]['fields'][$z]['search_by'] = '';
 		$apps[$x]['db'][$y]['fields'][$z]['description']['en-us'] = 'Enter the heading text color.';
 		$z++;
-		$apps[$x]['db'][$y]['fields'][$z]['name'] = 'dashboard_number_background_color';
+		$apps[$x]['db'][$y]['fields'][$z]['name'] = 'dashboard_heading_background_color';
 		$apps[$x]['db'][$y]['fields'][$z]['type'] = 'text';
 		$apps[$x]['db'][$y]['fields'][$z]['search_by'] = '';
-		$apps[$x]['db'][$y]['fields'][$z]['description']['en-us'] = 'Enter the number text color.';
+		$apps[$x]['db'][$y]['fields'][$z]['description']['en-us'] = 'Enter the heading background color.';
 		$z++;
 		$apps[$x]['db'][$y]['fields'][$z]['name'] = 'dashboard_number_text_color';
 		$apps[$x]['db'][$y]['fields'][$z]['type'] = 'text';
 		$apps[$x]['db'][$y]['fields'][$z]['search_by'] = '';
 		$apps[$x]['db'][$y]['fields'][$z]['description']['en-us'] = 'Enter the number text color.';
 		$z++;
+		$apps[$x]['db'][$y]['fields'][$z]['name'] = 'dashboard_background_color';
+		$apps[$x]['db'][$y]['fields'][$z]['type'] = 'text';
+		$apps[$x]['db'][$y]['fields'][$z]['search_by'] = '';
+		$apps[$x]['db'][$y]['fields'][$z]['description']['en-us'] = 'Enter the background color.';
+		$z++;
+		$apps[$x]['db'][$y]['fields'][$z]['name'] = 'dashboard_detail_background_color';
+		$apps[$x]['db'][$y]['fields'][$z]['type'] = 'text';
+		$apps[$x]['db'][$y]['fields'][$z]['search_by'] = '';
+		$apps[$x]['db'][$y]['fields'][$z]['description']['en-us'] = 'Enter the detail background color.';
+		$z++;
 		$apps[$x]['db'][$y]['fields'][$z]['name'] = 'dashboard_column_span';
 		$apps[$x]['db'][$y]['fields'][$z]['type'] = 'numeric';
 		$apps[$x]['db'][$y]['fields'][$z]['search_by'] = '';
@@ -211,4 +214,4 @@ $z++;
 	//default settings
 		$y=0;
 
-?>
+?>

core/dashboard/app_languages.php

@@ -364,8 +364,8 @@ $text['label-dashboard_heading_background_color']['zh-cn'] = "";
 $text['label-dashboard_heading_background_color']['ja-jp'] = "";
 $text['label-dashboard_heading_background_color']['ko-kr'] = "";
 
-$text['description-dashboard_heading_background_color']['en-us'] = "Enter the dashboard widget heading background color";
-$text['description-dashboard_heading_background_color']['en-gb'] = "Enter the dashboard widget heading background color";
+$text['description-dashboard_heading_background_color']['en-us'] = "Enter the dashboard widget heading background color.";
+$text['description-dashboard_heading_background_color']['en-gb'] = "Enter the dashboard widget heading background color.";
 $text['description-dashboard_heading_background_color']['ar-eg'] = "";
 $text['description-dashboard_heading_background_color']['de-at'] = "";
 $text['description-dashboard_heading_background_color']['de-ch'] = "";
@@ -442,58 +442,6 @@ $text['description-dashboard_heading_text_color']['zh-cn'] = "输入仪表板小
 $text['description-dashboard_heading_text_color']['ja-jp'] = "ダッシュボード ウィジェットの見出しのテキストの色を入力します。";
 $text['description-dashboard_heading_text_color']['ko-kr'] = "대시보드 위젯 제목 텍스트 색상을 입력합니다.";
 
-$text['label-dashboard_number_background_color']['en-us'] = "Number Background Color";
-$text['label-dashboard_number_background_color']['en-gb'] = "Number Background Color";
-$text['label-dashboard_number_background_color']['ar-eg'] = "";
-$text['label-dashboard_number_background_color']['de-at'] = "";
-$text['label-dashboard_number_background_color']['de-ch'] = "";
-$text['label-dashboard_number_background_color']['de-de'] = "";
-$text['label-dashboard_number_background_color']['el-gr'] = "";
-$text['label-dashboard_number_background_color']['es-cl'] = "";
-$text['label-dashboard_number_background_color']['es-mx'] = "";
-$text['label-dashboard_number_background_color']['fr-ca'] = "";
-$text['label-dashboard_number_background_color']['fr-fr'] = "";
-$text['label-dashboard_number_background_color']['he-il'] = "";
-$text['label-dashboard_number_background_color']['it-it'] = "";
-$text['label-dashboard_number_background_color']['nl-nl'] = "";
-$text['label-dashboard_number_background_color']['pl-pl'] = "";
-$text['label-dashboard_number_background_color']['pt-br'] = "";
-$text['label-dashboard_number_background_color']['pt-pt'] = "";
-$text['label-dashboard_number_background_color']['ro-ro'] = "";
-$text['label-dashboard_number_background_color']['ru-ru'] = "";
-$text['label-dashboard_number_background_color']['sv-se'] = "";
-$text['label-dashboard_number_background_color']['uk-ua'] = "";
-$text['label-dashboard_number_background_color']['tr-tr'] = "";
-$text['label-dashboard_number_background_color']['zh-cn'] = "";
-$text['label-dashboard_number_background_color']['ja-jp'] = "";
-$text['label-dashboard_number_background_color']['ko-kr'] = "";
-
-$text['description-dashboard_number_background_color']['en-us'] = "Enter the dashboard widget number background color.";
-$text['description-dashboard_number_background_color']['en-gb'] = "Enter the dashboard widget number background color.";
-$text['description-dashboard_number_background_color']['ar-eg'] = "";
-$text['description-dashboard_number_background_color']['de-at'] = "";
-$text['description-dashboard_number_background_color']['de-ch'] = "";
-$text['description-dashboard_number_background_color']['de-de'] = "";
-$text['description-dashboard_number_background_color']['el-gr'] = "";
-$text['description-dashboard_number_background_color']['es-cl'] = "";
-$text['description-dashboard_number_background_color']['es-mx'] = "";
-$text['description-dashboard_number_background_color']['fr-ca'] = "";
-$text['description-dashboard_number_background_color']['fr-fr'] = "";
-$text['description-dashboard_number_background_color']['he-il'] = "";
-$text['description-dashboard_number_background_color']['it-it'] = "";
-$text['description-dashboard_number_background_color']['nl-nl'] = "";
-$text['description-dashboard_number_background_color']['pl-pl'] = "";
-$text['description-dashboard_number_background_color']['pt-br'] = "";
-$text['description-dashboard_number_background_color']['pt-pt'] = "";
-$text['description-dashboard_number_background_color']['ro-ro'] = "";
-$text['description-dashboard_number_background_color']['ru-ru'] = "";
-$text['description-dashboard_number_background_color']['sv-se'] = "";
-$text['description-dashboard_number_background_color']['uk-ua'] = "";
-$text['description-dashboard_number_background_color']['tr-tr'] = "";
-$text['description-dashboard_number_background_color']['zh-cn'] = "";
-$text['description-dashboard_number_background_color']['ja-jp'] = "";
-$text['description-dashboard_number_background_color']['ko-kr'] = "";
-
 $text['label-dashboard_number_text_color']['en-us'] = "Number Text Color";
 $text['label-dashboard_number_text_color']['en-gb'] = "Number Text Color";
 $text['label-dashboard_number_text_color']['ar-eg'] = "رقم لون النص";
@@ -546,6 +494,110 @@ $text['description-dashboard_number_text_color']['zh-cn'] = "输入仪表板小
 $text['description-dashboard_number_text_color']['ja-jp'] = "ダッシュボード ウィジェット番号のテキストの色を入力します。";
 $text['description-dashboard_number_text_color']['ko-kr'] = "대시보드 위젯 번호 텍스트 색상을 입력하세요.";
 
+$text['label-dashboard_background_color']['en-us'] = "Background Color";
+$text['label-dashboard_background_color']['en-gb'] = "Background Color";
+$text['label-dashboard_background_color']['ar-eg'] = "";
+$text['label-dashboard_background_color']['de-at'] = "";
+$text['label-dashboard_background_color']['de-ch'] = "";
+$text['label-dashboard_background_color']['de-de'] = "";
+$text['label-dashboard_background_color']['el-gr'] = "";
+$text['label-dashboard_background_color']['es-cl'] = "";
+$text['label-dashboard_background_color']['es-mx'] = "";
+$text['label-dashboard_background_color']['fr-ca'] = "";
+$text['label-dashboard_background_color']['fr-fr'] = "";
+$text['label-dashboard_background_color']['he-il'] = "";
+$text['label-dashboard_background_color']['it-it'] = "";
+$text['label-dashboard_background_color']['nl-nl'] = "";
+$text['label-dashboard_background_color']['pl-pl'] = "";
+$text['label-dashboard_background_color']['pt-br'] = "";
+$text['label-dashboard_background_color']['pt-pt'] = "";
+$text['label-dashboard_background_color']['ro-ro'] = "";
+$text['label-dashboard_background_color']['ru-ru'] = "";
+$text['label-dashboard_background_color']['sv-se'] = "";
+$text['label-dashboard_background_color']['uk-ua'] = "";
+$text['label-dashboard_background_color']['tr-tr'] = "";
+$text['label-dashboard_background_color']['zh-cn'] = "";
+$text['label-dashboard_background_color']['ja-jp'] = "";
+$text['label-dashboard_background_color']['ko-kr'] = "";
+
+$text['description-dashboard_background_color']['en-us'] = "Enter the dashboard widget background color.";
+$text['description-dashboard_background_color']['en-gb'] = "Enter the dashboard widget background color.";
+$text['description-dashboard_background_color']['ar-eg'] = "";
+$text['description-dashboard_background_color']['de-at'] = "";
+$text['description-dashboard_background_color']['de-ch'] = "";
+$text['description-dashboard_background_color']['de-de'] = "";
+$text['description-dashboard_background_color']['el-gr'] = "";
+$text['description-dashboard_background_color']['es-cl'] = "";
+$text['description-dashboard_background_color']['es-mx'] = "";
+$text['description-dashboard_background_color']['fr-ca'] = "";
+$text['description-dashboard_background_color']['fr-fr'] = "";
+$text['description-dashboard_background_color']['he-il'] = "";
+$text['description-dashboard_background_color']['it-it'] = "";
+$text['description-dashboard_background_color']['nl-nl'] = "";
+$text['description-dashboard_background_color']['pl-pl'] = "";
+$text['description-dashboard_background_color']['pt-br'] = "";
+$text['description-dashboard_background_color']['pt-pt'] = "";
+$text['description-dashboard_background_color']['ro-ro'] = "";
+$text['description-dashboard_background_color']['ru-ru'] = "";
+$text['description-dashboard_background_color']['sv-se'] = "";
+$text['description-dashboard_background_color']['uk-ua'] = "";
+$text['description-dashboard_background_color']['tr-tr'] = "";
+$text['description-dashboard_background_color']['zh-cn'] = "";
+$text['description-dashboard_background_color']['ja-jp'] = "";
+$text['description-dashboard_background_color']['ko-kr'] = "";
+
+$text['label-dashboard_detail_background_color']['en-us'] = "Detail Background Color";
+$text['label-dashboard_detail_background_color']['en-gb'] = "Detail Background Color";
+$text['label-dashboard_detail_background_color']['ar-eg'] = "";
+$text['label-dashboard_detail_background_color']['de-at'] = "";
+$text['label-dashboard_detail_background_color']['de-ch'] = "";
+$text['label-dashboard_detail_background_color']['de-de'] = "";
+$text['label-dashboard_detail_background_color']['el-gr'] = "";
+$text['label-dashboard_detail_background_color']['es-cl'] = "";
+$text['label-dashboard_detail_background_color']['es-mx'] = "";
+$text['label-dashboard_detail_background_color']['fr-ca'] = "";
+$text['label-dashboard_detail_background_color']['fr-fr'] = "";
+$text['label-dashboard_detail_background_color']['he-il'] = "";
+$text['label-dashboard_detail_background_color']['it-it'] = "";
+$text['label-dashboard_detail_background_color']['nl-nl'] = "";
+$text['label-dashboard_detail_background_color']['pl-pl'] = "";
+$text['label-dashboard_detail_background_color']['pt-br'] = "";
+$text['label-dashboard_detail_background_color']['pt-pt'] = "";
+$text['label-dashboard_detail_background_color']['ro-ro'] = "";
+$text['label-dashboard_detail_background_color']['ru-ru'] = "";
+$text['label-dashboard_detail_background_color']['sv-se'] = "";
+$text['label-dashboard_detail_background_color']['uk-ua'] = "";
+$text['label-dashboard_detail_background_color']['tr-tr'] = "";
+$text['label-dashboard_detail_background_color']['zh-cn'] = "";
+$text['label-dashboard_detail_background_color']['ja-jp'] = "";
+$text['label-dashboard_detail_background_color']['ko-kr'] = "";
+
+$text['description-dashboard_detail_background_color']['en-us'] = "Enter the dashboard widget detail background color.";
+$text['description-dashboard_detail_background_color']['en-gb'] = "Enter the dashboard widget detail background color.";
+$text['description-dashboard_detail_background_color']['ar-eg'] = "";
+$text['description-dashboard_detail_background_color']['de-at'] = "";
+$text['description-dashboard_detail_background_color']['de-ch'] = "";
+$text['description-dashboard_detail_background_color']['de-de'] = "";
+$text['description-dashboard_detail_background_color']['el-gr'] = "";
+$text['description-dashboard_detail_background_color']['es-cl'] = "";
+$text['description-dashboard_detail_background_color']['es-mx'] = "";
+$text['description-dashboard_detail_background_color']['fr-ca'] = "";
+$text['description-dashboard_detail_background_color']['fr-fr'] = "";
+$text['description-dashboard_detail_background_color']['he-il'] = "";
+$text['description-dashboard_detail_background_color']['it-it'] = "";
+$text['description-dashboard_detail_background_color']['nl-nl'] = "";
+$text['description-dashboard_detail_background_color']['pl-pl'] = "";
+$text['description-dashboard_detail_background_color']['pt-br'] = "";
+$text['description-dashboard_detail_background_color']['pt-pt'] = "";
+$text['description-dashboard_detail_background_color']['ro-ro'] = "";
+$text['description-dashboard_detail_background_color']['ru-ru'] = "";
+$text['description-dashboard_detail_background_color']['sv-se'] = "";
+$text['description-dashboard_detail_background_color']['uk-ua'] = "";
+$text['description-dashboard_detail_background_color']['tr-tr'] = "";
+$text['description-dashboard_detail_background_color']['zh-cn'] = "";
+$text['description-dashboard_detail_background_color']['ja-jp'] = "";
+$text['description-dashboard_detail_background_color']['ko-kr'] = "";
+
 $text['label-dashboard_column_span']['en-us'] = "Column Span";
 $text['label-dashboard_column_span']['en-gb'] = "Column Span";
 $text['label-dashboard_column_span']['ar-eg'] = "العمود سبان";

core/dashboard/dashboard_edit.php

@@ -70,10 +70,11 @@
 		$dashboard_url = $_POST["dashboard_url"] ?? '';
 		$dashboard_groups = $_POST["dashboard_groups"] ?? '';
 		$dashboard_chart_type = $_POST["dashboard_chart_type"] ?? '';
-		$dashboard_heading_background_color = $_POST["dashboard_heading_background_color"] ?? '';
 		$dashboard_heading_text_color = $_POST["dashboard_heading_text_color"] ?? '';
-		$dashboard_number_background_color = $_POST["dashboard_number_background_color"] ?? '';
+		$dashboard_heading_background_color = $_POST["dashboard_heading_background_color"] ?? '';
 		$dashboard_number_text_color = $_POST["dashboard_number_text_color"] ?? '';
+		$dashboard_background_color = $_POST["dashboard_background_color"] ?? '';
+		$dashboard_detail_background_color = $_POST["dashboard_detail_background_color"] ?? '';
 		$dashboard_column_span = $_POST["dashboard_column_span"] ?? '';
 		$dashboard_details_state = $_POST["dashboard_details_state"] ?? '';
 		$dashboard_order = $_POST["dashboard_order"] ?? '';
@@ -169,14 +170,25 @@
 			}
 
 		//remove empty values and convert to json
-			if (!empty($dashboard_number_background_color)) {
-				if (is_array($dashboard_number_background_color)) {
-					$dashboard_number_background_color = array_filter($dashboard_number_background_color);
-					if (count($dashboard_number_background_color) > 0) {
-						$dashboard_number_background_color = json_encode($dashboard_number_background_color);
+			if (!empty($dashboard_background_color)) {
+				if (is_array($dashboard_background_color)) {
+					$dashboard_background_color = array_filter($dashboard_background_color);
+					if (count($dashboard_background_color) > 0) {
+						$dashboard_background_color = json_encode($dashboard_background_color);
+					}
+					else {
+						$dashboard_background_color = '';
+					}
+				}
+			}
+			if (!empty($dashboard_detail_background_color)) {
+				if (is_array($dashboard_detail_background_color)) {
+					$dashboard_detail_background_color = array_filter($dashboard_detail_background_color);
+					if (count($dashboard_detail_background_color) > 0) {
+						$dashboard_detail_background_color = json_encode($dashboard_detail_background_color);
 					}
 					else {
-						$dashboard_number_background_color = '';
+						$dashboard_detail_background_color = '';
 					}
 				}
 			}
@@ -188,10 +200,11 @@
 			$array['dashboard'][0]['dashboard_icon'] = $dashboard_icon;
 			$array['dashboard'][0]['dashboard_url'] = $dashboard_url;
 			$array['dashboard'][0]['dashboard_chart_type'] = $dashboard_chart_type;
-			$array['dashboard'][0]['dashboard_heading_background_color'] = $dashboard_heading_background_color;
 			$array['dashboard'][0]['dashboard_heading_text_color'] = $dashboard_heading_text_color;
-			$array['dashboard'][0]['dashboard_number_background_color'] = $dashboard_number_background_color;
+			$array['dashboard'][0]['dashboard_heading_background_color'] = $dashboard_heading_background_color;
 			$array['dashboard'][0]['dashboard_number_text_color'] = $dashboard_number_text_color;
+			$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_details_state'] = $dashboard_details_state;
 			$array['dashboard'][0]['dashboard_order'] = $dashboard_order;
@@ -240,10 +253,11 @@
 		$sql .= " dashboard_icon, ";
 		$sql .= " dashboard_url, ";
 		$sql .= " dashboard_chart_type, ";
-		$sql .= " dashboard_heading_background_color, ";
 		$sql .= " dashboard_heading_text_color, ";
-		$sql .= " dashboard_number_background_color, ";
+		$sql .= " dashboard_heading_background_color, ";
 		$sql .= " dashboard_number_text_color, ";
+		$sql .= " dashboard_background_color, ";
+		$sql .= " dashboard_detail_background_color, ";
 		$sql .= " dashboard_column_span, ";
 		$sql .= " dashboard_details_state, ";
 		$sql .= " dashboard_order, ";
@@ -260,10 +274,11 @@
 			$dashboard_icon = $row["dashboard_icon"];
 			$dashboard_url = $row["dashboard_url"];
 			$dashboard_chart_type = $row["dashboard_chart_type"];
-			$dashboard_heading_background_color = $row["dashboard_heading_background_color"];
 			$dashboard_heading_text_color = $row["dashboard_heading_text_color"];
-			$dashboard_number_background_color = $row["dashboard_number_background_color"];
+			$dashboard_heading_background_color = $row["dashboard_heading_background_color"];
 			$dashboard_number_text_color = $row["dashboard_number_text_color"];
+			$dashboard_background_color = $row["dashboard_background_color"];
+			$dashboard_detail_background_color = $row["dashboard_detail_background_color"];
 			$dashboard_column_span = $row["dashboard_column_span"];
 			$dashboard_details_state = $row["dashboard_details_state"];
 			$dashboard_order = $row["dashboard_order"];
@@ -292,8 +307,11 @@
 	}
 
 //convert the json to an array
-	if (!empty($dashboard_number_background_color) && is_json($dashboard_number_background_color)) {
-		$dashboard_number_background_color = json_decode($dashboard_number_background_color, true);
+	if (!empty($dashboard_background_color) && is_json($dashboard_background_color)) {
+		$dashboard_background_color = json_decode($dashboard_background_color, true);
+	}
+	if (!empty($dashboard_detail_background_color) && is_json($dashboard_detail_background_color)) {
+		$dashboard_detail_background_color = json_decode($dashboard_detail_background_color, true);
 	}
 
 //add a default value to $dashboard_details_state
@@ -382,7 +400,8 @@
 
 	echo "<tr>\n";
 	echo "<td class='vncell' valign='top' align='left' nowrap='nowrap'>\n";
-	echo "	".$text['label-dashboard_name']."\n";
+	echo $text['label-dashboard_name'] ?? '';
+	echo "\n";
 	echo "</td>\n";
 	echo "<td class='vtable' style='position: relative;' align='left'>\n";
 	echo "	<input class='formfld' type='text' name='dashboard_name' maxlength='255' value='".escape($dashboard_name)."'>\n";
@@ -401,7 +420,7 @@
 	echo $text['description-dashboard_path']."\n";
 	echo "</td>\n";
 	echo "</tr>\n";
-	
+
 	echo "<tr>\n";
 	echo "<td class='vncell' valign='top' align='left' nowrap='nowrap'>\n";
 	echo "	".$text['label-link']."\n";
@@ -535,6 +554,17 @@
 		echo "</tr>\n";
 	}
 
+	echo "<tr>\n";
+	echo "<td class='vncell' valign='top' align='left' nowrap='nowrap'>\n";
+	echo $text['label-dashboard_heading_text_color']."\n";
+	echo "</td>\n";
+	echo "<td class='vtable' style='position: relative;' align='left'>\n";
+	echo "	<input type='text' class='formfld colorpicker' name='dashboard_heading_text_color' value='".escape($dashboard_heading_text_color)."'>\n";
+	echo "<br />\n";
+	echo $text['description-dashboard_heading_text_color']."\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_heading_background_color']."\n";
@@ -548,46 +578,54 @@
 
 	echo "<tr>\n";
 	echo "<td class='vncell' valign='top' align='left' nowrap='nowrap'>\n";
-	echo $text['label-dashboard_heading_text_color']."\n";
+	echo $text['label-dashboard_number_text_color']."\n";
 	echo "</td>\n";
 	echo "<td class='vtable' style='position: relative;' align='left'>\n";
-	echo "	<input type='text' class='formfld colorpicker' name='dashboard_heading_text_color' value='".escape($dashboard_heading_text_color)."'>\n";
+	echo "	<input type='text' class='formfld colorpicker' name='dashboard_number_text_color' value='".escape($dashboard_number_text_color)."'>\n";
 	echo "<br />\n";
-	echo $text['description-dashboard_heading_text_color']."\n";
+	echo $text['description-dashboard_number_text_color']."\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_number_background_color']."\n";
+	echo $text['label-dashboard_background_color']."\n";
 	echo "</td>\n";
 	echo "<td class='vtable' style='position: relative;' align='left'>\n";
-	/*
-	if (!empty($dashboard_number_background_color)) {
-		if (is_array($dashboard_number_background_color)) {
-			foreach($dashboard_number_background_color as $background_color) {
-				echo "	<input type='text' class='formfld colorpicker' name='dashboard_number_background_color[]' value='".escape($background_color)."'>\n";
+	if (!empty($dashboard_background_color)) {
+		if (is_array($dashboard_background_color)) {
+			foreach($dashboard_background_color as $background_color) {
+				echo "	<input type='text' class='formfld colorpicker' name='dashboard_background_color[]' value='".escape($background_color)."'><br />\n";
 			}
 		}
 	}
-	if (empty($dashboard_number_background_color) || count($dashboard_number_background_color) < 2) {
-		echo "	<input type='text' class='formfld colorpicker' name='dashboard_number_background_color[]' value=''>\n";
+	if (empty($dashboard_background_color) || count($dashboard_background_color) < 2) {
+		echo "	<input type='text' class='formfld colorpicker' name='dashboard_background_color[]' value='' onclick=\"document.getElementById('second_input').style.display = 'block';\">\n";
+		echo "	<input id='second_input' style='display: none;' type='text' class='formfld colorpicker' name='dashboard_background_color[]'>\n";
 	}
-	*/
-	echo "	<input type='text' class='formfld colorpicker' name='dashboard_number_background_color' value='".escape($dashboard_number_background_color)."'>\n";
 	echo "<br />\n";
-	echo $text['description-dashboard_number_background_color']."\n";
+	echo $text['description-dashboard_background_color']."\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_number_text_color']."\n";
+	echo $text['label-dashboard_detail_background_color']."\n";
 	echo "</td>\n";
 	echo "<td class='vtable' style='position: relative;' align='left'>\n";
-	echo "	<input type='text' class='formfld colorpicker' name='dashboard_number_text_color' value='".escape($dashboard_number_text_color)."'>\n";
+	if (!empty($dashboard_detail_background_color)) {
+		if (is_array($dashboard_detail_background_color)) {
+			foreach($dashboard_detail_background_color as $detail_background_color) {
+				echo "	<input type='text' class='formfld colorpicker' name='dashboard_detail_background_color[]' value='".escape($detail_background_color)."'><br />\n";
+			}
+		}
+	}
+	if (empty($dashboard_detail_background_color) || count($dashboard_detail_background_color) < 2) {
+		echo "	<input type='text' class='formfld colorpicker' name='dashboard_detail_background_color[]' value='' onclick=\"document.getElementById('detail_second_input').style.display = 'block';\">\n";
+		echo "	<input id='detail_second_input' style='display: none;' type='text' class='formfld colorpicker' name='dashboard_detail_background_color[]'>\n";
+	}
 	echo "<br />\n";
-	echo $text['description-dashboard_number_text_color']."\n";
+	echo $text['description-dashboard_detail_background_color']."\n";
 	echo "</td>\n";
 	echo "</tr>\n";
 
@@ -714,4 +752,4 @@
 //include the footer
 	require_once "resources/footer.php";
 
-?>
+?>

core/dashboard/index.php

@@ -75,10 +75,11 @@
 	$sql .= "dashboard_url, \n";
 	$sql .= "dashboard_icon, \n";
 	$sql .= "dashboard_chart_type, \n";
-	$sql .= "dashboard_heading_background_color, \n";
 	$sql .= "dashboard_heading_text_color, \n";
-	$sql .= "dashboard_number_background_color, \n";
+	$sql .= "dashboard_heading_background_color, \n";
 	$sql .= "dashboard_number_text_color, \n";
+	$sql .= "dashboard_background_color, \n";
+	$sql .= "dashboard_detail_background_color, \n";
 	$sql .= "dashboard_column_span, \n";
 	$sql .= "dashboard_details_state, \n";
 	$sql .= "dashboard_order, \n";
@@ -218,17 +219,54 @@
   margin: 0 auto;
   display: grid;
   grid-gap: 1rem;
-  grid-column: auto;
 }
 
+div.hud_container {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  padding-bottom: 13px;
+}
+
+div.hud_chart {
+  height: 150px;
+  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 {";
+		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 "}";
+		echo "#".$dashboard_name." .hud_box .hud_title {";
+		echo "	color: ".$row['dashboard_heading_text_color'].";";
+		echo "	background-color: ".$row['dashboard_heading_background_color'].";";
+		echo "}";
+		echo "#".$dashboard_name." .hud_box .hud_stat {";
+		echo "	color: ".$row['dashboard_number_text_color'].";";
+		echo "}";
+		echo "#".$dashboard_name." .hud_box .hud_details {";
+		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 "}";
+	}
+
+?>
+
 /* Screen smaller than 575px? 1 columns */
 @media (max-width: 575px) {
   .widgets { grid-template-columns: repeat(1, minmax(100px, 1fr)); }
   .col-num { grid-column: span 1; }
 	<?php
 		foreach($dashboard as $row) {
-			$dashboard_name = strtolower($row['dashboard_name']);
-			$dashboard_name = str_replace(" ", "_", $dashboard_name);
+			$dashboard_name = str_replace(" ", "_", strtolower($row['dashboard_name']));
 			if (isset($dashboard_column_span) && is_numeric($dashboard_column_span)) {
 				echo "#".$dashboard_name." {\n";
 				echo "	grid-column: span 1;\n";
@@ -244,13 +282,9 @@
   .col-num { grid-column: span 2; }
 	<?php
 		foreach($dashboard as $row) {
-			$dashboard_name = strtolower($row['dashboard_name']);
-			$dashboard_name = str_replace(" ", "_", $dashboard_name);
-			$dashboard_column_span = 1;
+			$dashboard_name = str_replace(" ", "_", strtolower($row['dashboard_name']));
+			$dashboard_column_span = $row['dashboard_column_span'];
 			if (is_numeric($dashboard_column_span)) {
-				if ($row['dashboard_column_span'] > 2) {
-					$dashboard_column_span = 2;
-				}
 				echo "#".$dashboard_name." {\n";
 				echo "	grid-column: span ".$dashboard_column_span.";\n";
 				echo "}\n";
@@ -304,25 +338,31 @@
   .widgets { grid-template-columns: repeat(5, minmax(100px, 1fr)); }
   .col-num { grid-column: span 2; }
 }
-
 </style>
 
+<script>
+function toggle_grid_row_end(dashboard_name) {
+	var widget = document.getElementById(dashboard_name);
+	var current_row_end = widget.style.gridRowEnd;
+	widget.style.gridRowEnd = (current_row_end == 'span 2') ? 'span 5' : 'span 2';
+}
+</script>
+
 <?php
 
 //include the dashboards
 	echo "<div class='widgets' id='widgets' style='padding: 0 5px;'>\n";
 	$x = 0;
 	foreach($dashboard as $row) {
-		$dashboard_name = $row['dashboard_name'];
+		$dashboard_name = str_replace(" ", "_", strtolower($row['dashboard_name']));
 		$dashboard_icon = $row['dashboard_icon'] ?? '';
 		$dashboard_url  = $row['dashboard_url'] ?? '';
 		$dashboard_chart_type = $row['dashboard_chart_type'] ?? 'doughnut';
-		$dashboard_heading_background_color = $row['dashboard_heading_background_color'] ?? $settings->get('theme', 'dashboard_heading_background_color');
-		$dashboard_heading_text_color = $row['dashboard_heading_text_color'] ?? $settings->get('theme', 'dashboard_heading_text_color');
-		$dashboard_number_background_color = $row['dashboard_number_background_color'] ?? $settings->get('theme', 'dashboard_number_background_color');
 		$dashboard_number_text_color = $row['dashboard_number_text_color'] ?? $settings->get('theme', 'dashboard_number_text_color');
 		$dashboard_details_state = $row['dashboard_details_state'];
-		echo "<div class='widget' id='".str_replace(" ", "_", strtolower($dashboard_name))."' draggable='false'>\n";
+		$grid_row_end = ($dashboard_details_state == "expanded" || empty($dashboard_details_state)) ? "grid-row-end: span 5;" : "grid-row-end: span 2;";
+
+		echo "<div class='widget' style='".$grid_row_end."' id='".$dashboard_name."' draggable='false'>\n";
 		include($row['dashboard_path']);
 		echo "</div>\n";
 		$x++;

core/dashboard/resources/dashboard/icon.php

@@ -11,21 +11,23 @@
 //dashboard icon
 	echo "<div class='hud_box'>\n";
 
-	echo "<div style='display: flex; flex-wrap: wrap; justify-content: center; padding-bottom: 13px; background-color: ".$dashboard_number_background_color.";' ".($row['dashboard_details_state'] == "disabled" ?: "onclick=\"$('#hud_icon_details').slideToggle('fast');\"").">\n";
-	echo "	<span class='hud_title' style='background-color: ".$dashboard_heading_background_color."; color: ".$dashboard_heading_text_color.";' 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' style='height: 150px; padding-bottom: 27px; color: ".$dashboard_number_text_color.";'><i class=\"fas ".$dashboard_icon."\" style=\"color: ".$dashboard_number_text_color."; font-size: 0.8em;\"></i></span></a>\n";
+	echo "<div class='hud_container' ".($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";
 
-	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";
-	echo "<td>\n";
-	echo "	&nbsp;\n";
-	echo "</td>\n";
-	echo "</table>\n";
-	//echo "<span style='display: block; margin: 6px 0 7px 0;'><a href='".PROJECT_PATH."/app/xml_cdr/xml_cdr.php?status=missed'>".$text['label-view_all']."</a></span>\n";
-	echo "</div>";
-	//$n++;
+	if ($dashboard_detail_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";
+		echo "<td>\n";
+		echo "	&nbsp;\n";
+		echo "</td>\n";
+		echo "</table>\n";
+		//echo "<span style='display: block; margin: 6px 0 7px 0;'><a href='".PROJECT_PATH."/app/xml_cdr/xml_cdr.php?status=missed'>".$text['label-view_all']."</a></span>\n";
+		echo "</div>";
+		//$n++;
+	}
 
 	echo "<span class='hud_expander' onclick=\"$('#hud_icon_details').slideToggle('fast');\"><span class='fas fa-ellipsis-h'></span></span>";
 	echo "</div>\n";

themes/default/css.php

@@ -2631,7 +2631,7 @@ else { //default: white
 		$padding_top_bottom = (int) floor((100-$tmp) * 0.25);
 		?>
 		padding-top: <?php echo $padding_top_bottom.'px' ?>;
-		padding-bottom: <?php echo ($padding_top_bottom).'px' ?>;
+		padding-bottom: <?php echo $padding_top_bottom.'px' ?>;
 		}
 
 	span.hud_stat:hover {