..F....... [ZBX-20049] updated maintenance icon for compact view and for HC themes; fixed code style

8 files changed, 74 insertions, 58 deletions

diff --git a/sass/stylesheets/sass/hc-dark.scss b/sass/stylesheets/sass/hc-dark.scss
index f498ff4b536..3267bd4efdc 100644
--- a/sass/stylesheets/sass/hc-dark.scss
+++ b/sass/stylesheets/sass/hc-dark.scss
@@ -450,10 +450,10 @@ $arrow-fill-up-down: #FFFFFF;
 }
 
 $var-icons: (
-	maintenance: url($sprite-path) no-repeat -357px -802px,
-	depend-up: url($sprite-path) no-repeat -361px -729px,
-	depend-down: url($sprite-path) no-repeat -361px -765px,
-	ackn: url($sprite-path) no-repeat -357px -693px
+	maintenance: -359px -803px,
+	depend-up: -361px -729px,
+	depend-down: -361px -765px,
+	ackn: -357px -693px
 );
 
 // Dynamically generated classes:
@@ -463,10 +463,8 @@ $var-icons: (
 //  .icon-ackn
 @each $var-icons, $bgimage in $var-icons {
 	.icon-#{$var-icons} {
-		margin: 0 18px 0 0;
 		&::before {
-			background: $bgimage;
-			@extend %var-icons;
+			background-position: $bgimage;
 		}
 	}
 }
@@ -935,7 +933,7 @@ a.link-action {
 			}
 
 			.icon-maintenance::before {
-				background-position: -360px -804px;
+				background-position: -361px -805px;
 			}
 
 			.icon-wzrd-action {
diff --git a/sass/stylesheets/sass/hc-light.scss b/sass/stylesheets/sass/hc-light.scss
index d7351f0d14a..5adf90625bc 100644
--- a/sass/stylesheets/sass/hc-light.scss
+++ b/sass/stylesheets/sass/hc-light.scss
@@ -374,10 +374,10 @@ $arrow-fill-up-down: #000000;
 }
 
 $var-icons: (
-	maintenance: url($sprite-path) no-repeat -203px -802px,
-	depend-up: url($sprite-path) no-repeat -208px -729px,
-	depend-down: url($sprite-path) no-repeat -208px -765px,
-	ackn: url($sprite-path) no-repeat -203px -693px
+	maintenance: -205px -803px,
+	depend-up: -208px -729px,
+	depend-down: -208px -765px,
+	ackn: -203px -693px
 );
 
 // Dynamically generated classes:
@@ -387,10 +387,8 @@ $var-icons: (
 //  .icon-ackn
 @each $var-icons, $bgimage in $var-icons {
 	.icon-#{$var-icons} {
-		margin: 0 18px 0 0;
 		&::before {
-			background: $bgimage;
-			@extend %var-icons;
+			background-position: $bgimage;
 		}
 	}
 }
