diff options
author | Aleksejs Cikuns <aleksejs.cikuns@zabbix.com> | 2022-03-03 16:03:30 +0300 |
---|---|---|
committer | Aleksejs Cikuns <aleksejs.cikuns@zabbix.com> | 2022-03-03 16:03:30 +0300 |
commit | b63fd9cc4db56ba98d182ec6af20e9807112d116 (patch) | |
tree | e44af577856c63db3a8be695973b69de0de595c9 | |
parent | 272921f3e8d5f68d1d0847b7ddbfb0fcf2a34300 (diff) |
..F....... [ZBX-20049] implemented keyboard control for info icons
-rwxr-xr-x | ChangeLog.d/bugfix/ZBX-20049 | 1 | ||||
-rw-r--r-- | sass/stylesheets/sass/components/service/_info.scss | 16 | ||||
-rw-r--r-- | sass/stylesheets/sass/hc-dark.scss | 20 | ||||
-rw-r--r-- | sass/stylesheets/sass/hc-light.scss | 24 | ||||
-rw-r--r-- | sass/stylesheets/sass/screen.scss | 137 | ||||
-rw-r--r-- | ui/assets/styles/blue-theme.css | 133 | ||||
-rw-r--r-- | ui/assets/styles/dark-theme.css | 133 | ||||
-rw-r--r-- | ui/assets/styles/hc-dark.css | 163 | ||||
-rw-r--r-- | ui/assets/styles/hc-light.css | 165 | ||||
-rw-r--r-- | ui/include/html.inc.php | 48 | ||||
-rw-r--r-- | ui/include/triggers.inc.php | 2 | ||||
-rw-r--r-- | ui/tests/selenium/common/testFormApiTokens.php | 4 | ||||
-rw-r--r-- | ui/tests/selenium/testFormAdministrationGeneralGUI.php | 2 | ||||
-rw-r--r-- | ui/tests/selenium/testFormTrigger.php | 4 | ||||
-rw-r--r-- | ui/tests/selenium/testFormTriggerPrototype.php | 4 | ||||
-rw-r--r-- | ui/tests/selenium/testLanguage.php | 4 | ||||
-rw-r--r-- | ui/tests/selenium/testPageLatestData.php | 2 | ||||
-rw-r--r-- | ui/tests/selenium/testPageProblems.php | 2 | ||||
-rw-r--r-- | ui/tests/selenium/testPageTriggerDescription.php | 2 | ||||
-rw-r--r-- | ui/tests/selenium/testPasswordComplexity.php | 6 |
20 files changed, 605 insertions, 267 deletions
diff --git a/ChangeLog.d/bugfix/ZBX-20049 b/ChangeLog.d/bugfix/ZBX-20049 new file mode 100755 index 00000000000..b9d1263e0b8 --- /dev/null +++ b/ChangeLog.d/bugfix/ZBX-20049 @@ -0,0 +1 @@ +..F....... [ZBX-20049] implemented keyboard control for info icons (acikuns, ashubin) diff --git a/sass/stylesheets/sass/components/service/_info.scss b/sass/stylesheets/sass/components/service/_info.scss index 461030216f1..2215c70a092 100644 --- a/sass/stylesheets/sass/components/service/_info.scss +++ b/sass/stylesheets/sass/components/service/_info.scss @@ -30,22 +30,6 @@ &:not(:last-child) { margin-right: 10px; } - - .icon-description { - margin: 0 0 -5px 5px; - vertical-align: baseline; - border-radius: 2px; - - &:link, - &:hover, - &:focus { - border-bottom: none; - } - - &:focus { - box-shadow: 0 0 0 2px $btn-border-focus-color; - } - } } } diff --git a/sass/stylesheets/sass/hc-dark.scss b/sass/stylesheets/sass/hc-dark.scss index f498ff4b536..d34784bfc0f 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: -359px -731px, + depend-down: -359px -766px, + 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; } } } @@ -934,8 +932,12 @@ a.link-action { } } - .icon-maintenance::before { - background-position: -360px -804px; + .icon-depend-up::before { + background-position: -361px -731px, + } + + .icon-depend-down::before { + background-position: -361px -767px } .icon-wzrd-action { diff --git a/sass/stylesheets/sass/hc-light.scss b/sass/stylesheets/sass/hc-light.scss index d7351f0d14a..a429ede5843 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: -206px -731px, + depend-down: -206px -766px, + 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; } } } @@ -819,8 +817,16 @@ a.link-action { box-shadow: inset 0 -1px 0 0 $table-border-color; - .icon-maintenance::before { - background-position: -206px -804px; + .icon-depend-up::before { + background-position: -208px -731px; + } + + .icon-depend-down::before { + background-position: -208px -767px; + } + + .icon-wzrd-action { + background: transparent url($sprite-path) no-repeat -318px -624px; } .icon-wzrd-action { diff --git a/sass/stylesheets/sass/screen.scss b/sass/stylesheets/sass/screen.scss index adee26791e3..2c4ca616981 100644 --- a/sass/stylesheets/sass/screen.scss +++ b/sass/stylesheets/sass/screen.scss @@ -324,6 +324,18 @@ form { } } + td { + .icon-maintenance { + margin: 0 0 -3px 4px; + } + + .icon-depend-up, + .icon-depend-down, + .icon-ackn { + margin: 0 4px -3px 0; + } + } + &.compact-view { tr { &[class*='flh-'] { @@ -444,6 +456,7 @@ form { &::after { margin: 0; line-height: 14px; + top: 0; } &:last-of-type { @@ -451,11 +464,6 @@ form { } } - [class*='icon-depend-'] { - width: 12px; - margin-right: 0; - } - .rel-container { span { margin: 0; @@ -483,19 +491,30 @@ form { } .icon-maintenance { - position: relative; - display: inline-block; height: 12px; width: 12px; - margin: 3px 1px 2px 2px !important; + margin: 3px 1px 2px 4px; &::before { height: 12px; width: 12px; - background-position: -48px -804px; + background-position: -49px -805px; } } + .icon-depend-up, + .icon-depend-down { + width: 12px; + } + + .icon-depend-up::before { + background-position: -49px -731px; + } + + .icon-depend-down::before { + background-position: -49px -767px; + } + .icon-wzrd-action { background: url($sprite-path) no-repeat -6px -624px; height: 12px; @@ -2532,34 +2551,43 @@ button[disabled] { } $var-icons: ( - depend-up: url($sprite-path) no-repeat -49px -729px, - depend-down: url($sprite-path) no-repeat -49px -765px, - ackn: url($sprite-path) no-repeat -45px -693px + maintenance: url($sprite-path) no-repeat -47px -803px, + depend-up: url($sprite-path) no-repeat -47px -731px, + depend-down: url($sprite-path) no-repeat -47px -767px, + ackn: url($sprite-path) no-repeat -47px -694px ); // Dynamically generated classes: +// .icon-maintenance // .icon-depend-up // .icon-depend-down // .icon-ackn @each $var-icons, $bgimage in $var-icons { .icon-#{$var-icons} { - margin: 0 18px 0 0; + position: relative; + display: inline-block; + width: 16px; + height: 16px; + border-radius: 2px; &::before { - background: $bgimage; @extend %var-icons; + background: $bgimage; + width: 14px; + height: 14px; + left: 1px; + top: 1px; } - } -} -.icon-maintenance { - display: inline-block; - width: 18px; - height: 13px; + &:link, + &:hover, + &:focus { + border-bottom: none; + } - &::before { - background: url($sprite-path) no-repeat -46px -802px; - @extend %var-icons; + &:focus { + box-shadow: 0 0 0 2px $btn-border-focus-color; + } } } @@ -2664,6 +2692,16 @@ $form-icon-btn: ( cursor: pointer; margin: -12px 0 -4px; + &:link, + &:hover, + &:focus { + border-bottom: 1px solid; + } + + &:focus { + box-shadow: 0 0 0 2px $btn-border-focus-color; + } + &::before { content: ''; display: inline-block; @@ -2674,6 +2712,22 @@ $form-icon-btn: ( height: 14px; background: url($sprite-path) no-repeat -47px -659px; } + + &.status-red { + &:link, + &:hover, + &:focus { + border-color: darken(desaturate($alt-red, 10%), 9%); + } + } + + &.status-yellow { + &:link, + &:hover, + &:focus { + border-color: darken(desaturate($alt-yellow, 9%), 20%); + } + } } // Installation. @@ -5308,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, @@ -5437,7 +5504,19 @@ button { } .icon-description { - margin: 0 0 0 5px; + margin: 0 0 -5px 5px; + vertical-align: baseline; + border-radius: 2px; + + &:link, + &:hover, + &:focus { + border-bottom: none; + } + + &:focus { + box-shadow: 0 0 0 2px $btn-border-focus-color; + } &::after { content: '?'; @@ -5492,6 +5571,16 @@ button { font-weight: bold; color: $btn-font-color; } + + &:link, + &:hover, + &:focus { + border-bottom: none; + } + + &:focus { + box-shadow: 0 0 0 2px $btn-border-focus-color; + } } #expressions_list .ui-sortable-helper { diff --git a/ui/assets/styles/blue-theme.css b/ui/assets/styles/blue-theme.css index f9c4ed4714f..99c0297e918 100644 --- a/ui/assets/styles/blue-theme.css +++ b/ui/assets/styles/blue-theme.css @@ -2263,14 +2263,6 @@ div.dashboard-grid-widget-tophosts z-bar-gauge { line-height: 18px; } .service-info .service-info-value .service-info-value-sla:not(:last-child) { margin-right: 10px; } - .service-info .service-info-value .service-info-value-sla .icon-description { - margin: 0 0 -5px 5px; - vertical-align: baseline; - border-radius: 2px; } - .service-info .service-info-value .service-info-value-sla .icon-description:link, .service-info .service-info-value .service-info-value-sla .icon-description:hover, .service-info .service-info-value .service-info-value-sla .icon-description:focus { - border-bottom: none; } - .service-info .service-info-value .service-info-value-sla .icon-description:focus { - box-shadow: 0 0 0 2px rgba(30, 135, 227, 0.35); } .service-info .service-name { padding-bottom: 5px; font-size: 1.5em; } @@ -2829,6 +2821,12 @@ form.is-loading { .list-table .action-container .separator { flex-shrink: 0; margin-right: 4px; } + .list-table td .icon-maintenance { + margin: 0 0 -3px 4px; } + .list-table td .icon-depend-up, + .list-table td .icon-depend-down, + .list-table td .icon-ackn { + margin: 0 4px -3px 0; } .list-table.compact-view tr[class*='flh-']:not(.row-selected):not(:hover) td { color: #1f2c33; } .list-table.compact-view tr[class*='flh-']:not(.row-selected):not(:hover) td sup, @@ -2878,12 +2876,10 @@ form.is-loading { vertical-align: middle; } .list-table.compact-view td [class*='icon-']::after { margin: 0; - line-height: 14px; } + line-height: 14px; + top: 0; } .list-table.compact-view td [class*='icon-']:last-of-type { margin-right: 0; } - .list-table.compact-view td [class*='icon-depend-'] { - width: 12px; - margin-right: 0; } .list-table.compact-view td .rel-container span { margin: 0; } .list-table.compact-view td .tag { @@ -2902,15 +2898,20 @@ form.is-loading { .list-table.compact-view td .tag { max-width: 133px; } } .list-table.compact-view td .icon-maintenance { - position: relative; - display: inline-block; height: 12px; width: 12px; - margin: 3px 1px 2px 2px !important; } + margin: 3px 1px 2px 4px; } .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-depend-up, + .list-table.compact-view td .icon-depend-down { + width: 12px; } + .list-table.compact-view td .icon-depend-up::before { + background-position: -49px -731px; } + .list-table.compact-view td .icon-depend-down::before { + background-position: -49px -767px; } .list-table.compact-view td .icon-wzrd-action { background: url("../img/icon-sprite.svg?20211222") no-repeat -6px -624px; height: 12px; @@ -4196,27 +4197,73 @@ button[disabled], button[disabled]:hover, button[disabled]:active { display: inline-block; margin: 0 14px 0 0; } +.icon-maintenance { + position: relative; + display: inline-block; + width: 16px; + height: 16px; + border-radius: 2px; } + .icon-maintenance::before { + background: url("../img/icon-sprite.svg?20211222") no-repeat -47px -803px; + width: 14px; + height: 14px; + left: 1px; + top: 1px; } + .icon-maintenance:link, .icon-maintenance:hover, .icon-maintenance:focus { + border-bottom: none; } + .icon-maintenance:focus { + box-shadow: 0 0 0 2px rgba(30, 135, 227, 0.35); } + .icon-depend-up { - margin: 0 18px 0 0; } + position: relative; + display: inline-block; + width: 16px; + height: 16px; + border-radius: 2px; } .icon-depend-up::before { - background: url("../img/icon-sprite.svg?20211222") no-repeat -49px -729px; } + background: url("../img/icon-sprite.svg?20211222") no-repeat -47px -731px; + width: 14px; + height: 14px; + left: 1px; + top: 1px; } + .icon-depend-up:link, .icon-depend-up:hover, .icon-depend-up:focus { + border-bottom: none; } + .icon-depend-up:focus { + box-shadow: 0 0 0 2px rgba(30, 135, 227, 0.35); } .icon-depend-down { - margin: 0 18px 0 0; } + position: relative; + display: inline-block; + width: 16px; + height: 16px; + border-radius: 2px; } .icon-depend-down::before { - background: url("../img/icon-sprite.svg?20211222") no-repeat -49px -765px; } + background: url("../img/icon-sprite.svg?20211222") no-repeat -47px -767px; + width: 14px; + height: 14px; + left: 1px; + top: 1px; } + .icon-depend-down:link, .icon-depend-down:hover, .icon-depend-down:focus { + border-bottom: none; } + .icon-depend-down:focus { + box-shadow: 0 0 0 2px rgba(30, 135, 227, 0.35); } .icon-ackn { - margin: 0 18px 0 0; } - .icon-ackn::before { - background: url("../img/icon-sprite.svg?20211222") no-repeat -45px -693px; } - -.icon-maintenance { + position: relative; display: inline-block; - width: 18px; - height: 13px; } - .icon-maintenance::before { - background: url("../img/icon-sprite.svg?20211222") no-repeat -46px -802px; } + width: 16px; + height: 16px; + border-radius: 2px; } + .icon-ackn::before { + background: url("../img/icon-sprite.svg?20211222") no-repeat -47px -694px; + width: 14px; + height: 14px; + left: 1px; + top: 1px; } + .icon-ackn:link, .icon-ackn:hover, .icon-ackn:focus { + border-bottom: none; } + .icon-ackn:focus { + box-shadow: 0 0 0 2px rgba(30, 135, 227, 0.35); } .icon-tree-top-bottom, .icon-tree-top-bottom-right, .icon-tree-top-right, .icon-tree-empty { margin: 0 12px 0 0; } @@ -4257,7 +4304,7 @@ button[disabled], button[disabled]:hover, button[disabled]:active { opacity: 1; background-color: transparent; } -.icon-depend-up::before, .icon-depend-down::before, .icon-ackn::before, .icon-maintenance::before { +.icon-maintenance::before, .icon-depend-up::before, .icon-depend-down::before, .icon-ackn::before { display: inline-block; width: 18px; height: 18px; @@ -4275,6 +4322,10 @@ button[disabled], button[disabled]:hover, button[disabled]:active { height: 11px; cursor: pointer; margin: -12px 0 -4px; } + .icon-info:link, .icon-info:hover, .icon-info:focus { + border-bottom: 1px solid; } + .icon-info:focus { + box-shadow: 0 0 0 2px rgba(30, 135, 227, 0.35); } .icon-info::before { content: ''; display: inline-block; @@ -4284,6 +4335,10 @@ button[disabled], button[disabled]:hover, button[disabled]:active { width: 14px; height: 14px; background: url("../img/icon-sprite.svg?20211222") no-repeat -47px -659px; } + .icon-info.status-red:link, .icon-info.status-red:hover, .icon-info.status-red:focus { + border-color: #d23d3d; } + .icon-info.status-yellow:link, .icon-info.status-yellow:hover, .icon-info.status-yellow:focus { + border-color: #e79e0b; } .setup-container { background-color: #ffffff; @@ -6162,6 +6217,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; @@ -6241,7 +6302,13 @@ button.icon-action-command, button.icon-action-close, button.icon-action-msg, bu background-position: -524px -245px; } .icon-description { - margin: 0 0 0 5px; } + margin: 0 0 -5px 5px; + vertical-align: baseline; + border-radius: 2px; } + .icon-description:link, .icon-description:hover, .icon-description:focus { + border-bottom: none; } + .icon-description:focus { + box-shadow: 0 0 0 2px rgba(30, 135, 227, 0.35); } .icon-description::after { content: '?'; color: #ffffff; } @@ -6281,6 +6348,10 @@ button.icon-action-command, button.icon-action-close, button.icon-action-msg, bu font-size: 10px; font-weight: bold; color: #ffffff; } + .icon-help-hint:link, .icon-help-hint:hover, .icon-help-hint:focus { + border-bottom: none; } + .icon-help-hint:focus { + box-shadow: 0 0 0 2px rgba(30, 135, 227, 0.35); } #expressions_list .ui-sortable-helper { display: table; } diff --git a/ui/assets/styles/dark-theme.css b/ui/assets/styles/dark-theme.css index e2c516ce3bd..627d110137a 100644 --- a/ui/assets/styles/dark-theme.css +++ b/ui/assets/styles/dark-theme.css @@ -2276,14 +2276,6 @@ div.dashboard-grid-widget-tophosts z-bar-gauge { line-height: 18px; } .service-info .service-info-value .service-info-value-sla:not(:last-child) { margin-right: 10px; } - .service-info .service-info-value .service-info-value-sla .icon-description { - margin: 0 0 -5px 5px; - vertical-align: baseline; - border-radius: 2px; } - .service-info .service-info-value .service-info-value-sla .icon-description:link, .service-info .service-info-value .service-info-value-sla .icon-description:hover, .service-info .service-info-value .service-info-value-sla .icon-description:focus { - border-bottom: none; } - .service-info .service-info-value .service-info-value-sla .icon-description:focus { - box-shadow: 0 0 0 2px rgba(30, 135, 227, 0.35); } .service-info .service-name { padding-bottom: 5px; font-size: 1.5em; } @@ -2842,6 +2834,12 @@ form.is-loading { .list-table .action-container .separator { flex-shrink: 0; margin-right: 4px; } + .list-table td .icon-maintenance { + margin: 0 0 -3px 4px; } + .list-table td .icon-depend-up, + .list-table td .icon-depend-down, + .list-table td .icon-ackn { + margin: 0 4px -3px 0; } .list-table.compact-view tr[class*='flh-']:not(.row-selected):not(:hover) td { color: #000000; } .list-table.compact-view tr[class*='flh-']:not(.row-selected):not(:hover) td sup, @@ -2889,12 +2887,10 @@ form.is-loading { vertical-align: middle; } .list-table.compact-view td [class*='icon-']::after { margin: 0; - line-height: 14px; } + line-height: 14px; + top: 0; } .list-table.compact-view td [class*='icon-']:last-of-type { margin-right: 0; } - .list-table.compact-view td [class*='icon-depend-'] { - width: 12px; - margin-right: 0; } .list-table.compact-view td .rel-container span { margin: 0; } .list-table.compact-view td .tag { @@ -2913,15 +2909,20 @@ form.is-loading { .list-table.compact-view td .tag { max-width: 133px; } } .list-table.compact-view td .icon-maintenance { - position: relative; - display: inline-block; height: 12px; width: 12px; - margin: 3px 1px 2px 2px !important; } + margin: 3px 1px 2px 4px; } .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-depend-up, + .list-table.compact-view td .icon-depend-down { + width: 12px; } + .list-table.compact-view td .icon-depend-up::before { + background-position: -49px -731px; } + .list-table.compact-view td .icon-depend-down::before { + background-position: -49px -767px; } .list-table.compact-view td .icon-wzrd-action { background: url("../img/icon-sprite.svg?20211222") no-repeat -6px -624px; height: 12px; @@ -4207,27 +4208,73 @@ button[disabled], button[disabled]:hover, button[disabled]:active { display: inline-block; margin: 0 14px 0 0; } +.icon-maintenance { + position: relative; + display: inline-block; + width: 16px; + height: 16px; + border-radius: 2px; } + .icon-maintenance::before { + background: url("../img/icon-sprite.svg?20211222") no-repeat -47px -803px; + width: 14px; + height: 14px; + left: 1px; + top: 1px; } + .icon-maintenance:link, .icon-maintenance:hover, .icon-maintenance:focus { + border-bottom: none; } + .icon-maintenance:focus { + box-shadow: 0 0 0 2px rgba(30, 135, 227, 0.35); } + .icon-depend-up { - margin: 0 18px 0 0; } + position: relative; + display: inline-block; + width: 16px; + height: 16px; + border-radius: 2px; } .icon-depend-up::before { - background: url("../img/icon-sprite.svg?20211222") no-repeat -49px -729px; } + background: url("../img/icon-sprite.svg?20211222") no-repeat -47px -731px; + width: 14px; + height: 14px; + left: 1px; + top: 1px; } + .icon-depend-up:link, .icon-depend-up:hover, .icon-depend-up:focus { + border-bottom: none; } + .icon-depend-up:focus { + box-shadow: 0 0 0 2px rgba(30, 135, 227, 0.35); } .icon-depend-down { - margin: 0 18px 0 0; } + position: relative; + display: inline-block; + width: 16px; + height: 16px; + border-radius: 2px; } .icon-depend-down::before { - background: url("../img/icon-sprite.svg?20211222") no-repeat -49px -765px; } + background: url("../img/icon-sprite.svg?20211222") no-repeat -47px -767px; + width: 14px; + height: 14px; + left: 1px; + top: 1px; } + .icon-depend-down:link, .icon-depend-down:hover, .icon-depend-down:focus { + border-bottom: none; } + .icon-depend-down:focus { + box-shadow: 0 0 0 2px rgba(30, 135, 227, 0.35); } .icon-ackn { - margin: 0 18px 0 0; } - .icon-ackn::before { - background: url("../img/icon-sprite.svg?20211222") no-repeat -45px -693px; } - -.icon-maintenance { + position: relative; display: inline-block; - width: 18px; - height: 13px; } - .icon-maintenance::before { - background: url("../img/icon-sprite.svg?20211222") no-repeat -46px -802px; } + width: 16px; + height: 16px; + border-radius: 2px; } + .icon-ackn::before { + background: url("../img/icon-sprite.svg?20211222") no-repeat -47px -694px; + width: 14px; + height: 14px; + left: 1px; + top: 1px; } + .icon-ackn:link, .icon-ackn:hover, .icon-ackn:focus { + border-bottom: none; } + .icon-ackn:focus { + box-shadow: 0 0 0 2px rgba(30, 135, 227, 0.35); } .icon-tree-top-bottom, .icon-tree-top-bottom-right, .icon-tree-top-right, .icon-tree-empty { margin: 0 12px 0 0; } @@ -4268,7 +4315,7 @@ button[disabled], button[disabled]:hover, button[disabled]:active { opacity: 1; background-color: transparent; } -.icon-depend-up::before, .icon-depend-down::before, .icon-ackn::before, .icon-maintenance::before { +.icon-maintenance::before, .icon-depend-up::before, .icon-depend-down::before, .icon-ackn::before { display: inline-block; width: 18px; height: 18px; @@ -4286,6 +4333,10 @@ button[disabled], button[disabled]:hover, button[disabled]:active { height: 11px; cursor: pointer; margin: -12px 0 -4px; } + .icon-info:link, .icon-info:hover, .icon-info:focus { + border-bottom: 1px solid; } + .icon-info:focus { + box-shadow: 0 0 0 2px rgba(30, 135, 227, 0.35); } .icon-info::before { content: ''; display: inline-block; @@ -4295,6 +4346,10 @@ button[disabled], button[disabled]:hover, button[disabled]:active { width: 14px; height: 14px; background: url("../img/icon-sprite.svg?20211222") no-repeat -47px -659px; } + .icon-info.status-red:link, .icon-info.status-red:hover, .icon-info.status-red:focus { + border-color: #d23d3d; } + .icon-info.status-yellow:link, .icon-info.status-yellow:hover, .icon-info.status-yellow:focus { + border-color: #e79e0b; } .setup-container { background-color: #2b2b2b; @@ -6173,6 +6228,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; @@ -6252,7 +6313,13 @@ button.icon-action-command, button.icon-action-close, button.icon-action-msg, bu background-position: -524px -245px; } .icon-description { - margin: 0 0 0 5px; } + margin: 0 0 -5px 5px; + vertical-align: baseline; + border-radius: 2px; } + .icon-description:link, .icon-description:hover, .icon-description:focus { + border-bottom: none; } + .icon-description:focus { + box-shadow: 0 0 0 2px rgba(30, 135, 227, 0.35); } .icon-description::after { content: '?'; color: #2b2b2b; } @@ -6292,6 +6359,10 @@ button.icon-action-command, button.icon-action-close, button.icon-action-msg, bu font-size: 10px; font-weight: bold; color: #f2f2f2; } + .icon-help-hint:link, .icon-help-hint:hover, .icon-help-hint:focus { + border-bottom: none; } + .icon-help-hint:focus { + box-shadow: 0 0 0 2px rgba(30, 135, 227, 0.35); } #expressions_list .ui-sortable-helper { display: table; } diff --git a/ui/assets/styles/hc-dark.css b/ui/assets/styles/hc-dark.css index 4ae662ecba3..eaa72cb0577 100644 --- a/ui/assets/styles/hc-dark.css +++ b/ui/assets/styles/hc-dark.css @@ -2252,14 +2252,6 @@ div.dashboard-grid-widget-tophosts z-bar-gauge { line-height: 18px; } .service-info .service-info-value .service-info-value-sla:not(:last-child) { margin-right: 10px; } - .service-info .service-info-value .service-info-value-sla .icon-description { - margin: 0 0 -5px 5px; - vertical-align: baseline; - border-radius: 2px; } - .service-info .service-info-value .service-info-value-sla .icon-description:link, .service-info .service-info-value .service-info-value-sla .icon-description:hover, .service-info .service-info-value .service-info-value-sla .icon-description:focus { - border-bottom: none; } - .service-info .service-info-value .service-info-value-sla .icon-description:focus { - box-shadow: 0 0 0 2px #ffffff; } .service-info .service-name { padding-bottom: 5px; font-size: 1.5em; } @@ -2818,6 +2810,12 @@ form.is-loading { .list-table .action-container .separator { flex-shrink: 0; margin-right: 4px; } + .list-table td .icon-maintenance { + margin: 0 0 -3px 4px; } + .list-table td .icon-depend-up, + .list-table td .icon-depend-down, + .list-table td .icon-ackn { + margin: 0 4px -3px 0; } .list-table.compact-view .link-action { color: #ffffff; } .list-table.compact-view .link-action.red { @@ -2844,12 +2842,10 @@ form.is-loading { vertical-align: middle; } .list-table.compact-view td [class*='icon-']::after { margin: 0; - line-height: 14px; } + line-height: 14px; + top: 0; } .list-table.compact-view td [class*='icon-']:last-of-type { margin-right: 0; } - .list-table.compact-view td [class*='icon-depend-'] { - width: 12px; - margin-right: 0; } .list-table.compact-view td .rel-container span { margin: 0; } .list-table.compact-view td .tag { @@ -2868,15 +2864,20 @@ form.is-loading { .list-table.compact-view td .tag { max-width: 133px; } } .list-table.compact-view td .icon-maintenance { - position: relative; - display: inline-block; height: 12px; width: 12px; - margin: 3px 1px 2px 2px !important; } + margin: 3px 1px 2px 4px; } .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-depend-up, + .list-table.compact-view td .icon-depend-down { + width: 12px; } + .list-table.compact-view td .icon-depend-up::before { + background-position: -49px -731px; } + .list-table.compact-view td .icon-depend-down::before { + background-position: -49px -767px; } .list-table.compact-view td .icon-wzrd-action { background: url("../img/icon-sprite.svg?20211222") no-repeat -6px -624px; height: 12px; @@ -4162,27 +4163,73 @@ button[disabled], button[disabled]:hover, button[disabled]:active { display: inline-block; margin: 0 14px 0 0; } +.icon-maintenance { + position: relative; + display: inline-block; + width: 16px; + height: 16px; + border-radius: 2px; } + .icon-maintenance::before { + background: url("../img/icon-sprite.svg?20211222") no-repeat -47px -803px; + width: 14px; + height: 14px; + left: 1px; + top: 1px; } + .icon-maintenance:link, .icon-maintenance:hover, .icon-maintenance:focus { + border-bottom: none; } + .icon-maintenance:focus { + box-shadow: 0 0 0 2px #ffffff; } + .icon-depend-up { - margin: 0 18px 0 0; } + position: relative; + display: inline-block; + width: 16px; + height: 16px; + border-radius: 2px; } .icon-depend-up::before { - background: url("../img/icon-sprite.svg?20211222") no-repeat -49px -729px; } + background: url("../img/icon-sprite.svg?20211222") no-repeat -47px -731px; + width: 14px; + height: 14px; + left: 1px; + top: 1px; } + .icon-depend-up:link, .icon-depend-up:hover, .icon-depend-up:focus { + border-bottom: none; } + .icon-depend-up:focus { + box-shadow: 0 0 0 2px #ffffff; } .icon-depend-down { - margin: 0 18px 0 0; } + position: relative; + display: inline-block; + width: 16px; + height: 16px; + border-radius: 2px; } .icon-depend-down::before { - background: url("../img/icon-sprite.svg?20211222") no-repeat -49px -765px; } + background: url("../img/icon-sprite.svg?20211222") no-repeat -47px -767px; + width: 14px; + height: 14px; + left: 1px; + top: 1px; } + .icon-depend-down:link, .icon-depend-down:hover, .icon-depend-down:focus { + border-bottom: none; } + .icon-depend-down:focus { + box-shadow: 0 0 0 2px #ffffff; } .icon-ackn { - margin: 0 18px 0 0; } - .icon-ackn::before { - background: url("../img/icon-sprite.svg?20211222") no-repeat -45px -693px; } - -.icon-maintenance { + position: relative; display: inline-block; - width: 18px; - height: 13px; } - .icon-maintenance::before { - background: url("../img/icon-sprite.svg?20211222") no-repeat -46px -802px; } + width: 16px; + height: 16px; + border-radius: 2px; } + .icon-ackn::before { + background: url("../img/icon-sprite.svg?20211222") no-repeat -47px -694px; + width: 14px; + height: 14px; + left: 1px; + top: 1px; } + .icon-ackn:link, .icon-ackn:hover, .icon-ackn:focus { + border-bottom: none; } + .icon-ackn:focus { + box-shadow: 0 0 0 2px #ffffff; } .icon-tree-top-bottom, .icon-tree-top-bottom-right, .icon-tree-top-right, .icon-tree-empty { margin: 0 12px 0 0; } @@ -4223,7 +4270,7 @@ button[disabled], button[disabled]:hover, button[disabled]:active { opacity: 1; background-color: transparent; } -.icon-depend-up::before, .icon-depend-down::before, .icon-ackn::before, .icon-maintenance::before { +.icon-maintenance::before, .icon-depend-up::before, .icon-depend-down::before, .icon-ackn::before { display: inline-block; width: 18px; height: 18px; @@ -4241,6 +4288,10 @@ button[disabled], button[disabled]:hover, button[disabled]:active { height: 11px; cursor: pointer; margin: -12px 0 -4px; } + .icon-info:link, .icon-info:hover, .icon-info:focus { + border-bottom: 1px solid; } + .icon-info:focus { + box-shadow: 0 0 0 2px #ffffff; } .icon-info::before { content: ''; display: inline-block; @@ -4250,6 +4301,10 @@ button[disabled], button[disabled]:hover, button[disabled]:active { width: 14px; height: 14px; background: url("../img/icon-sprite.svg?20211222") no-repeat -47px -659px; } + .icon-info.status-red:link, .icon-info.status-red:hover, .icon-info.status-red:focus { + border-color: #d23d3d; } + .icon-info.status-yellow:link, .icon-info.status-yellow:hover, .icon-info.status-yellow:focus { + border-color: #e79e0b; } .setup-container { background-color: #000000; @@ -6119,6 +6174,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; @@ -6198,7 +6259,13 @@ button.icon-action-command, button.icon-action-close, button.icon-action-msg, bu background-position: -524px -245px; } .icon-description { - margin: 0 0 0 5px; } + margin: 0 0 -5px 5px; + vertical-align: baseline; + border-radius: 2px; } + .icon-description:link, .icon-description:hover, .icon-description:focus { + border-bottom: none; } + .icon-description:focus { + box-shadow: 0 0 0 2px #ffffff; } .icon-description::after { content: '?'; color: #000000; } @@ -6238,6 +6305,10 @@ button.icon-action-command, button.icon-action-close, button.icon-action-msg, bu font-size: 10px; font-weight: bold; color: #333333; } + .icon-help-hint:link, .icon-help-hint:hover, .icon-help-hint:focus { + border-bottom: none; } + .icon-help-hint:focus { + box-shadow: 0 0 0 2px #ffffff; } #expressions_list .ui-sortable-helper { display: table; } @@ -6935,25 +7006,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: -359px -731px; } -.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: -359px -766px; } -.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; } @@ -7241,8 +7304,10 @@ z-select button.focusable:focus, .list-table.compact-view td.na-bg::after, .list-table.compact-view td.normal-bg::after, .list-table.compact-view td.info-bg::after, .list-table.compact-view td.warning-bg::after, .list-table.compact-view td.average-bg::after, .list-table.compact-view td.high-bg::after, .list-table.compact-view td.disaster-bg::after { top: 1px; transform: scale(0.8); } - .list-table.compact-view td .icon-maintenance::before { - background-position: -360px -804px; } + .list-table.compact-view td .icon-depend-up::before { + background-position: -361px -731px; } + .list-table.compact-view td .icon-depend-down::before { + background-position: -361px -767px; } .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 67509a8bd5d..ae2577367ae 100644 --- a/ui/assets/styles/hc-light.css +++ b/ui/assets/styles/hc-light.css @@ -2252,14 +2252,6 @@ div.dashboard-grid-widget-tophosts z-bar-gauge { line-height: 18px; } .service-info .service-info-value .service-info-value-sla:not(:last-child) { margin-right: 10px; } - .service-info .service-info-value .service-info-value-sla .icon-description { - margin: 0 0 -5px 5px; - vertical-align: baseline; - border-radius: 2px; } - .service-info .service-info-value .service-info-value-sla .icon-description:link, .service-info .service-info-value .service-info-value-sla .icon-description:hover, .service-info .service-info-value .service-info-value-sla .icon-description:focus { - border-bottom: none; } - .service-info .service-info-value .service-info-value-sla .icon-description:focus { - box-shadow: 0 0 0 2px #000000; } .service-info .service-name { padding-bottom: 5px; font-size: 1.5em; } @@ -2818,6 +2810,12 @@ form.is-loading { .list-table .action-container .separator { flex-shrink: 0; margin-right: 4px; } + .list-table td .icon-maintenance { + margin: 0 0 -3px 4px; } + .list-table td .icon-depend-up, + .list-table td .icon-depend-down, + .list-table td .icon-ackn { + margin: 0 4px -3px 0; } .list-table.compact-view .link-action { color: #000000; } .list-table.compact-view .link-action.red { @@ -2844,12 +2842,10 @@ form.is-loading { vertical-align: middle; } .list-table.compact-view td [class*='icon-']::after { margin: 0; - line-height: 14px; } + line-height: 14px; + top: 0; } .list-table.compact-view td [class*='icon-']:last-of-type { margin-right: 0; } - .list-table.compact-view td [class*='icon-depend-'] { - width: 12px; - margin-right: 0; } .list-table.compact-view td .rel-container span { margin: 0; } .list-table.compact-view td .tag { @@ -2868,15 +2864,20 @@ form.is-loading { .list-table.compact-view td .tag { max-width: 133px; } } .list-table.compact-view td .icon-maintenance { - position: relative; - display: inline-block; height: 12px; width: 12px; - margin: 3px 1px 2px 2px !important; } + margin: 3px 1px 2px 4px; } .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-depend-up, + .list-table.compact-view td .icon-depend-down { + width: 12px; } + .list-table.compact-view td .icon-depend-up::before { + background-position: -49px -731px; } + .list-table.compact-view td .icon-depend-down::before { + background-position: -49px -767px; } .list-table.compact-view td .icon-wzrd-action { background: url("../img/icon-sprite.svg?20211222") no-repeat -6px -624px; height: 12px; @@ -4162,27 +4163,73 @@ button[disabled], button[disabled]:hover, button[disabled]:active { display: inline-block; margin: 0 14px 0 0; } +.icon-maintenance { + position: relative; + display: inline-block; + width: 16px; + height: 16px; + border-radius: 2px; } + .icon-maintenance::before { + background: url("../img/icon-sprite.svg?20211222") no-repeat -47px -803px; + width: 14px; + height: 14px; + left: 1px; + top: 1px; } + .icon-maintenance:link, .icon-maintenance:hover, .icon-maintenance:focus { + border-bottom: none; } + .icon-maintenance:focus { + box-shadow: 0 0 0 2px #000000; } + .icon-depend-up { - margin: 0 18px 0 0; } + position: relative; + display: inline-block; + width: 16px; + height: 16px; + border-radius: 2px; } .icon-depend-up::before { - background: url("../img/icon-sprite.svg?20211222") no-repeat -49px -729px; } + background: url("../img/icon-sprite.svg?20211222") no-repeat -47px -731px; + width: 14px; + height: 14px; + left: 1px; + top: 1px; } + .icon-depend-up:link, .icon-depend-up:hover, .icon-depend-up:focus { + border-bottom: none; } + .icon-depend-up:focus { + box-shadow: 0 0 0 2px #000000; } .icon-depend-down { - margin: 0 18px 0 0; } + position: relative; + display: inline-block; + width: 16px; + height: 16px; + border-radius: 2px; } .icon-depend-down::before { - background: url("../img/icon-sprite.svg?20211222") no-repeat -49px -765px; } + background: url("../img/icon-sprite.svg?20211222") no-repeat -47px -767px; + width: 14px; + height: 14px; + left: 1px; + top: 1px; } + .icon-depend-down:link, .icon-depend-down:hover, .icon-depend-down:focus { + border-bottom: none; } + .icon-depend-down:focus { + box-shadow: 0 0 0 2px #000000; } .icon-ackn { - margin: 0 18px 0 0; } - .icon-ackn::before { - background: url("../img/icon-sprite.svg?20211222") no-repeat -45px -693px; } - -.icon-maintenance { + position: relative; display: inline-block; - width: 18px; - height: 13px; } - .icon-maintenance::before { - background: url("../img/icon-sprite.svg?20211222") no-repeat -46px -802px; } + width: 16px; + height: 16px; + border-radius: 2px; } + .icon-ackn::before { + background: url("../img/icon-sprite.svg?20211222") no-repeat -47px -694px; + width: 14px; + height: 14px; + left: 1px; + top: 1px; } + .icon-ackn:link, .icon-ackn:hover, .icon-ackn:focus { + border-bottom: none; } + .icon-ackn:focus { + box-shadow: 0 0 0 2px #000000; } .icon-tree-top-bottom, .icon-tree-top-bottom-right, .icon-tree-top-right, .icon-tree-empty { margin: 0 12px 0 0; } @@ -4223,7 +4270,7 @@ button[disabled], button[disabled]:hover, button[disabled]:active { opacity: 1; background-color: transparent; } -.icon-depend-up::before, .icon-depend-down::before, .icon-ackn::before, .icon-maintenance::before { +.icon-maintenance::before, .icon-depend-up::before, .icon-depend-down::before, .icon-ackn::before { display: inline-block; width: 18px; height: 18px; @@ -4241,6 +4288,10 @@ button[disabled], button[disabled]:hover, button[disabled]:active { height: 11px; cursor: pointer; margin: -12px 0 -4px; } + .icon-info:link, .icon-info:hover, .icon-info:focus { + border-bottom: 1px solid; } + .icon-info:focus { + box-shadow: 0 0 0 2px #000000; } .icon-info::before { content: ''; display: inline-block; @@ -4250,6 +4301,10 @@ button[disabled], button[disabled]:hover, button[disabled]:active { width: 14px; height: 14px; background: url("../img/icon-sprite.svg?20211222") no-repeat -47px -659px; } + .icon-info.status-red:link, .icon-info.status-red:hover, .icon-info.status-red:focus { + border-color: #d23d3d; } + .icon-info.status-yellow:link, .icon-info.status-yellow:hover, .icon-info.status-yellow:focus { + border-color: #e79e0b; } .setup-container { background-color: #ffffff; @@ -6119,6 +6174,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; @@ -6198,7 +6259,13 @@ button.icon-action-command, button.icon-action-close, button.icon-action-msg, bu background-position: -524px -245px; } .icon-description { - margin: 0 0 0 5px; } + margin: 0 0 -5px 5px; + vertical-align: baseline; + border-radius: 2px; } + .icon-description:link, .icon-description:hover, .icon-description:focus { + border-bottom: none; } + .icon-description:focus { + box-shadow: 0 0 0 2px #000000; } .icon-description::after { content: '?'; color: #ffffff; } @@ -6238,6 +6305,10 @@ button.icon-action-command, button.icon-action-close, button.icon-action-msg, bu font-size: 10px; font-weight: bold; color: #ffffff; } + .icon-help-hint:link, .icon-help-hint:hover, .icon-help-hint:focus { + border-bottom: none; } + .icon-help-hint:focus { + box-shadow: 0 0 0 2px #000000; } #expressions_list .ui-sortable-helper { display: table; } @@ -6910,25 +6981,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: -206px -731px; } -.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: -206px -766px; } -.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; } @@ -7175,8 +7238,12 @@ z-select button.focusable:focus, .list-table.compact-view td.na-bg::after, .list-table.compact-view td.normal-bg::after, .list-table.compact-view td.info-bg::after, .list-table.compact-view td.warning-bg::after, .list-table.compact-view td.average-bg::after, .list-table.compact-view td.high-bg::after, .list-table.compact-view td.disaster-bg::after { top: 1px; transform: scale(0.8); } - .list-table.compact-view td .icon-maintenance::before { - background-position: -206px -804px; } + .list-table.compact-view td .icon-depend-up::before { + background-position: -208px -731px; } + .list-table.compact-view td .icon-depend-down::before { + background-position: -208px -767px; } + .list-table.compact-view td .icon-wzrd-action { + background: transparent url("../img/icon-sprite.svg?20211222") no-repeat -318px -624px; } .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 b6d990296e0..2ec15414837 100644 --- a/ui/include/html.inc.php +++ b/ui/include/html.inc.php @@ -920,10 +920,10 @@ function makeInformationList($info_icons) { * * @param string $message * - * @return CSpan + * @return CLink */ function makeInformationIcon($message) { - return (new CSpan()) + return (new CLink()) ->addClass(ZBX_STYLE_ICON_INFO) ->addClass(ZBX_STYLE_STATUS_GREEN) ->setHint($message, ZBX_STYLE_HINTBOX_WRAP); @@ -936,7 +936,7 @@ function makeInformationIcon($message) { * @param string $name Name of the maintenance. * @param string $description Description of the maintenance. * - * @return CSpan + * @return CLink */ function makeMaintenanceIcon($type, $name, $description) { $hint = $name.' ['.($type @@ -947,9 +947,8 @@ function makeMaintenanceIcon($type, $name, $description) { $hint .= "\n".$description; } - return (new CSpan()) + return (new CLink()) ->addClass(ZBX_STYLE_ICON_MAINTENANCE) - ->addClass(ZBX_STYLE_CURSOR_POINTER) ->setHint($hint); } @@ -960,7 +959,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 +967,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) @@ -1031,12 +1029,11 @@ function makeActionIcon(array $icon_data): CTag { * * @param string $description * - * @return CSpan + * @return CLink */ function makeDescriptionIcon($description) { - return (new CSpan()) + return (new CLink()) ->addClass(ZBX_STYLE_ICON_DESCRIPTION) - ->addClass(ZBX_STYLE_CURSOR_POINTER) ->setHint(zbx_str2links($description), ZBX_STYLE_HINTBOX_WRAP); } @@ -1045,10 +1042,10 @@ function makeDescriptionIcon($description) { * * @param string $error * - * @return CSpan + * @return CLink */ function makeErrorIcon($error) { - return (new CSpan()) + return (new CLink()) ->addClass(ZBX_STYLE_ICON_INFO) ->addClass(ZBX_STYLE_STATUS_RED) ->setHint($error, ZBX_STYLE_HINTBOX_WRAP." ".ZBX_STYLE_RED); @@ -1059,38 +1056,23 @@ function makeErrorIcon($error) { * * @param string|array|CTag $help_text * - * @return CSpan + * @return CLink */ -function makeHelpIcon($help_text): CSpan { - return (new CSpan()) +function makeHelpIcon($help_text): CLink { + return (new CLink()) ->addClass(ZBX_STYLE_ICON_HELP_HINT) - ->addClass(ZBX_STYLE_CURSOR_POINTER) ->setHint($help_text, ZBX_STYLE_HINTBOX_WRAP); } /** - * Renders an unknown icon like grey [i] with error message - * - * @param string $error - * - * @return CSpan - */ -function makeUnknownIcon($error) { - return (new CSpan()) - ->addClass(ZBX_STYLE_ICON_INFO) - ->addClass(ZBX_STYLE_STATUS_DARK_GREY) - ->setHint($error, ZBX_STYLE_HINTBOX_WRAP." ".ZBX_STYLE_RED); -} - -/** * Renders a warning icon like yellow [i] with error message * * @param string $error * - * @return CSpan + * @return CLink */ function makeWarningIcon($error) { - return (new CSpan()) + return (new CLink()) ->addClass(ZBX_STYLE_ICON_INFO) ->addClass(ZBX_STYLE_STATUS_YELLOW) ->setHint($error, ZBX_STYLE_HINTBOX_WRAP); diff --git a/ui/include/triggers.inc.php b/ui/include/triggers.inc.php index fb192822f12..cbd0727866e 100644 --- a/ui/include/triggers.inc.php +++ b/ui/include/triggers.inc.php @@ -2407,7 +2407,7 @@ function makeTriggerDependencies(array $dependencies, $freeze_on_click = true) { $table->addRow($description); } - $result[] = (new CSpan()) + $result[] = (new CLink()) ->addClass($class) ->addClass(ZBX_STYLE_CURSOR_POINTER) ->setHint($table, '', $freeze_on_click); diff --git a/ui/tests/selenium/common/testFormApiTokens.php b/ui/tests/selenium/common/testFormApiTokens.php index 506ca0b0580..f7ad216078b 100644 --- a/ui/tests/selenium/common/testFormApiTokens.php +++ b/ui/tests/selenium/common/testFormApiTokens.php @@ -151,7 +151,7 @@ class testFormApiTokens extends CWebTest { $this->checkAuthToken($auth_token, null); // Check the hintbox text in the Auth token field. - $auth_token->query('xpath:./span[@data-hintbox]')->one()->click(); + $auth_token->query('xpath:./a[@data-hintbox]')->one()->click(); $hintbox_text = $this->query('xpath://div[@class="overlay-dialogue"]')->one()->waitUntilVisible()->getText(); $this->assertEquals('Make sure to copy the auth token as you won\'t be able to view it after the page is closed.', $hintbox_text); @@ -220,7 +220,7 @@ class testFormApiTokens extends CWebTest { // Check warning in case if token is already expired. if (CTestArrayHelper::get($data, 'already_expired')) { - $form->getField('Expires at:')->query('xpath:./span[@data-hintbox]')->one()->click(); + $form->getField('Expires at:')->query('xpath:./a[@data-hintbox]')->one()->click(); $hintbox_text = $this->query('xpath://div[@class="overlay-dialogue"]')->one()->waitUntilVisible()->getText(); $this->assertEquals('The token has expired. Please update the expiry date to use the token.', $hintbox_text); diff --git a/ui/tests/selenium/testFormAdministrationGeneralGUI.php b/ui/tests/selenium/testFormAdministrationGeneralGUI.php index 9d4ae587ca2..046d1ea6c16 100644 --- a/ui/tests/selenium/testFormAdministrationGeneralGUI.php +++ b/ui/tests/selenium/testFormAdministrationGeneralGUI.php @@ -90,7 +90,7 @@ class testFormAdministrationGeneralGUI extends testFormAdministrationGeneral { $this->assertEquals($limit, $this->query('id', $id)->one()->getAttribute('maxlength')); } - $this->query('xpath://span[@class="icon-info status-red"]')->one()->click(); + $this->query('xpath://a[@class="icon-info status-red"]')->one()->click(); $this->assertEquals( 'You are not able to choose some of the languages,'. ' because locales for them are not installed on the web server.', diff --git a/ui/tests/selenium/testFormTrigger.php b/ui/tests/selenium/testFormTrigger.php index ee013be2e5c..365fe081418 100644 --- a/ui/tests/selenium/testFormTrigger.php +++ b/ui/tests/selenium/testFormTrigger.php @@ -910,14 +910,14 @@ class testFormTrigger extends CLegacyWebTest { } if (isset($constructor['elementError'])) { $count = CTestArrayHelper::get($constructor, 'element_count', 1); - $this->assertEquals($count, $this->query('xpath://span[@class="icon-info status-red"]')->all()->count()); + $this->assertEquals($count, $this->query('xpath://a[@class="icon-info status-red"]')->all()->count()); $text = $this->query('xpath://tr[1]//div[@class="hint-box"]')->one()->getText(); foreach ($constructor['errors'] as $error) { $this->assertStringContainsString($error, $text); } } else { - $this->zbxTestAssertElementNotPresentXpath('//span[@class="icon-info status-red"]'); + $this->zbxTestAssertElementNotPresentXpath('//a[@class="icon-info status-red"]'); } } } diff --git a/ui/tests/selenium/testFormTriggerPrototype.php b/ui/tests/selenium/testFormTriggerPrototype.php index 5eb7aef2cb8..4d28a7d2bd0 100644 --- a/ui/tests/selenium/testFormTriggerPrototype.php +++ b/ui/tests/selenium/testFormTriggerPrototype.php @@ -866,14 +866,14 @@ class testFormTriggerPrototype extends CLegacyWebTest { if (isset($constructor['elementError'])) { $count = CTestArrayHelper::get($constructor, 'element_count', 1); - $this->assertEquals($count, $this->query('xpath://span[@class="icon-info status-red"]')->all()->count()); + $this->assertEquals($count, $this->query('xpath://a[@class="icon-info status-red"]')->all()->count()); $text = $this->query('xpath://tr[1]//div[@class="hint-box"]')->one()->getText(); foreach ($constructor['errors'] as $error) { $this->assertStringContainsString($error, $text); } } else { - $this->zbxTestAssertElementNotPresentXpath('//span[@class="icon-info status-red"]'); + $this->zbxTestAssertElementNotPresentXpath('//a[@class="icon-info status-red"]'); } } } diff --git a/ui/tests/selenium/testLanguage.php b/ui/tests/selenium/testLanguage.php index 69b9f3a9596..77bbae3562c 100644 --- a/ui/tests/selenium/testLanguage.php +++ b/ui/tests/selenium/testLanguage.php @@ -96,7 +96,7 @@ class testLanguage extends CWebTest { $this->checkLanguage($data['message'], $data['page_title'], $data['body_lang'], $data['defaultdb_lang']); // Red info icon check. - $this->query('xpath://span[@class="icon-info status-red"]')->one()->click(); + $this->query('xpath://a[@class="icon-info status-red"]')->one()->click(); $this->assertEquals($data['info'], $this->query('class:red')->one()->getText()); // After logout, warning message and login menu has system language. @@ -168,7 +168,7 @@ class testLanguage extends CWebTest { $form = $this->query('name:user_form')->one()->asForm(); // Red info icon check. - $this->query('xpath://span[@class="icon-info status-red"]')->one()->click(); + $this->query('xpath://a[@class="icon-info status-red"]')->one()->click(); $this->assertEquals($data['info'], $this->query('class:red')->one()->getText()); // Change user language to different from System. diff --git a/ui/tests/selenium/testPageLatestData.php b/ui/tests/selenium/testPageLatestData.php index 66ed600618d..236cd680b43 100644 --- a/ui/tests/selenium/testPageLatestData.php +++ b/ui/tests/selenium/testPageLatestData.php @@ -247,7 +247,7 @@ class testPageLatestData extends CWebTest { $form->fill(['Hosts' => 'Available host in maintenance']); $form->submit(); - $this->query('xpath://span['.CXPathHelper::fromClass('icon-maintenance').']')->waitUntilClickable()->one()->click(); + $this->query('xpath://a['.CXPathHelper::fromClass('icon-maintenance').']')->waitUntilClickable()->one()->click(); $hint = $this->query('xpath://div[@data-hintboxid]')->asOverlayDialog()->waitUntilPresent()->all()->last()->getText(); $hint_text = "Maintenance for Host availability widget [Maintenance with data collection]\n". "Maintenance for checking Show hosts in maintenance option in Host availability widget"; diff --git a/ui/tests/selenium/testPageProblems.php b/ui/tests/selenium/testPageProblems.php index 546603f8261..d39c35e6268 100644 --- a/ui/tests/selenium/testPageProblems.php +++ b/ui/tests/selenium/testPageProblems.php @@ -673,7 +673,7 @@ class testPageProblems extends CLegacyWebTest { $this->zbxTestAssertElementText('//div[@class="table-stats"]', 'Displaying 1 of 1 found'); // Click on suppression icon and check text in hintbox. - $this->zbxTestClickXpathWait('//tbody/tr/td[8]/div/span[contains(@class, "icon-invisible")]'); + $this->zbxTestClickXpathWait('//tbody/tr/td[8]/div/a[contains(@class, "icon-invisible")]'); $this->zbxTestAssertElementText('//div[@data-hintboxid]', 'Suppressed till: 12:17 Maintenance: Maintenance for suppression test'); } } diff --git a/ui/tests/selenium/testPageTriggerDescription.php b/ui/tests/selenium/testPageTriggerDescription.php index 2a2e6ac2be4..8aacb0b85b7 100644 --- a/ui/tests/selenium/testPageTriggerDescription.php +++ b/ui/tests/selenium/testPageTriggerDescription.php @@ -93,7 +93,7 @@ class testPageTriggerDescription extends CWebTest { $row = $table->findRow('Problem', $data['Trigger name'], true); if (CTestArrayHelper::get($data, 'description', false)) { - $row->query('xpath:.//span[contains(@class, "icon-description")]')->one()->click(); + $row->query('xpath:.//a[contains(@class, "icon-description")]')->one()->click(); $overlay = $this->query('xpath://div[@class="overlay-dialogue"]')->asOverlayDialog()->one()->waitUntilReady(); $this->assertEquals($data['description'], $overlay->getText()); diff --git a/ui/tests/selenium/testPasswordComplexity.php b/ui/tests/selenium/testPasswordComplexity.php index 86f508ddbb9..3447783708b 100644 --- a/ui/tests/selenium/testPasswordComplexity.php +++ b/ui/tests/selenium/testPasswordComplexity.php @@ -121,7 +121,7 @@ class testPasswordComplexity extends CWebTest { foreach ($hintboxes as $hintbox) { // Summon the hint-box. - $form->query('xpath://label[text()='.zbx_dbstr($hintbox['field']).']//span')->one()->click(); + $form->query('xpath://label[text()='.zbx_dbstr($hintbox['field']).']//a')->one()->click(); $hint = $form->query('xpath://div[@class="overlay-dialogue"]')->waitUntilPresent(); // Assert text. @@ -1082,7 +1082,7 @@ class testPasswordComplexity extends CWebTest { if (array_key_exists('hint', $data)) { // Summon hint-box and assert text accordingly to password complexity settings, then close hint-box. - $user_form->query('xpath://label[text()="Password"]//span')->one()->click(); + $user_form->query('xpath://label[text()="Password"]//a')->one()->click(); $hint = $user_form->query('xpath://div[@class="overlay-dialogue"]')->waitUntilPresent(); $this->assertEquals($data['hint'], $hint->one()->getText()); $hint->one()->query('xpath:.//button[@class="overlay-close-btn"]')->one()->click(); @@ -1090,7 +1090,7 @@ class testPasswordComplexity extends CWebTest { } else { // If password can be 1 symbol long and doesn't have any complexity rules hint is not shown at all. - $this->assertFalse($user_form->query('xpath://label[text()="Password"]//span')->exists()); + $this->assertFalse($user_form->query('xpath://label[text()="Password"]//a')->exists()); } $user_form->fill([ |