..F....... [ZBXNEXT-7469] simplified widget forms and fields; moved all widget helper functions to classes

3 files changed, 61 insertions, 55 deletions

diff --git a/sass/stylesheets/sass/components/dashboard/_widget-clock.scss b/sass/stylesheets/sass/components/dashboard/_widget-clock.scss
index 1f282fe2020..beb684f1cfd 100644
--- a/sass/stylesheets/sass/components/dashboard/_widget-clock.scss
+++ b/sass/stylesheets/sass/components/dashboard/_widget-clock.scss
@@ -29,12 +29,11 @@ form.dashboard-widget-clock {
 		}
 
 		&.fields-group-tzone {
-			.field-format {
-				grid-column: 2 / -1;
-			}
-
-			.field-timezone {
-				grid-column: 2 / -1;
+			.form-field {
+				&.field-tzone-timezone,
+				&.field-tzone-format {
+					grid-column: 2 / -1;
+				}
 			}
 		}
 	}
diff --git a/sass/stylesheets/sass/components/dashboard/_widget-item.scss b/sass/stylesheets/sass/components/dashboard/_widget-item.scss
index f3a36d2d73a..37a07221d38 100644
--- a/sass/stylesheets/sass/components/dashboard/_widget-item.scss
+++ b/sass/stylesheets/sass/components/dashboard/_widget-item.scss
@@ -1,71 +1,73 @@
 // Widget configuration.
 
 form.dashboard-widget-item {
-	.fields-group-description,
-	.fields-group-value,
-	.fields-group-time,
-	.fields-group-change-indicator {
-		display: grid;
-		grid-template-columns: minmax(100px, max-content) 3fr max-content auto;
-		align-items: center;
-		column-gap: 10px;
-		row-gap: 5px;
-
-		label {
-			text-align: right;
-		}
+	.fields-group {
+		&.fields-group-description,
+		&.fields-group-value,
+		&.fields-group-time,
+		&.fields-group-change-indicator {
+			display: grid;
+			grid-template-columns: minmax(100px, max-content) 3fr max-content auto;
+			align-items: center;
+			column-gap: 10px;
+			row-gap: 5px;
+
+			label {
+				text-align: right;
+			}
 
-		hr {
-			grid-column: 1 / -1;
-			margin: 0;
-			width: 100%;
-			border: solid $table-border-color;
-			border-width: 1px 0 0 0;
-		}
+			hr {
+				grid-column: 1 / -1;
+				margin: 0;
+				width: 100%;
+				border: solid $table-border-color;
+				border-width: 1px 0 0 0;
+			}
 
-		.field-fluid {
-			grid-column: 2 / -1;
-		}
+			.field-fluid {
+				grid-column: 2 / -1;
+			}
 
-		.offset-3 {
-			grid-column-start: 3;
-		}
+			.offset-3 {
+				grid-column-start: 3;
+			}
 
-		.field-size {
-			input {
-				margin-right: 5px;
+			.field-size {
+				input {
+					margin-right: 5px;
+				}
 			}
-		}
 
-		.form-field {
-			line-height: 24px;
+			.form-field {
+				line-height: 24px;
+			}
 		}
-	}
 
-	.fields-group-description {
-		.form-field:nth-child(1) {
-			grid-column: 1 / -1;
+		&.fields-group-description {
+			.form-field:nth-child(1) {
+				grid-column: 1 / -1;
+			}
 		}
-	}
 
-	.fields-group-value {
-		grid-template-columns: minmax(100px, max-content) 3fr max-content auto;
+		&.fields-group-value {
+			grid-template-columns: minmax(100px, max-content) 3fr max-content auto;
 
-		.units-show {
-			display: flex;
+			.units-show {
+				display: flex;
 
-			label[for='units'] {
-				width: 100%;
+				label[for='units'] {
+					width: 100%;
+				}
 			}
 		}
-	}
 
-	.fields-group-change-indicator {
-		grid-template-columns: repeat(3, max-content 96px);
-	}
+		&.fields-group-change-indicator {
+			grid-template-columns: repeat(3, max-content 96px);
 
-	.fields-group-change-indicator .input-color-picker {
-		display: block;
+			.input-color-picker {
+				display: block;
+			}
+		}
 	}
 }
 
diff --git a/sass/stylesheets/sass/components/dashboard/_widget-svggraph.scss b/sass/stylesheets/sass/components/dashboard/_widget-svggraph.scss
index e32ad97b80a..8aa705e33fb 100644
--- a/sass/stylesheets/sass/components/dashboard/_widget-svggraph.scss
+++ b/sass/stylesheets/sass/components/dashboard/_widget-svggraph.scss
@@ -1,6 +1,11 @@
 // Widget configuration.
 
 form.dashboard-widget-svggraph {
+	.svg-graph-preview,
+	.graph-widget-config-tabs {
+		grid-column: 1 / -1;
+	}
+
 	.graph-widget-config-tabs {
 		padding: 10px 0;