Dashboard: Add Background Gradient & Angle Controls

core/dashboard/app_config.php

@@ -172,6 +172,16 @@
 		$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_background_gradient_style';
+		$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'] = 'Select a background gradient style.';
+		$z++;
+		$apps[$x]['db'][$y]['fields'][$z]['name'] = 'dashboard_background_gradient_angle';
+		$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'] = 'Select a background gradient angle.';
+		$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'] = '';

core/dashboard/app_languages.php

@@ -1456,4 +1456,186 @@ $text['login-message_dismiss']['zh-cn'] = "忽略消息";
 $text['login-message_dismiss']['ja-jp'] = "メッセージを閉じる";
 $text['login-message_dismiss']['ko-kr'] = "메시지 닫기";
 
-?>
+$text['label-dashboard_background_gradient_style']['en-us'] = "Background Gradient";
+$text['label-dashboard_background_gradient_style']['en-gb'] = "Background Gradient";
+$text['label-dashboard_background_gradient_style']['ar-eg'] = "تدرج الخلفية";
+$text['label-dashboard_background_gradient_style']['de-at'] = "Hintergrundverlauf";
+$text['label-dashboard_background_gradient_style']['de-ch'] = "Hintergrundverlauf";
+$text['label-dashboard_background_gradient_style']['de-de'] = "Hintergrundverlauf";
+$text['label-dashboard_background_gradient_style']['el-gr'] = "Κλίση φόντου";
+$text['label-dashboard_background_gradient_style']['es-cl'] = "Fondo degradado";
+$text['label-dashboard_background_gradient_style']['es-mx'] = "Fondo degradado";
+$text['label-dashboard_background_gradient_style']['fr-ca'] = "Dégradé d'arrière-plan";
+$text['label-dashboard_background_gradient_style']['fr-fr'] = "Dégradé d'arrière-plan";
+$text['label-dashboard_background_gradient_style']['he-il'] = "שיפוע רקע";
+$text['label-dashboard_background_gradient_style']['it-it'] = "Gradiente di sfondo";
+$text['label-dashboard_background_gradient_style']['nl-nl'] = "Achtergrondverloop";
+$text['label-dashboard_background_gradient_style']['pl-pl'] = "Tło gradientowe";
+$text['label-dashboard_background_gradient_style']['pt-br'] = "Gradiente de fundo";
+$text['label-dashboard_background_gradient_style']['pt-pt'] = "Gradiente de fundo";
+$text['label-dashboard_background_gradient_style']['ro-ro'] = "Gradient de fundal";
+$text['label-dashboard_background_gradient_style']['ru-ru'] = "Градиент фона";
+$text['label-dashboard_background_gradient_style']['sv-se'] = "Bakgrundsgradient";
+$text['label-dashboard_background_gradient_style']['uk-ua'] = "Фоновий градієнт";
+$text['label-dashboard_background_gradient_style']['tr-tr'] = "Arkaplan Gradyanı";
+$text['label-dashboard_background_gradient_style']['zh-cn'] = "背景渐变";
+$text['label-dashboard_background_gradient_style']['ja-jp'] = "背景グラデーション";
+$text['label-dashboard_background_gradient_style']['ko-kr'] = "배경 그라디언트";
+
+$text['description-dashboard_background_gradient_style']['en-us'] = "Select a background gradient style.";
+$text['description-dashboard_background_gradient_style']['en-gb'] = "Select a background gradient style.";
+$text['description-dashboard_background_gradient_style']['ar-eg'] = "حدد نمط التدرج الخلفي.";
+$text['description-dashboard_background_gradient_style']['de-at'] = "Wählen Sie einen Hintergrundverlaufsstil aus.";
+$text['description-dashboard_background_gradient_style']['de-ch'] = "Wählen Sie einen Hintergrundverlaufsstil aus.";
+$text['description-dashboard_background_gradient_style']['de-de'] = "Wählen Sie einen Hintergrundverlaufsstil aus.";
+$text['description-dashboard_background_gradient_style']['el-gr'] = "Επιλέξτε ένα στυλ ντεγκραντέ φόντου.";
+$text['description-dashboard_background_gradient_style']['es-cl'] = "Seleccione un estilo de degradado de fondo.";
+$text['description-dashboard_background_gradient_style']['es-mx'] = "Seleccione un estilo de degradado de fondo.";
+$text['description-dashboard_background_gradient_style']['fr-ca'] = "Sélectionnez un style de dégradé d'arrière-plan.";
+$text['description-dashboard_background_gradient_style']['fr-fr'] = "Sélectionnez un style de dégradé d'arrière-plan.";
+$text['description-dashboard_background_gradient_style']['he-il'] = "בחר סגנון מעברי רקע.";
+$text['description-dashboard_background_gradient_style']['it-it'] = "Seleziona uno stile di sfumatura dello sfondo.";
+$text['description-dashboard_background_gradient_style']['nl-nl'] = "Selecteer een achtergrondverloopstijl.";
+$text['description-dashboard_background_gradient_style']['pl-pl'] = "Wybierz styl gradientu tła.";
+$text['description-dashboard_background_gradient_style']['pt-br'] = "Selecione um estilo de gradiente de fundo.";
+$text['description-dashboard_background_gradient_style']['pt-pt'] = "Selecione um estilo de gradiente de fundo.";
+$text['description-dashboard_background_gradient_style']['ro-ro'] = "Selectați un stil de gradient de fundal.";
+$text['description-dashboard_background_gradient_style']['ru-ru'] = "Выберите стиль градиента фона.";
+$text['description-dashboard_background_gradient_style']['sv-se'] = "Välj en bakgrundsgradientstil.";
+$text['description-dashboard_background_gradient_style']['uk-ua'] = "Виберіть стиль фонового градієнта.";
+$text['description-dashboard_background_gradient_style']['tr-tr'] = "Bir arka plan degrade stili seçin.";
+$text['description-dashboard_background_gradient_style']['zh-cn'] = "选择背景渐变样式。";
+$text['description-dashboard_background_gradient_style']['ja-jp'] = "背景のグラデーション スタイルを選択します。";
+$text['description-dashboard_background_gradient_style']['ko-kr'] = "배경 그라데이션 스타일을 선택하세요.";
+
+$text['option-dashboard_background_gradient_style_option_mirror']['en-us'] = "Mirror";
+$text['option-dashboard_background_gradient_style_option_mirror']['en-gb'] = "Mirror";
+$text['option-dashboard_background_gradient_style_option_mirror']['ar-eg'] = "مرآة";
+$text['option-dashboard_background_gradient_style_option_mirror']['de-at'] = "Spiegel";
+$text['option-dashboard_background_gradient_style_option_mirror']['de-ch'] = "Spiegel";
+$text['option-dashboard_background_gradient_style_option_mirror']['de-de'] = "Spiegel";
+$text['option-dashboard_background_gradient_style_option_mirror']['el-gr'] = "Καθρέπτης";
+$text['option-dashboard_background_gradient_style_option_mirror']['es-cl'] = "Espejo";
+$text['option-dashboard_background_gradient_style_option_mirror']['es-mx'] = "Espejo";
+$text['option-dashboard_background_gradient_style_option_mirror']['fr-ca'] = "Miroir";
+$text['option-dashboard_background_gradient_style_option_mirror']['fr-fr'] = "Miroir";
+$text['option-dashboard_background_gradient_style_option_mirror']['he-il'] = "מַרְאָה";
+$text['option-dashboard_background_gradient_style_option_mirror']['it-it'] = "Specchio";
+$text['option-dashboard_background_gradient_style_option_mirror']['nl-nl'] = "Spiegel";
+$text['option-dashboard_background_gradient_style_option_mirror']['pl-pl'] = "Lustro";
+$text['option-dashboard_background_gradient_style_option_mirror']['pt-br'] = "Espelho";
+$text['option-dashboard_background_gradient_style_option_mirror']['pt-pt'] = "Espelho";
+$text['option-dashboard_background_gradient_style_option_mirror']['ro-ro'] = "Oglindă";
+$text['option-dashboard_background_gradient_style_option_mirror']['ru-ru'] = "Зеркало";
+$text['option-dashboard_background_gradient_style_option_mirror']['sv-se'] = "Spegel";
+$text['option-dashboard_background_gradient_style_option_mirror']['uk-ua'] = "Дзеркало";
+$text['option-dashboard_background_gradient_style_option_mirror']['tr-tr'] = "Ayna";
+$text['option-dashboard_background_gradient_style_option_mirror']['zh-cn'] = "镜子";
+$text['option-dashboard_background_gradient_style_option_mirror']['ja-jp'] = "鏡";
+$text['option-dashboard_background_gradient_style_option_mirror']['ko-kr'] = "거울";
+
+$text['option-dashboard_background_gradient_style_option_simple']['en-us'] = "Simple";
+$text['option-dashboard_background_gradient_style_option_simple']['en-gb'] = "Simple";
+$text['option-dashboard_background_gradient_style_option_simple']['ar-eg'] = "بسيط";
+$text['option-dashboard_background_gradient_style_option_simple']['de-at'] = "Einfach";
+$text['option-dashboard_background_gradient_style_option_simple']['de-ch'] = "Einfach";
+$text['option-dashboard_background_gradient_style_option_simple']['de-de'] = "Einfach";
+$text['option-dashboard_background_gradient_style_option_simple']['el-gr'] = "Απλός";
+$text['option-dashboard_background_gradient_style_option_simple']['es-cl'] = "Sencillo";
+$text['option-dashboard_background_gradient_style_option_simple']['es-mx'] = "Sencillo";
+$text['option-dashboard_background_gradient_style_option_simple']['fr-ca'] = "Simple";
+$text['option-dashboard_background_gradient_style_option_simple']['fr-fr'] = "Simple";
+$text['option-dashboard_background_gradient_style_option_simple']['he-il'] = "פָּשׁוּט";
+$text['option-dashboard_background_gradient_style_option_simple']['it-it'] = "Semplice";
+$text['option-dashboard_background_gradient_style_option_simple']['nl-nl'] = "Eenvoudig";
+$text['option-dashboard_background_gradient_style_option_simple']['pl-pl'] = "Prosty";
+$text['option-dashboard_background_gradient_style_option_simple']['pt-br'] = "Simples";
+$text['option-dashboard_background_gradient_style_option_simple']['pt-pt'] = "Simples";
+$text['option-dashboard_background_gradient_style_option_simple']['ro-ro'] = "Simplu";
+$text['option-dashboard_background_gradient_style_option_simple']['ru-ru'] = "Простой";
+$text['option-dashboard_background_gradient_style_option_simple']['sv-se'] = "Enkel";
+$text['option-dashboard_background_gradient_style_option_simple']['uk-ua'] = "простий";
+$text['option-dashboard_background_gradient_style_option_simple']['tr-tr'] = "Basit";
+$text['option-dashboard_background_gradient_style_option_simple']['zh-cn'] = "简单的";
+$text['option-dashboard_background_gradient_style_option_simple']['ja-jp'] = "単純";
+$text['option-dashboard_background_gradient_style_option_simple']['ko-kr'] = "단순한";
+
+$text['label-dashboard_background_gradient_angle']['en-us'] = "Background Angle";
+$text['label-dashboard_background_gradient_angle']['en-gb'] = "Background Angle";
+$text['label-dashboard_background_gradient_angle']['ar-eg'] = "زاوية الخلفية";
+$text['label-dashboard_background_gradient_angle']['de-at'] = "Hintergrundwinkel";
+$text['label-dashboard_background_gradient_angle']['de-ch'] = "Hintergrundwinkel";
+$text['label-dashboard_background_gradient_angle']['de-de'] = "Hintergrundwinkel";
+$text['label-dashboard_background_gradient_angle']['el-gr'] = "Γωνία φόντου";
+$text['label-dashboard_background_gradient_angle']['es-cl'] = "Ángulo de fondo";
+$text['label-dashboard_background_gradient_angle']['es-mx'] = "Ángulo de fondo";
+$text['label-dashboard_background_gradient_angle']['fr-ca'] = "Angle d'arrière-plan";
+$text['label-dashboard_background_gradient_angle']['fr-fr'] = "Angle d'arrière-plan";
+$text['label-dashboard_background_gradient_angle']['he-il'] = "זווית רקע";
+$text['label-dashboard_background_gradient_angle']['it-it'] = "Angolo di sfondo";
+$text['label-dashboard_background_gradient_angle']['nl-nl'] = "Achtergrondhoek";
+$text['label-dashboard_background_gradient_angle']['pl-pl'] = "Kąt tła";
+$text['label-dashboard_background_gradient_angle']['pt-br'] = "Ângulo de fundo";
+$text['label-dashboard_background_gradient_angle']['pt-pt'] = "Ângulo de fundo";
+$text['label-dashboard_background_gradient_angle']['ro-ro'] = "Unghiul de fundal";
+$text['label-dashboard_background_gradient_angle']['ru-ru'] = "Угол заднего плана";
+$text['label-dashboard_background_gradient_angle']['sv-se'] = "Bakgrundsvinkel";
+$text['label-dashboard_background_gradient_angle']['uk-ua'] = "Кут фону";
+$text['label-dashboard_background_gradient_angle']['tr-tr'] = "Arkaplan Açısı";
+$text['label-dashboard_background_gradient_angle']['zh-cn'] = "背景角度";
+$text['label-dashboard_background_gradient_angle']['ja-jp'] = "背景の角度";
+$text['label-dashboard_background_gradient_angle']['ko-kr'] = "배경 각도";
+
+$text['description-dashboard_background_gradient_angle']['en-us'] = "Select the angle of the background gradient.";
+$text['description-dashboard_background_gradient_angle']['en-gb'] = "Select the angle of the background gradient.";
+$text['description-dashboard_background_gradient_angle']['ar-eg'] = "حدد زاوية التدرج الخلفي.";
+$text['description-dashboard_background_gradient_angle']['de-at'] = "Wählen Sie den Winkel des Hintergrundverlaufs.";
+$text['description-dashboard_background_gradient_angle']['de-ch'] = "Wählen Sie den Winkel des Hintergrundverlaufs.";
+$text['description-dashboard_background_gradient_angle']['de-de'] = "Wählen Sie den Winkel des Hintergrundverlaufs.";
+$text['description-dashboard_background_gradient_angle']['el-gr'] = "Επιλέξτε τη γωνία της κλίσης φόντου.";
+$text['description-dashboard_background_gradient_angle']['es-cl'] = "Seleccione el ángulo del degradado de fondo.";
+$text['description-dashboard_background_gradient_angle']['es-mx'] = "Seleccione el ángulo del degradado de fondo.";
+$text['description-dashboard_background_gradient_angle']['fr-ca'] = "Sélectionnez l'angle du dégradé d'arrière-plan.";
+$text['description-dashboard_background_gradient_angle']['fr-fr'] = "Sélectionnez l'angle du dégradé d'arrière-plan.";
+$text['description-dashboard_background_gradient_angle']['he-il'] = "בחר את הזווית של שיפוע הרקע.";
+$text['description-dashboard_background_gradient_angle']['it-it'] = "Seleziona l'angolazione del gradiente dello sfondo.";
+$text['description-dashboard_background_gradient_angle']['nl-nl'] = "Selecteer de hoek van de achtergrondverloop.";
+$text['description-dashboard_background_gradient_angle']['pl-pl'] = "Wybierz kąt gradientu tła.";
+$text['description-dashboard_background_gradient_angle']['pt-br'] = "Selecione o ângulo do gradiente de fundo.";
+$text['description-dashboard_background_gradient_angle']['pt-pt'] = "Selecione o ângulo do gradiente de fundo.";
+$text['description-dashboard_background_gradient_angle']['ro-ro'] = "Selectați unghiul gradientului de fundal.";
+$text['description-dashboard_background_gradient_angle']['ru-ru'] = "Выберите угол фонового градиента.";
+$text['description-dashboard_background_gradient_angle']['sv-se'] = "Välj vinkel för bakgrundsgradienten.";
+$text['description-dashboard_background_gradient_angle']['uk-ua'] = "Виберіть кут градієнта фону.";
+$text['description-dashboard_background_gradient_angle']['tr-tr'] = "Arkaplan gradyanının açısını seçin.";
+$text['description-dashboard_background_gradient_angle']['zh-cn'] = "选择背景渐变的角度。";
+$text['description-dashboard_background_gradient_angle']['ja-jp'] = "背景のグラデーションの角度を選択します。";
+$text['description-dashboard_background_gradient_angle']['ko-kr'] = "배경 그라데이션 각도를 선택하세요.";
+
+$text['button-swap']['en-us'] = "Swap Values";
+$text['button-swap']['en-gb'] = "Swap Values";
+$text['button-swap']['ar-eg'] = "قيم المبادلة";
+$text['button-swap']['de-at'] = "Werte vertauschen";
+$text['button-swap']['de-ch'] = "Werte vertauschen";
+$text['button-swap']['de-de'] = "Werte vertauschen";
+$text['button-swap']['el-gr'] = "Ανταλλαγή τιμών";
+$text['button-swap']['es-cl'] = "Valores de intercambio";
+$text['button-swap']['es-mx'] = "Valores de intercambio";
+$text['button-swap']['fr-ca'] = "Valeurs d'échange";
+$text['button-swap']['fr-fr'] = "Valeurs d'échange";
+$text['button-swap']['he-il'] = "החלפת ערכים";
+$text['button-swap']['it-it'] = "Valori di scambio";
+$text['button-swap']['nl-nl'] = "Ruilwaarden";
+$text['button-swap']['pl-pl'] = "Wartości wymiany";
+$text['button-swap']['pt-br'] = "Valores de swap";
+$text['button-swap']['pt-pt'] = "Trocar valores";
+$text['button-swap']['ro-ro'] = "Schimbați valori";
+$text['button-swap']['ru-ru'] = "Поменять значения";
+$text['button-swap']['sv-se'] = "Byt värden";
+$text['button-swap']['uk-ua'] = "Поміняти значення";
+$text['button-swap']['tr-tr'] = "Takas Değerleri";
+$text['button-swap']['zh-cn'] = "交换值";
+$text['button-swap']['ja-jp'] = "スワップ値";
+$text['button-swap']['ko-kr'] = "가치 교환";
+
+?>

