From d01ef7225ab7e49b961b5afa25d00be78981abc2 Mon Sep 17 00:00:00 2001 From: John Cowen Date: Tue, 16 Jul 2019 17:33:28 +0100 Subject: [PATCH] ui: Add `stats-card` component, integrate more `@hashicorp/structure-icons` (#6021) 1. Rebuild the heathchecked-resource component now we can copy and paste 2. As the above rebuild came with new icons, we also swapped out 'most' of the other areas where we were using these new icons, plus any icons that were effected by the new icon placeholders 3. Begin to remove more and more of the project specific icons (now replaced by the shared ones) --- ui-v2/app/components/stats-card.js | 4 + .../styles/base/components/notice/layout.scss | 10 ++- .../styles/base/components/notice/skin.scss | 17 +--- .../components/stats-card}/index.scss | 0 .../base/components/stats-card/layout.scss | 54 ++++++++++++ .../base/components/stats-card/skin.scss | 31 +++++++ .../app/styles/base/icons/base-variables.scss | 8 ++ .../styles/base/icons/icon-placeholders.scss | 40 +++++++++ ui-v2/app/styles/components/filter-bar.scss | 30 +++---- .../styles/components/filter-bar/layout.scss | 19 ----- .../components/flash-message/layout.scss | 9 -- .../styles/components/flash-message/skin.scss | 15 ++-- .../styles/components/healthcheck-info.scss | 5 +- .../components/healthcheck-info/layout.scss | 10 --- .../components/healthcheck-info/skin.scss | 21 +++-- .../styles/components/healthcheck-output.scss | 34 ++++---- .../components/healthcheck-output/layout.scss | 13 +-- .../components/healthcheck-output/skin.scss | 6 -- .../components/healthchecked-resource.scss | 74 ++++++++++++++--- .../healthchecked-resource/layout.scss | 82 ------------------- .../healthchecked-resource/skin.scss | 33 -------- ui-v2/app/styles/components/icons/index.scss | 42 +--------- .../styles/components/modal-dialog/skin.scss | 4 - ui-v2/app/styles/components/notice.scss | 21 +++-- ui-v2/app/styles/core/typography.scss | 6 +- .../app/styles/routes/dc/intention/index.scss | 12 +-- ui-v2/app/styles/routes/dc/nodes/index.scss | 7 +- .../components/healthchecked-resource.hbs | 68 ++++++++------- ui-v2/app/templates/components/stats-card.hbs | 9 ++ ui-v2/app/templates/dc/nodes/index.hbs | 2 +- .../integration/components/stats-card-test.js | 35 ++++++++ 31 files changed, 380 insertions(+), 341 deletions(-) create mode 100644 ui-v2/app/components/stats-card.js rename ui-v2/app/styles/{components/healthchecked-resource => base/components/stats-card}/index.scss (100%) create mode 100644 ui-v2/app/styles/base/components/stats-card/layout.scss create mode 100644 ui-v2/app/styles/base/components/stats-card/skin.scss delete mode 100644 ui-v2/app/styles/components/healthchecked-resource/layout.scss delete mode 100644 ui-v2/app/styles/components/healthchecked-resource/skin.scss create mode 100644 ui-v2/app/templates/components/stats-card.hbs create mode 100644 ui-v2/tests/integration/components/stats-card-test.js diff --git a/ui-v2/app/components/stats-card.js b/ui-v2/app/components/stats-card.js new file mode 100644 index 0000000000..5d59c19c13 --- /dev/null +++ b/ui-v2/app/components/stats-card.js @@ -0,0 +1,4 @@ +import Component from '@ember/component'; +import Slotted from 'block-slots'; + +export default Component.extend(Slotted, {}); diff --git a/ui-v2/app/styles/base/components/notice/layout.scss b/ui-v2/app/styles/base/components/notice/layout.scss index 2e101a21f1..be21421b7f 100644 --- a/ui-v2/app/styles/base/components/notice/layout.scss +++ b/ui-v2/app/styles/base/components/notice/layout.scss @@ -1,11 +1,13 @@ %notice { position: relative; padding: 1em; - padding-left: 45px; +} +/* this is probably skin */ +%notice { + padding-left: calc(1em + 32px); } %notice::before { position: absolute; - left: 20px; - top: 18px; - margin-top: 0; + left: 16px; + top: 16px; } diff --git a/ui-v2/app/styles/base/components/notice/skin.scss b/ui-v2/app/styles/base/components/notice/skin.scss index 8feda9124e..53ce949f68 100644 --- a/ui-v2/app/styles/base/components/notice/skin.scss +++ b/ui-v2/app/styles/base/components/notice/skin.scss @@ -9,6 +9,9 @@ %notice-warning { @extend %notice; } +%notice::before { + @extend %as-pseudo; +} %notice-success { @extend %frame-green-500; } @@ -24,17 +27,3 @@ %notice-error { @extend %frame-red-500; } -%notice-highlight::before { - /* %with-star, bigger */ - width: 16px; - height: 16px; -} -%notice-success::before { - color: $color-success; -} -%notice-info::before { - color: $color-action; /* change to info */ -} -%notice-error::before { - color: $color-failure; -} diff --git a/ui-v2/app/styles/components/healthchecked-resource/index.scss b/ui-v2/app/styles/base/components/stats-card/index.scss similarity index 100% rename from ui-v2/app/styles/components/healthchecked-resource/index.scss rename to ui-v2/app/styles/base/components/stats-card/index.scss diff --git a/ui-v2/app/styles/base/components/stats-card/layout.scss b/ui-v2/app/styles/base/components/stats-card/layout.scss new file mode 100644 index 0000000000..a6aed4fa28 --- /dev/null +++ b/ui-v2/app/styles/base/components/stats-card/layout.scss @@ -0,0 +1,54 @@ +/*%stats-card li:not(:last-child) span {*/ +%stats-card { + position: relative; +} +%stats-card header a, +%stats-card header a > * { + display: block; +} +%stats-card header a > *, +%stats-card li a > :last-child { + /* TODO: %truncate */ + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; +} +%stats-card header a { + padding: 12px 15px; +} +%stats-card header > :not(a) { + @extend %stats-card-icon; +} +%stats-card-icon { + display: inline-flex; + align-items: center; +} +%stats-card-icon:last-child { + position: absolute; + background-size: 16px; + background-position: 5px 5px; + font-size: 1.5em; + width: 28px; + height: 28px; + top: calc(-28px / 2); + left: 15px; + font-size: 0; +} +%stats-card-icon:first-child { + float: right; + padding-left: 30px; + height: 16px; + margin-top: 15px; + margin-right: 15px; +} + +%stats-card li { + height: 33px; +} +%stats-card li a { + display: flex; + vertical-align: text-top; + align-items: center; + padding: 0 15px 0 12px; + height: 100%; +} diff --git a/ui-v2/app/styles/base/components/stats-card/skin.scss b/ui-v2/app/styles/base/components/stats-card/skin.scss new file mode 100644 index 0000000000..4e9a908a22 --- /dev/null +++ b/ui-v2/app/styles/base/components/stats-card/skin.scss @@ -0,0 +1,31 @@ +%stats-card { + border: $decor-border-100; + border-radius: $decor-radius-100; +} +%stats-card li { + border-top: $decor-border-100; +} +%stats-card, +%stats-card li { + border-color: $gray-200; +} +%stats-card, +%stats-card header::before { + box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.05); +} +%stats-card:hover, +%stats-card:focus { + box-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.1); +} +%stats-card header > :not(a):last-child { + border: $decor-border-100; + border-radius: 100%; + border-color: $gray-200; + background-color: $white; +} +%stats-card ul { + /*TODO: %list-style-none?*/ + list-style-type: none; + margin: 0; + padding: 0; +} diff --git a/ui-v2/app/styles/base/icons/base-variables.scss b/ui-v2/app/styles/base/icons/base-variables.scss index ba1359ed43..f2b222d53e 100644 --- a/ui-v2/app/styles/base/icons/base-variables.scss +++ b/ui-v2/app/styles/base/icons/base-variables.scss @@ -1,18 +1,22 @@ $alert-circle-fill-svg: url('data:image/svg+xml;charset=UTF-8,'); $alert-circle-outline-svg: url('data:image/svg+xml;charset=UTF-8,'); +$alert-triangle-color-svg: url('data:image/svg+xml;charset=UTF-8,'); $alert-triangle-svg: url('data:image/svg+xml;charset=UTF-8,'); $arrow-down-svg: url('data:image/svg+xml;charset=UTF-8,'); $arrow-left-svg: url('data:image/svg+xml;charset=UTF-8,'); +$arrow-right-color-svg: url('data:image/svg+xml;charset=UTF-8,'); $arrow-right-svg: url('data:image/svg+xml;charset=UTF-8,'); $arrow-up-svg: url('data:image/svg+xml;charset=UTF-8,'); $calendar-svg: url('data:image/svg+xml;charset=UTF-8,'); $cancel-circle-fill-svg: url('data:image/svg+xml;charset=UTF-8,'); $cancel-circle-outline-svg: url('data:image/svg+xml;charset=UTF-8,'); $cancel-plain-svg: url('data:image/svg+xml;charset=UTF-8,'); +$cancel-square-fill-color-svg: url('data:image/svg+xml;charset=UTF-8,'); $cancel-square-fill-svg: url('data:image/svg+xml;charset=UTF-8,'); $cancel-square-outline-svg: url('data:image/svg+xml;charset=UTF-8,'); $caret-down-svg: url('data:image/svg+xml;charset=UTF-8,'); $caret-up-svg: url('data:image/svg+xml;charset=UTF-8,'); +$check-circle-fill-color-svg: url('data:image/svg+xml;charset=UTF-8,'); $check-circle-fill-svg: url('data:image/svg+xml;charset=UTF-8,'); $check-circle-outline-svg: url('data:image/svg+xml;charset=UTF-8,'); $check-plain-svg: url('data:image/svg+xml;charset=UTF-8,'); @@ -28,6 +32,8 @@ $code-svg: url('data:image/svg+xml;charset=UTF-8,'); $copy-action-svg: url('data:image/svg+xml;charset=UTF-8,'); $copy-success-svg: url('data:image/svg+xml;charset=UTF-8,'); +$deny-color-svg: url('data:image/svg+xml;charset=UTF-8,'); +$deny-svg: url('data:image/svg+xml;charset=UTF-8,'); $disabled-svg: url('data:image/svg+xml;charset=UTF-8,'); $docs-svg: url('data:image/svg+xml;charset=UTF-8,'); $download-svg: url('data:image/svg+xml;charset=UTF-8,'); @@ -49,6 +55,7 @@ $hashicorp-logo-svg: url('data:image/svg+xml;charset=UTF-8,'); $help-circle-outline-svg: url('data:image/svg+xml;charset=UTF-8,'); $history-svg: url('data:image/svg+xml;charset=UTF-8,'); +$info-circle-fill-color-svg: url('data:image/svg+xml;charset=UTF-8,'); $info-circle-fill-svg: url('data:image/svg+xml;charset=UTF-8,'); $info-circle-outline-svg: url('data:image/svg+xml;charset=UTF-8,'); $kubernetes-logo-color-svg: url('data:image/svg+xml;charset=UTF-8,'); @@ -62,6 +69,7 @@ $menu-svg: url('data:image/svg+xml;charset=UTF-8,'); $minus-circle-outline-svg: url('data:image/svg+xml;charset=UTF-8,'); $minus-plain-svg: url('data:image/svg+xml;charset=UTF-8,'); +$minus-square-fill-color-svg: url('data:image/svg+xml;charset=UTF-8,'); $minus-square-fill-svg: url('data:image/svg+xml;charset=UTF-8,'); $minus-svg: url('data:image/svg+xml;charset=UTF-8,'); $more-horizontal-svg: url('data:image/svg+xml;charset=UTF-8,'); diff --git a/ui-v2/app/styles/base/icons/icon-placeholders.scss b/ui-v2/app/styles/base/icons/icon-placeholders.scss index 98c0dec3ec..2e9e794dfe 100644 --- a/ui-v2/app/styles/base/icons/icon-placeholders.scss +++ b/ui-v2/app/styles/base/icons/icon-placeholders.scss @@ -8,6 +8,11 @@ background-image: $alert-circle-outline-svg; } +%with-alert-triangle-color-icon { + @extend %with-icon; + background-image: $alert-triangle-color-svg; +} + %with-alert-triangle-icon { @extend %with-icon; background-image: $alert-triangle-svg; @@ -23,6 +28,11 @@ background-image: $arrow-left-svg; } +%with-arrow-right-color-icon { + @extend %with-icon; + background-image: $arrow-right-color-svg; +} + %with-arrow-right-icon { @extend %with-icon; background-image: $arrow-right-svg; @@ -53,6 +63,11 @@ background-image: $cancel-plain-svg; } +%with-cancel-square-fill-color-icon { + @extend %with-icon; + background-image: $cancel-square-fill-color-svg; +} + %with-cancel-square-fill-icon { @extend %with-icon; background-image: $cancel-square-fill-svg; @@ -73,6 +88,11 @@ background-image: $caret-up-svg; } +%with-check-circle-fill-color-icon { + @extend %with-icon; + background-image: $check-circle-fill-color-svg; +} + %with-check-circle-fill-icon { @extend %with-icon; background-image: $check-circle-fill-svg; @@ -148,6 +168,16 @@ background-image: $copy-success-svg; } +%with-deny-color-icon { + @extend %with-icon; + background-image: $deny-color-svg; +} + +%with-deny-icon { + @extend %with-icon; + background-image: $deny-svg; +} + %with-disabled-icon { @extend %with-icon; background-image: $disabled-svg; @@ -253,6 +283,11 @@ background-image: $history-svg; } +%with-info-circle-fill-color-icon { + @extend %with-icon; + background-image: $info-circle-fill-color-svg; +} + %with-info-circle-fill-icon { @extend %with-icon; background-image: $info-circle-fill-svg; @@ -318,6 +353,11 @@ background-image: $minus-plain-svg; } +%with-minus-square-fill-color-icon { + @extend %with-icon; + background-image: $minus-square-fill-color-svg; +} + %with-minus-square-fill-icon { @extend %with-icon; background-image: $minus-square-fill-svg; diff --git a/ui-v2/app/styles/components/filter-bar.scss b/ui-v2/app/styles/components/filter-bar.scss index 5d65866dee..5945f6adb9 100644 --- a/ui-v2/app/styles/components/filter-bar.scss +++ b/ui-v2/app/styles/components/filter-bar.scss @@ -1,33 +1,29 @@ @import './filter-bar/index'; @import './expanded-single-select/index'; -@import './icons/index'; .filter-bar { @extend %filter-bar; } %filter-bar [role='radiogroup'] { @extend %expanded-single-select; } -%filter-bar .value-passing span { - @extend %with-passing; +%filter-bar span::before { + margin-right: 9px; + opacity: 0.4; + margin-left: -2px; } -%filter-bar .value-warning span { - @extend %with-warning; + +%filter-bar .value-passing span::before { + @extend %with-check-circle-fill-icon, %as-pseudo; } %filter-bar .value-warning span::before { - @extend %with-warning-icon-grey; + @extend %with-alert-triangle-icon, %as-pseudo; } -%filter-bar .value-allow span { - @extend %with-allow; -} -%filter-bar .value-deny span { - @extend %with-deny; -} -%filter-bar .value-deny span::before { - @extend %with-deny-icon-grey; +%filter-bar .value-critical span::before { + @extend %with-cancel-square-fill-icon, %as-pseudo; } %filter-bar .value-allow span::before { - @extend %with-right-arrow-grey; + @extend %with-arrow-right-icon, %as-pseudo; } -%filter-bar .value-critical span { - @extend %with-critical; +%filter-bar .value-deny span::before { + @extend %with-deny-icon, %as-pseudo; } diff --git a/ui-v2/app/styles/components/filter-bar/layout.scss b/ui-v2/app/styles/components/filter-bar/layout.scss index d4be8335c6..0b35d64c99 100644 --- a/ui-v2/app/styles/components/filter-bar/layout.scss +++ b/ui-v2/app/styles/components/filter-bar/layout.scss @@ -22,22 +22,3 @@ margin-bottom: 12px; } } -// icons -%filter-bar [role='radiogroup'] label span::before { - left: 11px; - top: 50%; - margin-top: -0.5em; -} -%filter-bar .value-allow span, -%filter-bar .value-deny span, -%filter-bar .value-passing span, -%filter-bar .value-warning span, -%filter-bar .value-critical span { - position: relative; - text-indent: 23px; -} -%filter-bar .value-warning span::after { - left: 0.7em; - top: 50%; - margin-top: -8px; -} diff --git a/ui-v2/app/styles/components/flash-message/layout.scss b/ui-v2/app/styles/components/flash-message/layout.scss index c7dea1fee6..8239a88caf 100644 --- a/ui-v2/app/styles/components/flash-message/layout.scss +++ b/ui-v2/app/styles/components/flash-message/layout.scss @@ -10,12 +10,3 @@ position: absolute; padding: 9px 15px; } -%flash-message p strong { - position: relative; - display: inline-block; - padding-left: 20px; -} -%flash-message p strong::before { - left: 0; - margin-top: -0.5em !important; -} diff --git a/ui-v2/app/styles/components/flash-message/skin.scss b/ui-v2/app/styles/components/flash-message/skin.scss index b06698fed8..3888776bd8 100644 --- a/ui-v2/app/styles/components/flash-message/skin.scss +++ b/ui-v2/app/styles/components/flash-message/skin.scss @@ -2,14 +2,17 @@ border-width: 1px; border-radius: $decor-radius-100; } -%flash-message p.success strong { - @extend %with-passing; +%flash-message p strong::before { + @extend %as-pseudo; } -%flash-message p.warning strong { - @extend %with-warning; +%flash-message p.success strong::before { + @extend %with-check-circle-fill-color-icon; } -%flash-message p.error strong { - @extend %with-critical; +%flash-message p.warning strong::before { + @extend %with-alert-triangle-color-icon; +} +%flash-message p.error strong::before { + @extend %with-cancel-square-fill-color-icon; } %flash-message p.success { @extend %frame-green-500; diff --git a/ui-v2/app/styles/components/healthcheck-info.scss b/ui-v2/app/styles/components/healthcheck-info.scss index ff44885a30..3cffc7e460 100644 --- a/ui-v2/app/styles/components/healthcheck-info.scss +++ b/ui-v2/app/styles/components/healthcheck-info.scss @@ -3,9 +3,10 @@ tr .healthcheck-info { @extend %healthcheck-info; } +// TODO: Look at why we can't have the zeros in the healthcheck-info td span.zero { - @extend %with-no-healthchecks; - // TODO: Why isn't this in layout? + @extend %with-minus-square-fill-color-icon; + background-position: left center; display: block; text-indent: 20px; color: $gray-400; diff --git a/ui-v2/app/styles/components/healthcheck-info/layout.scss b/ui-v2/app/styles/components/healthcheck-info/layout.scss index 06b64a930a..a9ec45a422 100644 --- a/ui-v2/app/styles/components/healthcheck-info/layout.scss +++ b/ui-v2/app/styles/components/healthcheck-info/layout.scss @@ -4,22 +4,12 @@ %healthcheck-info > * { display: block; } -%healthcheck-info dt { - text-indent: -9000px; -} %healthcheck-info dt.zero { display: none; } %healthcheck-info dd.zero { visibility: hidden; } -%healthcheck-info dt.warning::before { - top: 7px; -} -%healthcheck-info dt.warning::after { - left: -2px; - top: -1px; -} %healthcheck-info dd { box-sizing: content-box; margin-left: 22px; diff --git a/ui-v2/app/styles/components/healthcheck-info/skin.scss b/ui-v2/app/styles/components/healthcheck-info/skin.scss index 9b22b05f01..5f268ab548 100644 --- a/ui-v2/app/styles/components/healthcheck-info/skin.scss +++ b/ui-v2/app/styles/components/healthcheck-info/skin.scss @@ -1,11 +1,20 @@ -%healthcheck-info dt.passing { - @extend %with-passing; +%healthcheck-info dt { + font-size: 0; } -%healthcheck-info dt.warning { - @extend %with-warning; +%healthcheck-info dt::before { + @extend %as-pseudo; + position: absolute; + width: 18px; + height: 18px; } -%healthcheck-info dt.critical { - @extend %with-critical; +%healthcheck-info dt.passing::before { + @extend %with-check-circle-fill-color-icon; +} +%healthcheck-info dt.warning::before { + @extend %with-alert-triangle-color-icon; +} +%healthcheck-info dt.critical::before { + @extend %with-cancel-square-fill-color-icon; } %healthcheck-info dt.passing, %healthcheck-info dt.passing + dd { diff --git a/ui-v2/app/styles/components/healthcheck-output.scss b/ui-v2/app/styles/components/healthcheck-output.scss index 96216d6315..43ff813f07 100644 --- a/ui-v2/app/styles/components/healthcheck-output.scss +++ b/ui-v2/app/styles/components/healthcheck-output.scss @@ -1,35 +1,41 @@ @import './healthcheck-output/index'; -@import './icons/index'; .healthcheck-output { @extend %healthcheck-output; } -%healthcheck-output.passing { - @extend %with-passing; +%healthcheck-output::before { + @extend %as-pseudo; + position: absolute; + width: 32px; + height: 32px; } -%healthcheck-output.warning { - @extend %with-warning; +%healthcheck-output.passing::before { + @extend %with-check-circle-fill-color-icon; } -%healthcheck-output.critical { - @extend %with-critical; +%healthcheck-output.warning::before { + @extend %with-alert-triangle-color-icon; +} +%healthcheck-output.critical::before { + @extend %with-cancel-square-fill-color-icon; } @media #{$--lt-spacious-healthcheck-output} { .healthcheck-output button.copy-btn { - margin-top: -11px; - margin-right: -18px; + margin-top: -2px; + margin-right: -10px; padding: 0; + min-width: 20px !important; width: 20px; visibility: hidden; } %healthcheck-output { - padding-left: 30px; - padding-top: 10px; + padding-left: 40px; + padding-top: 12px; padding-bottom: 15px; padding-right: 13px; } %healthcheck-output::before { - width: 15px !important; - height: 15px !important; left: 9px; - top: 13px !important; + top: 13px; + width: 24px; + height: 24px; } } diff --git a/ui-v2/app/styles/components/healthcheck-output/layout.scss b/ui-v2/app/styles/components/healthcheck-output/layout.scss index 5f1a9403de..b48120e811 100644 --- a/ui-v2/app/styles/components/healthcheck-output/layout.scss +++ b/ui-v2/app/styles/components/healthcheck-output/layout.scss @@ -1,20 +1,13 @@ %healthcheck-output::before { - background-size: 55%; - width: 25px !important; - height: 25px !important; - left: 17px; - top: 20px !important; - margin-top: 0 !important; -} -%healthcheck-output.warning::before { - background-size: 100%; + left: 14px; + top: 20px; } %healthcheck-output { + position: relative; padding: 20px 24px; padding-bottom: 26px; padding-left: 57px; margin-bottom: 24px; - position: relative; } %healthcheck-output pre { padding: 12px; diff --git a/ui-v2/app/styles/components/healthcheck-output/skin.scss b/ui-v2/app/styles/components/healthcheck-output/skin.scss index 9d26d4d663..87e4020afe 100644 --- a/ui-v2/app/styles/components/healthcheck-output/skin.scss +++ b/ui-v2/app/styles/components/healthcheck-output/skin.scss @@ -27,9 +27,3 @@ @extend %frame-red-500; color: $gray-900; } -%healthcheck-output.passing::before { - background-color: $color-success !important; -} -%healthcheck-output.critical::before { - background-color: $color-danger !important; -} diff --git a/ui-v2/app/styles/components/healthchecked-resource.scss b/ui-v2/app/styles/components/healthchecked-resource.scss index e163ff534e..88937a0386 100644 --- a/ui-v2/app/styles/components/healthchecked-resource.scss +++ b/ui-v2/app/styles/components/healthchecked-resource.scss @@ -1,14 +1,68 @@ -@import './healthchecked-resource/index'; -@import './icons/index'; -.healthchecked-resource { - @extend %healthchecked-resource; +@import '../base/components/stats-card/index'; +.healthchecked-resource > div { + @extend %stats-card; } -%healthchecked-resource li.passing { - @extend %with-passing; + +%tooltip-below::after { + top: calc(100% - 8px); + bottom: auto; + border-top: none; + border-bottom: 18px solid $gray-500; } -%healthchecked-resource li.warning { - @extend %with-warning; +%tooltip-below::before { + top: calc(100% + 4px); + bottom: auto; } -%healthchecked-resource li.critical { - @extend %with-critical; +%tooltip-left::before { + right: 0; +} +%tooltip-right::before { + left: -10px; +} +%stats-card-icon { + @extend %tooltip-below; + /*TODO: This should probably go into base*/ + line-height: 1em; +} +%stats-card-icon:first-child::before { + right: 0; +} +%stats-card-icon:last-child::before { + left: -10px; +} + +%stats-card-icon:last-child { + @extend %with-star-icon; +} +%stats-card header > .zero { + @extend %with-minus-square-fill-color-icon; + color: $gray-400; +} +%stats-card header > .non-zero { + @extend %with-check-circle-fill-color-icon; + color: $green-500; +} + +%stats-card li a > :first-child { + font-size: 0; + height: 16px; + min-width: 16px; +} +[data-tooltip] { + @extend %with-pseudo-tooltip; +} +%stats-card li a > :last-child { + margin-left: 10px; +} +%stats-card a > :first-child::before { + left: -10px; +} +%stats-card a.passing > :first-child { + @extend %with-check-circle-fill-color-icon; +} +%stats-card a.warning > :first-child { + @extend %with-alert-triangle-color-icon; +} +%stats-card a.critical > :first-child { + @extend %with-cancel-square-fill-color-icon; } diff --git a/ui-v2/app/styles/components/healthchecked-resource/layout.scss b/ui-v2/app/styles/components/healthchecked-resource/layout.scss deleted file mode 100644 index 2d39692e35..0000000000 --- a/ui-v2/app/styles/components/healthchecked-resource/layout.scss +++ /dev/null @@ -1,82 +0,0 @@ -%healthchecked-resource header strong, -%healthchecked-resource header span, -%healthchecked-resource header em, -%healthchecked-resource li:not(:last-child) span { - overflow: hidden; - display: inline-block; - white-space: nowrap; - text-overflow: ellipsis; - max-width: 100%; -} -%healthchecked-resource li:last-child:not(:only-child) { - overflow: hidden; - white-space: nowrap; -} -%healthchecked-resource, -%healthchecked-resource header, -%healthchecked-resource li { - position: relative; -} -%healthchecked-resource header strong { - position: absolute; -} -%healthchecked-resource a, -%healthchecked-resource header a > * { - display: block; -} -%healthchecked-resource li::before { - left: 11px; - top: 50%; - margin-top: -0.49em !important; -} -.healthy .healthchecked-resource header span { - padding-right: 20px; -} -.healthy .healthchecked-resource li { - position: absolute; - top: 8px; - right: 16px; - border: none; -} -.healthy .healthchecked-resource li::before { - left: 0; -} -.healthy .healthchecked-resource li span { - display: none; -} -.healthy .healthchecked-resource li a { - padding-left: 0; -} -%healthchecked-resource header strong { - top: 2.8em; - padding: 0 15px; -} -%healthchecked-resource header span { - margin-bottom: 1.75em; -} -%healthchecked-resource header a { - padding: 12px 15px; -} -.unhealthy .healthchecked-resource header a { - padding-bottom: 15px; -} -.unhealthy .healthchecked-resource header.with-service a { - padding-bottom: 25px; -} -%healthchecked-resource li a { - padding: 3px 15px; - padding-top: 4px; - padding-left: 39px; - height: 31px; -} -%healthchecked-resource li:not(.passing) strong, -.healthy .healthchecked-resource li:only-child strong { - display: none; -} -%healthchecked-resource ul:empty { - position: absolute; - top: 18px; - right: 20px; - width: 1em; - height: 1em; -} diff --git a/ui-v2/app/styles/components/healthchecked-resource/skin.scss b/ui-v2/app/styles/components/healthchecked-resource/skin.scss deleted file mode 100644 index 12b5ecc86e..0000000000 --- a/ui-v2/app/styles/components/healthchecked-resource/skin.scss +++ /dev/null @@ -1,33 +0,0 @@ -%healthchecked-resource { - border: $decor-border-100; - box-shadow: 0 4px 8px 0 rgba($black, 0.05); -} -%healthchecked-resource li { - border-top: $decor-border-100; -} -%healthchecked-resource, -%healthchecked-resource li { - border-color: $gray-200; -} -%healthchecked-resource li.passing { - color: $color-success; -} -%healthchecked-resource li.warning { - color: $color-alert; -} -%healthchecked-resource li.critical { - color: $color-failure; -} -%healthchecked-resource:hover, -%healthchecked-resource:focus { - box-shadow: 0 8px 10px 0 rgba($black, 0.1); -} -%healthchecked-resource { - border-radius: $radius-small; -} -%healthchecked-resource ul:empty { - @extend %with-no-healthchecks; -} -%healthchecked-resource ul:empty::before { - color: $gray-400; -} diff --git a/ui-v2/app/styles/components/icons/index.scss b/ui-v2/app/styles/components/icons/index.scss index 7ff829e43a..5f6aeec04f 100644 --- a/ui-v2/app/styles/components/icons/index.scss +++ b/ui-v2/app/styles/components/icons/index.scss @@ -207,14 +207,6 @@ @extend %pseudo-icon; background-image: url('data:image/svg+xml;charset=UTF-8,'); } -%with-warning-icon-orange { - @extend %pseudo-icon; - background-image: url('data:image/svg+xml;charset=UTF-8,'); -} -%with-warning-icon-grey { - @extend %pseudo-icon; - background-image: url('data:image/svg+xml;charset=UTF-8,'); -} %with-right-arrow-green { @extend %pseudo-icon; background-image: url('data:image/svg+xml;charset=UTF-8,'); @@ -226,39 +218,7 @@ @extend %pseudo-icon; background-image: url('data:image/svg+xml;charset=UTF-8,'); } -%with-deny-icon { - @extend %pseudo-icon; - background-image: url('data:image/svg+xml;charset=UTF-8,'); - width: 16px; - height: 16px; - background-color: $color-transparent; -} -%with-deny-icon-grey { - @extend %pseudo-icon; - background-image: url('data:image/svg+xml;charset=UTF-8,'); -} -%with-deny::before { - @extend %with-deny-icon; -} -%with-allow::before { - @extend %with-right-arrow-green; -} -%with-passing::before { - @extend %with-tick; - border-radius: 100%; -} -%with-warning::before { - @extend %with-warning-icon-orange; - background-color: $color-transparent; -} -%with-critical::before { - @extend %with-cross; - border-radius: 20%; -} -%with-no-healthchecks::before { - @extend %with-minus; - border-radius: 20%; -} +// swap this out for new icons %with-error { position: relative; padding-left: 18px; diff --git a/ui-v2/app/styles/components/modal-dialog/skin.scss b/ui-v2/app/styles/components/modal-dialog/skin.scss index a97a159dcc..ef15cac407 100644 --- a/ui-v2/app/styles/components/modal-dialog/skin.scss +++ b/ui-v2/app/styles/components/modal-dialog/skin.scss @@ -20,10 +20,6 @@ %modal-window > header { border-bottom-width: 1px; } -%modal-window.warning > header { - @extend %with-warning; - text-indent: 20px; -} %modal-window > header [for='modal_close'] { @extend %bg-icon; diff --git a/ui-v2/app/styles/components/notice.scss b/ui-v2/app/styles/components/notice.scss index 463d473f8d..6b74e61f22 100644 --- a/ui-v2/app/styles/components/notice.scss +++ b/ui-v2/app/styles/components/notice.scss @@ -2,21 +2,20 @@ %notice { margin-bottom: 1em; } -/* These need replacing with new icons */ -%notice-success { - @extend %with-passing; +%notice-success::before { + @extend %with-check-circle-fill-color-icon; } -%notice-info { - @extend %with-passing; /* needs a better info button*/ +%notice-info::before { + @extend %with-info-circle-fill-color-icon; } -%notice-highlight { - @extend %with-star; +%notice-highlight::before { + @extend %with-star-icon; } -%notice-warning { - @extend %with-warning; +%notice-warning::before { + @extend %with-alert-triangle-color-icon; } -%notice-error { - @extend %with-critical; +%notice-error::before { + @extend %with-cancel-square-fill-color-icon; } /**/ .notice.warning { diff --git a/ui-v2/app/styles/core/typography.scss b/ui-v2/app/styles/core/typography.scss index 9a0662f9c4..298cada999 100644 --- a/ui-v2/app/styles/core/typography.scss +++ b/ui-v2/app/styles/core/typography.scss @@ -40,7 +40,6 @@ h3, fieldset > header, caption, %header-nav, -%healthchecked-resource header span, %healthcheck-output dt, %copy-button, %app-content div > dl > dt, @@ -56,7 +55,6 @@ main label a[rel*='help'], %pill, %tbody-th em, %form-element > strong, -%healthchecked-resource strong, %app-view h1 em { font-weight: $typo-weight-normal; } @@ -72,7 +70,6 @@ td strong, /* Styling */ %form-element > em, %tbody-th em, -%healthchecked-resource header em, %app-view h1 em { font-style: normal; } @@ -91,7 +88,6 @@ h2 { h3 { font-size: $typo-header-300; } -%healthcheck-info dt, %header-drop-nav .is-active, %app-view h1 em { font-size: $typo-size-500; @@ -110,7 +106,7 @@ caption, .type-dialog, %form-element > span, %tooltip-bubble, -%healthchecked-resource strong, +%stats-card header a span, %footer, %app-view h1 span.kind-proxy { font-size: $typo-size-700; diff --git a/ui-v2/app/styles/routes/dc/intention/index.scss b/ui-v2/app/styles/routes/dc/intention/index.scss index d10ca5debb..ee1b95dfd1 100644 --- a/ui-v2/app/styles/routes/dc/intention/index.scss +++ b/ui-v2/app/styles/routes/dc/intention/index.scss @@ -1,10 +1,12 @@ -html.template-intention.template-list td.intent-allow strong { - @extend %with-allow; +html.template-intention.template-list td strong { visibility: hidden; } -html.template-intention.template-list td.intent-deny strong { - @extend %with-deny; - visibility: hidden; +html.template-intention.template-list td.intent-allow strong::before { + @extend %with-arrow-right-color-icon, %as-pseudo; + background-size: 24px; +} +html.template-intention.template-list td.intent-deny strong::before { + @extend %with-deny-color-icon, %as-pseudo; } html.template-intention.template-list td.destination { @extend %tbody-th; diff --git a/ui-v2/app/styles/routes/dc/nodes/index.scss b/ui-v2/app/styles/routes/dc/nodes/index.scss index d4374c0d87..a5b67ca117 100644 --- a/ui-v2/app/styles/routes/dc/nodes/index.scss +++ b/ui-v2/app/styles/routes/dc/nodes/index.scss @@ -4,10 +4,15 @@ html.template-node.template-show .sessions td:last-child { html.template-node.template-show .sessions td:first-child { @extend %tbody-th; } -html.template-node.template-list .healthy h2, html.template-node.template-list .unhealthy h2 { margin-bottom: 0.7em; } html.template-node.template-show #meta-data table tr { cursor: default; } +.healthy > div > ul > li { + padding-top: 16px; +} +.healthy h2 { + margin-bottom: 0em !important; +} diff --git a/ui-v2/app/templates/components/healthchecked-resource.hbs b/ui-v2/app/templates/components/healthchecked-resource.hbs index 48bf64901e..b3fc52b3f2 100644 --- a/ui-v2/app/templates/components/healthchecked-resource.hbs +++ b/ui-v2/app/templates/components/healthchecked-resource.hbs @@ -1,32 +1,38 @@ -
- {{address}} - - {{name}} - {{service}} - -
- {{! its important to keep this