From 577dbef70a3d541778e8e94e5601793e627a0a97 Mon Sep 17 00:00:00 2001 From: John Cowen Date: Fri, 21 Sep 2018 10:18:32 +0100 Subject: [PATCH] UI: CSS Additions (mainly %frames) (#4623) * Move almost everything to use %frames * Fix pill styles of ACL types * Remove horizontal scrollbars from dom recycling scroller component * Make text areas look ok in Firefox * Remove ember-bulma-css * New form elements, break out %toggle * %button design tweaks * %form-element design tweaks * Better hashicorp logo * Small screen CSS improvements (#4624) 1. Reduce header size when there are no breadcrumbs 2. Make the filters toggleable, closed by default 3. Reduce the size of the footer on small screens 4. Hide all non-primary columns for forms 5. Slightly change the layout of various items, mainly buttons within forms 6. Make some confirmation dialogs work vertically on small screens. Guessing we might be better just using native confirmations on small screens --- ui-v2/app/mixins/with-resizing.js | 6 +- ui-v2/app/styles/app.scss | 2 + .../styles/base/color/box-placeholders.scss | 16 --- .../styles/base/color/frame-placeholders.scss | 86 ++++++++++++ ui-v2/app/styles/base/color/index.scss | 2 +- ui-v2/app/styles/base/icons/index.scss | 4 +- .../app/styles/components/buttons/layout.scss | 6 + ui-v2/app/styles/components/buttons/skin.scss | 127 +++++++++--------- .../components/confirmation-dialog.scss | 16 +++ .../confirmation-dialog/layout.scss | 4 - .../styles/components/feedback-dialog.scss | 10 ++ .../styles/components/flash-message/skin.scss | 23 +--- .../app/styles/components/form-elements.scss | 8 ++ .../components/form-elements/layout.scss | 90 +++++-------- .../styles/components/form-elements/skin.scss | 59 +++----- .../styles/components/healthcheck-status.scss | 21 +++ .../components/healthcheck-status/skin.scss | 24 ++-- ui-v2/app/styles/components/icons/index.scss | 13 +- ui-v2/app/styles/components/notice/skin.scss | 4 +- ui-v2/app/styles/components/product.scss | 45 ++++++- .../styles/components/product/app-view.scss | 3 +- .../app/styles/components/product/footer.scss | 28 +++- ui-v2/app/styles/components/table.scss | 32 ++++- ui-v2/app/styles/components/tabs.scss | 2 +- ui-v2/app/styles/components/tabs/layout.scss | 13 +- ui-v2/app/styles/components/tabs/skin.scss | 22 +-- ui-v2/app/styles/components/toggle/index.scss | 2 + .../app/styles/components/toggle/layout.scss | 33 +++++ ui-v2/app/styles/components/toggle/skin.scss | 25 ++++ ui-v2/app/styles/core/layout.scss | 18 +++ ui-v2/app/styles/core/typography.scss | 14 +- ui-v2/app/styles/routes/dc/acls/index.scss | 15 +++ ui-v2/app/styles/routes/dc/kv/index.scss | 4 + ui-v2/app/styles/variables/custom-query.scss | 21 +++ ui-v2/app/templates/components/app-view.hbs | 5 +- ui-v2/app/templates/dc/acls/-form.hbs | 2 +- ui-v2/app/templates/dc/acls/index.hbs | 1 + ui-v2/app/templates/dc/intentions/-form.hbs | 2 +- ui-v2/app/templates/dc/intentions/index.hbs | 1 + ui-v2/app/templates/dc/kv/index.hbs | 1 + ui-v2/app/templates/dc/nodes/-services.hbs | 1 + ui-v2/app/templates/dc/nodes/index.hbs | 1 + ui-v2/app/templates/dc/nodes/show.hbs | 1 + ui-v2/app/templates/dc/services/index.hbs | 1 + ui-v2/ember-cli-build.js | 3 + ui-v2/package.json | 1 - ui-v2/yarn.lock | 21 --- 47 files changed, 558 insertions(+), 281 deletions(-) delete mode 100644 ui-v2/app/styles/base/color/box-placeholders.scss create mode 100644 ui-v2/app/styles/base/color/frame-placeholders.scss create mode 100644 ui-v2/app/styles/components/toggle/index.scss create mode 100644 ui-v2/app/styles/components/toggle/layout.scss create mode 100644 ui-v2/app/styles/components/toggle/skin.scss create mode 100644 ui-v2/app/styles/routes/dc/acls/index.scss diff --git a/ui-v2/app/mixins/with-resizing.js b/ui-v2/app/mixins/with-resizing.js index 30e27f9ad..473306844 100644 --- a/ui-v2/app/mixins/with-resizing.js +++ b/ui-v2/app/mixins/with-resizing.js @@ -3,7 +3,7 @@ import { get } from '@ember/object'; import { assert } from '@ember/debug'; export default Mixin.create({ resize: function(e) { - assert('with-resizing.resize needs to be overridden', false); + assert('with-resizing.resize needs to be overridden', false); }, win: window, init: function() { @@ -17,14 +17,14 @@ export default Mixin.create({ }, didInsertElement: function() { this._super(...arguments); - get(this, 'win').addEventListener('resize', this.handler); + get(this, 'win').addEventListener('resize', this.handler, false); this.didAppear(); }, didAppear: function() { this.handler({ target: get(this, 'win') }); }, willDestroyElement: function() { - get(this, 'win').removeEventListener('resize', this.handler); + get(this, 'win').removeEventListener('resize', this.handler, false); this._super(...arguments); }, }); diff --git a/ui-v2/app/styles/app.scss b/ui-v2/app/styles/app.scss index b8c1b2d9b..61fd86590 100644 --- a/ui-v2/app/styles/app.scss +++ b/ui-v2/app/styles/app.scss @@ -10,6 +10,7 @@ @import 'components/anchors'; @import 'components/buttons'; @import 'components/tabs'; +@import 'components/pill'; @import 'components/table'; @import 'components/form-elements'; @@ -38,3 +39,4 @@ @import 'routes/dc/nodes/index'; @import 'routes/dc/intention/index'; @import 'routes/dc/kv/index'; +@import 'routes/dc/acls/index'; diff --git a/ui-v2/app/styles/base/color/box-placeholders.scss b/ui-v2/app/styles/base/color/box-placeholders.scss deleted file mode 100644 index aa5f5ac50..000000000 --- a/ui-v2/app/styles/base/color/box-placeholders.scss +++ /dev/null @@ -1,16 +0,0 @@ -%box-border-000 { - /* same as decor-border-000 - but need to think about being able to import color on its own*/ - border-style: solid; - border-width: 0; -} -%box-color-yellow-500 { - @extend %box-border-000; - background-color: $ui-yellow-050; - border-color: $ui-color-warning; -} -%box-color-gray-500 { - @extend %box-border-000; - background-color: $ui-gray-050; - border-color: $ui-gray-300; - color: $ui-gray-400; -} diff --git a/ui-v2/app/styles/base/color/frame-placeholders.scss b/ui-v2/app/styles/base/color/frame-placeholders.scss new file mode 100644 index 000000000..e4843ed79 --- /dev/null +++ b/ui-v2/app/styles/base/color/frame-placeholders.scss @@ -0,0 +1,86 @@ +/*TODO: Move this to the reset */ +* { + border-width: 0; +} +%frame-border-000 { + /* same as decor-border-000 - but need to think about being able to import color on its own*/ + border-style: solid; + // border-width: 0; +} +%frame-yellow-500 { + @extend %frame-border-000; + background-color: $ui-yellow-050; + border-color: $ui-color-warning; +} +%frame-green-500 { + @extend %frame-border-000; + background-color: $ui-green-050; + border-color: $ui-green-500; + color: $ui-green-500; +} +%frame-gray-500 { + @extend %frame-border-000; + background-color: $ui-gray-050; + border-color: $ui-gray-300; + color: $ui-gray-400; +} +%frame-blue-600 { + @extend %frame-border-000; + background-color: $ui-blue-200; + border-color: $ui-gray-400; + color: $ui-blue-050; +} +%frame-blue-700 { + @extend %frame-border-000; + background-color: $ui-blue-400; + border-color: $ui-blue-800; + color: $ui-white; +} +%frame-blue-800 { + @extend %frame-border-000; + background-color: $ui-blue-500; + border-color: $ui-blue-800; + color: $ui-white; +} +%frame-blue-900 { + @extend %frame-border-000; + background-color: $ui-blue-700; + border-color: $ui-blue-800; + color: $ui-white; +} +%frame-red-300 { + @extend %frame-border-000; + background-color: $ui-white; + border-color: $ui-red-500; + color: $ui-red-500; +} +%frame-red-500 { + @extend %frame-border-000; + background-color: $ui-red-050; + border-color: $ui-red-500; + color: $ui-red-800; +} +%frame-red-600 { + @extend %frame-border-000; + background-color: $ui-red-200; + border-color: $ui-gray-400; + color: $ui-white; +} +%frame-red-700 { + @extend %frame-border-000; + background-color: $ui-red-500; + border-color: $ui-red-800; + color: $ui-white; +} +%frame-red-900 { + @extend %frame-border-000; + background-color: $ui-red-700; + border-color: $ui-red-800; + color: $ui-white; +} +%frame-magenta-300 { + @extend %frame-border-000; + background-color: $ui-white; + border-color: $brand-magenta-600; + color: $brand-magenta-600; +} diff --git a/ui-v2/app/styles/base/color/index.scss b/ui-v2/app/styles/base/color/index.scss index 34c035fcd..1c892e1b4 100644 --- a/ui-v2/app/styles/base/color/index.scss +++ b/ui-v2/app/styles/base/color/index.scss @@ -1,3 +1,3 @@ @import './base-variables'; @import './semantic-variables'; -@import './box-placeholders'; +@import './frame-placeholders'; diff --git a/ui-v2/app/styles/base/icons/index.scss b/ui-v2/app/styles/base/icons/index.scss index 58d769549..05385a0a5 100644 --- a/ui-v2/app/styles/base/icons/index.scss +++ b/ui-v2/app/styles/base/icons/index.scss @@ -1,3 +1,5 @@ +$hashicorp-svg: url('data:image/svg+xml;charset=UTF-8,'); + $consul-color-svg: url('data:image/svg+xml;charset=UTF-8,'); $nomad-color-svg: url('data:image/svg+xml;charset=UTF-8,'); -$terraform-color-svg: url('data:image/svg+xml;charset=UTF-8,'); +$terraform-color-svg: url('data:image/svg+xml;charset=UTF-8,'); \ No newline at end of file diff --git a/ui-v2/app/styles/components/buttons/layout.scss b/ui-v2/app/styles/components/buttons/layout.scss index eb242bdb2..ab1ff50cc 100644 --- a/ui-v2/app/styles/components/buttons/layout.scss +++ b/ui-v2/app/styles/components/buttons/layout.scss @@ -9,3 +9,9 @@ %button:not(:last-child) { margin-right: 7px; } +%button-compact { + // @extend %button; + padding-left: calc(1.75em - 1px); + padding-right: calc(1.75em - 1px); + height: 2.1em; +} diff --git a/ui-v2/app/styles/components/buttons/skin.scss b/ui-v2/app/styles/components/buttons/skin.scss index 0d8822cd6..b79812540 100644 --- a/ui-v2/app/styles/components/buttons/skin.scss +++ b/ui-v2/app/styles/components/buttons/skin.scss @@ -4,87 +4,84 @@ cursor: pointer; white-space: nowrap; } -%primary-button, -%secondary-button, -%copy-button, -%dangerous-button { - @extend %button; +%button:disabled { + cursor: default; + box-shadow: none; +} +%copy-button { + @extend %button, %with-clipboard; } %primary-button, %secondary-button, %dangerous-button { - border: $decor-border-100; + @extend %button; + border-width: 1px; border-radius: $radius-small; box-shadow: 0 3px 1px 0 rgba($ui-black, 0.12); } -%primary-button, -%copy-button { - border: 0; -} -%copy-button { - @extend %with-clipboard; -} /* color */ -%secondary-button, -%dangerous-button, -%copy-button { - border-color: currentColor; -} -%secondary-button { - color: $ui-gray-400; -} -%secondary-button:hover, -%secondary-button:focus { - color: $ui-gray-600; -} -%secondary-button:active { - color: $ui-gray-600; -} -%primary-button { - background-color: $ui-color-action; - color: $ui-white; -} -%primary-button:hover, -%primary-button:focus { - background-color: $ui-blue-700; -} -%primary-button:disabled { - color: rgba($ui-white, 0.5); - background-color: rgba($ui-blue-700, 0.5); - box-shadow: none; -} -%primary-button:active { - background-color: $ui-blue-900; -} -%dangerous-button { - color: $ui-color-danger; -} -%dangerous-button:hover, -%dangerous-button:focus { - background-color: $ui-color-danger; - border-color: $ui-color-danger; - color: $ui-white; -} -%dangerous-button:disabled { - color: rgba($ui-color-danger, 0.5); - border-color: rgba($ui-color-danger, 0.5); - background-color: $ui-white; - box-shadow: none; -} -%dangerous-button:active { - background-color: $ui-red-700; - border-color: $ui-red-700; - color: $ui-white; -} %copy-button { color: $ui-color-action; background-color: $ui-color-transparent; } -%copy-button:hover, +%copy-button:hover:not(:disabled):not(:active), %copy-button:focus { color: $ui-color-action; background-color: $ui-gray-050; } +%copy-button:disabled { +} %copy-button:active { background-color: $ui-gray-200; } +%primary-button { + @extend %frame-blue-800; +} +%primary-button:hover:not(:disabled):not(:active), +%primary-button:focus { + @extend %frame-blue-700; +} +%primary-button:disabled { + @extend %frame-blue-600; +} +%primary-button:hover:active { + @extend %frame-blue-900; +} +/**/ +%secondary-button { + /* %frame-gray-something */ + color: $ui-gray-800; + background-color: $ui-gray-050; + border-color: $ui-gray-300; + border-style: solid; +} +%secondary-button:hover:not(:disabled):not(:active), +%secondary-button:focus { + /* %frame-gray-something */ + background-color: $ui-white; + color: $ui-gray-800; + border-color: $ui-gray-700; +} +%secondary-button:disabled { + color: $ui-gray-600; +} +%secondary-button:active { + /* %frame-gray-something */ + background-color: $ui-gray-200; + color: $ui-gray-800; + border-color: $ui-gray-700; +} +/**/ +%dangerous-button { + @extend %frame-red-300; +} +%dangerous-button:hover:not(:disabled):not(:active), +%dangerous-button:focus { + @extend %frame-red-700; +} +%dangerous-button:disabled { + @extend %frame-red-600; +} +%dangerous-button:hover:active { + @extend %frame-red-900; +} diff --git a/ui-v2/app/styles/components/confirmation-dialog.scss b/ui-v2/app/styles/components/confirmation-dialog.scss index 6365e8433..02ee72815 100644 --- a/ui-v2/app/styles/components/confirmation-dialog.scss +++ b/ui-v2/app/styles/components/confirmation-dialog.scss @@ -2,3 +2,19 @@ div.with-confirmation { @extend %confirmation-dialog, %confirmation-dialog-inline; } +table div.with-confirmation.confirming { + position: absolute; + right: 0; +} +@media #{$--lt-wide-form} { + %confirmation-dialog { + float: none; + margin-top: 1em; + } + %confirmation-dialog-inline { + display: block; + } + %confirmation-dialog-inline p { + margin-bottom: 1em; + } +} diff --git a/ui-v2/app/styles/components/confirmation-dialog/layout.scss b/ui-v2/app/styles/components/confirmation-dialog/layout.scss index c58c33984..798ebecca 100644 --- a/ui-v2/app/styles/components/confirmation-dialog/layout.scss +++ b/ui-v2/app/styles/components/confirmation-dialog/layout.scss @@ -10,7 +10,3 @@ align-items: center; line-height: 1; } -table div.with-confirmation.confirming { - position: absolute; - right: 0; -} diff --git a/ui-v2/app/styles/components/feedback-dialog.scss b/ui-v2/app/styles/components/feedback-dialog.scss index 19ec3ca6e..5f23cc853 100644 --- a/ui-v2/app/styles/components/feedback-dialog.scss +++ b/ui-v2/app/styles/components/feedback-dialog.scss @@ -2,3 +2,13 @@ main .with-feedback { @extend %feedback-dialog-inline; } +@media #{$--lt-spacious-page-header} { + .actions .with-feedback p { + bottom: auto; + top: 0px; + } + .actions .with-feedback p::after { + bottom: auto; + top: -5px; + } +} diff --git a/ui-v2/app/styles/components/flash-message/skin.scss b/ui-v2/app/styles/components/flash-message/skin.scss index 1324eb3b5..0c4f82f23 100644 --- a/ui-v2/app/styles/components/flash-message/skin.scss +++ b/ui-v2/app/styles/components/flash-message/skin.scss @@ -1,27 +1,16 @@ +%flash-message p { + border-width: 1px; + border-radius: $decor-radius-100; +} %flash-message p.success strong { @extend %with-passing; } %flash-message p.error strong { @extend %with-critical; } -%flash-message p { - border: $decor-border-100; - border-radius: $radius-small; -} %flash-message p.success { - border-color: $ui-color-success; - background-color: $ui-green-050; -} -%flash-message p { - color: $ui-color-success; + @extend %frame-green-500; } %flash-message p.error { - border-color: $ui-color-failure; - background-color: $ui-red-050; -} -%flash-message p.error { - color: $ui-color-failure; -} -%flash-message p strong { - color: inherit; + @extend %frame-red-500; } diff --git a/ui-v2/app/styles/components/form-elements.scss b/ui-v2/app/styles/components/form-elements.scss index 6b98a3cf3..a9095a387 100644 --- a/ui-v2/app/styles/components/form-elements.scss +++ b/ui-v2/app/styles/components/form-elements.scss @@ -1,4 +1,5 @@ @import './form-elements/index'; +@import './toggle/index'; .type-toggle { @extend %toggle; } @@ -8,3 +9,10 @@ label span { .has-error { @extend %form-element-error; } +%app-content .type-text, +%app-content .type-toggle { + @extend %form-element; +} +%app-content [role='radiogroup'] { + @extend %radio-group; +} diff --git a/ui-v2/app/styles/components/form-elements/layout.scss b/ui-v2/app/styles/components/form-elements/layout.scss index 3fc9e898a..b1ae6d350 100644 --- a/ui-v2/app/styles/components/form-elements/layout.scss +++ b/ui-v2/app/styles/components/form-elements/layout.scss @@ -1,94 +1,76 @@ -%toggle { - float: right; - margin-bottom: 0 !important; +%form-element, +%form-element > em, +%form-element > span, +%form-element textarea { + display: block; +} +%form-element > em > code { + display: inline-block; +} +%form-element [type='text'], +%form-element [type='password'] { + display: inline-flex; + justify-content: flex-start; +} +%form-element textarea { + resize: vertical; } %form-element > span { - display: block; margin-bottom: 0.5em; } %form-element textarea { - display: block; max-width: 100%; min-width: 100%; min-height: 70px; padding: 0.625em 15px; - resize: vertical; } %form-element [type='text'], %form-element [type='password'] { max-width: 100%; width: 100%; - display: inline-flex; - justify-content: flex-start; height: 2.25em; } -%form-element, %form-element > em { - display: block; + margin-top: 2px; } -%form-element > em { - margin-left: 8px; - margin-top: 10px; +%form-element > em > code { + padding: 0 4px; +} +%form-element [type='text'], +%form-element [type='password'], +%form-element textarea { + padding: 17px 13px; +} +%form-element textarea { + padding: 6px 13px; +} +%form-element > span { + margin-bottom: 0.4em !important; } %form-element, %radio-group { margin-bottom: 1.55em; } -%form-element > span { - margin-bottom: 0.4em !important; -} %radio-group { overflow: hidden; - padding-left: 1px; } %radio-group label { float: left; } +%radio-group label > span { + float: right; +} +%radio-group { + padding-left: 1px; +} %radio-group label:not(:last-child) { margin-right: 25px; } %radio-group label > span { margin-left: 1em; margin-top: 0.2em; - float: right; } %radio-group label, %radio-group label > span { margin-bottom: 0 !important; } -%form-element [type='text'], -%form-element [type='password'] { - padding: 17px 15px; -} -%toggle { - position: relative; -} -%toggle input { - display: none; -} -%toggle span { - display: inline-block; - padding-left: 25px; -} -%toggle span::before, -%toggle span::after { - position: absolute; - display: block; - content: ''; - top: 50%; -} -%toggle span::before { - left: 0px; - width: 20px; - height: 12px; - margin-top: -8px; -} -%toggle span::after { - left: 2px; - margin-top: -6px; - width: 8px; - height: 8px; -} -%toggle input:checked + span::after { - left: 10px; -} diff --git a/ui-v2/app/styles/components/form-elements/skin.scss b/ui-v2/app/styles/components/form-elements/skin.scss index 8f58f355f..9c6cbe49e 100644 --- a/ui-v2/app/styles/components/form-elements/skin.scss +++ b/ui-v2/app/styles/components/form-elements/skin.scss @@ -1,55 +1,40 @@ +%radio-group label { + @extend %form-element; +} %form-element-error > input, %form-element-error > textarea { border: $decor-border-100; } -%radio-group label { - @extend %form-element; -} -[type='radio'], -%toggle span::before, -%toggle span::after { - cursor: pointer; -} %form-element [type='text'], -%form-element [type='password'] { - border: $decor-border-100; +%form-element [type='password'], +%form-element textarea { -moz-appearance: none; -webkit-appearance: none; -} -%form-element [type='text'], -%form-element [type='password'] { - box-shadow: none; - border-radius: $radius-small; + box-shadow: inset 0 4px 1px rgba(0, 0, 0, .06); + border-radius: $decor-radius-100; + border: $decor-border-100; } %form-element [type='text']:focus, %form-element [type='password']:focus, %form-element textarea:focus { outline: none; - box-shadow: none; - border-color: $ui-gray-400; +} +%form-element > em > code { + border-radius: $decor-radius-100; } %form-element-error > input { border-color: $ui-color-failure !important; } -%toggle input:checked + span::before { - background-color: $ui-color-success; -} -%toggle span { - color: $ui-gray-900; -} %form-element > em { color: $ui-gray-400; } -%toggle span::after { - border-radius: 100%; - background-color: $ui-white; -} -%toggle span::before { - background-color: $ui-gray-300; - border-radius: 7px; +%form-element > em > code { + background-color: $ui-gray-200; + color: $brand-magenta-600; + border-radius: $decor-radius-100; } %form-element > span { - color: $ui-gray-500; + color: $ui-black; } %form-element [type='text'], %form-element [type='password'], @@ -58,16 +43,16 @@ } %form-element [type='text'], %form-element [type='password'], -%form-element textarea { - background-color: $ui-gray-050; -} -%form-element [type='text'], -%form-element [type='password'], %form-element textarea { border-color: $ui-gray-300; } %form-element [type='text']:hover, %form-element [type='password']:hover, %form-element textarea:hover { - border-color: $ui-color-action; + border-color: $ui-gray-500; +} +%form-element [type='text']:focus, +%form-element [type='password']:focus, +%form-element textarea:focus { + border-color: $ui-blue-500; } diff --git a/ui-v2/app/styles/components/healthcheck-status.scss b/ui-v2/app/styles/components/healthcheck-status.scss index c8d34ee75..550b2c992 100644 --- a/ui-v2/app/styles/components/healthcheck-status.scss +++ b/ui-v2/app/styles/components/healthcheck-status.scss @@ -12,3 +12,24 @@ %healthcheck-status.critical { @extend %with-critical; } +@media #{$--lt-spacious-healthcheck-status} { + .healthcheck-status button.copy-btn { + margin-top: -11px; + margin-right: -18px; + padding: 0; + width: 20px; + visibility: hidden; + } + %healthcheck-status { + padding-left: 30px; + padding-top: 10px; + padding-bottom: 15px; + padding-right: 13px; + } + %healthcheck-status::before { + width: 15px !important; + height: 15px !important; + left: 9px; + top: 13px !important; + } +} diff --git a/ui-v2/app/styles/components/healthcheck-status/skin.scss b/ui-v2/app/styles/components/healthcheck-status/skin.scss index e37d72f50..8656904fe 100644 --- a/ui-v2/app/styles/components/healthcheck-status/skin.scss +++ b/ui-v2/app/styles/components/healthcheck-status/skin.scss @@ -1,9 +1,9 @@ %healthcheck-status { - border: $decor-border-100; + border-width: 1px; } %healthcheck-status, %healthcheck-status pre { - border-radius: $radius-small; + border-radius: $decor-radius-100; } %healthcheck-status dd:first-of-type { color: $ui-gray-400; @@ -13,19 +13,23 @@ color: $ui-white; } %healthcheck-status.passing { + /* TODO: this should be a gray frame */ + // @extend %frame-green-500; + color: $ui-gray-900; border-color: $ui-gray-200; + border-style: solid; +} +%healthcheck-status.warning { + @extend %frame-yellow-500; + color: $ui-gray-900; +} +%healthcheck-status.critical { + @extend %frame-red-500; + color: $ui-gray-900; } %healthcheck-status.passing::before { background-color: $ui-color-success !important; } -%healthcheck-status.critical { - border-color: $ui-color-danger; - background-color: rgba($ui-color-danger, 0.1); -} %healthcheck-status.critical::before { background-color: $ui-color-danger !important; } -%healthcheck-status.warning { - border-color: $ui-color-alert; - background-color: rgba($ui-color-alert, 0.1); -} diff --git a/ui-v2/app/styles/components/icons/index.scss b/ui-v2/app/styles/components/icons/index.scss index 8d0f693a1..ea2c9bc55 100644 --- a/ui-v2/app/styles/components/icons/index.scss +++ b/ui-v2/app/styles/components/icons/index.scss @@ -58,13 +58,18 @@ padding-left: 10px; display: inline-block; } +%with-hashicorp { + background-color: $ui-white; +} %with-hashicorp::before { @extend %pseudo-icon; - background-image: url('data:image/svg+xml;charset=UTF-8,'); - width: 23px; - height: 22px; + opacity: .45; + background-image: $hashicorp-svg; + background-size: cover; + width: 20px; + height: 20px; left: -25px; - margin-top: -11px; + margin-top: -10px; background-color: $ui-color-transparent; } %with-clipboard { diff --git a/ui-v2/app/styles/components/notice/skin.scss b/ui-v2/app/styles/components/notice/skin.scss index d7c7866df..7944c9a40 100644 --- a/ui-v2/app/styles/components/notice/skin.scss +++ b/ui-v2/app/styles/components/notice/skin.scss @@ -1,5 +1,6 @@ %notice { border-radius: $radius-small; + border-width: 1px; } %notice-success, %notice-info, @@ -26,8 +27,7 @@ color: $ui-color-action; /* change to info */ } %notice-warning { - @extend %box-color-yellow-500, %with-warning; - border-width: 1px; + @extend %frame-yellow-500, %with-warning; } %notice-error { @extend %with-critical; diff --git a/ui-v2/app/styles/components/product.scss b/ui-v2/app/styles/components/product.scss index a174cade8..4ce87ae83 100644 --- a/ui-v2/app/styles/components/product.scss +++ b/ui-v2/app/styles/components/product.scss @@ -1,6 +1,5 @@ @import './product/index'; @import './filter-bar'; -@import './form-elements/index'; html body > svg { display: none; } @@ -19,12 +18,10 @@ main { %app-view header form { @extend %filter-bar; } -%app-content .type-text, -%app-content .type-toggle { - @extend %form-element; -} -%app-content [role='radiogroup'] { - @extend %radio-group; +@media #{$--lt-spacious-page-header} { + %app-view header .actions { + margin-top: 5px; + } } %loader circle { fill: $brand-magenta-100; @@ -49,3 +46,37 @@ main { #wrapper > footer { @extend %footer; } +/*TODO: This should go in reset, and probably needs select etc adding */ +@media (max-width: 420px) and (-webkit-min-device-pixel-ratio: 0) { + input { + font-size: 16px !important; + } +} +/* toggleable toolbar for short screens */ +[for='toolbar-toggle'] { + @extend %with-magnifier; + color: $ui-blue-500; + width: 20px; + height: 20px; + margin-left: 15px; + top: -3px; +} +#toolbar-toggle { + display: none; +} +@media #{$--expanded-filters} { + [for='toolbar-toggle'] { + display: none; + } +} +@media #{$--lt-expanded-filters} { + %app-view header h1 { + display: inline-block; + } + #toolbar-toggle + * { + display: none; + } + #toolbar-toggle:checked + * { + display: block; + } +} diff --git a/ui-v2/app/styles/components/product/app-view.scss b/ui-v2/app/styles/components/product/app-view.scss index f8bfb7a6f..b466ea370 100644 --- a/ui-v2/app/styles/components/product/app-view.scss +++ b/ui-v2/app/styles/components/product/app-view.scss @@ -48,8 +48,7 @@ } %app-view header .actions a, %app-view header .actions button { - padding: calc(0.375em - 1px) calc(2.2em - 1px); - height: 2.25em; + @extend %button-compact; } // content diff --git a/ui-v2/app/styles/components/product/footer.scss b/ui-v2/app/styles/components/product/footer.scss index 7652bd6b1..aafe86f8a 100644 --- a/ui-v2/app/styles/components/product/footer.scss +++ b/ui-v2/app/styles/components/product/footer.scss @@ -5,7 +5,7 @@ border-top: $decor-border-100; } %footer { - border-color: $keyline-mid; + border-color: $ui-gray-200; background-color: $ui-white; } %footer > * { @@ -16,9 +16,31 @@ justify-content: center; position: relative; z-index: 1; - padding: 25px; } %footer > * { display: block; - padding: 11px; +} +@media #{$--tall-footer} { + %footer { + padding-top: 25px; + padding-bottom: 25px; + } +} +@media #{$--wide-footer} { + %footer { + padding-left: 25px; + padding-right: 25px; + } + %footer > * { + padding: 11px; + } +} +@media #{$--lt-wide-footer} { + %footer > :first-child { + padding: 5px; + margin-left: 20px; + } + %footer > :not(:first-child) { + display: none; + } } diff --git a/ui-v2/app/styles/components/table.scss b/ui-v2/app/styles/components/table.scss index b7e9dc318..482e2833a 100644 --- a/ui-v2/app/styles/components/table.scss +++ b/ui-v2/app/styles/components/table.scss @@ -81,7 +81,8 @@ table td a { display: block; } tbody { - overflow-x: visible !important; + /* important required as ember-collection will inline an overflow: visible*/ + overflow-x: hidden !important; } th, td:not(.actions), @@ -124,3 +125,32 @@ td dd { margin-left: 22px; padding-right: 10px; } +/* hide actions on narrow screens, you can always click in do everything from there */ +@media #{$--lt-wide-table} { + tr > .actions { + display: none; + } +} +/* ideally these would be in route css files, but left here as they */ +/* accomplish the same thing (hide non-essential columns for tables) */ +@media #{$--lt-wide-table} { + html.template-intention.template-list tr > :nth-last-child(2) { + display: none; + } + html.template-service.template-list tr > :last-child { + display: none; + } + html.template-node.template-show #services tr > :last-child { + display: none; + } + html.template-node.template-show #lock-sessions tr > + :not(:first-child):not(:last-child) { + display: none; + } + html.template-node.template-show #lock-sessions td:last-child { + padding: 0; + } + html.template-node.template-show #lock-sessions td:last-child button { + float: right; + } +} diff --git a/ui-v2/app/styles/components/tabs.scss b/ui-v2/app/styles/components/tabs.scss index 518482f45..b0c08a7f8 100644 --- a/ui-v2/app/styles/components/tabs.scss +++ b/ui-v2/app/styles/components/tabs.scss @@ -1,5 +1,5 @@ @import './tabs/index'; -main header nav:last-child { +main header nav:last-of-type:not(:first-of-type) { @extend %tab-nav; } .tab-section { diff --git a/ui-v2/app/styles/components/tabs/layout.scss b/ui-v2/app/styles/components/tabs/layout.scss index 0855017fb..9588b870e 100644 --- a/ui-v2/app/styles/components/tabs/layout.scss +++ b/ui-v2/app/styles/components/tabs/layout.scss @@ -1,4 +1,5 @@ %tab-section { + /* this keeps in-tab-section toolbars flush to the top, see Node Detail > Services */ margin-top: 0 !important; } @media #{$--horizontal-tabs} { @@ -6,12 +7,9 @@ display: flex; align-items: center; } - %tab-nav ul li:not(:first-child) { - margin-left: 37px; - } %tab-nav a { - padding-left: 5px; - padding-right: 5px; + padding-left: 16px; + padding-right: 16px; } } @media #{$--lt-horizontal-tabs} { @@ -21,10 +19,9 @@ } %tab-nav a { display: block; - padding-top: 12px; - padding-bottom: 12px; + padding-top: 13px; + padding-bottom: 13px; } -%tab-nav input[type='radio'], %tab-section > input[type='radio'], %tab-section > input[type='radio'] + * { display: none; diff --git a/ui-v2/app/styles/components/tabs/skin.scss b/ui-v2/app/styles/components/tabs/skin.scss index c642f4d12..7a5eeda62 100644 --- a/ui-v2/app/styles/components/tabs/skin.scss +++ b/ui-v2/app/styles/components/tabs/skin.scss @@ -1,24 +1,24 @@ %tab-nav label { cursor: pointer; } -%tab-nav ul { - border: 0; +%tab-nav a { + white-space: nowrap; } %tab-nav a { - border-bottom: $decor-border-300; + border-bottom: $decor-border-200; } %tab-nav a { border-color: $ui-color-transparent; color: $ui-gray-500; } -%tab-nav a:hover, -%tab-nav a:focus, -%tab-nav a:active, +%tab-nav li:not(.selected) a:hover, +%tab-nav li:not(.selected) a:focus, +%tab-nav li:not(.selected) a:active { + /* %frame-gray-something */ + border-color: $ui-color-transparent; + background-color: $ui-gray-100; +} %tab-nav .selected a { - border-color: $brand-magenta-600; - color: $brand-magenta-600; + @extend %frame-magenta-300; } -%tab-nav a { - white-space: nowrap; -} diff --git a/ui-v2/app/styles/components/toggle/index.scss b/ui-v2/app/styles/components/toggle/index.scss new file mode 100644 index 000000000..bc1825219 --- /dev/null +++ b/ui-v2/app/styles/components/toggle/index.scss @@ -0,0 +1,2 @@ +@import './skin'; +@import './layout'; diff --git a/ui-v2/app/styles/components/toggle/layout.scss b/ui-v2/app/styles/components/toggle/layout.scss new file mode 100644 index 000000000..f91509412 --- /dev/null +++ b/ui-v2/app/styles/components/toggle/layout.scss @@ -0,0 +1,33 @@ +%toggle { + position: relative; +} +%toggle input { + display: none; +} +%toggle span { + display: inline-block; + padding-left: 25px; +} +%toggle span::before, +%toggle span::after { + position: absolute; + display: block; + content: ''; + top: 50%; +} +%toggle span::before { + left: 0px; + width: 20px; + height: 12px; + margin-top: -8px; +} +%toggle span::after { + left: 2px; + margin-top: -6px; + width: 8px; + height: 8px; +} +%toggle input:checked + span::after { + left: 10px; +} + diff --git a/ui-v2/app/styles/components/toggle/skin.scss b/ui-v2/app/styles/components/toggle/skin.scss new file mode 100644 index 000000000..2127ec82b --- /dev/null +++ b/ui-v2/app/styles/components/toggle/skin.scss @@ -0,0 +1,25 @@ +/* TODO: Maybe move this to reset? */ +[type='radio'], +%toggle span::before, +%toggle span::after { + cursor: pointer; +} +%toggle span::after { + border-radius: $decor-radius-full; +} +%toggle span::before { + border-radius: 7px; +} +%toggle input:checked + span::before { + background-color: $ui-color-success; +} +%toggle span { + color: $ui-gray-900; +} +%toggle span::after { + background-color: $ui-white; +} +%toggle span::before { + background-color: $ui-gray-300; +} + diff --git a/ui-v2/app/styles/core/layout.scss b/ui-v2/app/styles/core/layout.scss index cf3d072f5..e91ad74ea 100644 --- a/ui-v2/app/styles/core/layout.scss +++ b/ui-v2/app/styles/core/layout.scss @@ -20,8 +20,26 @@ main, html.template-edit main { @extend %content-container-restricted; } + +@media #{$--lt-spacious-page-header} { + html.template-list:not(.template-kv) main { + margin-top: 10px; + } +} +@media #{$--lt-spacious-page-header} { + .actions button.copy-btn { + margin-top: -42px; + padding: 0; + } +} /* TODO: keep margin below forms, move elsewhere */ main form, main form + div .with-confirmation { margin-bottom: 2em; } +@media #{$--lt-wide-form} { + main form [type="reset"] { + float: right; + margin-right: 0 !important; + } +} diff --git a/ui-v2/app/styles/core/typography.scss b/ui-v2/app/styles/core/typography.scss index 3095fa1b7..beb4407fb 100644 --- a/ui-v2/app/styles/core/typography.scss +++ b/ui-v2/app/styles/core/typography.scss @@ -37,11 +37,13 @@ h2, %healthchecked-resource header span, %healthcheck-status dt, %copy-button, -%form-element > span, %app-content div > dl > dt, td a { font-weight: $typo-weight-semibold; } +%form-element > span { + font-weight: $typo-weight-semibold; +} %button { font-weight: $typo-weight-semibold !important; } @@ -63,12 +65,6 @@ td:first-child em, %healthchecked-resource header em { font-style: normal; } -%form-element > span { - text-transform: uppercase; -} -%form-element > span > * { - text-transform: none; -} %footer > * { font-size: inherit; } @@ -87,6 +83,7 @@ td { font-size: $typo-size-600; } th, +%form-element > span, %with-tooltip::before, %healthchecked-resource strong, %footer { @@ -100,9 +97,8 @@ th, %app-view > div.disabled > div, .template-error > div, %button, -.with-confirmation p, %form-element > em, -%form-element > span, +.with-confirmation p, %feedback-dialog-inline p { font-size: $typo-size-800; } diff --git a/ui-v2/app/styles/routes/dc/acls/index.scss b/ui-v2/app/styles/routes/dc/acls/index.scss new file mode 100644 index 000000000..7dc953626 --- /dev/null +++ b/ui-v2/app/styles/routes/dc/acls/index.scss @@ -0,0 +1,15 @@ +@media #{$--lt-wide-form} { + html.template-acl.template-edit main header .actions { + float: none; + display: flex; + justify-content: space-between; + margin-bottom: 1em; + } + html.template-acl.template-edit main header .actions .with-feedback { + position: absolute; + right: 0; + } + html.template-acl.template-edit main header .actions .with-confirmation { + margin-top: 0; + } +} diff --git a/ui-v2/app/styles/routes/dc/kv/index.scss b/ui-v2/app/styles/routes/dc/kv/index.scss index fbfd50286..52f96b767 100644 --- a/ui-v2/app/styles/routes/dc/kv/index.scss +++ b/ui-v2/app/styles/routes/dc/kv/index.scss @@ -2,3 +2,7 @@ html.template-kv.template-edit div > .with-confirmation { float: none; margin-top: 1.7em; } +html.template-kv.template-edit .type-toggle { + float: right; + margin-bottom: 0 !important; +} diff --git a/ui-v2/app/styles/variables/custom-query.scss b/ui-v2/app/styles/variables/custom-query.scss index 1d5187b59..eca623ed7 100644 --- a/ui-v2/app/styles/variables/custom-query.scss +++ b/ui-v2/app/styles/variables/custom-query.scss @@ -16,3 +16,24 @@ $--lt-horizontal-session-list: '(max-width: 899px)'; $--min-padding: '(max-width: 600px)'; $--max-padding: '(min-width: 1260px)'; + +$--tall-footer: '(min-height: 815px)'; +$--lt-tall-footer: '(max-height: 814px)'; + +$--wide-footer: '(min-width: 421px)'; +$--lt-wide-footer: '(max-width: 420px)'; + +$--expanded-filters: '(min-width: 421px) (min-height: 815px)'; +$--lt-expanded-filters: '(max-width: 420px) (max-height: 814px)'; + +$--spacious-page-header: '(min-width: 421px) (min-height: 815px)'; +$--lt-spacious-page-header: '(max-width: 420px) (max-height: 814px)'; + +$--spacious-healthcheck-status: '(min-width: 421px)'; +$--lt-spacious-healthcheck-status: '(max-width: 420px)'; + +$--wide-form: '(min-width: 421px)'; +$--lt-wide-form: '(max-width: 420px)'; + +$--wide-table: '(min-width: 421px)'; +$--lt-wide-table: '(max-width: 420px)'; diff --git a/ui-v2/app/templates/components/app-view.hbs b/ui-v2/app/templates/components/app-view.hbs index 37417d333..c0e5e56ac 100644 --- a/ui-v2/app/templates/components/app-view.hbs +++ b/ui-v2/app/templates/components/app-view.hbs @@ -19,7 +19,10 @@ {{#yield-slot 'header'}}{{yield}}{{/yield-slot}} - {{#yield-slot 'toolbar'}}{{yield}}{{/yield-slot}} + {{#yield-slot 'toolbar'}} + + {{yield}} + {{/yield-slot}} {{/if}}
diff --git a/ui-v2/app/templates/dc/acls/-form.hbs b/ui-v2/app/templates/dc/acls/-form.hbs index 803444e5a..60f01a46c 100644 --- a/ui-v2/app/templates/dc/acls/-form.hbs +++ b/ui-v2/app/templates/dc/acls/-form.hbs @@ -7,7 +7,7 @@
{{#each types as |type|}} {{/each}} diff --git a/ui-v2/app/templates/dc/acls/index.hbs b/ui-v2/app/templates/dc/acls/index.hbs index 27bedb2ae..ec5d7dba7 100644 --- a/ui-v2/app/templates/dc/acls/index.hbs +++ b/ui-v2/app/templates/dc/acls/index.hbs @@ -6,6 +6,7 @@

ACL Tokens

+ {{/block-slot}} {{#block-slot 'actions'}} Create diff --git a/ui-v2/app/templates/dc/intentions/-form.hbs b/ui-v2/app/templates/dc/intentions/-form.hbs index 6a4507cc8..97fa59d07 100644 --- a/ui-v2/app/templates/dc/intentions/-form.hbs +++ b/ui-v2/app/templates/dc/intentions/-form.hbs @@ -43,7 +43,7 @@
{{#each intents as |intent|}} {{/each}} diff --git a/ui-v2/app/templates/dc/intentions/index.hbs b/ui-v2/app/templates/dc/intentions/index.hbs index 2236f7d79..4208781cf 100644 --- a/ui-v2/app/templates/dc/intentions/index.hbs +++ b/ui-v2/app/templates/dc/intentions/index.hbs @@ -6,6 +6,7 @@

Intentions

+ {{/block-slot}} {{#block-slot 'actions'}} Create diff --git a/ui-v2/app/templates/dc/kv/index.hbs b/ui-v2/app/templates/dc/kv/index.hbs index c403241ae..e1b244263 100644 --- a/ui-v2/app/templates/dc/kv/index.hbs +++ b/ui-v2/app/templates/dc/kv/index.hbs @@ -20,6 +20,7 @@ {{ take 1 (drop 1 (reverse (split parent.Key '/'))) }} {{/if}} + {{/block-slot}} {{#block-slot 'toolbar'}} {{#if (gt items.length 0) }} diff --git a/ui-v2/app/templates/dc/nodes/-services.hbs b/ui-v2/app/templates/dc/nodes/-services.hbs index 87a913d25..d62e75502 100644 --- a/ui-v2/app/templates/dc/nodes/-services.hbs +++ b/ui-v2/app/templates/dc/nodes/-services.hbs @@ -1,4 +1,5 @@ {{#if (gt items.length 0) }} +
{{freetext-filter onchange=(action 'filter') value=filter.s placeholder="Search by name/port"}}
diff --git a/ui-v2/app/templates/dc/nodes/index.hbs b/ui-v2/app/templates/dc/nodes/index.hbs index c74043d96..be26c2e20 100644 --- a/ui-v2/app/templates/dc/nodes/index.hbs +++ b/ui-v2/app/templates/dc/nodes/index.hbs @@ -3,6 +3,7 @@

Nodes

+ {{/block-slot}} {{#block-slot 'toolbar'}} {{#if (gt items.length 0) }} diff --git a/ui-v2/app/templates/dc/nodes/show.hbs b/ui-v2/app/templates/dc/nodes/show.hbs index de95c3965..91bb73b32 100644 --- a/ui-v2/app/templates/dc/nodes/show.hbs +++ b/ui-v2/app/templates/dc/nodes/show.hbs @@ -12,6 +12,7 @@

{{ item.Node }}

+ {{tab-nav items=(compact (array diff --git a/ui-v2/app/templates/dc/services/index.hbs b/ui-v2/app/templates/dc/services/index.hbs index 22a5c12c5..e99485173 100644 --- a/ui-v2/app/templates/dc/services/index.hbs +++ b/ui-v2/app/templates/dc/services/index.hbs @@ -7,6 +7,7 @@

Services

+ {{/block-slot}} {{#block-slot 'toolbar'}} {{#if (gt items.length 0) }} diff --git a/ui-v2/ember-cli-build.js b/ui-v2/ember-cli-build.js index c097b895c..552ad958d 100644 --- a/ui-v2/ember-cli-build.js +++ b/ui-v2/ember-cli-build.js @@ -18,6 +18,9 @@ module.exports = function(defaults) { 'ember-cli-babel': { includePolyfill: true }, + 'ember-cli-string-helpers': { + only: ['capitalize'] + }, 'babel': { plugins: [ 'transform-object-rest-spread' diff --git a/ui-v2/package.json b/ui-v2/package.json index f47636cfd..508becec5 100644 --- a/ui-v2/package.json +++ b/ui-v2/package.json @@ -38,7 +38,6 @@ "ember-ajax": "^3.0.0", "ember-block-slots": "^1.1.11", "ember-browserify": "^1.2.2", - "ember-bulma-css": "^0.2.1", "ember-changeset-validations": "^1.2.11", "ember-cli": "~2.18.2", "ember-cli-app-version": "^3.0.0", diff --git a/ui-v2/yarn.lock b/ui-v2/yarn.lock index 311af52c6..a7ac3fc9b 100644 --- a/ui-v2/yarn.lock +++ b/ui-v2/yarn.lock @@ -1944,10 +1944,6 @@ builtins@^1.0.3: version "1.0.3" resolved "https://registry.yarnpkg.com/builtins/-/builtins-1.0.3.tgz#cb94faeb61c8696451db36534e1422f94f0aee88" -bulma@^0.6.2: - version "0.6.2" - resolved "https://registry.yarnpkg.com/bulma/-/bulma-0.6.2.tgz#f4b1d11d5acc51a79644eb0a2b0b10649d3d71f5" - bytes@1: version "1.0.0" resolved "https://registry.yarnpkg.com/bytes/-/bytes-1.0.0.tgz#3569ede8ba34315fab99c3e92cb04c7220de1fa8" @@ -3022,14 +3018,6 @@ ember-browserify@^1.2.2: through2 "^2.0.0" walk-sync "^0.2.7" -ember-bulma-css@^0.2.1: - version "0.2.1" - resolved "https://registry.yarnpkg.com/ember-bulma-css/-/ember-bulma-css-0.2.1.tgz#4b168a74191c127d5bfec21dd3ceb0b279c72b1c" - dependencies: - bulma "^0.6.2" - ember-cli-babel "^6.6.0" - ember-cli-sass "^7.2.0" - ember-changeset-validations@^1.2.11: version "1.2.11" resolved "https://registry.yarnpkg.com/ember-changeset-validations/-/ember-changeset-validations-1.2.11.tgz#b769c3557f42fae05398869f3904200e21a005d7" @@ -3335,15 +3323,6 @@ ember-cli-sass@^7.1.4: broccoli-sass-source-maps "^2.1.0" ember-cli-version-checker "^2.1.0" -ember-cli-sass@^7.2.0: - version "7.2.0" - resolved "https://registry.yarnpkg.com/ember-cli-sass/-/ember-cli-sass-7.2.0.tgz#293d1a94c43c1fdbb3835378e43d255e8ad5c961" - dependencies: - broccoli-funnel "^1.0.0" - broccoli-merge-trees "^1.1.0" - broccoli-sass-source-maps "^2.1.0" - ember-cli-version-checker "^2.1.0" - ember-cli-shims@^1.2.0: version "1.2.0" resolved "https://registry.yarnpkg.com/ember-cli-shims/-/ember-cli-shims-1.2.0.tgz#0f53aff0aab80b5f29da3a9731bac56169dd941f"