From 5d2e1ce19b297f767a403504ab2e79c1dec8caea 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 000000000..5d59c19c1 --- /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 2e101a21f..be21421b7 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 8feda9124..53ce949f6 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 000000000..a6aed4fa2 --- /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 000000000..4e9a908a2 --- /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 ba1359ed4..f2b222d53 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 98c0dec3e..2e9e794df 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 5d65866de..5945f6adb 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 d4be8335c..0b35d64c9 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 c7dea1fee..8239a88ca 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 b06698fed..3888776bd 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 ff44885a3..3cffc7e46 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 06b64a930..a9ec45a42 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 9b22b05f0..5f268ab54 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 96216d631..43ff813f0 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 5f1a9403d..b48120e81 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 9d26d4d66..87e4020af 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 e163ff534..88937a038 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 2d39692e3..000000000 --- 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 12b5ecc86..000000000 --- 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 7ff829e43..5f6aeec04 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 a97a159dc..ef15cac40 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 463d473f8..6b74e61f2 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 9a0662f9c..298cada99 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 d10ca5deb..ee1b95dfd 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 d4374c0d8..a5b67ca11 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 48bf64901..b3fc52b3f 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