diff options
author | Alexander Shubin <aleksandrs.subins@zabbix.com> | 2022-07-12 08:44:14 +0300 |
---|---|---|
committer | Alexander Shubin <aleksandrs.subins@zabbix.com> | 2022-07-12 08:44:14 +0300 |
commit | 10cc0b52c121af3dd7ef79146625105fad018acc (patch) | |
tree | 6f370c048cfd4ae7cbe2a313718e19537f533a8a | |
parent | b3b292fb126dd85d451db9d1555b524c767b25d8 (diff) | |
parent | f5d9f3f7f582f547d0e703a35c91ec88e5b02ff6 (diff) |
..F....... [ZBX-20908] fixed interface type labels in host edit form
* commit 'f5d9f3f7f582f547d0e703a35c91ec88e5b02ff6':
..F....... [ZBX-20908] fixed interface type labels in host edit form
-rw-r--r-- | ChangeLog.d/bugfix/ZBX-20908 | 1 | ||||
-rw-r--r-- | sass/stylesheets/sass/hc-dark.scss | 18 | ||||
-rw-r--r-- | sass/stylesheets/sass/hc-light.scss | 18 | ||||
-rw-r--r-- | sass/stylesheets/sass/screen.scss | 111 | ||||
-rw-r--r-- | ui/app/partials/configuration.host.edit.html.php | 8 | ||||
-rw-r--r-- | ui/assets/styles/blue-theme.css | 102 | ||||
-rw-r--r-- | ui/assets/styles/dark-theme.css | 102 | ||||
-rw-r--r-- | ui/assets/styles/hc-dark.css | 115 | ||||
-rw-r--r-- | ui/assets/styles/hc-light.css | 115 | ||||
-rw-r--r-- | ui/include/defines.inc.php | 1 | ||||
-rw-r--r-- | ui/include/views/configuration.host.prototype.edit.php | 3 | ||||
-rw-r--r-- | ui/js/hostinterfacemanager.js | 7 |
12 files changed, 340 insertions, 261 deletions
diff --git a/ChangeLog.d/bugfix/ZBX-20908 b/ChangeLog.d/bugfix/ZBX-20908 new file mode 100644 index 00000000000..107f02b1fe9 --- /dev/null +++ b/ChangeLog.d/bugfix/ZBX-20908 @@ -0,0 +1 @@ +..F....... [ZBX-20908] fixed interface type labels in host edit form (ashubin) diff --git a/sass/stylesheets/sass/hc-dark.scss b/sass/stylesheets/sass/hc-dark.scss index 8fa6dda1fed..1fe9ce57236 100644 --- a/sass/stylesheets/sass/hc-dark.scss +++ b/sass/stylesheets/sass/hc-dark.scss @@ -1562,3 +1562,21 @@ td.inactive-bg { content: ""; } } + +// HOST INTERFACES + +.interfaces { + .interface-row { + &[data-type="2"] { + .interface-btn-toggle { + background-position: -318px -690px; + } + + &.list-accordion-item-opened { + .interface-btn-toggle { + background-position: -318px -655px; + } + } + } + } +} diff --git a/sass/stylesheets/sass/hc-light.scss b/sass/stylesheets/sass/hc-light.scss index fbfeb61a82d..4f582a93d8d 100644 --- a/sass/stylesheets/sass/hc-light.scss +++ b/sass/stylesheets/sass/hc-light.scss @@ -1389,3 +1389,21 @@ td.inactive-bg { content: ""; } } + +// HOST INTERFACES + +.interfaces { + .interface-row { + &[data-type="2"] { + .interface-btn-toggle { + background-position: -165px -690px; + } + + &.list-accordion-item-opened { + .interface-btn-toggle { + background-position: -165px -655px; + } + } + } + } +} diff --git a/sass/stylesheets/sass/screen.scss b/sass/stylesheets/sass/screen.scss index 9b7fac6c11e..f0cb3d715da 100644 --- a/sass/stylesheets/sass/screen.scss +++ b/sass/stylesheets/sass/screen.scss @@ -6184,85 +6184,88 @@ $range-input-width: 31px; // HOST INTERFACES -.interface-container { - width: fit-content; - width: -moz-fit-content; - padding-left: 0; - - &:not(.interface-container-header):not(:empty) { - margin-bottom: 5px; - - & ~ .interface-container:not(:empty) { - border-top: 1px solid $form-border-color; - padding-top: 10px; - } +.table-forms-td-right { + .interfaces { + margin-top: 5px; } +} - &:empty { - display: none; - } +.interfaces { + display: grid; + grid-template-columns: 26px repeat(7, max-content); + margin-bottom: 5px; + line-height: 24px; - .interface-row { - display: grid; - grid-template-columns: 26px 36px 225px 175px 85px 100px 20px 1fr; - grid-template-rows: 24px 1fr; - gap: 5px; + .interface-container { + display: contents; - &:not(:first-of-type) { - margin-top: 5px; + &.interface-container-header { + .interface-cell { + padding: 0 5px 0 0; + color: $font-alt-color; + } + + .interface-cell-action { + grid-column: span 2; + } } - &[data-type] .interface-cell-details { - display: none; - grid-column: 1/-1; + &:not(.interface-container-header):not(:empty) ~ .interface-container:not(:empty) { + .interface-cell:not(.interface-cell-details) { + padding-top: 10px; + margin-top: 5px; + border-top: 1px solid $form-border-color; + } } + } - .interface-cell { - align-self: center; + .interface-row { + display: contents; + &[data-type="2"] { .interface-btn-toggle { - display: none; - @extend .btn-link; + @extend %btn-widget-defaults; + + display: inline-block; + width: 24px; + height: 24px; + background: url($sprite-path) no-repeat -6px -690px; } - &.interface-cell-header { - color: $font-alt-color; - text-align: left; + .list-accordion-item-body { + display: none; + padding-top: 0; } - .table-forms-td-left, - .table-forms-td-right { - padding-bottom: 0; + &.list-accordion-item-opened { + .interface-btn-toggle { + background: url($sprite-path) no-repeat -6px -655px; + } + + .list-accordion-item-body { + display: block; + } } } } -} -// Host interface accordion for SNMP specific styles. -.interface-row.list-accordion-item[data-type="2"] { - &.list-accordion-item-closed { - .interface-btn-toggle { - @extend .btn-widget-expand; - } + .interface-cell { + padding: 5px 5px 5px 0; - .list-accordion-item-body { + &.interface-cell-details { display: none; + grid-column: 1 / -1; } } - &.list-accordion-item-opened { - .interface-btn-toggle { - @extend .btn-widget-collapse; - } - - .list-accordion-item-body { - display: block; - } + .interface-btn-toggle { + display: none; + vertical-align: top; } - .interface-btn-toggle { - display: inline-block; - @extend %btn-widget; + .no-interface { + grid-column: 1 / -1; + color: $font-alt-color; } } diff --git a/ui/app/partials/configuration.host.edit.html.php b/ui/app/partials/configuration.host.edit.html.php index 43622b486c2..735960f80bb 100644 --- a/ui/app/partials/configuration.host.edit.html.php +++ b/ui/app/partials/configuration.host.edit.html.php @@ -251,7 +251,13 @@ $host_tab ->addItem([ new CLabel(_('Interfaces')), new CFormField([ - new CDiv([renderInterfaceHeaders(), $agent_interfaces, $snmp_interfaces, $jmx_interfaces, $ipmi_interfaces]), + (new CDiv([ + renderInterfaceHeaders(), + $agent_interfaces, + $snmp_interfaces, + $jmx_interfaces, + $ipmi_interfaces + ]))->addClass(ZBX_STYLE_HOST_INTERFACES), $host_is_discovered ? null : new CDiv( diff --git a/ui/assets/styles/blue-theme.css b/ui/assets/styles/blue-theme.css index e0be871e1b3..82ad95e0dc5 100644 --- a/ui/assets/styles/blue-theme.css +++ b/ui/assets/styles/blue-theme.css @@ -3829,7 +3829,7 @@ button { background-color: #e8f5ff; border-color: #02659f; } -.btn-link, .btn-link:hover, .btn-link:focus, .btn-link:active, .interface-container .interface-row .interface-cell .interface-btn-toggle { +.btn-link, .btn-link:hover, .btn-link:focus, .btn-link:active { position: relative; background-color: transparent; border: 0; @@ -3839,14 +3839,14 @@ button { font-size: inherit; padding: 0; min-height: inherit; } - .btn-link:focus, .interface-container .interface-row .interface-cell .interface-btn-toggle:focus { + .btn-link:focus { outline: none; margin-bottom: -2px !important; border-bottom: 2px solid rgba(2, 117, 184, 0.5); box-shadow: 0 0 0 0 !important; } - .btn-link[disabled], .interface-container .interface-row .interface-cell [disabled].interface-btn-toggle { + .btn-link[disabled] { background-color: transparent; } - .btn-link[disabled]:hover, .interface-container .interface-row .interface-cell [disabled].interface-btn-toggle:hover { + .btn-link[disabled]:hover { background-color: transparent; } .btn-kiosk { @@ -3891,10 +3891,10 @@ button { .btn-widget-action { background: url("../img/icon-sprite.svg?20211222") no-repeat -6px -618px; } -.btn-widget-collapse, .interface-row.list-accordion-item[data-type="2"].list-accordion-item-opened .interface-btn-toggle { +.btn-widget-collapse { background: url("../img/icon-sprite.svg?20211222") no-repeat -6px -654px; } -.btn-widget-expand, .interface-row.list-accordion-item[data-type="2"].list-accordion-item-closed .interface-btn-toggle { +.btn-widget-expand { background: url("../img/icon-sprite.svg?20211222") no-repeat -6px -689px; } .btn-widget-edit { @@ -4174,7 +4174,7 @@ button { .btn-dashboard-normal { box-shadow: 1px 1px 2px rgba(118, 141, 153, 0.5); } -.btn-dashboard-page-properties, .btn-iterator-page-previous, .btn-iterator-page-next, .btn-widget-action, .btn-widget-collapse, .interface-row.list-accordion-item[data-type="2"].list-accordion-item-opened .interface-btn-toggle, .btn-widget-expand, .interface-row.list-accordion-item[data-type="2"].list-accordion-item-closed .interface-btn-toggle, .btn-widget-edit, .btn-alarm-on, .btn-alarm-off, .btn-sound-on, .btn-sound-off, .btn-info-clock, .interface-row.list-accordion-item[data-type="2"] .interface-btn-toggle { +.btn-dashboard-page-properties, .btn-iterator-page-previous, .btn-iterator-page-next, .btn-widget-action, .btn-widget-collapse, .btn-widget-expand, .btn-widget-edit, .btn-alarm-on, .btn-alarm-off, .btn-sound-on, .btn-sound-off, .btn-info-clock { width: 24px; height: 24px; margin: 2px 2px 0 0; } @@ -4183,13 +4183,13 @@ button { width: 24px; height: 24px; } -.filter-container.tabfilter-container .icon-edit, .btn-dashboard-page-properties, .btn-iterator-page-previous, .btn-iterator-page-next, .btn-widget-action, .btn-widget-collapse, .interface-row.list-accordion-item[data-type="2"].list-accordion-item-opened .interface-btn-toggle, .btn-widget-expand, .interface-row.list-accordion-item[data-type="2"].list-accordion-item-closed .interface-btn-toggle, .btn-widget-edit, .btn-alarm-on, .btn-alarm-off, .btn-sound-on, .btn-sound-off, .btn-info-clock, .interface-row.list-accordion-item[data-type="2"] .interface-btn-toggle, .btn-dashboard-conf { +.filter-container.tabfilter-container .icon-edit, .btn-dashboard-page-properties, .btn-iterator-page-previous, .btn-iterator-page-next, .btn-widget-action, .btn-widget-collapse, .btn-widget-expand, .btn-widget-edit, .btn-alarm-on, .btn-alarm-off, .btn-sound-on, .btn-sound-off, .btn-info-clock, .btn-dashboard-conf, .interfaces .interface-row[data-type="2"] .interface-btn-toggle { border: 0; min-height: 0; padding: 0; opacity: .5; transition: opacity .2s ease-out; } - .filter-container.tabfilter-container [disabled].icon-edit, [disabled].btn-dashboard-page-properties, [disabled].btn-iterator-page-previous, [disabled].btn-iterator-page-next, [disabled].btn-widget-action, [disabled].btn-widget-collapse, [disabled].btn-widget-expand, [disabled].btn-widget-edit, [disabled].btn-alarm-on, [disabled].btn-alarm-off, [disabled].btn-sound-on, [disabled].btn-sound-off, [disabled].btn-info-clock, .interface-row.list-accordion-item[data-type="2"] [disabled].interface-btn-toggle, [disabled].btn-dashboard-conf, .filter-container.tabfilter-container [disabled].icon-edit:hover, [disabled].btn-dashboard-page-properties:hover, [disabled].btn-iterator-page-previous:hover, [disabled].btn-iterator-page-next:hover, [disabled].btn-widget-action:hover, [disabled].btn-widget-collapse:hover, [disabled].btn-widget-expand:hover, [disabled].btn-widget-edit:hover, [disabled].btn-alarm-on:hover, [disabled].btn-alarm-off:hover, [disabled].btn-sound-on:hover, [disabled].btn-sound-off:hover, [disabled].btn-info-clock:hover, .interface-row.list-accordion-item[data-type="2"] [disabled].interface-btn-toggle:hover, [disabled].btn-dashboard-conf:hover, .filter-container.tabfilter-container [disabled].icon-edit:focus, [disabled].btn-dashboard-page-properties:focus, [disabled].btn-iterator-page-previous:focus, [disabled].btn-iterator-page-next:focus, [disabled].btn-widget-action:focus, [disabled].btn-widget-collapse:focus, [disabled].btn-widget-expand:focus, [disabled].btn-widget-edit:focus, [disabled].btn-alarm-on:focus, [disabled].btn-alarm-off:focus, [disabled].btn-sound-on:focus, [disabled].btn-sound-off:focus, [disabled].btn-info-clock:focus, .interface-row.list-accordion-item[data-type="2"] [disabled].interface-btn-toggle:focus, [disabled].btn-dashboard-conf:focus, .filter-container.tabfilter-container [disabled].icon-edit:active, [disabled].btn-dashboard-page-properties:active, [disabled].btn-iterator-page-previous:active, [disabled].btn-iterator-page-next:active, [disabled].btn-widget-action:active, [disabled].btn-widget-collapse:active, [disabled].btn-widget-expand:active, [disabled].btn-widget-edit:active, [disabled].btn-alarm-on:active, [disabled].btn-alarm-off:active, [disabled].btn-sound-on:active, [disabled].btn-sound-off:active, [disabled].btn-info-clock:active, .interface-row.list-accordion-item[data-type="2"] [disabled].interface-btn-toggle:active, [disabled].btn-dashboard-conf:active { + .filter-container.tabfilter-container [disabled].icon-edit, [disabled].btn-dashboard-page-properties, [disabled].btn-iterator-page-previous, [disabled].btn-iterator-page-next, [disabled].btn-widget-action, [disabled].btn-widget-collapse, [disabled].btn-widget-expand, [disabled].btn-widget-edit, [disabled].btn-alarm-on, [disabled].btn-alarm-off, [disabled].btn-sound-on, [disabled].btn-sound-off, [disabled].btn-info-clock, [disabled].btn-dashboard-conf, .interfaces .interface-row[data-type="2"] [disabled].interface-btn-toggle, .filter-container.tabfilter-container [disabled].icon-edit:hover, [disabled].btn-dashboard-page-properties:hover, [disabled].btn-iterator-page-previous:hover, [disabled].btn-iterator-page-next:hover, [disabled].btn-widget-action:hover, [disabled].btn-widget-collapse:hover, [disabled].btn-widget-expand:hover, [disabled].btn-widget-edit:hover, [disabled].btn-alarm-on:hover, [disabled].btn-alarm-off:hover, [disabled].btn-sound-on:hover, [disabled].btn-sound-off:hover, [disabled].btn-info-clock:hover, [disabled].btn-dashboard-conf:hover, .interfaces .interface-row[data-type="2"] [disabled].interface-btn-toggle:hover, .filter-container.tabfilter-container [disabled].icon-edit:focus, [disabled].btn-dashboard-page-properties:focus, [disabled].btn-iterator-page-previous:focus, [disabled].btn-iterator-page-next:focus, [disabled].btn-widget-action:focus, [disabled].btn-widget-collapse:focus, [disabled].btn-widget-expand:focus, [disabled].btn-widget-edit:focus, [disabled].btn-alarm-on:focus, [disabled].btn-alarm-off:focus, [disabled].btn-sound-on:focus, [disabled].btn-sound-off:focus, [disabled].btn-info-clock:focus, [disabled].btn-dashboard-conf:focus, .interfaces .interface-row[data-type="2"] [disabled].interface-btn-toggle:focus, .filter-container.tabfilter-container [disabled].icon-edit:active, [disabled].btn-dashboard-page-properties:active, [disabled].btn-iterator-page-previous:active, [disabled].btn-iterator-page-next:active, [disabled].btn-widget-action:active, [disabled].btn-widget-collapse:active, [disabled].btn-widget-expand:active, [disabled].btn-widget-edit:active, [disabled].btn-alarm-on:active, [disabled].btn-alarm-off:active, [disabled].btn-sound-on:active, [disabled].btn-sound-off:active, [disabled].btn-info-clock:active, [disabled].btn-dashboard-conf:active, .interfaces .interface-row[data-type="2"] [disabled].interface-btn-toggle:active { background-color: transparent; opacity: .25; } @@ -4217,7 +4217,7 @@ button[disabled], button[disabled]:hover, button[disabled]:active { .inaccessible .subfilter-enabled { color: #bfbfbf; } -.filter-container.tabfilter-container .icon-edit:hover, .btn-dashboard-page-properties:hover, .btn-iterator-page-previous:hover, .btn-iterator-page-next:hover, .btn-widget-action:hover, .btn-widget-collapse:hover, .btn-widget-expand:hover, .btn-widget-edit:hover, .btn-alarm-on:hover, .btn-alarm-off:hover, .btn-sound-on:hover, .btn-sound-off:hover, .btn-info-clock:hover, .interface-row.list-accordion-item[data-type="2"] .interface-btn-toggle:hover, .btn-dashboard-conf:hover, .filter-container.tabfilter-container .icon-edit:focus, .btn-dashboard-page-properties:focus, .btn-iterator-page-previous:focus, .btn-iterator-page-next:focus, .btn-widget-action:focus, .btn-widget-collapse:focus, .btn-widget-expand:focus, .btn-widget-edit:focus, .btn-alarm-on:focus, .btn-alarm-off:focus, .btn-sound-on:focus, .btn-sound-off:focus, .btn-info-clock:focus, .interface-row.list-accordion-item[data-type="2"] .interface-btn-toggle:focus, .btn-dashboard-conf:focus, .filter-container.tabfilter-container .icon-edit:active, .btn-dashboard-page-properties:active, .btn-iterator-page-previous:active, .btn-iterator-page-next:active, .btn-widget-action:active, .btn-widget-collapse:active, .btn-widget-expand:active, .btn-widget-edit:active, .btn-alarm-on:active, .btn-alarm-off:active, .btn-sound-on:active, .btn-sound-off:active, .btn-info-clock:active, .interface-row.list-accordion-item[data-type="2"] .interface-btn-toggle:active, .btn-dashboard-conf:active { +.filter-container.tabfilter-container .icon-edit:hover, .btn-dashboard-page-properties:hover, .btn-iterator-page-previous:hover, .btn-iterator-page-next:hover, .btn-widget-action:hover, .btn-widget-collapse:hover, .btn-widget-expand:hover, .btn-widget-edit:hover, .btn-alarm-on:hover, .btn-alarm-off:hover, .btn-sound-on:hover, .btn-sound-off:hover, .btn-info-clock:hover, .btn-dashboard-conf:hover, .interfaces .interface-row[data-type="2"] .interface-btn-toggle:hover, .filter-container.tabfilter-container .icon-edit:focus, .btn-dashboard-page-properties:focus, .btn-iterator-page-previous:focus, .btn-iterator-page-next:focus, .btn-widget-action:focus, .btn-widget-collapse:focus, .btn-widget-expand:focus, .btn-widget-edit:focus, .btn-alarm-on:focus, .btn-alarm-off:focus, .btn-sound-on:focus, .btn-sound-off:focus, .btn-info-clock:focus, .btn-dashboard-conf:focus, .interfaces .interface-row[data-type="2"] .interface-btn-toggle:focus, .filter-container.tabfilter-container .icon-edit:active, .btn-dashboard-page-properties:active, .btn-iterator-page-previous:active, .btn-iterator-page-next:active, .btn-widget-action:active, .btn-widget-collapse:active, .btn-widget-expand:active, .btn-widget-edit:active, .btn-alarm-on:active, .btn-alarm-off:active, .btn-sound-on:active, .btn-sound-off:active, .btn-info-clock:active, .btn-dashboard-conf:active, .interfaces .interface-row[data-type="2"] .interface-btn-toggle:active { background-color: transparent; opacity: 1; } @@ -5939,7 +5939,7 @@ svg { .preprocessing-list select { width: 100%; min-width: 0; } - .preprocessing-list .btn-link:not(:last-of-type), .preprocessing-list .interface-container .interface-row .interface-cell .interface-btn-toggle:not(:last-of-type), .interface-container .interface-row .interface-cell .preprocessing-list .interface-btn-toggle:not(:last-of-type) { + .preprocessing-list .btn-link:not(:last-of-type) { margin-right: 10px; } .preprocessing-list .preprocessing-list-head, .preprocessing-list .preprocessing-list-foot, @@ -6738,44 +6738,50 @@ button.icon-action-command, button.icon-action-close, button.icon-action-msg, bu /* for IE11 only. Fixed cell height if table has 100% height */ .host-avail-widget td { height: 100%; } } -.interface-container { - width: fit-content; - width: -moz-fit-content; - padding-left: 0; } - .interface-container:not(.interface-container-header):not(:empty) { - margin-bottom: 5px; } - .interface-container:not(.interface-container-header):not(:empty) ~ .interface-container:not(:empty) { - border-top: 1px solid #acbbc2; - padding-top: 10px; } - .interface-container:empty { - display: none; } - .interface-container .interface-row { - display: grid; - grid-template-columns: 26px 36px 225px 175px 85px 100px 20px 1fr; - grid-template-rows: 24px 1fr; - gap: 5px; } - .interface-container .interface-row:not(:first-of-type) { - margin-top: 5px; } - .interface-container .interface-row[data-type] .interface-cell-details { - display: none; - grid-column: 1/-1; } - .interface-container .interface-row .interface-cell { - align-self: center; } - .interface-container .interface-row .interface-cell .interface-btn-toggle { - display: none; } - .interface-container .interface-row .interface-cell.interface-cell-header { - color: #768d99; - text-align: left; } - .interface-container .interface-row .interface-cell .table-forms-td-left, - .interface-container .interface-row .interface-cell .table-forms-td-right { - padding-bottom: 0; } +.table-forms-td-right .interfaces { + margin-top: 5px; } -.interface-row.list-accordion-item[data-type="2"].list-accordion-item-closed .list-accordion-item-body { - display: none; } -.interface-row.list-accordion-item[data-type="2"].list-accordion-item-opened .list-accordion-item-body { - display: block; } -.interface-row.list-accordion-item[data-type="2"] .interface-btn-toggle { - display: inline-block; } +.interfaces { + display: grid; + grid-template-columns: 26px repeat(7, max-content); + margin-bottom: 5px; + line-height: 24px; } + .interfaces .interface-container { + display: contents; } + .interfaces .interface-container.interface-container-header .interface-cell { + padding: 0 5px 0 0; + color: #768d99; } + .interfaces .interface-container.interface-container-header .interface-cell-action { + grid-column: span 2; } + .interfaces .interface-container:not(.interface-container-header):not(:empty) ~ .interface-container:not(:empty) .interface-cell:not(.interface-cell-details) { + padding-top: 10px; + margin-top: 5px; + border-top: 1px solid #acbbc2; } + .interfaces .interface-row { + display: contents; } + .interfaces .interface-row[data-type="2"] .interface-btn-toggle { + display: inline-block; + width: 24px; + height: 24px; + background: url("../img/icon-sprite.svg?20211222") no-repeat -6px -690px; } + .interfaces .interface-row[data-type="2"] .list-accordion-item-body { + display: none; + padding-top: 0; } + .interfaces .interface-row[data-type="2"].list-accordion-item-opened .interface-btn-toggle { + background: url("../img/icon-sprite.svg?20211222") no-repeat -6px -655px; } + .interfaces .interface-row[data-type="2"].list-accordion-item-opened .list-accordion-item-body { + display: block; } + .interfaces .interface-cell { + padding: 5px 5px 5px 0; } + .interfaces .interface-cell.interface-cell-details { + display: none; + grid-column: 1 / -1; } + .interfaces .interface-btn-toggle { + display: none; + vertical-align: top; } + .interfaces .no-interface { + grid-column: 1 / -1; + color: #768d99; } .debug-modal.overlay-dialogue.modal .overlay-dialogue-body { overflow-x: auto; } diff --git a/ui/assets/styles/dark-theme.css b/ui/assets/styles/dark-theme.css index a5cfd58a8fa..bd234e3177e 100644 --- a/ui/assets/styles/dark-theme.css +++ b/ui/assets/styles/dark-theme.css @@ -3840,7 +3840,7 @@ button { background-color: #414141; border-color: #768d99; } -.btn-link, .btn-link:hover, .btn-link:focus, .btn-link:active, .interface-container .interface-row .interface-cell .interface-btn-toggle { +.btn-link, .btn-link:hover, .btn-link:focus, .btn-link:active { position: relative; background-color: transparent; border: 0; @@ -3850,14 +3850,14 @@ button { font-size: inherit; padding: 0; min-height: inherit; } - .btn-link:focus, .interface-container .interface-row .interface-cell .interface-btn-toggle:focus { + .btn-link:focus { outline: none; margin-bottom: -2px !important; border-bottom: 2px solid rgba(71, 150, 196, 0.5); box-shadow: 0 0 0 0 !important; } - .btn-link[disabled], .interface-container .interface-row .interface-cell [disabled].interface-btn-toggle { + .btn-link[disabled] { background-color: transparent; } - .btn-link[disabled]:hover, .interface-container .interface-row .interface-cell [disabled].interface-btn-toggle:hover { + .btn-link[disabled]:hover { background-color: transparent; } .btn-kiosk { @@ -3902,10 +3902,10 @@ button { .btn-widget-action { background: url("../img/icon-sprite.svg?20211222") no-repeat -6px -618px; } -.btn-widget-collapse, .interface-row.list-accordion-item[data-type="2"].list-accordion-item-opened .interface-btn-toggle { +.btn-widget-collapse { background: url("../img/icon-sprite.svg?20211222") no-repeat -6px -654px; } -.btn-widget-expand, .interface-row.list-accordion-item[data-type="2"].list-accordion-item-closed .interface-btn-toggle { +.btn-widget-expand { background: url("../img/icon-sprite.svg?20211222") no-repeat -6px -689px; } .btn-widget-edit { @@ -4185,7 +4185,7 @@ button { .btn-dashboard-normal { box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); } -.btn-dashboard-page-properties, .btn-iterator-page-previous, .btn-iterator-page-next, .btn-widget-action, .btn-widget-collapse, .interface-row.list-accordion-item[data-type="2"].list-accordion-item-opened .interface-btn-toggle, .btn-widget-expand, .interface-row.list-accordion-item[data-type="2"].list-accordion-item-closed .interface-btn-toggle, .btn-widget-edit, .btn-alarm-on, .btn-alarm-off, .btn-sound-on, .btn-sound-off, .btn-info-clock, .interface-row.list-accordion-item[data-type="2"] .interface-btn-toggle { +.btn-dashboard-page-properties, .btn-iterator-page-previous, .btn-iterator-page-next, .btn-widget-action, .btn-widget-collapse, .btn-widget-expand, .btn-widget-edit, .btn-alarm-on, .btn-alarm-off, .btn-sound-on, .btn-sound-off, .btn-info-clock { width: 24px; height: 24px; margin: 2px 2px 0 0; } @@ -4194,13 +4194,13 @@ button { width: 24px; height: 24px; } -.filter-container.tabfilter-container .icon-edit, .btn-dashboard-page-properties, .btn-iterator-page-previous, .btn-iterator-page-next, .btn-widget-action, .btn-widget-collapse, .interface-row.list-accordion-item[data-type="2"].list-accordion-item-opened .interface-btn-toggle, .btn-widget-expand, .interface-row.list-accordion-item[data-type="2"].list-accordion-item-closed .interface-btn-toggle, .btn-widget-edit, .btn-alarm-on, .btn-alarm-off, .btn-sound-on, .btn-sound-off, .btn-info-clock, .interface-row.list-accordion-item[data-type="2"] .interface-btn-toggle, .btn-dashboard-conf { +.filter-container.tabfilter-container .icon-edit, .btn-dashboard-page-properties, .btn-iterator-page-previous, .btn-iterator-page-next, .btn-widget-action, .btn-widget-collapse, .btn-widget-expand, .btn-widget-edit, .btn-alarm-on, .btn-alarm-off, .btn-sound-on, .btn-sound-off, .btn-info-clock, .btn-dashboard-conf, .interfaces .interface-row[data-type="2"] .interface-btn-toggle { border: 0; min-height: 0; padding: 0; opacity: .5; transition: opacity .2s ease-out; } - .filter-container.tabfilter-container [disabled].icon-edit, [disabled].btn-dashboard-page-properties, [disabled].btn-iterator-page-previous, [disabled].btn-iterator-page-next, [disabled].btn-widget-action, [disabled].btn-widget-collapse, [disabled].btn-widget-expand, [disabled].btn-widget-edit, [disabled].btn-alarm-on, [disabled].btn-alarm-off, [disabled].btn-sound-on, [disabled].btn-sound-off, [disabled].btn-info-clock, .interface-row.list-accordion-item[data-type="2"] [disabled].interface-btn-toggle, [disabled].btn-dashboard-conf, .filter-container.tabfilter-container [disabled].icon-edit:hover, [disabled].btn-dashboard-page-properties:hover, [disabled].btn-iterator-page-previous:hover, [disabled].btn-iterator-page-next:hover, [disabled].btn-widget-action:hover, [disabled].btn-widget-collapse:hover, [disabled].btn-widget-expand:hover, [disabled].btn-widget-edit:hover, [disabled].btn-alarm-on:hover, [disabled].btn-alarm-off:hover, [disabled].btn-sound-on:hover, [disabled].btn-sound-off:hover, [disabled].btn-info-clock:hover, .interface-row.list-accordion-item[data-type="2"] [disabled].interface-btn-toggle:hover, [disabled].btn-dashboard-conf:hover, .filter-container.tabfilter-container [disabled].icon-edit:focus, [disabled].btn-dashboard-page-properties:focus, [disabled].btn-iterator-page-previous:focus, [disabled].btn-iterator-page-next:focus, [disabled].btn-widget-action:focus, [disabled].btn-widget-collapse:focus, [disabled].btn-widget-expand:focus, [disabled].btn-widget-edit:focus, [disabled].btn-alarm-on:focus, [disabled].btn-alarm-off:focus, [disabled].btn-sound-on:focus, [disabled].btn-sound-off:focus, [disabled].btn-info-clock:focus, .interface-row.list-accordion-item[data-type="2"] [disabled].interface-btn-toggle:focus, [disabled].btn-dashboard-conf:focus, .filter-container.tabfilter-container [disabled].icon-edit:active, [disabled].btn-dashboard-page-properties:active, [disabled].btn-iterator-page-previous:active, [disabled].btn-iterator-page-next:active, [disabled].btn-widget-action:active, [disabled].btn-widget-collapse:active, [disabled].btn-widget-expand:active, [disabled].btn-widget-edit:active, [disabled].btn-alarm-on:active, [disabled].btn-alarm-off:active, [disabled].btn-sound-on:active, [disabled].btn-sound-off:active, [disabled].btn-info-clock:active, .interface-row.list-accordion-item[data-type="2"] [disabled].interface-btn-toggle:active, [disabled].btn-dashboard-conf:active { + .filter-container.tabfilter-container [disabled].icon-edit, [disabled].btn-dashboard-page-properties, [disabled].btn-iterator-page-previous, [disabled].btn-iterator-page-next, [disabled].btn-widget-action, [disabled].btn-widget-collapse, [disabled].btn-widget-expand, [disabled].btn-widget-edit, [disabled].btn-alarm-on, [disabled].btn-alarm-off, [disabled].btn-sound-on, [disabled].btn-sound-off, [disabled].btn-info-clock, [disabled].btn-dashboard-conf, .interfaces .interface-row[data-type="2"] [disabled].interface-btn-toggle, .filter-container.tabfilter-container [disabled].icon-edit:hover, [disabled].btn-dashboard-page-properties:hover, [disabled].btn-iterator-page-previous:hover, [disabled].btn-iterator-page-next:hover, [disabled].btn-widget-action:hover, [disabled].btn-widget-collapse:hover, [disabled].btn-widget-expand:hover, [disabled].btn-widget-edit:hover, [disabled].btn-alarm-on:hover, [disabled].btn-alarm-off:hover, [disabled].btn-sound-on:hover, [disabled].btn-sound-off:hover, [disabled].btn-info-clock:hover, [disabled].btn-dashboard-conf:hover, .interfaces .interface-row[data-type="2"] [disabled].interface-btn-toggle:hover, .filter-container.tabfilter-container [disabled].icon-edit:focus, [disabled].btn-dashboard-page-properties:focus, [disabled].btn-iterator-page-previous:focus, [disabled].btn-iterator-page-next:focus, [disabled].btn-widget-action:focus, [disabled].btn-widget-collapse:focus, [disabled].btn-widget-expand:focus, [disabled].btn-widget-edit:focus, [disabled].btn-alarm-on:focus, [disabled].btn-alarm-off:focus, [disabled].btn-sound-on:focus, [disabled].btn-sound-off:focus, [disabled].btn-info-clock:focus, [disabled].btn-dashboard-conf:focus, .interfaces .interface-row[data-type="2"] [disabled].interface-btn-toggle:focus, .filter-container.tabfilter-container [disabled].icon-edit:active, [disabled].btn-dashboard-page-properties:active, [disabled].btn-iterator-page-previous:active, [disabled].btn-iterator-page-next:active, [disabled].btn-widget-action:active, [disabled].btn-widget-collapse:active, [disabled].btn-widget-expand:active, [disabled].btn-widget-edit:active, [disabled].btn-alarm-on:active, [disabled].btn-alarm-off:active, [disabled].btn-sound-on:active, [disabled].btn-sound-off:active, [disabled].btn-info-clock:active, [disabled].btn-dashboard-conf:active, .interfaces .interface-row[data-type="2"] [disabled].interface-btn-toggle:active { background-color: transparent; opacity: .25; } @@ -4228,7 +4228,7 @@ button[disabled], button[disabled]:hover, button[disabled]:active { .inaccessible .subfilter-enabled { color: #b2b2b2; } -.filter-container.tabfilter-container .icon-edit:hover, .btn-dashboard-page-properties:hover, .btn-iterator-page-previous:hover, .btn-iterator-page-next:hover, .btn-widget-action:hover, .btn-widget-collapse:hover, .btn-widget-expand:hover, .btn-widget-edit:hover, .btn-alarm-on:hover, .btn-alarm-off:hover, .btn-sound-on:hover, .btn-sound-off:hover, .btn-info-clock:hover, .interface-row.list-accordion-item[data-type="2"] .interface-btn-toggle:hover, .btn-dashboard-conf:hover, .filter-container.tabfilter-container .icon-edit:focus, .btn-dashboard-page-properties:focus, .btn-iterator-page-previous:focus, .btn-iterator-page-next:focus, .btn-widget-action:focus, .btn-widget-collapse:focus, .btn-widget-expand:focus, .btn-widget-edit:focus, .btn-alarm-on:focus, .btn-alarm-off:focus, .btn-sound-on:focus, .btn-sound-off:focus, .btn-info-clock:focus, .interface-row.list-accordion-item[data-type="2"] .interface-btn-toggle:focus, .btn-dashboard-conf:focus, .filter-container.tabfilter-container .icon-edit:active, .btn-dashboard-page-properties:active, .btn-iterator-page-previous:active, .btn-iterator-page-next:active, .btn-widget-action:active, .btn-widget-collapse:active, .btn-widget-expand:active, .btn-widget-edit:active, .btn-alarm-on:active, .btn-alarm-off:active, .btn-sound-on:active, .btn-sound-off:active, .btn-info-clock:active, .interface-row.list-accordion-item[data-type="2"] .interface-btn-toggle:active, .btn-dashboard-conf:active { +.filter-container.tabfilter-container .icon-edit:hover, .btn-dashboard-page-properties:hover, .btn-iterator-page-previous:hover, .btn-iterator-page-next:hover, .btn-widget-action:hover, .btn-widget-collapse:hover, .btn-widget-expand:hover, .btn-widget-edit:hover, .btn-alarm-on:hover, .btn-alarm-off:hover, .btn-sound-on:hover, .btn-sound-off:hover, .btn-info-clock:hover, .btn-dashboard-conf:hover, .interfaces .interface-row[data-type="2"] .interface-btn-toggle:hover, .filter-container.tabfilter-container .icon-edit:focus, .btn-dashboard-page-properties:focus, .btn-iterator-page-previous:focus, .btn-iterator-page-next:focus, .btn-widget-action:focus, .btn-widget-collapse:focus, .btn-widget-expand:focus, .btn-widget-edit:focus, .btn-alarm-on:focus, .btn-alarm-off:focus, .btn-sound-on:focus, .btn-sound-off:focus, .btn-info-clock:focus, .btn-dashboard-conf:focus, .interfaces .interface-row[data-type="2"] .interface-btn-toggle:focus, .filter-container.tabfilter-container .icon-edit:active, .btn-dashboard-page-properties:active, .btn-iterator-page-previous:active, .btn-iterator-page-next:active, .btn-widget-action:active, .btn-widget-collapse:active, .btn-widget-expand:active, .btn-widget-edit:active, .btn-alarm-on:active, .btn-alarm-off:active, .btn-sound-on:active, .btn-sound-off:active, .btn-info-clock:active, .btn-dashboard-conf:active, .interfaces .interface-row[data-type="2"] .interface-btn-toggle:active { background-color: transparent; opacity: 1; } @@ -5950,7 +5950,7 @@ svg { .preprocessing-list select { width: 100%; min-width: 0; } - .preprocessing-list .btn-link:not(:last-of-type), .preprocessing-list .interface-container .interface-row .interface-cell .interface-btn-toggle:not(:last-of-type), .interface-container .interface-row .interface-cell .preprocessing-list .interface-btn-toggle:not(:last-of-type) { + .preprocessing-list .btn-link:not(:last-of-type) { margin-right: 10px; } .preprocessing-list .preprocessing-list-head, .preprocessing-list .preprocessing-list-foot, @@ -6749,44 +6749,50 @@ button.icon-action-command, button.icon-action-close, button.icon-action-msg, bu /* for IE11 only. Fixed cell height if table has 100% height */ .host-avail-widget td { height: 100%; } } -.interface-container { - width: fit-content; - width: -moz-fit-content; - padding-left: 0; } - .interface-container:not(.interface-container-header):not(:empty) { - margin-bottom: 5px; } - .interface-container:not(.interface-container-header):not(:empty) ~ .interface-container:not(:empty) { - border-top: 1px solid #4f4f4f; - padding-top: 10px; } - .interface-container:empty { - display: none; } - .interface-container .interface-row { - display: grid; - grid-template-columns: 26px 36px 225px 175px 85px 100px 20px 1fr; - grid-template-rows: 24px 1fr; - gap: 5px; } - .interface-container .interface-row:not(:first-of-type) { - margin-top: 5px; } - .interface-container .interface-row[data-type] .interface-cell-details { - display: none; - grid-column: 1/-1; } - .interface-container .interface-row .interface-cell { - align-self: center; } - .interface-container .interface-row .interface-cell .interface-btn-toggle { - display: none; } - .interface-container .interface-row .interface-cell.interface-cell-header { - color: #737373; - text-align: left; } - .interface-container .interface-row .interface-cell .table-forms-td-left, - .interface-container .interface-row .interface-cell .table-forms-td-right { - padding-bottom: 0; } +.table-forms-td-right .interfaces { + margin-top: 5px; } -.interface-row.list-accordion-item[data-type="2"].list-accordion-item-closed .list-accordion-item-body { - display: none; } -.interface-row.list-accordion-item[data-type="2"].list-accordion-item-opened .list-accordion-item-body { - display: block; } -.interface-row.list-accordion-item[data-type="2"] .interface-btn-toggle { - display: inline-block; } +.interfaces { + display: grid; + grid-template-columns: 26px repeat(7, max-content); + margin-bottom: 5px; + line-height: 24px; } + .interfaces .interface-container { + display: contents; } + .interfaces .interface-container.interface-container-header .interface-cell { + padding: 0 5px 0 0; + color: #737373; } + .interfaces .interface-container.interface-container-header .interface-cell-action { + grid-column: span 2; } + .interfaces .interface-container:not(.interface-container-header):not(:empty) ~ .interface-container:not(:empty) .interface-cell:not(.interface-cell-details) { + padding-top: 10px; + margin-top: 5px; + border-top: 1px solid #4f4f4f; } + .interfaces .interface-row { + display: contents; } + .interfaces .interface-row[data-type="2"] .interface-btn-toggle { + display: inline-block; + width: 24px; + height: 24px; + background: url("../img/icon-sprite.svg?20211222") no-repeat -6px -690px; } + .interfaces .interface-row[data-type="2"] .list-accordion-item-body { + display: none; + padding-top: 0; } + .interfaces .interface-row[data-type="2"].list-accordion-item-opened .interface-btn-toggle { + background: url("../img/icon-sprite.svg?20211222") no-repeat -6px -655px; } + .interfaces .interface-row[data-type="2"].list-accordion-item-opened .list-accordion-item-body { + display: block; } + .interfaces .interface-cell { + padding: 5px 5px 5px 0; } + .interfaces .interface-cell.interface-cell-details { + display: none; + grid-column: 1 / -1; } + .interfaces .interface-btn-toggle { + display: none; + vertical-align: top; } + .interfaces .no-interface { + grid-column: 1 / -1; + color: #737373; } .debug-modal.overlay-dialogue.modal .overlay-dialogue-body { overflow-x: auto; } diff --git a/ui/assets/styles/hc-dark.css b/ui/assets/styles/hc-dark.css index 2d35fa9431b..4633a2344af 100644 --- a/ui/assets/styles/hc-dark.css +++ b/ui/assets/styles/hc-dark.css @@ -3795,7 +3795,7 @@ button { background-color: #414141; border-color: #bbbbbb; } -.btn-link, .btn-link:hover, .btn-link:focus, .btn-link:active, .interface-container .interface-row .interface-cell .interface-btn-toggle { +.btn-link, .btn-link:hover, .btn-link:focus, .btn-link:active { position: relative; background-color: transparent; border: 0; @@ -3805,14 +3805,14 @@ button { font-size: inherit; padding: 0; min-height: inherit; } - .btn-link:focus, .interface-container .interface-row .interface-cell .interface-btn-toggle:focus { + .btn-link:focus { outline: none; margin-bottom: -2px !important; border-bottom: 2px solid rgba(255, 255, 255, 0.5); box-shadow: 0 0 0 0 !important; } - .btn-link[disabled], .interface-container .interface-row .interface-cell [disabled].interface-btn-toggle { + .btn-link[disabled] { background-color: transparent; } - .btn-link[disabled]:hover, .interface-container .interface-row .interface-cell [disabled].interface-btn-toggle:hover { + .btn-link[disabled]:hover { background-color: transparent; } .btn-kiosk { @@ -3857,10 +3857,10 @@ button { .btn-widget-action { background: url("../img/icon-sprite.svg?20211222") no-repeat -6px -618px; } -.btn-widget-collapse, .interface-row.list-accordion-item[data-type="2"].list-accordion-item-opened .interface-btn-toggle { +.btn-widget-collapse { background: url("../img/icon-sprite.svg?20211222") no-repeat -6px -654px; } -.btn-widget-expand, .interface-row.list-accordion-item[data-type="2"].list-accordion-item-closed .interface-btn-toggle { +.btn-widget-expand { background: url("../img/icon-sprite.svg?20211222") no-repeat -6px -689px; } .btn-widget-edit { @@ -4140,7 +4140,7 @@ button { .btn-dashboard-normal { box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); } -.btn-dashboard-page-properties, .btn-iterator-page-previous, .btn-iterator-page-next, .btn-widget-action, .btn-widget-collapse, .interface-row.list-accordion-item[data-type="2"].list-accordion-item-opened .interface-btn-toggle, .btn-widget-expand, .interface-row.list-accordion-item[data-type="2"].list-accordion-item-closed .interface-btn-toggle, .btn-widget-edit, .btn-alarm-on, .btn-alarm-off, .btn-sound-on, .btn-sound-off, .btn-info-clock, .interface-row.list-accordion-item[data-type="2"] .interface-btn-toggle { +.btn-dashboard-page-properties, .btn-iterator-page-previous, .btn-iterator-page-next, .btn-widget-action, .btn-widget-collapse, .btn-widget-expand, .btn-widget-edit, .btn-alarm-on, .btn-alarm-off, .btn-sound-on, .btn-sound-off, .btn-info-clock { width: 24px; height: 24px; margin: 2px 2px 0 0; } @@ -4149,13 +4149,13 @@ button { width: 24px; height: 24px; } -.filter-container.tabfilter-container .icon-edit, .btn-dashboard-page-properties, .btn-iterator-page-previous, .btn-iterator-page-next, .btn-widget-action, .btn-widget-collapse, .interface-row.list-accordion-item[data-type="2"].list-accordion-item-opened .interface-btn-toggle, .btn-widget-expand, .interface-row.list-accordion-item[data-type="2"].list-accordion-item-closed .interface-btn-toggle, .btn-widget-edit, .btn-alarm-on, .btn-alarm-off, .btn-sound-on, .btn-sound-off, .btn-info-clock, .interface-row.list-accordion-item[data-type="2"] .interface-btn-toggle, .btn-dashboard-conf { +.filter-container.tabfilter-container .icon-edit, .btn-dashboard-page-properties, .btn-iterator-page-previous, .btn-iterator-page-next, .btn-widget-action, .btn-widget-collapse, .btn-widget-expand, .btn-widget-edit, .btn-alarm-on, .btn-alarm-off, .btn-sound-on, .btn-sound-off, .btn-info-clock, .btn-dashboard-conf, .interfaces .interface-row[data-type="2"] .interface-btn-toggle { border: 0; min-height: 0; padding: 0; opacity: .5; transition: opacity .2s ease-out; } - .filter-container.tabfilter-container [disabled].icon-edit, [disabled].btn-dashboard-page-properties, [disabled].btn-iterator-page-previous, [disabled].btn-iterator-page-next, [disabled].btn-widget-action, [disabled].btn-widget-collapse, [disabled].btn-widget-expand, [disabled].btn-widget-edit, [disabled].btn-alarm-on, [disabled].btn-alarm-off, [disabled].btn-sound-on, [disabled].btn-sound-off, [disabled].btn-info-clock, .interface-row.list-accordion-item[data-type="2"] [disabled].interface-btn-toggle, [disabled].btn-dashboard-conf, .filter-container.tabfilter-container [disabled].icon-edit:hover, [disabled].btn-dashboard-page-properties:hover, [disabled].btn-iterator-page-previous:hover, [disabled].btn-iterator-page-next:hover, [disabled].btn-widget-action:hover, [disabled].btn-widget-collapse:hover, [disabled].btn-widget-expand:hover, [disabled].btn-widget-edit:hover, [disabled].btn-alarm-on:hover, [disabled].btn-alarm-off:hover, [disabled].btn-sound-on:hover, [disabled].btn-sound-off:hover, [disabled].btn-info-clock:hover, .interface-row.list-accordion-item[data-type="2"] [disabled].interface-btn-toggle:hover, [disabled].btn-dashboard-conf:hover, .filter-container.tabfilter-container [disabled].icon-edit:focus, [disabled].btn-dashboard-page-properties:focus, [disabled].btn-iterator-page-previous:focus, [disabled].btn-iterator-page-next:focus, [disabled].btn-widget-action:focus, [disabled].btn-widget-collapse:focus, [disabled].btn-widget-expand:focus, [disabled].btn-widget-edit:focus, [disabled].btn-alarm-on:focus, [disabled].btn-alarm-off:focus, [disabled].btn-sound-on:focus, [disabled].btn-sound-off:focus, [disabled].btn-info-clock:focus, .interface-row.list-accordion-item[data-type="2"] [disabled].interface-btn-toggle:focus, [disabled].btn-dashboard-conf:focus, .filter-container.tabfilter-container [disabled].icon-edit:active, [disabled].btn-dashboard-page-properties:active, [disabled].btn-iterator-page-previous:active, [disabled].btn-iterator-page-next:active, [disabled].btn-widget-action:active, [disabled].btn-widget-collapse:active, [disabled].btn-widget-expand:active, [disabled].btn-widget-edit:active, [disabled].btn-alarm-on:active, [disabled].btn-alarm-off:active, [disabled].btn-sound-on:active, [disabled].btn-sound-off:active, [disabled].btn-info-clock:active, .interface-row.list-accordion-item[data-type="2"] [disabled].interface-btn-toggle:active, [disabled].btn-dashboard-conf:active { + .filter-container.tabfilter-container [disabled].icon-edit, [disabled].btn-dashboard-page-properties, [disabled].btn-iterator-page-previous, [disabled].btn-iterator-page-next, [disabled].btn-widget-action, [disabled].btn-widget-collapse, [disabled].btn-widget-expand, [disabled].btn-widget-edit, [disabled].btn-alarm-on, [disabled].btn-alarm-off, [disabled].btn-sound-on, [disabled].btn-sound-off, [disabled].btn-info-clock, [disabled].btn-dashboard-conf, .interfaces .interface-row[data-type="2"] [disabled].interface-btn-toggle, .filter-container.tabfilter-container [disabled].icon-edit:hover, [disabled].btn-dashboard-page-properties:hover, [disabled].btn-iterator-page-previous:hover, [disabled].btn-iterator-page-next:hover, [disabled].btn-widget-action:hover, [disabled].btn-widget-collapse:hover, [disabled].btn-widget-expand:hover, [disabled].btn-widget-edit:hover, [disabled].btn-alarm-on:hover, [disabled].btn-alarm-off:hover, [disabled].btn-sound-on:hover, [disabled].btn-sound-off:hover, [disabled].btn-info-clock:hover, [disabled].btn-dashboard-conf:hover, .interfaces .interface-row[data-type="2"] [disabled].interface-btn-toggle:hover, .filter-container.tabfilter-container [disabled].icon-edit:focus, [disabled].btn-dashboard-page-properties:focus, [disabled].btn-iterator-page-previous:focus, [disabled].btn-iterator-page-next:focus, [disabled].btn-widget-action:focus, [disabled].btn-widget-collapse:focus, [disabled].btn-widget-expand:focus, [disabled].btn-widget-edit:focus, [disabled].btn-alarm-on:focus, [disabled].btn-alarm-off:focus, [disabled].btn-sound-on:focus, [disabled].btn-sound-off:focus, [disabled].btn-info-clock:focus, [disabled].btn-dashboard-conf:focus, .interfaces .interface-row[data-type="2"] [disabled].interface-btn-toggle:focus, .filter-container.tabfilter-container [disabled].icon-edit:active, [disabled].btn-dashboard-page-properties:active, [disabled].btn-iterator-page-previous:active, [disabled].btn-iterator-page-next:active, [disabled].btn-widget-action:active, [disabled].btn-widget-collapse:active, [disabled].btn-widget-expand:active, [disabled].btn-widget-edit:active, [disabled].btn-alarm-on:active, [disabled].btn-alarm-off:active, [disabled].btn-sound-on:active, [disabled].btn-sound-off:active, [disabled].btn-info-clock:active, [disabled].btn-dashboard-conf:active, .interfaces .interface-row[data-type="2"] [disabled].interface-btn-toggle:active { background-color: transparent; opacity: .25; } @@ -4183,7 +4183,7 @@ button[disabled], button[disabled]:hover, button[disabled]:active { .inaccessible .subfilter-enabled { color: #bfbfbf; } -.filter-container.tabfilter-container .icon-edit:hover, .btn-dashboard-page-properties:hover, .btn-iterator-page-previous:hover, .btn-iterator-page-next:hover, .btn-widget-action:hover, .btn-widget-collapse:hover, .btn-widget-expand:hover, .btn-widget-edit:hover, .btn-alarm-on:hover, .btn-alarm-off:hover, .btn-sound-on:hover, .btn-sound-off:hover, .btn-info-clock:hover, .interface-row.list-accordion-item[data-type="2"] .interface-btn-toggle:hover, .btn-dashboard-conf:hover, .filter-container.tabfilter-container .icon-edit:focus, .btn-dashboard-page-properties:focus, .btn-iterator-page-previous:focus, .btn-iterator-page-next:focus, .btn-widget-action:focus, .btn-widget-collapse:focus, .btn-widget-expand:focus, .btn-widget-edit:focus, .btn-alarm-on:focus, .btn-alarm-off:focus, .btn-sound-on:focus, .btn-sound-off:focus, .btn-info-clock:focus, .interface-row.list-accordion-item[data-type="2"] .interface-btn-toggle:focus, .btn-dashboard-conf:focus, .filter-container.tabfilter-container .icon-edit:active, .btn-dashboard-page-properties:active, .btn-iterator-page-previous:active, .btn-iterator-page-next:active, .btn-widget-action:active, .btn-widget-collapse:active, .btn-widget-expand:active, .btn-widget-edit:active, .btn-alarm-on:active, .btn-alarm-off:active, .btn-sound-on:active, .btn-sound-off:active, .btn-info-clock:active, .interface-row.list-accordion-item[data-type="2"] .interface-btn-toggle:active, .btn-dashboard-conf:active { +.filter-container.tabfilter-container .icon-edit:hover, .btn-dashboard-page-properties:hover, .btn-iterator-page-previous:hover, .btn-iterator-page-next:hover, .btn-widget-action:hover, .btn-widget-collapse:hover, .btn-widget-expand:hover, .btn-widget-edit:hover, .btn-alarm-on:hover, .btn-alarm-off:hover, .btn-sound-on:hover, .btn-sound-off:hover, .btn-info-clock:hover, .btn-dashboard-conf:hover, .interfaces .interface-row[data-type="2"] .interface-btn-toggle:hover, .filter-container.tabfilter-container .icon-edit:focus, .btn-dashboard-page-properties:focus, .btn-iterator-page-previous:focus, .btn-iterator-page-next:focus, .btn-widget-action:focus, .btn-widget-collapse:focus, .btn-widget-expand:focus, .btn-widget-edit:focus, .btn-alarm-on:focus, .btn-alarm-off:focus, .btn-sound-on:focus, .btn-sound-off:focus, .btn-info-clock:focus, .btn-dashboard-conf:focus, .interfaces .interface-row[data-type="2"] .interface-btn-toggle:focus, .filter-container.tabfilter-container .icon-edit:active, .btn-dashboard-page-properties:active, .btn-iterator-page-previous:active, .btn-iterator-page-next:active, .btn-widget-action:active, .btn-widget-collapse:active, .btn-widget-expand:active, .btn-widget-edit:active, .btn-alarm-on:active, .btn-alarm-off:active, .btn-sound-on:active, .btn-sound-off:active, .btn-info-clock:active, .btn-dashboard-conf:active, .interfaces .interface-row[data-type="2"] .interface-btn-toggle:active { background-color: transparent; opacity: 1; } @@ -5896,7 +5896,7 @@ svg { .preprocessing-list select { width: 100%; min-width: 0; } - .preprocessing-list .btn-link:not(:last-of-type), .preprocessing-list .interface-container .interface-row .interface-cell .interface-btn-toggle:not(:last-of-type), .interface-container .interface-row .interface-cell .preprocessing-list .interface-btn-toggle:not(:last-of-type) { + .preprocessing-list .btn-link:not(:last-of-type) { margin-right: 10px; } .preprocessing-list .preprocessing-list-head, .preprocessing-list .preprocessing-list-foot, @@ -6695,44 +6695,50 @@ button.icon-action-command, button.icon-action-close, button.icon-action-msg, bu /* for IE11 only. Fixed cell height if table has 100% height */ .host-avail-widget td { height: 100%; } } -.interface-container { - width: fit-content; - width: -moz-fit-content; - padding-left: 0; } - .interface-container:not(.interface-container-header):not(:empty) { - margin-bottom: 5px; } - .interface-container:not(.interface-container-header):not(:empty) ~ .interface-container:not(:empty) { - border-top: 1px solid #666666; - padding-top: 10px; } - .interface-container:empty { - display: none; } - .interface-container .interface-row { - display: grid; - grid-template-columns: 26px 36px 225px 175px 85px 100px 20px 1fr; - grid-template-rows: 24px 1fr; - gap: 5px; } - .interface-container .interface-row:not(:first-of-type) { - margin-top: 5px; } - .interface-container .interface-row[data-type] .interface-cell-details { - display: none; - grid-column: 1/-1; } - .interface-container .interface-row .interface-cell { - align-self: center; } - .interface-container .interface-row .interface-cell .interface-btn-toggle { - display: none; } - .interface-container .interface-row .interface-cell.interface-cell-header { - color: #cacaca; - text-align: left; } - .interface-container .interface-row .interface-cell .table-forms-td-left, - .interface-container .interface-row .interface-cell .table-forms-td-right { - padding-bottom: 0; } +.table-forms-td-right .interfaces { + margin-top: 5px; } -.interface-row.list-accordion-item[data-type="2"].list-accordion-item-closed .list-accordion-item-body { - display: none; } -.interface-row.list-accordion-item[data-type="2"].list-accordion-item-opened .list-accordion-item-body { - display: block; } -.interface-row.list-accordion-item[data-type="2"] .interface-btn-toggle { - display: inline-block; } +.interfaces { + display: grid; + grid-template-columns: 26px repeat(7, max-content); + margin-bottom: 5px; + line-height: 24px; } + .interfaces .interface-container { + display: contents; } + .interfaces .interface-container.interface-container-header .interface-cell { + padding: 0 5px 0 0; + color: #cacaca; } + .interfaces .interface-container.interface-container-header .interface-cell-action { + grid-column: span 2; } + .interfaces .interface-container:not(.interface-container-header):not(:empty) ~ .interface-container:not(:empty) .interface-cell:not(.interface-cell-details) { + padding-top: 10px; + margin-top: 5px; + border-top: 1px solid #666666; } + .interfaces .interface-row { + display: contents; } + .interfaces .interface-row[data-type="2"] .interface-btn-toggle { + display: inline-block; + width: 24px; + height: 24px; + background: url("../img/icon-sprite.svg?20211222") no-repeat -6px -690px; } + .interfaces .interface-row[data-type="2"] .list-accordion-item-body { + display: none; + padding-top: 0; } + .interfaces .interface-row[data-type="2"].list-accordion-item-opened .interface-btn-toggle { + background: url("../img/icon-sprite.svg?20211222") no-repeat -6px -655px; } + .interfaces .interface-row[data-type="2"].list-accordion-item-opened .list-accordion-item-body { + display: block; } + .interfaces .interface-cell { + padding: 5px 5px 5px 0; } + .interfaces .interface-cell.interface-cell-details { + display: none; + grid-column: 1 / -1; } + .interfaces .interface-btn-toggle { + display: none; + vertical-align: top; } + .interfaces .no-interface { + grid-column: 1 / -1; + color: #cacaca; } .debug-modal.overlay-dialogue.modal .overlay-dialogue-body { overflow-x: auto; } @@ -7106,10 +7112,10 @@ z-select.z-select-host-interface li[disabled] .description:not(:empty), .btn-widget-action { background: url("../img/icon-sprite.svg?20211222") no-repeat -318px -618px; } -.btn-widget-collapse, .interface-row.list-accordion-item[data-type="2"].list-accordion-item-opened .interface-btn-toggle { +.btn-widget-collapse { background: url("../img/icon-sprite.svg?20211222") no-repeat -318px -654px; } -.btn-widget-expand, .interface-row.list-accordion-item[data-type="2"].list-accordion-item-closed .interface-btn-toggle { +.btn-widget-expand { background: url("../img/icon-sprite.svg?20211222") no-repeat -318px -690px; } .btn-widget-edit { @@ -7258,10 +7264,10 @@ a.link-action { border: none !important; background-color: #666666 !important; } -.btn-link, .btn-link:hover, .btn-link:focus, .btn-link:active, .interface-container .interface-row .interface-cell .interface-btn-toggle { +.btn-link, .btn-link:hover, .btn-link:focus, .btn-link:active { font-weight: bold !important; color: #ffffff !important; } - .btn-link:focus, .interface-container .interface-row .interface-cell .interface-btn-toggle:focus { + .btn-link:focus { margin-bottom: -3px !important; border-bottom: 3px solid #ffffff !important; } @@ -7775,3 +7781,8 @@ td.inactive-bg { content: " /"; } .breadcrumbs > :last-child::after { content: ""; } + +.interfaces .interface-row[data-type="2"] .interface-btn-toggle { + background-position: -318px -690px; } +.interfaces .interface-row[data-type="2"].list-accordion-item-opened .interface-btn-toggle { + background-position: -318px -655px; } diff --git a/ui/assets/styles/hc-light.css b/ui/assets/styles/hc-light.css index df2ed1b17fe..502fd43be4d 100644 --- a/ui/assets/styles/hc-light.css +++ b/ui/assets/styles/hc-light.css @@ -3795,7 +3795,7 @@ button { background-color: #f4f4f4; border-color: #000000; } -.btn-link, .btn-link:hover, .btn-link:focus, .btn-link:active, .interface-container .interface-row .interface-cell .interface-btn-toggle { +.btn-link, .btn-link:hover, .btn-link:focus, .btn-link:active { position: relative; background-color: transparent; border: 0; @@ -3805,14 +3805,14 @@ button { font-size: inherit; padding: 0; min-height: inherit; } - .btn-link:focus, .interface-container .interface-row .interface-cell .interface-btn-toggle:focus { + .btn-link:focus { outline: none; margin-bottom: -2px !important; border-bottom: 2px solid rgba(0, 0, 0, 0.5); box-shadow: 0 0 0 0 !important; } - .btn-link[disabled], .interface-container .interface-row .interface-cell [disabled].interface-btn-toggle { + .btn-link[disabled] { background-color: transparent; } - .btn-link[disabled]:hover, .interface-container .interface-row .interface-cell [disabled].interface-btn-toggle:hover { + .btn-link[disabled]:hover { background-color: transparent; } .btn-kiosk { @@ -3857,10 +3857,10 @@ button { .btn-widget-action { background: url("../img/icon-sprite.svg?20211222") no-repeat -6px -618px; } -.btn-widget-collapse, .interface-row.list-accordion-item[data-type="2"].list-accordion-item-opened .interface-btn-toggle { +.btn-widget-collapse { background: url("../img/icon-sprite.svg?20211222") no-repeat -6px -654px; } -.btn-widget-expand, .interface-row.list-accordion-item[data-type="2"].list-accordion-item-closed .interface-btn-toggle { +.btn-widget-expand { background: url("../img/icon-sprite.svg?20211222") no-repeat -6px -689px; } .btn-widget-edit { @@ -4140,7 +4140,7 @@ button { .btn-dashboard-normal { box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); } -.btn-dashboard-page-properties, .btn-iterator-page-previous, .btn-iterator-page-next, .btn-widget-action, .btn-widget-collapse, .interface-row.list-accordion-item[data-type="2"].list-accordion-item-opened .interface-btn-toggle, .btn-widget-expand, .interface-row.list-accordion-item[data-type="2"].list-accordion-item-closed .interface-btn-toggle, .btn-widget-edit, .btn-alarm-on, .btn-alarm-off, .btn-sound-on, .btn-sound-off, .btn-info-clock, .interface-row.list-accordion-item[data-type="2"] .interface-btn-toggle { +.btn-dashboard-page-properties, .btn-iterator-page-previous, .btn-iterator-page-next, .btn-widget-action, .btn-widget-collapse, .btn-widget-expand, .btn-widget-edit, .btn-alarm-on, .btn-alarm-off, .btn-sound-on, .btn-sound-off, .btn-info-clock { width: 24px; height: 24px; margin: 2px 2px 0 0; } @@ -4149,13 +4149,13 @@ button { width: 24px; height: 24px; } -.filter-container.tabfilter-container .icon-edit, .btn-dashboard-page-properties, .btn-iterator-page-previous, .btn-iterator-page-next, .btn-widget-action, .btn-widget-collapse, .interface-row.list-accordion-item[data-type="2"].list-accordion-item-opened .interface-btn-toggle, .btn-widget-expand, .interface-row.list-accordion-item[data-type="2"].list-accordion-item-closed .interface-btn-toggle, .btn-widget-edit, .btn-alarm-on, .btn-alarm-off, .btn-sound-on, .btn-sound-off, .btn-info-clock, .interface-row.list-accordion-item[data-type="2"] .interface-btn-toggle, .btn-dashboard-conf { +.filter-container.tabfilter-container .icon-edit, .btn-dashboard-page-properties, .btn-iterator-page-previous, .btn-iterator-page-next, .btn-widget-action, .btn-widget-collapse, .btn-widget-expand, .btn-widget-edit, .btn-alarm-on, .btn-alarm-off, .btn-sound-on, .btn-sound-off, .btn-info-clock, .btn-dashboard-conf, .interfaces .interface-row[data-type="2"] .interface-btn-toggle { border: 0; min-height: 0; padding: 0; opacity: .5; transition: opacity .2s ease-out; } - .filter-container.tabfilter-container [disabled].icon-edit, [disabled].btn-dashboard-page-properties, [disabled].btn-iterator-page-previous, [disabled].btn-iterator-page-next, [disabled].btn-widget-action, [disabled].btn-widget-collapse, [disabled].btn-widget-expand, [disabled].btn-widget-edit, [disabled].btn-alarm-on, [disabled].btn-alarm-off, [disabled].btn-sound-on, [disabled].btn-sound-off, [disabled].btn-info-clock, .interface-row.list-accordion-item[data-type="2"] [disabled].interface-btn-toggle, [disabled].btn-dashboard-conf, .filter-container.tabfilter-container [disabled].icon-edit:hover, [disabled].btn-dashboard-page-properties:hover, [disabled].btn-iterator-page-previous:hover, [disabled].btn-iterator-page-next:hover, [disabled].btn-widget-action:hover, [disabled].btn-widget-collapse:hover, [disabled].btn-widget-expand:hover, [disabled].btn-widget-edit:hover, [disabled].btn-alarm-on:hover, [disabled].btn-alarm-off:hover, [disabled].btn-sound-on:hover, [disabled].btn-sound-off:hover, [disabled].btn-info-clock:hover, .interface-row.list-accordion-item[data-type="2"] [disabled].interface-btn-toggle:hover, [disabled].btn-dashboard-conf:hover, .filter-container.tabfilter-container [disabled].icon-edit:focus, [disabled].btn-dashboard-page-properties:focus, [disabled].btn-iterator-page-previous:focus, [disabled].btn-iterator-page-next:focus, [disabled].btn-widget-action:focus, [disabled].btn-widget-collapse:focus, [disabled].btn-widget-expand:focus, [disabled].btn-widget-edit:focus, [disabled].btn-alarm-on:focus, [disabled].btn-alarm-off:focus, [disabled].btn-sound-on:focus, [disabled].btn-sound-off:focus, [disabled].btn-info-clock:focus, .interface-row.list-accordion-item[data-type="2"] [disabled].interface-btn-toggle:focus, [disabled].btn-dashboard-conf:focus, .filter-container.tabfilter-container [disabled].icon-edit:active, [disabled].btn-dashboard-page-properties:active, [disabled].btn-iterator-page-previous:active, [disabled].btn-iterator-page-next:active, [disabled].btn-widget-action:active, [disabled].btn-widget-collapse:active, [disabled].btn-widget-expand:active, [disabled].btn-widget-edit:active, [disabled].btn-alarm-on:active, [disabled].btn-alarm-off:active, [disabled].btn-sound-on:active, [disabled].btn-sound-off:active, [disabled].btn-info-clock:active, .interface-row.list-accordion-item[data-type="2"] [disabled].interface-btn-toggle:active, [disabled].btn-dashboard-conf:active { + .filter-container.tabfilter-container [disabled].icon-edit, [disabled].btn-dashboard-page-properties, [disabled].btn-iterator-page-previous, [disabled].btn-iterator-page-next, [disabled].btn-widget-action, [disabled].btn-widget-collapse, [disabled].btn-widget-expand, [disabled].btn-widget-edit, [disabled].btn-alarm-on, [disabled].btn-alarm-off, [disabled].btn-sound-on, [disabled].btn-sound-off, [disabled].btn-info-clock, [disabled].btn-dashboard-conf, .interfaces .interface-row[data-type="2"] [disabled].interface-btn-toggle, .filter-container.tabfilter-container [disabled].icon-edit:hover, [disabled].btn-dashboard-page-properties:hover, [disabled].btn-iterator-page-previous:hover, [disabled].btn-iterator-page-next:hover, [disabled].btn-widget-action:hover, [disabled].btn-widget-collapse:hover, [disabled].btn-widget-expand:hover, [disabled].btn-widget-edit:hover, [disabled].btn-alarm-on:hover, [disabled].btn-alarm-off:hover, [disabled].btn-sound-on:hover, [disabled].btn-sound-off:hover, [disabled].btn-info-clock:hover, [disabled].btn-dashboard-conf:hover, .interfaces .interface-row[data-type="2"] [disabled].interface-btn-toggle:hover, .filter-container.tabfilter-container [disabled].icon-edit:focus, [disabled].btn-dashboard-page-properties:focus, [disabled].btn-iterator-page-previous:focus, [disabled].btn-iterator-page-next:focus, [disabled].btn-widget-action:focus, [disabled].btn-widget-collapse:focus, [disabled].btn-widget-expand:focus, [disabled].btn-widget-edit:focus, [disabled].btn-alarm-on:focus, [disabled].btn-alarm-off:focus, [disabled].btn-sound-on:focus, [disabled].btn-sound-off:focus, [disabled].btn-info-clock:focus, [disabled].btn-dashboard-conf:focus, .interfaces .interface-row[data-type="2"] [disabled].interface-btn-toggle:focus, .filter-container.tabfilter-container [disabled].icon-edit:active, [disabled].btn-dashboard-page-properties:active, [disabled].btn-iterator-page-previous:active, [disabled].btn-iterator-page-next:active, [disabled].btn-widget-action:active, [disabled].btn-widget-collapse:active, [disabled].btn-widget-expand:active, [disabled].btn-widget-edit:active, [disabled].btn-alarm-on:active, [disabled].btn-alarm-off:active, [disabled].btn-sound-on:active, [disabled].btn-sound-off:active, [disabled].btn-info-clock:active, [disabled].btn-dashboard-conf:active, .interfaces .interface-row[data-type="2"] [disabled].interface-btn-toggle:active { background-color: transparent; opacity: .25; } @@ -4183,7 +4183,7 @@ button[disabled], button[disabled]:hover, button[disabled]:active { .inaccessible .subfilter-enabled { color: #bfbfbf; } -.filter-container.tabfilter-container .icon-edit:hover, .btn-dashboard-page-properties:hover, .btn-iterator-page-previous:hover, .btn-iterator-page-next:hover, .btn-widget-action:hover, .btn-widget-collapse:hover, .btn-widget-expand:hover, .btn-widget-edit:hover, .btn-alarm-on:hover, .btn-alarm-off:hover, .btn-sound-on:hover, .btn-sound-off:hover, .btn-info-clock:hover, .interface-row.list-accordion-item[data-type="2"] .interface-btn-toggle:hover, .btn-dashboard-conf:hover, .filter-container.tabfilter-container .icon-edit:focus, .btn-dashboard-page-properties:focus, .btn-iterator-page-previous:focus, .btn-iterator-page-next:focus, .btn-widget-action:focus, .btn-widget-collapse:focus, .btn-widget-expand:focus, .btn-widget-edit:focus, .btn-alarm-on:focus, .btn-alarm-off:focus, .btn-sound-on:focus, .btn-sound-off:focus, .btn-info-clock:focus, .interface-row.list-accordion-item[data-type="2"] .interface-btn-toggle:focus, .btn-dashboard-conf:focus, .filter-container.tabfilter-container .icon-edit:active, .btn-dashboard-page-properties:active, .btn-iterator-page-previous:active, .btn-iterator-page-next:active, .btn-widget-action:active, .btn-widget-collapse:active, .btn-widget-expand:active, .btn-widget-edit:active, .btn-alarm-on:active, .btn-alarm-off:active, .btn-sound-on:active, .btn-sound-off:active, .btn-info-clock:active, .interface-row.list-accordion-item[data-type="2"] .interface-btn-toggle:active, .btn-dashboard-conf:active { +.filter-container.tabfilter-container .icon-edit:hover, .btn-dashboard-page-properties:hover, .btn-iterator-page-previous:hover, .btn-iterator-page-next:hover, .btn-widget-action:hover, .btn-widget-collapse:hover, .btn-widget-expand:hover, .btn-widget-edit:hover, .btn-alarm-on:hover, .btn-alarm-off:hover, .btn-sound-on:hover, .btn-sound-off:hover, .btn-info-clock:hover, .btn-dashboard-conf:hover, .interfaces .interface-row[data-type="2"] .interface-btn-toggle:hover, .filter-container.tabfilter-container .icon-edit:focus, .btn-dashboard-page-properties:focus, .btn-iterator-page-previous:focus, .btn-iterator-page-next:focus, .btn-widget-action:focus, .btn-widget-collapse:focus, .btn-widget-expand:focus, .btn-widget-edit:focus, .btn-alarm-on:focus, .btn-alarm-off:focus, .btn-sound-on:focus, .btn-sound-off:focus, .btn-info-clock:focus, .btn-dashboard-conf:focus, .interfaces .interface-row[data-type="2"] .interface-btn-toggle:focus, .filter-container.tabfilter-container .icon-edit:active, .btn-dashboard-page-properties:active, .btn-iterator-page-previous:active, .btn-iterator-page-next:active, .btn-widget-action:active, .btn-widget-collapse:active, .btn-widget-expand:active, .btn-widget-edit:active, .btn-alarm-on:active, .btn-alarm-off:active, .btn-sound-on:active, .btn-sound-off:active, .btn-info-clock:active, .btn-dashboard-conf:active, .interfaces .interface-row[data-type="2"] .interface-btn-toggle:active { background-color: transparent; opacity: 1; } @@ -5896,7 +5896,7 @@ svg { .preprocessing-list select { width: 100%; min-width: 0; } - .preprocessing-list .btn-link:not(:last-of-type), .preprocessing-list .interface-container .interface-row .interface-cell .interface-btn-toggle:not(:last-of-type), .interface-container .interface-row .interface-cell .preprocessing-list .interface-btn-toggle:not(:last-of-type) { + .preprocessing-list .btn-link:not(:last-of-type) { margin-right: 10px; } .preprocessing-list .preprocessing-list-head, .preprocessing-list .preprocessing-list-foot, @@ -6695,44 +6695,50 @@ button.icon-action-command, button.icon-action-close, button.icon-action-msg, bu /* for IE11 only. Fixed cell height if table has 100% height */ .host-avail-widget td { height: 100%; } } -.interface-container { - width: fit-content; - width: -moz-fit-content; - padding-left: 0; } - .interface-container:not(.interface-container-header):not(:empty) { - margin-bottom: 5px; } - .interface-container:not(.interface-container-header):not(:empty) ~ .interface-container:not(:empty) { - border-top: 1px solid #888888; - padding-top: 10px; } - .interface-container:empty { - display: none; } - .interface-container .interface-row { - display: grid; - grid-template-columns: 26px 36px 225px 175px 85px 100px 20px 1fr; - grid-template-rows: 24px 1fr; - gap: 5px; } - .interface-container .interface-row:not(:first-of-type) { - margin-top: 5px; } - .interface-container .interface-row[data-type] .interface-cell-details { - display: none; - grid-column: 1/-1; } - .interface-container .interface-row .interface-cell { - align-self: center; } - .interface-container .interface-row .interface-cell .interface-btn-toggle { - display: none; } - .interface-container .interface-row .interface-cell.interface-cell-header { - color: #333333; - text-align: left; } - .interface-container .interface-row .interface-cell .table-forms-td-left, - .interface-container .interface-row .interface-cell .table-forms-td-right { - padding-bottom: 0; } +.table-forms-td-right .interfaces { + margin-top: 5px; } -.interface-row.list-accordion-item[data-type="2"].list-accordion-item-closed .list-accordion-item-body { - display: none; } -.interface-row.list-accordion-item[data-type="2"].list-accordion-item-opened .list-accordion-item-body { - display: block; } -.interface-row.list-accordion-item[data-type="2"] .interface-btn-toggle { - display: inline-block; } +.interfaces { + display: grid; + grid-template-columns: 26px repeat(7, max-content); + margin-bottom: 5px; + line-height: 24px; } + .interfaces .interface-container { + display: contents; } + .interfaces .interface-container.interface-container-header .interface-cell { + padding: 0 5px 0 0; + color: #333333; } + .interfaces .interface-container.interface-container-header .interface-cell-action { + grid-column: span 2; } + .interfaces .interface-container:not(.interface-container-header):not(:empty) ~ .interface-container:not(:empty) .interface-cell:not(.interface-cell-details) { + padding-top: 10px; + margin-top: 5px; + border-top: 1px solid #888888; } + .interfaces .interface-row { + display: contents; } + .interfaces .interface-row[data-type="2"] .interface-btn-toggle { + display: inline-block; + width: 24px; + height: 24px; + background: url("../img/icon-sprite.svg?20211222") no-repeat -6px -690px; } + .interfaces .interface-row[data-type="2"] .list-accordion-item-body { + display: none; + padding-top: 0; } + .interfaces .interface-row[data-type="2"].list-accordion-item-opened .interface-btn-toggle { + background: url("../img/icon-sprite.svg?20211222") no-repeat -6px -655px; } + .interfaces .interface-row[data-type="2"].list-accordion-item-opened .list-accordion-item-body { + display: block; } + .interfaces .interface-cell { + padding: 5px 5px 5px 0; } + .interfaces .interface-cell.interface-cell-details { + display: none; + grid-column: 1 / -1; } + .interfaces .interface-btn-toggle { + display: none; + vertical-align: top; } + .interfaces .no-interface { + grid-column: 1 / -1; + color: #333333; } .debug-modal.overlay-dialogue.modal .overlay-dialogue-body { overflow-x: auto; } @@ -7051,10 +7057,10 @@ z-select.z-select-host-interface li[disabled] .description:not(:empty), .btn-widget-action { background: url("../img/icon-sprite.svg?20211222") no-repeat -165px -618px; } -.btn-widget-collapse, .interface-row.list-accordion-item[data-type="2"].list-accordion-item-opened .interface-btn-toggle { +.btn-widget-collapse { background: url("../img/icon-sprite.svg?20211222") no-repeat -165px -654px; } -.btn-widget-expand, .interface-row.list-accordion-item[data-type="2"].list-accordion-item-closed .interface-btn-toggle { +.btn-widget-expand { background: url("../img/icon-sprite.svg?20211222") no-repeat -165px -690px; } .btn-widget-edit { @@ -7198,10 +7204,10 @@ a.link-action { border: none !important; background-color: #666666 !important; } -.btn-link, .btn-link:hover, .btn-link:focus, .btn-link:active, .interface-container .interface-row .interface-cell .interface-btn-toggle { +.btn-link, .btn-link:hover, .btn-link:focus, .btn-link:active { font-weight: bold !important; color: #000000 !important; } - .btn-link:focus, .interface-container .interface-row .interface-cell .interface-btn-toggle:focus { + .btn-link:focus { margin-bottom: -3px !important; border-bottom: 3px solid #000000 !important; } @@ -7688,3 +7694,8 @@ td.inactive-bg { content: " /"; } .breadcrumbs > :last-child::after { content: ""; } + +.interfaces .interface-row[data-type="2"] .interface-btn-toggle { + background-position: -165px -690px; } +.interfaces .interface-row[data-type="2"].list-accordion-item-opened .interface-btn-toggle { + background-position: -165px -655px; } diff --git a/ui/include/defines.inc.php b/ui/include/defines.inc.php index f0a7b70b05a..f8c58aecb61 100644 --- a/ui/include/defines.inc.php +++ b/ui/include/defines.inc.php @@ -2096,6 +2096,7 @@ define('ZBX_STYLE_ICON_SECRET_TEXT', 'icon-secret'); define('ZBX_STYLE_ICON_HELP_HINT', 'icon-help-hint'); // Host interface styles. +define('ZBX_STYLE_HOST_INTERFACES', 'interfaces'); define('ZBX_STYLE_HOST_INTERFACE_CONTAINER', 'interface-container'); define('ZBX_STYLE_HOST_INTERFACE_CONTAINER_HEADER', 'interface-container-header'); define('ZBX_STYLE_HOST_INTERFACE_ROW', 'interface-row'); diff --git a/ui/include/views/configuration.host.prototype.edit.php b/ui/include/views/configuration.host.prototype.edit.php index 20f241ddcd5..30239ce5795 100644 --- a/ui/include/views/configuration.host.prototype.edit.php +++ b/ui/include/views/configuration.host.prototype.edit.php @@ -253,7 +253,8 @@ $host_tab->addRow( ->setModern(true) ->setReadonly($host_prototype['templateid'] != 0), (new CDiv([$interface_header, $agent_interfaces, $snmp_interfaces, $jmx_interfaces, $ipmi_interfaces])) - ->setId('interfaces-table'), + ->setId('interfaces-table') + ->addClass(ZBX_STYLE_HOST_INTERFACES), new CDiv( (new CButton('interface-add', _('Add'))) ->addClass(ZBX_STYLE_BTN_LINK) diff --git a/ui/js/hostinterfacemanager.js b/ui/js/hostinterfacemanager.js index 12200a7921f..61ca41115c1 100644 --- a/ui/js/hostinterfacemanager.js +++ b/ui/js/hostinterfacemanager.js @@ -46,7 +46,7 @@ class HostInterfaceManager { static ZBX_STYLE_HOST_INTERFACE_CONTAINER_HEADER = 'interface-container-header'; static ZBX_STYLE_HOST_INTERFACE_INPUT_EXPAND = 'interface-input-expand'; static ZBX_STYLE_HOST_INTERFACE_ROW = 'interface-row'; - static ZBX_STYLE_GREY = 'grey'; + static ZBX_STYLE_HOST_NO_INTERFACE = 'no-interface'; static ZBX_STYLE_LIST_ACCORDION_ITEM = 'list-accordion-item'; static ZBX_STYLE_LIST_ACCORDION_ITEM_OPENED = 'list-accordion-item-opened'; @@ -82,10 +82,7 @@ class HostInterfaceManager { this.$noInterfacesMsg = jQuery('<div>', { html: t('No interfaces are defined.'), - class: HostInterfaceManager.ZBX_STYLE_GREY, - css: { - 'padding': '5px 0px' - } + class: HostInterfaceManager.ZBX_STYLE_HOST_NO_INTERFACE }) .insertAfter(jQuery('.' + HostInterfaceManager.ZBX_STYLE_HOST_INTERFACE_CONTAINER_HEADER)); |