diff --git a/ui-v2/app/mixins/with-resizing.js b/ui-v2/app/mixins/with-resizing.js index 30e27f9add..473306844e 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 b8c1b2d9bd..61fd865901 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 aa5f5ac50c..0000000000 --- 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 0000000000..e4843ed790 --- /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 34c035fcda..1c892e1b40 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 58d7695495..05385a0a50 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 eb242bdb28..ab1ff50cc9 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 0d8822cd61..b79812540c 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 6365e8433c..02ee72815e 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 c58c339847..798ebecca9 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 19ec3ca6e8..5f23cc8537 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 1324eb3b55..0c4f82f238 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 6b98a3cf3d..a9095a387c 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 3fc9e898a9..b1ae6d3501 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 8f58f355f3..9c6cbe49ee 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 c8d34ee754..550b2c992a 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 e37d72f506..8656904fe2 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 8d0f693a1c..ea2c9bc55b 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 d7c7866dfe..7944c9a408 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 a174cade83..4ce87ae839 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 f8bfb7a6fb..b466ea3707 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 7652bd6b1e..aafe86f8aa 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 b7e9dc3183..482e2833aa 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 518482f457..b0c08a7f8c 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 0855017fb8..9588b870eb 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 c642f4d123..7a5eeda62f 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 0000000000..bc18252196 --- /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 0000000000..f91509412b --- /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 0000000000..2127ec82b6 --- /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 cf3d072f52..e91ad74ea7 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 3095fa1b78..beb4407fbe 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 0000000000..7dc9536263 --- /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 fbfd50286c..52f96b767e 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 1d5187b594..eca623ed76 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 37417d3337..c0e5e56ace 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 803444e5a2..60f01a46c1 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 27bedb2ae3..ec5d7dba7a 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 6a4507cc8b..97fa59d074 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 2236f7d79e..4208781cf1 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 c403241ae1..e1b2442634 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 87a913d250..d62e755028 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 c74043d96b..be26c2e204 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 de95c3965d..91bb73b32f 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 22a5c12c5b..e99485173b 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 c097b895c1..552ad958d9 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 f47636cfdb..508becec5a 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 311af52c69..a7ac3fc9b9 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"