From e6aaabaddb396ac83c447e9bf13ac0109eb5cebc Mon Sep 17 00:00:00 2001 From: John Cowen Date: Tue, 23 Jul 2019 15:03:54 +0100 Subject: [PATCH] ui: Change layout styling for healthcheckoutput, add CheckID (#6195) --- ui-v2/app/components/healthcheck-output.js | 3 +- .../styles/components/healthcheck-output.scss | 37 --------- .../components/healthcheck-output/layout.scss | 80 +++++++++++++++---- .../components/healthcheck-output/skin.scss | 40 ++++++++-- ui-v2/app/styles/components/product.scss | 8 ++ ui-v2/app/styles/core/typography.scss | 1 + ui-v2/app/styles/variables/custom-query.scss | 4 +- .../templates/components/healthcheck-list.hbs | 27 ++++++- .../components/healthcheck-output.hbs | 45 ++++++----- 9 files changed, 160 insertions(+), 85 deletions(-) diff --git a/ui-v2/app/components/healthcheck-output.js b/ui-v2/app/components/healthcheck-output.js index 227501fc5..35c2e7a28 100644 --- a/ui-v2/app/components/healthcheck-output.js +++ b/ui-v2/app/components/healthcheck-output.js @@ -1,5 +1,6 @@ import Component from '@ember/component'; +import Slotted from 'block-slots'; -export default Component.extend({ +export default Component.extend(Slotted, { classNames: ['healthcheck-output'], }); diff --git a/ui-v2/app/styles/components/healthcheck-output.scss b/ui-v2/app/styles/components/healthcheck-output.scss index 43ff813f0..6c3ccb5ed 100644 --- a/ui-v2/app/styles/components/healthcheck-output.scss +++ b/ui-v2/app/styles/components/healthcheck-output.scss @@ -2,40 +2,3 @@ .healthcheck-output { @extend %healthcheck-output; } -%healthcheck-output::before { - @extend %as-pseudo; - position: absolute; - width: 32px; - height: 32px; -} -%healthcheck-output.passing::before { - @extend %with-check-circle-fill-color-icon; -} -%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: -2px; - margin-right: -10px; - padding: 0; - min-width: 20px !important; - width: 20px; - visibility: hidden; - } - %healthcheck-output { - padding-left: 40px; - padding-top: 12px; - padding-bottom: 15px; - padding-right: 13px; - } - %healthcheck-output::before { - left: 9px; - 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 b48120e81..629ef0fe9 100644 --- a/ui-v2/app/styles/components/healthcheck-output/layout.scss +++ b/ui-v2/app/styles/components/healthcheck-output/layout.scss @@ -1,23 +1,75 @@ -%healthcheck-output::before { - left: 14px; - top: 20px; -} %healthcheck-output { - position: relative; - padding: 20px 24px; - padding-bottom: 26px; - padding-left: 57px; + display: flex; + + padding: 20px 16px; + padding-right: 24px; + margin-bottom: 24px; } +%healthcheck-output::before { + margin-right: 15px; +} +%healthcheck-output > div { + flex: 1 1 auto; +} +%healthcheck-output header { + margin-bottom: 0.9em; +} +%healthcheck-output dl:not(:last-of-type) { + float: left; + width: 25%; + margin-right: 2%; +} +%healthcheck-output dl:nth-of-type(3) { + width: 46%; + margin-right: 0; +} +%healthcheck-output dl:not(:last-of-type) dd { + word-break: break-all; +} +%healthcheck-output dt { + margin-bottom: 0; +} +%healthcheck-output dl:last-of-type { + clear: both; + margin-bottom: 0; +} +%healthcheck-output dl:last-of-type dt { + margin-bottom: 0.3em; +} +%healthcheck-output dl:last-of-type dd { + position: relative; +} +%healthcheck-output dl > * { + float: none; + display: block; + width: auto; + position: static; + padding-left: 0; +} %healthcheck-output pre { padding: 12px; + padding-right: 40px; + white-space: pre-wrap; } %healthcheck-output .with-feedback { - float: right; + position: absolute; + right: 0.5em; + top: 1em; } -%healthcheck-output dt { - margin-bottom: 0.2em; -} -%healthcheck-output dd:first-of-type { - margin-bottom: 0.6em; +@media #{$--lt-spacious-healthcheck-output} { + %healthcheck-output { + padding-top: 15px; + padding-bottom: 15px; + padding-left: 14px; + padding-right: 19px; + } + %healthcheck-output::before { + margin-right: 8px; + } + %healthcheck-output dl:not(:last-of-type) { + float: none; + width: auto; + margin-right: 0; + } } diff --git a/ui-v2/app/styles/components/healthcheck-output/skin.scss b/ui-v2/app/styles/components/healthcheck-output/skin.scss index 87e4020af..ba90f3fc5 100644 --- a/ui-v2/app/styles/components/healthcheck-output/skin.scss +++ b/ui-v2/app/styles/components/healthcheck-output/skin.scss @@ -1,6 +1,28 @@ %healthcheck-output { border-width: 1px; } +%healthcheck-output::before { + @extend %as-pseudo; + min-width: 26px; + min-height: 26px; + margin-right: 15px; +} +@media #{$--lt-spacious-healthcheck-output} { + %healthcheck-output::before { + min-width: 18px; + min-height: 18px; + margin-right: 8px; + } +} +%healthcheck-output.passing::before { + @extend %with-check-circle-fill-color-icon; +} +%healthcheck-output.warning::before { + @extend %with-alert-triangle-color-icon; +} +%healthcheck-output.critical::before { + @extend %with-cancel-square-fill-color-icon; +} %healthcheck-output, %healthcheck-output pre { border-radius: $decor-radius-100; @@ -9,21 +31,23 @@ color: $gray-400; } %healthcheck-output pre { - background-color: $black; - color: $white; + background-color: $gray-050; + color: $gray-600; } -%healthcheck-output.passing { +%healthcheck-output { /* TODO: this should be a frame-gray */ - // @extend %frame-green-500; color: $gray-900; border-color: $gray-200; border-style: solid; + + border-left-width: 4px; +} +%healthcheck-output.passing { + border-left-color: $green-500; } %healthcheck-output.warning { - @extend %frame-yellow-500; - color: $gray-900; + border-left-color: $yellow-500; } %healthcheck-output.critical { - @extend %frame-red-500; - color: $gray-900; + border-left-color: $red-500; } diff --git a/ui-v2/app/styles/components/product.scss b/ui-v2/app/styles/components/product.scss index 90fa382b2..89d0bdeb7 100644 --- a/ui-v2/app/styles/components/product.scss +++ b/ui-v2/app/styles/components/product.scss @@ -55,10 +55,18 @@ html.template-loading main > div { display: none; } } +// reduced search magnifying icon layout @media #{$--lt-horizontal-selects} { %app-view header h1 { display: inline-block; } + %app-view header h1 { + display: inline-block; + } + // on the instance detail page we don't have the magnifier + html.template-instance.template-show h1 { + display: block; + } #toolbar-toggle + * { display: none; } diff --git a/ui-v2/app/styles/core/typography.scss b/ui-v2/app/styles/core/typography.scss index 298cada99..154cbe8e8 100644 --- a/ui-v2/app/styles/core/typography.scss +++ b/ui-v2/app/styles/core/typography.scss @@ -104,6 +104,7 @@ th, td, caption, .type-dialog, +%healthcheck-output dl > *, %form-element > span, %tooltip-bubble, %stats-card header a span, diff --git a/ui-v2/app/styles/variables/custom-query.scss b/ui-v2/app/styles/variables/custom-query.scss index 3f31e5581..90523b12d 100644 --- a/ui-v2/app/styles/variables/custom-query.scss +++ b/ui-v2/app/styles/variables/custom-query.scss @@ -26,8 +26,8 @@ $--lt-wide-footer: '(max-width: 420px)'; $--spacious-page-header: '(min-width: 850px)'; $--lt-spacious-page-header: '(max-width: 849px)'; -$--spacious-healthcheck-output: '(min-width: 421px)'; -$--lt-spacious-healthcheck-output: '(max-width: 420px)'; +$--spacious-healthcheck-output: '(min-width: 651px)'; +$--lt-spacious-healthcheck-output: '(max-width: 650px)'; $--wide-form: '(min-width: 421px)'; $--lt-wide-form: '(max-width: 420px)'; diff --git a/ui-v2/app/templates/components/healthcheck-list.hbs b/ui-v2/app/templates/components/healthcheck-list.hbs index babca35d7..3bdf5ee21 100644 --- a/ui-v2/app/templates/components/healthcheck-list.hbs +++ b/ui-v2/app/templates/components/healthcheck-list.hbs @@ -1,5 +1,28 @@ diff --git a/ui-v2/app/templates/components/healthcheck-output.hbs b/ui-v2/app/templates/components/healthcheck-output.hbs index fc7e560a4..ae852d05d 100644 --- a/ui-v2/app/templates/components/healthcheck-output.hbs +++ b/ui-v2/app/templates/components/healthcheck-output.hbs @@ -1,25 +1,28 @@ -{{#feedback-dialog type='inline'}} - {{#block-slot 'action' as |success error|}} - {{#copy-button success=(action success) error=(action error) clipboardText=output title='copy output to clipboard'}} - Copy Output - {{/copy-button}} - {{/block-slot}} - {{#block-slot 'success' as |transition|}} -

- Copied output! -

- {{/block-slot}} - {{#block-slot 'error' as |transition|}} -

- Sorry, something went wrong! -

- {{/block-slot}} -{{/feedback-dialog}} -
-
{{name}}
-
{{notes}}
+{{yield}} +
+
+ {{#yield-slot 'header'}}{{yield}}{{/yield-slot}} +
+ {{#yield-slot 'content'}}{{yield}}{{/yield-slot}} +
Output
{{output}}
+{{#feedback-dialog type='inline'}} + {{#block-slot 'action' as |success error|}} + {{copy-button success=(action success) error=(action error) clipboardText=output title='copy output to clipboard'}} + {{/block-slot}} + {{#block-slot 'success' as |transition|}} +

+ Copied output! +

+ {{/block-slot}} + {{#block-slot 'error' as |transition|}} +

+ Sorry, something went wrong! +

+ {{/block-slot}} +{{/feedback-dialog}}
-
\ No newline at end of file +
+ \ No newline at end of file