core/dashboard/dashboard_edit.php

@@ -102,6 +102,8 @@
 		$dashboard_background_color = $_POST["dashboard_background_color"] ?? '';
 		$dashboard_background_color_hover = $_POST["dashboard_background_color_hover"] ?? '';
 		$dashboard_detail_background_color = $_POST["dashboard_detail_background_color"] ?? '';
+		$dashboard_background_gradient_style = $_POST["dashboard_background_gradient_style"] ?? 'mirror';
+		$dashboard_background_gradient_angle = $_POST["dashboard_background_gradient_angle"] ?? '90';
 		$dashboard_column_span = $_POST["dashboard_column_span"] ?? '';
 		$dashboard_row_span = $_POST["dashboard_row_span"] ?? '';
 		$dashboard_details_state = $_POST["dashboard_details_state"] ?? '';
@@ -252,6 +254,8 @@
 			$array['dashboard'][0]['dashboard_background_color'] = $dashboard_background_color;
 			$array['dashboard'][0]['dashboard_background_color_hover'] = $dashboard_background_color_hover;
 			$array['dashboard'][0]['dashboard_detail_background_color'] = $dashboard_detail_background_color;
+			$array['dashboard'][0]['dashboard_background_gradient_style'] = $dashboard_background_gradient_style;
+			$array['dashboard'][0]['dashboard_background_gradient_angle'] = $dashboard_background_gradient_angle;
 			$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;