@@ -820,7 +818,7 @@ a.link-action {
 			box-shadow: inset 0 -1px 0 0 $table-border-color;
 
 			.icon-maintenance::before {
-				background-position: -206px -804px;
+				background-position: -208px -805px;
 			}
 
 			.icon-wzrd-action {
diff --git a/sass/stylesheets/sass/screen.scss b/sass/stylesheets/sass/screen.scss
index fa5c6810bce..dd3f02c7699 100644
--- a/sass/stylesheets/sass/screen.scss
+++ b/sass/stylesheets/sass/screen.scss
@@ -496,7 +496,7 @@ form {
 				&::before {
 					height: 12px;
 					width: 12px;
-					background-position: -48px -804px;
+					background-position: -49px -805px;
 				}
 			}
 
@@ -5362,6 +5362,19 @@ svg {
 	}
 }
 
+.icon-invisible {
+	&:link,
+	&:hover,
+	&:focus {
+		border-bottom: none;
+	}
+
+	&:focus {
+		box-shadow: 0 0 0 2px $btn-border-focus-color;
+		border-radius: 2px;
+	}
+}
+
 button {
 	&.icon-action-command,
 	&.icon-action-close,
diff --git a/ui/assets/styles/blue-theme.css b/ui/assets/styles/blue-theme.css
index 75ccf448525..2c74f5bed7a 100644
--- a/ui/assets/styles/blue-theme.css
+++ b/ui/assets/styles/blue-theme.css
@@ -2902,7 +2902,7 @@ form.is-loading {
       .list-table.compact-view td .icon-maintenance::before {
         height: 12px;
         width: 12px;
-        background-position: -48px -804px; }
+        background-position: -49px -805px; }
     .list-table.compact-view td .icon-wzrd-action {
       background: url("../img/icon-sprite.svg?20211222") no-repeat -6px -624px;
       height: 12px;
@@ -6175,6 +6175,12 @@ svg {
     background-image: url("../img/icon-sprite.svg?20211222");
     background-repeat: no-repeat; }
 
+.icon-invisible:link, .icon-invisible:hover, .icon-invisible:focus {
+  border-bottom: none; }
+.icon-invisible:focus {
+  box-shadow: 0 0 0 2px rgba(30, 135, 227, 0.35);
+  border-radius: 2px; }
+
 button.icon-action-command, button.icon-action-close, button.icon-action-msg, button.icon-action-msgs, button.icon-action-severity-up, button.icon-action-severity-down, button.icon-action-severity-changed, button.icon-action-message, button.icon-action-ack, button.icon-problem-generated, button.icon-problem-recovery, button.icon-actions-number-gray, button.icon-actions-number-yellow, button.icon-actions-number-red {
   background: none;
   border: none;
diff --git a/ui/assets/styles/dark-theme.css b/ui/assets/styles/dark-theme.css
index 50bd7ed5a08..178a3c78d03 100644
--- a/ui/assets/styles/dark-theme.css
+++ b/ui/assets/styles/dark-theme.css
@@ -2913,7 +2913,7 @@ form.is-loading {
       .list-table.compact-view td .icon-maintenance::before {
         height: 12px;
         width: 12px;
-        background-position: -48px -804px; }
+        background-position: -49px -805px; }
     .list-table.compact-view td .icon-wzrd-action {
       background: url("../img/icon-sprite.svg?20211222") no-repeat -6px -624px;
       height: 12px;
@@ -6186,6 +6186,12 @@ svg {
     background-image: url("../img/icon-sprite.svg?20211222");
     background-repeat: no-repeat; }
 
+.icon-invisible:link, .icon-invisible:hover, .icon-invisible:focus {
+  border-bottom: none; }
+.icon-invisible:focus {
+  box-shadow: 0 0 0 2px rgba(30, 135, 227, 0.35);
+  border-radius: 2px; }
+
 button.icon-action-command, button.icon-action-close, button.icon-action-msg, button.icon-action-msgs, button.icon-action-severity-up, button.icon-action-severity-down, button.icon-action-severity-changed, button.icon-action-message, button.icon-action-ack, button.icon-problem-generated, button.icon-problem-recovery, button.icon-actions-number-gray, button.icon-actions-number-yellow, button.icon-actions-number-red {
   background: none;
   border: none;
diff --git a/ui/assets/styles/hc-dark.css b/ui/assets/styles/hc-dark.css
index 87a31384ede..c7442559a8d 100644
--- a/ui/assets/styles/hc-dark.css
+++ b/ui/assets/styles/hc-dark.css
@@ -2868,7 +2868,7 @@ form.is-loading {
       .list-table.compact-view td .icon-maintenance::before {
         height: 12px;
         width: 12px;
-        background-position: -48px -804px; }
+        background-position: -49px -805px; }
     .list-table.compact-view td .icon-wzrd-action {
       background: url("../img/icon-sprite.svg?20211222") no-repeat -6px -624px;
       height: 12px;
@@ -6132,6 +6132,12 @@ svg {
     background-image: url("../img/icon-sprite.svg?20211222");
     background-repeat: no-repeat; }
 
+.icon-invisible:link, .icon-invisible:hover, .icon-invisible:focus {
+  border-bottom: none; }
+.icon-invisible:focus {
+  box-shadow: 0 0 0 2px #ffffff;
+  border-radius: 2px; }
+
 button.icon-action-command, button.icon-action-close, button.icon-action-msg, button.icon-action-msgs, button.icon-action-severity-up, button.icon-action-severity-down, button.icon-action-severity-changed, button.icon-action-message, button.icon-action-ack, button.icon-problem-generated, button.icon-problem-recovery, button.icon-actions-number-gray, button.icon-actions-number-yellow, button.icon-actions-number-red {
   background: none;
   border: none;
@@ -6958,25 +6964,17 @@ z-select.z-select-host-interface li[disabled] .description:not(:empty),
 .dashboard.dashboard-is-edit-mode .dashboard-grid-widget-placeholder > div {
   background-color: #1f1f1f !important; }
 
-.icon-maintenance {
-  margin: 0 18px 0 0; }
-  .icon-maintenance::before {
-    background: url("../img/icon-sprite.svg?20211222") no-repeat -357px -802px; }
+.icon-maintenance::before {
+  background-position: -359px -803px; }
 
-.icon-depend-up {
-  margin: 0 18px 0 0; }
-  .icon-depend-up::before {
-    background: url("../img/icon-sprite.svg?20211222") no-repeat -361px -729px; }
+.icon-depend-up::before {
+  background-position: -361px -729px; }
 
-.icon-depend-down {
-  margin: 0 18px 0 0; }
-  .icon-depend-down::before {
-    background: url("../img/icon-sprite.svg?20211222") no-repeat -361px -765px; }
+.icon-depend-down::before {
+  background-position: -361px -765px; }
 
-.icon-ackn {
-  margin: 0 18px 0 0; }
-  .icon-ackn::before {
-    background: url("../img/icon-sprite.svg?20211222") no-repeat -357px -693px; }
+.icon-ackn::before {
+  background-position: -357px -693px; }
 
 .icon-cal {
   background: transparent url("../img/icon-sprite.svg?20211222") no-repeat -354px -834px; }
@@ -7265,7 +7263,7 @@ z-select button.focusable:focus,
     top: 1px;
     transform: scale(0.8); }
   .list-table.compact-view td .icon-maintenance::before {
-    background-position: -360px -804px; }
+    background-position: -361px -805px; }
   .list-table.compact-view td .icon-wzrd-action {
     background: transparent url("../img/icon-sprite.svg?20211222") no-repeat -318px -624px; }
 
diff --git a/ui/assets/styles/hc-light.css b/ui/assets/styles/hc-light.css
index c977b533e8e..b434263c892 100644
--- a/ui/assets/styles/hc-light.css
+++ b/ui/assets/styles/hc-light.css
@@ -2868,7 +2868,7 @@ form.is-loading {
       .list-table.compact-view td .icon-maintenance::before {
         height: 12px;
         width: 12px;
-        background-position: -48px -804px; }
+        background-position: -49px -805px; }
     .list-table.compact-view td .icon-wzrd-action {
       background: url("../img/icon-sprite.svg?20211222") no-repeat -6px -624px;
       height: 12px;
@@ -6132,6 +6132,12 @@ svg {
     background-image: url("../img/icon-sprite.svg?20211222");
     background-repeat: no-repeat; }
 
+.icon-invisible:link, .icon-invisible:hover, .icon-invisible:focus {
+  border-bottom: none; }
+.icon-invisible:focus {
+  box-shadow: 0 0 0 2px #000000;
+  border-radius: 2px; }
+
 button.icon-action-command, button.icon-action-close, button.icon-action-msg, button.icon-action-msgs, button.icon-action-severity-up, button.icon-action-severity-down, button.icon-action-severity-changed, button.icon-action-message, button.icon-action-ack, button.icon-problem-generated, button.icon-problem-recovery, button.icon-actions-number-gray, button.icon-actions-number-yellow, button.icon-actions-number-red {
   background: none;
   border: none;
@@ -6933,25 +6939,17 @@ z-select.z-select-host-interface li[disabled] .description:not(:empty),
 .dashboard.dashboard-is-edit-mode .dashboard-grid-iterator.ui-resizable-resizing .dashboard-grid-iterator-mask, .dashboard.dashboard-is-edit-mode .dashboard-grid-iterator.ui-draggable-dragging .dashboard-grid-iterator-mask {
   border: 0; }
 
-.icon-maintenance {
-  margin: 0 18px 0 0; }
-  .icon-maintenance::before {
-    background: url("../img/icon-sprite.svg?20211222") no-repeat -203px -802px; }
+.icon-maintenance::before {
+  background-position: -205px -803px; }
 
-.icon-depend-up {
-  margin: 0 18px 0 0; }
-  .icon-depend-up::before {
-    background: url("../img/icon-sprite.svg?20211222") no-repeat -208px -729px; }
+.icon-depend-up::before {
+  background-position: -208px -729px; }
 
-.icon-depend-down {
-  margin: 0 18px 0 0; }
-  .icon-depend-down::before {
-    background: url("../img/icon-sprite.svg?20211222") no-repeat -208px -765px; }
+.icon-depend-down::before {
+  background-position: -208px -765px; }
 
-.icon-ackn {
-  margin: 0 18px 0 0; }
-  .icon-ackn::before {
-    background: url("../img/icon-sprite.svg?20211222") no-repeat -203px -693px; }
+.icon-ackn::before {
+  background-position: -203px -693px; }
 
 .icon-cal {
   background: transparent url("../img/icon-sprite.svg?20211222") no-repeat -201px -834px; }
@@ -7199,7 +7197,7 @@ z-select button.focusable:focus,
     top: 1px;
     transform: scale(0.8); }
   .list-table.compact-view td .icon-maintenance::before {
-    background-position: -206px -804px; }
+    background-position: -208px -805px; }
   .list-table.compact-view td .icon-wzrd-action {
     background: transparent url("../img/icon-sprite.svg?20211222") no-repeat -165px -624px; }
 
diff --git a/ui/include/html.inc.php b/ui/include/html.inc.php
index 578a02afd33..bc019b80d3d 100644
--- a/ui/include/html.inc.php
+++ b/ui/include/html.inc.php
@@ -960,7 +960,7 @@ function makeMaintenanceIcon($type, $name, $description) {
  * @param string $icon_data[]['suppress_until']    Time until the problem is suppressed.
  * @param string $icon_data[]['maintenance_name']  Name of the maintenance.
  *
- * @return CSpan
+ * @return CLink
  */
 function makeSuppressedProblemIcon(array $icon_data) {
 	$suppress_until = max(zbx_objectValues($icon_data, 'suppress_until'));
@@ -968,9 +968,8 @@ function makeSuppressedProblemIcon(array $icon_data) {
 	CArrayHelper::sort($icon_data, ['maintenance_name']);
 	$maintenance_names = implode(', ', zbx_objectValues($icon_data, 'maintenance_name'));
 
-	return (new CSpan())
+	return (new CLink())
 		->addClass(ZBX_STYLE_ICON_INVISIBLE)
-		->addClass(ZBX_STYLE_CURSOR_POINTER)
 		->setHint(
 			_s('Suppressed till: %1$s', ($suppress_until < strtotime('tomorrow'))
 				? zbx_date2str(TIME_FORMAT, $suppress_until)