..F....... [ZBXNEXT-7469] refactored html helpers CUiWidget, CCollapsibleUiWidget to CSection, CSectionCollapsible

6 files changed, 198 insertions, 80 deletions

diff --git a/sass/stylesheets/sass/components/_columns-wrapper.scss b/sass/stylesheets/sass/components/_columns-wrapper.scss
new file mode 100644
index 00000000000..3f10c77bf29
--- /dev/null
+++ b/sass/stylesheets/sass/components/_columns-wrapper.scss
@@ -0,0 +1,79 @@
+.columns-wrapper {
+	$column-count: (2, 3);
+	$column-size: (
+			5: 5%,
+			10: 10%,
+			15: 15%,
+			20: 20%,
+			33: 33.33333%,
+			35: 35%,
+			40: 40%,
+			50: 50%,
+			75: 75%,
+			90: 90%,
+			95: 95%
+	);
+
+	display: flex;
+	flex-wrap: wrap;
+	align-items: start;
+
+	&.columns-nowrap {
+		flex-wrap: nowrap;
+	}
+
+	// Dynamically generated classes for the columns count:
+	//  .columns-2
+	//  .columns-3
+	@each $count in $column-count {
+		&.columns-#{$count} > {
+			div,
+			li {
+				display: block;
+				flex: 0 0 (100% / $count);
+				max-width: (100% / $count);
+			}
+		}
+	}
+
+	// Dynamically generated classes for the column width:
+	//  .column-5
+	//  .column-10
+	//  .column-15
+	//  .column-20
+	//  .column-33
+	//  .column-35
+	//  .column-40
+	//  .column-50
+	//  .column-75
+	//  .column-90
+	//  .column-95
+	@each $class, $width in $column-size {
+		.column-#{$class} {
+			flex: 0 0 $width;
+			max-width: $width;
+		}
+	}
+
+	.column-center {
+		display: flex;
+		justify-content: center;
+		text-align: center;
+	}
+
+	.column-middle {
+		display: flex;
+		align-items: center;
+	}
+
+	& > {
+		div,
+		ul {
+			&:not(:last-child) {
+				section {
+					margin-right: 10px;
+				}
+			}
+		}
+	}
+}
diff --git a/sass/stylesheets/sass/components/_section.scss b/sass/stylesheets/sass/components/_section.scss
new file mode 100644
index 00000000000..e0c21a3aaf2
--- /dev/null
+++ b/sass/stylesheets/sass/components/_section.scss
@@ -0,0 +1,72 @@
+section {
+	background-color: $ui-bg-color;
+	border: 1px solid $ui-border-color;
+
+	.section-head {
+		display: flex;
+		height: 32px;
+		line-height: 32px;
+
+		h4 {
+			padding: 0 10px;
+			margin-right: auto;
+			overflow: hidden;
+			text-overflow: ellipsis;
+			font-weight: bold;
+			line-height: inherit;
+			color: lighten($font-color, 15%);
+		}
+	}
+
+	.section-toggle {
+		@extend %btn-widget-defaults;
+
+		width: 24px;
+		height: 24px;
+		margin: 2px 2px 0 auto;
+		background: url($sprite-path) no-repeat -6px -654px;
+	}
+
+	.section-foot {
+		padding: 0 10px;
+		text-align: right;
+		line-height: 32px;
+		color: $font-alt-color;
+	}
+
+	&.section-collapsed {
+		.section-body,
+		.section-foot {
+			display: none;
+		}
+
+		.section-toggle {
+			background-position: -6px -689px;
+		}
+	}
+
+	&:not(:last-child) {
+		margin-bottom: 10px;
+	}
+
+	.list-table {
+		border: 0;
+
+		tbody tr:last-child {
+			td {
+				border-bottom: 1px solid $table-border-color;
+			}
+		}
+
+		td,
+		th {
+			&:first-child {
+				padding-left: 10px;
+			}
+
+			&:last-child {
+				padding-right: 10px;
+			}
+		}
+	}
+}
diff --git a/sass/stylesheets/sass/components/dashboard/_dashboard.scss b/sass/stylesheets/sass/components/dashboard/_dashboard.scss
index 4906bf7bbbf..f08c7efd840 100644
--- a/sass/stylesheets/sass/components/dashboard/_dashboard.scss
+++ b/sass/stylesheets/sass/components/dashboard/_dashboard.scss
@@ -978,10 +978,6 @@
 	.msg-warning {
 		margin: 0 10px;
 	}