@@ -315,6 +319,8 @@
 		$sql .= " dashboard_background_color, ";
 		$sql .= " dashboard_background_color_hover, ";
 		$sql .= " dashboard_detail_background_color, ";
+		$sql .= " dashboard_background_gradient_style, ";
+		$sql .= " dashboard_background_gradient_angle, ";
 		$sql .= " dashboard_column_span, ";
 		$sql .= " dashboard_row_span, ";
 		$sql .= " dashboard_details_state, ";
@@ -348,6 +354,8 @@
 			$dashboard_background_color = $row["dashboard_background_color"];
 			$dashboard_background_color_hover = $row["dashboard_background_color_hover"];
 			$dashboard_detail_background_color = $row["dashboard_detail_background_color"];
+			$dashboard_background_gradient_style = $row["dashboard_background_gradient_style"];
+			$dashboard_background_gradient_angle = $row["dashboard_background_gradient_angle"];
 			$dashboard_column_span = $row["dashboard_column_span"];
 			$dashboard_row_span = $row["dashboard_row_span"];
 			$dashboard_details_state = $row["dashboard_details_state"];
@@ -880,8 +888,17 @@
 	echo "</td>\n";
 	echo "<td class='vtable' style='position: relative;' align='left'>\n";
 	if (!empty($dashboard_background_color) && 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";
+		foreach ($dashboard_background_color as $c => $background_color) {
+			echo "	<input type='text' class='formfld colorpicker' id='dashboard_background_color_".$c."' name='dashboard_background_color[]' value='".escape($background_color)."'>\n";
+			if ($c < sizeof($dashboard_background_color) - 1) { echo "<br />\n"; }
+		}
+		//swap button
+		if (!empty($dashboard_background_color) && is_array($dashboard_background_color) && sizeof($dashboard_background_color) > 1) {
+			echo "	<input type='hidden' id='dashboard_background_color_temp'>\n";
+			echo button::create(['type'=>'button','title'=>$text['button-swap'],'icon'=>'fa-solid fa-arrow-right-arrow-left fa-rotate-90','style'=>"z-index: 0; position: absolute; display: inline-block; margin: -14px 0 0 7px;",'onclick'=>"document.getElementById('dashboard_background_color_temp').value = document.getElementById('dashboard_background_color_0').value; document.getElementById('dashboard_background_color_0').value = document.getElementById('dashboard_background_color_1').value; document.getElementById('dashboard_background_color_1').value = document.getElementById('dashboard_background_color_temp').value; this.blur();"])."<br>\n";
+		}
+		else {
+			echo "<br />\n";
 		}
 	}
 	if (empty($dashboard_background_color) || (is_array($dashboard_background_color) && count($dashboard_background_color) < 2)) {
@@ -902,8 +919,17 @@
 		echo "</td>\n";
 		echo "<td class='vtable' style='position: relative;' align='left'>\n";
 		if (!empty($dashboard_background_color_hover) && is_array($dashboard_background_color_hover)) {
-			foreach($dashboard_background_color_hover as $background_color) {
-				echo "	<input type='text' class='formfld colorpicker' name='dashboard_background_color_hover[]' value='".escape($background_color)."'><br />\n";
+			foreach ($dashboard_background_color_hover as $c => $background_color) {
+				echo "	<input type='text' class='formfld colorpicker' id='dashboard_background_color_hover_".$c."' name='dashboard_background_color_hover[]' value='".escape($background_color)."'>\n";
+				if ($c < sizeof($dashboard_background_color_hover) - 1) { echo "<br />\n"; }
+			}
+			//swap button
+			if (!empty($dashboard_background_color_hover) && is_array($dashboard_background_color_hover) && sizeof($dashboard_background_color_hover) > 1) {
+				echo "	<input type='hidden' id='dashboard_background_color_hover_temp'>\n";
+				echo button::create(['type'=>'button','title'=>$text['button-swap'],'icon'=>'fa-solid fa-arrow-right-arrow-left fa-rotate-90','style'=>"z-index: 0; position: absolute; display: inline-block; margin: -14px 0 0 7px;",'onclick'=>"document.getElementById('dashboard_background_color_hover_temp').value = document.getElementById('dashboard_background_color_hover_0').value; document.getElementById('dashboard_background_color_hover_0').value = document.getElementById('dashboard_background_color_hover_1').value; document.getElementById('dashboard_background_color_hover_1').value = document.getElementById('dashboard_background_color_hover_temp').value; this.blur();"])."<br>\n";
+			}
+			else {
+				echo "<br />\n";
 			}
 		}
 		if (empty($dashboard_background_color_hover) || (is_array($dashboard_background_color_hover) && count($dashboard_background_color_hover) < 2)) {
@@ -924,8 +950,17 @@
 	echo "</td>\n";
 	echo "<td class='vtable' style='position: relative;' align='left'>\n";
 	if (!empty($dashboard_detail_background_color) && 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";
+		foreach ($dashboard_detail_background_color as $c => $detail_background_color) {
+			echo "	<input type='text' class='formfld colorpicker' id='dashboard_detail_background_color_".$c."' name='dashboard_detail_background_color[]' value='".escape($detail_background_color)."'>\n";
+			if ($c < sizeof($dashboard_detail_background_color) - 1) { echo "<br />\n"; }
+		}
+		//swap button
+		if (!empty($dashboard_detail_background_color) && is_array($dashboard_detail_background_color) && sizeof($dashboard_detail_background_color) > 1) {
+			echo "	<input type='hidden' id='dashboard_detail_background_color_temp'>\n";
+			echo button::create(['type'=>'button','title'=>$text['button-swap'],'icon'=>'fa-solid fa-arrow-right-arrow-left fa-rotate-90','style'=>"z-index: 0; position: absolute; display: inline-block; margin: -14px 0 0 7px;",'onclick'=>"document.getElementById('dashboard_detail_background_color_temp').value = document.getElementById('dashboard_detail_background_color_0').value; document.getElementById('dashboard_detail_background_color_0').value = document.getElementById('dashboard_detail_background_color_1').value; document.getElementById('dashboard_detail_background_color_1').value = document.getElementById('dashboard_detail_background_color_temp').value; this.blur();"])."<br>\n";
+		}
+		else {
+			echo "<br />\n";
 		}
 	}
 	if (empty($dashboard_detail_background_color) || (is_array($dashboard_detail_background_color) && count($dashboard_detail_background_color) < 2)) {
@@ -939,6 +974,37 @@
 	echo "</td>\n";
 	echo "</tr>\n";
 
+	echo "<tr class='type_label'>\n";
+	echo "<td class='vncell' valign='top' align='left' nowrap='nowrap'>\n";
+	echo $text['label-dashboard_background_gradient_style']."\n";
+	echo "</td>\n";
+	echo "<td class='vtable'>\n";
+	echo "	<select name='dashboard_background_gradient_style' class='formfld'>\n";
+	echo "		<option value='mirror'>".$text['option-dashboard_background_gradient_style_option_mirror']."</option>\n";
+	echo "		<option value='simple' ".($dashboard_background_gradient_style == 'simple' ? "selected='selected'" : null).">".$text['option-dashboard_background_gradient_style_option_simple']."</option>\n";
+	echo "	</select>\n";
+	echo "<br />\n";
+	echo $text['description-dashboard_background_gradient_style']."\n";
+	echo "</td>\n";
+	echo "</tr>\n";
+
+	echo "<tr class='type_label'>\n";
+	echo "<td class='vncell' valign='top' align='left' nowrap='nowrap'>\n";
+	echo $text['label-dashboard_background_gradient_angle']."\n";
+	echo "</td>\n";
+	echo "<td class='vtable'>\n";
+	echo "	<div style='overflow: auto;'>\n";
+	echo "		<select name='dashboard_background_gradient_angle' class='formfld' style='float: left;' onchange=\"document.getElementById('angle').style.transform = 'rotate(' + ($(this).val() - 90) + 'deg)';\">\n";
+	for ($a = 0; $a <= 180; $a += 5) {
+		echo "		<option value='".($a + 90)."' ".($dashboard_background_gradient_angle == ($a + 90) ? "selected='selected'" : null).">".$a."&deg;</option>\n";
+	}
+	echo "		</select>\n";
+	echo "		<span id='angle' style='display: inline-block; font-size: 15px; margin-left: 15px; margin-top: 3px; transform: rotate(".(isset($dashboard_background_gradient_angle) ? ($dashboard_background_gradient_angle - 90) : 0)."deg);'>&horbar;</span>\n";
+	echo "	</div>\n";
+	echo $text['description-dashboard_background_gradient_angle']."\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_column_span']."\n";

core/dashboard/index.php

@@ -96,6 +96,8 @@
 	$sql .= "dashboard_background_color, ";
 	$sql .= "dashboard_background_color_hover, ";
 	$sql .= "dashboard_detail_background_color, ";
+	$sql .= "dashboard_background_gradient_style, ";
+	$sql .= "dashboard_background_gradient_angle, ";
 	$sql .= "dashboard_column_span, ";
 	$sql .= "dashboard_row_span, ";
 	$sql .= "dashboard_details_state, ";
@@ -284,21 +286,36 @@ foreach ($dashboard as $row) {
 		$background_color = json_decode($row['dashboard_background_color'], true);
 		echo "#".$dashboard_name." .hud_content {\n";
 		echo "	background: ".$background_color[0].";\n";
-		echo "	background-image: linear-gradient(to right, ".$background_color[1]." 0%, ".$background_color[0]." 30%, ".$background_color[0]." 70%, ".$background_color[1]." 100%);\n";
+		if (empty($row['dashboard_background_gradient_style']) || $row['dashboard_background_gradient_style'] == 'mirror') {
+			echo "	background-image: linear-gradient(".(empty($row['dashboard_background_gradient_angle']) ? '0deg' : $row['dashboard_background_gradient_angle'].'deg').", ".$background_color[1]." 0%, ".$background_color[0]." 30%, ".$background_color[0]." 70%, ".$background_color[1]." 100%);\n";
+		}
+		else { //simple
+			echo "	background-image: linear-gradient(".(empty($row['dashboard_background_gradient_angle']) ? '0deg' : $row['dashboard_background_gradient_angle'].'deg').", ".$background_color[0]." 0%, ".$background_color[1]." 100%);\n";
+		}
 		echo "}\n";
 	}
 	if (!empty($row['dashboard_background_color_hover'])) {
 		$background_color_hover = json_decode($row['dashboard_background_color_hover'], true);
 		echo "#".$dashboard_name.":hover .hud_content {\n";
 		echo "	background: ".$background_color_hover[0].";\n";
-		echo "	background-image: linear-gradient(to right, ".$background_color_hover[1]." 0%, ".$background_color_hover[0]." 30%, ".$background_color_hover[0]." 70%, ".$background_color_hover[1]." 100%);\n";
+		if (empty($row['dashboard_background_gradient_style']) || $row['dashboard_background_gradient_style'] == 'mirror') {
+			echo "	background-image: linear-gradient(".(empty($row['dashboard_background_gradient_angle']) ? '0deg' : $row['dashboard_background_gradient_angle'].'deg').", ".$background_color_hover[1]." 0%, ".$background_color_hover[0]." 30%, ".$background_color_hover[0]." 70%, ".$background_color_hover[1]." 100%);\n";
+		}
+		else { //simple
+			echo "	background-image: linear-gradient(".(empty($row['dashboard_background_gradient_angle']) ? '0deg' : $row['dashboard_background_gradient_angle'].'deg').", ".$background_color_hover[0]." 0%, ".$background_color_hover[1]." 100%);\n";
+		}
 		echo "}\n";
 	}
 	if (!empty($row['dashboard_detail_background_color'])) {
 		$detail_background_color = json_decode($row['dashboard_detail_background_color'], true);
 		echo "#".$dashboard_name." .hud_details {\n";
 		echo "	background: ".$detail_background_color[0].";\n";
-		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%);\n";
+		if (empty($row['dashboard_background_gradient_style']) || $row['dashboard_background_gradient_style'] == 'mirror') {
+			echo "	background-image: linear-gradient(".(empty($row['dashboard_background_gradient_angle']) ? '0deg' : $row['dashboard_background_gradient_angle'].'deg').", ".$detail_background_color[1]." 0%, ".$detail_background_color[0]." 30%, ".$detail_background_color[0]." 70%, ".$detail_background_color[1]." 100%);\n";
+		}
+		else { //simple
+			echo "	background-image: linear-gradient(".(empty($row['dashboard_background_gradient_angle']) ? '0deg' : $row['dashboard_background_gradient_angle'].'deg').", ".$detail_background_color[0]." 0%, ".$detail_background_color[1]." 100%);\n";
+		}
 		echo "}\n";
 	}
 	if ($row['dashboard_label_enabled'] == 'false') {