-
-	&.dashboard-widget-fluid {
-		margin-right: 0;
-	}
 }
 
 %dashboard-widget-td {
diff --git a/sass/stylesheets/sass/hc-dark.scss b/sass/stylesheets/sass/hc-dark.scss
index 8eeabd4c3bf..e4ca649315a 100644
--- a/sass/stylesheets/sass/hc-dark.scss
+++ b/sass/stylesheets/sass/hc-dark.scss
@@ -1201,6 +1201,7 @@ td.inactive-bg {
 }
 
 // Multiline input control.
+
 .multilineinput-control {
 	button {
 		&::after {
@@ -1226,6 +1227,7 @@ td.inactive-bg {
 }
 
 // Time selection.
+
 .ui-tabs-nav {
 	.btn-info {
 		&::after {
@@ -1476,6 +1478,7 @@ td.inactive-bg {
 }
 
 // Overrides.
+
 .overrides-options-list {
 	> li > div {
 		border: 1px solid $ui-tab-bg-selected-color;
@@ -1506,6 +1509,7 @@ td.inactive-bg {
 }
 
 // Widget "Host availability".
+
 .host-avail-widget {
 	td:not(:first-child) {
 		border-left: 1px solid $ui-border-color;
@@ -1519,7 +1523,8 @@ td.inactive-bg {
 	}
 }
 
-// Widget "Navigation tree"
+// Widget "Navigation tree".
+
 .navtree {
 	.tree .tree-item > .tree-row {
 		min-width: 410px;
@@ -1527,6 +1532,7 @@ td.inactive-bg {
 }
 
 // Widget "Problems by severity".
+
 .by-severity-widget {
 	> div {
 		min-width: 65px;
@@ -1539,13 +1545,13 @@ td.inactive-bg {
 	}
 }
 
-// InputSecret and ButtonDropdown
+// InputSecret and ButtonDropdown.
 
 .btn-undo.is-focused {
 	box-shadow: 0 1px 0px $blue, 0 -1px 0px $blue;
 }
 
-// Tabfilter
+// Tabfilter.
 
 .filter-container.tabfilter-container {
 	.icon-filter::before {
@@ -1569,7 +1575,7 @@ td.inactive-bg {
 	}
 }
 
-// HOST INTERFACES
+// Host interfaces.
 
 .interfaces {
 	.interface-row {
@@ -1586,3 +1592,17 @@ td.inactive-bg {
 		}
 	}
 }
+
+// Section (components/_section.scss).
+
+section {
+	.section-toggle {
+		background-position: -318px -654px;
+	}
+
+	&.section-collapsed {
+		.section-toggle {
+			background-position: -318px -690px;
+		}
+	}
+}
diff --git a/sass/stylesheets/sass/hc-light.scss b/sass/stylesheets/sass/hc-light.scss
index fb07e8bb819..39c2e7c2a97 100644
--- a/sass/stylesheets/sass/hc-light.scss
+++ b/sass/stylesheets/sass/hc-light.scss
@@ -1310,6 +1310,7 @@ td.inactive-bg {
 }
 
 // Overrides.
+
 .overrides-options-list {
 	> li > div {
 		background-color: $ui-bg-selected-color !important;
@@ -1339,6 +1340,7 @@ td.inactive-bg {
 }
 
 // Widget "Host availability".
+
 .host-avail-widget {
 	td:not(:first-child) {
 		border-left: 1px solid $ui-border-color;
@@ -1352,7 +1354,8 @@ td.inactive-bg {
 	}
 }
 
-// Widget "Navigation tree"
+// Widget "Navigation tree".
+
 .navtree {
 	.tree .tree-item > .tree-row {
 		min-width: 410px;
@@ -1360,6 +1363,7 @@ td.inactive-bg {
 }
 
 // Widget "Problems by severity".
+
 .by-severity-widget {
 	> div {
 		min-width: 65px;
@@ -1372,7 +1376,7 @@ td.inactive-bg {
 	}
 }
 
-// InputSecret and ButtonDropdown
+// InputSecret and ButtonDropdown.
 
 .btn-undo.is-focused {
 	box-shadow: 0 1px 0px $blue, 0 -1px 0px $blue;
@@ -1398,7 +1402,7 @@ td.inactive-bg {
 	}
 }
 
-// HOST INTERFACES
+// Host interfaces.
 
 .interfaces {
 	.interface-row {
@@ -1415,3 +1419,17 @@ td.inactive-bg {
 		}
 	}
 }
+
+// Section (components/_section.scss).
+
+section {
+	.section-toggle {
+		background-position: -165px -654px;
+	}
+
+	&.section-collapsed {
+		.section-toggle {
+			background-position: -165px -690px;
+		}
+	}
+}
diff --git a/sass/stylesheets/sass/screen.scss b/sass/stylesheets/sass/screen.scss
index 719c4405646..65f33f1c4d8 100644
--- a/sass/stylesheets/sass/screen.scss
+++ b/sass/stylesheets/sass/screen.scss
@@ -30,6 +30,7 @@ $browser-sprite-path: '../img/browser-sprite.png?20220519';
 
 @import "components/buttons";
 @import "components/color-picker";
+@import "components/columns-wrapper";
 @import "components/dashboard/dashboard";
 @import "components/dashboard/widget-clock";
 @import "components/dashboard/widget-item";
@@ -45,6 +46,7 @@ $browser-sprite-path: '../img/browser-sprite.png?20220519';
 @import "components/message-box";
 @import "components/radio-list-control";
 @import "components/range-control";
+@import "components/section";
 @import "components/service/info";
 @import "components/subfilter";
 @import "components/svg-graph";
@@ -4871,75 +4873,6 @@ svg {
 	}
 }
 
-.columns-wrapper {
-	$column-count: (2, 3);
-	$column-size: (
-		5: 5%,
-		10: 10%,
-		15: 15%,
-		20: 20%,
-		33: 33.33333%,
-		35: 35%,
-		40: 40%,
-		50: 50%,
-		75: 75%,
-		90: 90%,
-		95: 95%
-	);
-
-	display: flex;
-	flex-wrap: wrap;
-	align-items: start;
-
-	&.columns-nowrap {
-		flex-wrap: nowrap;
-	}
-
-	// Dynamically generated classes for the columns count:
-	//  .columns-2
-	//  .columns-3
-	@each $count in $column-count {
-		&.columns-#{$count} > {
-			div,
-			li {
-				display: block;
-				flex: 0 0 (100% / $count);
-				max-width: (100% / $count);
-			}
-		}
-	}
-
-	// Dynamically generated classes for the column width:
-	//  .column-5
-	//  .column-10
-	//  .column-15
-	//  .column-20
-	//  .column-33
-	//  .column-35
-	//  .column-40
-	//  .column-50
-	//  .column-75
-	//  .column-90
-	//  .column-95
-	@each $class, $width in $column-size {
-		.column-#{$class} {
-			flex: 0 0 $width;
-			max-width: $width;
-		}
-	}
-
-	.column-center {
-		display: flex;
-		justify-content: center;
-		text-align: center;
-	}
-
-	.column-middle {
-		display: flex;
-		align-items: center;
-	}
-}
-
 .preprocessing-list {
 	$name-width: 295px;
 	$on-fail-width: 100px;