diff --git a/.changelog/10181.txt b/.changelog/10181.txt new file mode 100644 index 000000000000..424320a50f5f --- /dev/null +++ b/.changelog/10181.txt @@ -0,0 +1,3 @@ +```release-note:improvement +ui: Improve loader centering with new side navigation +``` diff --git a/ui/packages/consul-ui/app/components/app/index.scss b/ui/packages/consul-ui/app/components/app/index.scss index eea9542d0c60..75a3c8808fd2 100644 --- a/ui/packages/consul-ui/app/components/app/index.scss +++ b/ui/packages/consul-ui/app/components/app/index.scss @@ -1,7 +1,3 @@ -.app { - --chrome-width: 300px; - --chrome-height: 64px; -} .app .skip-links { @extend %skip-links; } @@ -44,7 +40,7 @@ main { z-index: 10; } main { - margin-top: var(--chrome-height); + margin-top: var(--chrome-height, 64px); transition-property: margin-left; } @@ -54,11 +50,11 @@ main { left: 0; } %main-nav-horizontal-toggle:checked + header > div > nav:first-of-type { - left: calc(var(--chrome-width) * -1); + left: calc(var(--chrome-width, 300px) * -1); } %main-nav-horizontal-toggle ~ main, %main-nav-horizontal-toggle ~ footer { - margin-left: var(--chrome-width); + margin-left: var(--chrome-width, 300px); } %main-nav-horizontal-toggle:checked ~ main, %main-nav-horizontal-toggle:checked ~ footer { @@ -70,7 +66,7 @@ main { left: 0; } %main-nav-horizontal-toggle + header > div > nav:first-of-type { - left: calc(var(--chrome-width) * -1); + left: calc(var(--chrome-width, 300px) * -1); } %main-nav-horizontal-toggle ~ main, %main-nav-horizontal-toggle ~ footer { diff --git a/ui/packages/consul-ui/app/components/brand-loader/README.mdx b/ui/packages/consul-ui/app/components/brand-loader/README.mdx new file mode 100644 index 000000000000..bc6f8677ada7 --- /dev/null +++ b/ui/packages/consul-ui/app/components/brand-loader/README.mdx @@ -0,0 +1,41 @@ +# BrandLoader + +Initial loader full brand logo as opposed to the brand submark logo. + +The component is a little strange in how you configure it (a CSS-like `@width` +and `@color` properties and the subtitle as a further component), but this is due to use +wanting to source this in a JS only environment (without Glimmer/Handlebars) +during compilation of the static `index.html` file. For this reason the +template sourcecode should use extremely minimal handlebars syntax. + +Also, we want the logo to appear as soon as possible, so before any CSS has +loaded, so we define its color in attributes instead of CSS. + +```hbs preview-template +
+ + +
+``` + +```hbs preview-template +
+ + + +
+``` + +## Arguments + +| Argument | Type | Default | Description | +| --- | --- | --- | --- | +| `width` | `Number` | | The width for the base SVG for the logo | +| `color` | `String` | | A hexcode color value for the logo | +| `subtitle` | `String` | | When used with JS you can pass extra DOM in here that will be yielded in the same position as the `{{yield}}`| diff --git a/ui/packages/consul-ui/app/components/brand-loader/enterprise.hbs b/ui/packages/consul-ui/app/components/brand-loader/enterprise.hbs new file mode 100644 index 000000000000..98caaba5ed59 --- /dev/null +++ b/ui/packages/consul-ui/app/components/brand-loader/enterprise.hbs @@ -0,0 +1,2 @@ + + diff --git a/ui/packages/consul-ui/app/components/brand-loader/index.hbs b/ui/packages/consul-ui/app/components/brand-loader/index.hbs new file mode 100644 index 000000000000..e00f7dd309ac --- /dev/null +++ b/ui/packages/consul-ui/app/components/brand-loader/index.hbs @@ -0,0 +1,12 @@ +
+ + + + {{@subtitle}} + {{yield}} + +
+ diff --git a/ui/packages/consul-ui/app/components/brand-loader/index.scss b/ui/packages/consul-ui/app/components/brand-loader/index.scss new file mode 100644 index 000000000000..9c622820f6cc --- /dev/null +++ b/ui/packages/consul-ui/app/components/brand-loader/index.scss @@ -0,0 +1,5 @@ +@import './skin'; +@import './layout'; +.brand-loader { + @extend %brand-loader; +} diff --git a/ui/packages/consul-ui/app/components/brand-loader/layout.scss b/ui/packages/consul-ui/app/components/brand-loader/layout.scss new file mode 100644 index 000000000000..b77e439d6911 --- /dev/null +++ b/ui/packages/consul-ui/app/components/brand-loader/layout.scss @@ -0,0 +1,6 @@ +%brand-loader { + position: absolute; + top: 50%; + margin-top: -26px; + left: 50%; +} diff --git a/ui/packages/consul-ui/app/styles/components/brand-loader/skin.scss b/ui/packages/consul-ui/app/components/brand-loader/skin.scss similarity index 100% rename from ui/packages/consul-ui/app/styles/components/brand-loader/skin.scss rename to ui/packages/consul-ui/app/components/brand-loader/skin.scss diff --git a/ui/packages/consul-ui/app/components/consul/loader/README.mdx b/ui/packages/consul-ui/app/components/consul/loader/README.mdx index 0c0611079e58..e8520a3a3cb7 100644 --- a/ui/packages/consul-ui/app/components/consul/loader/README.mdx +++ b/ui/packages/consul-ui/app/components/consul/loader/README.mdx @@ -1,12 +1,13 @@ # Consul::Loader +Simple template-only component to show the circular animated Consul loader animation. + ```hbs preview-template
``` -Simple template-only component to show the circular animated Consul loader animation. ### See diff --git a/ui/packages/consul-ui/app/styles/components/brand-loader/index.scss b/ui/packages/consul-ui/app/components/consul/loader/index.scss similarity index 50% rename from ui/packages/consul-ui/app/styles/components/brand-loader/index.scss rename to ui/packages/consul-ui/app/components/consul/loader/index.scss index bc182521964a..7cb5f7a28e0d 100644 --- a/ui/packages/consul-ui/app/styles/components/brand-loader/index.scss +++ b/ui/packages/consul-ui/app/components/consul/loader/index.scss @@ -1,2 +1,5 @@ @import './skin'; @import './layout'; +.consul-loader { + @extend %loader; +} diff --git a/ui/packages/consul-ui/app/styles/components/loader/layout.scss b/ui/packages/consul-ui/app/components/consul/loader/layout.scss similarity index 100% rename from ui/packages/consul-ui/app/styles/components/loader/layout.scss rename to ui/packages/consul-ui/app/components/consul/loader/layout.scss diff --git a/ui/packages/consul-ui/app/styles/components/loader/skin.scss b/ui/packages/consul-ui/app/components/consul/loader/skin.scss similarity index 91% rename from ui/packages/consul-ui/app/styles/components/loader/skin.scss rename to ui/packages/consul-ui/app/components/consul/loader/skin.scss index 373882d1ff45..20ab7c0a7dd6 100644 --- a/ui/packages/consul-ui/app/styles/components/loader/skin.scss +++ b/ui/packages/consul-ui/app/components/consul/loader/skin.scss @@ -1,3 +1,6 @@ +%loader circle { + fill: var(--brand-100); +} %loader circle { animation: loader-animation 1.5s infinite ease-in-out; transform-origin: 50% 50%; diff --git a/ui/packages/consul-ui/app/styles/base/animation/index.scss b/ui/packages/consul-ui/app/styles/base/animation/index.scss index ab19562b4277..7f0d2a4762bc 100644 --- a/ui/packages/consul-ui/app/styles/base/animation/index.scss +++ b/ui/packages/consul-ui/app/styles/base/animation/index.scss @@ -21,3 +21,18 @@ transition-timing-function: cubic-bezier(0.1, 0.1, 0.25, 0.9); transition-duration: 0.1s; } +%animation-pushover { + animation-timing-function: cubic-bezier(0.1, 0.1, 0.25, 0.9); + animation-duration: 0.1s; +} +%animation-remove-from-flow { + animation-name: remove-from-flow; + animation-fill-mode: forwards; +} +@keyframes remove-from-flow { + 100% { + visibility: hidden; + overflow: hidden; + clip: rect(0 0 0 0); + } +} diff --git a/ui/packages/consul-ui/app/styles/base/color/base-variables.scss b/ui/packages/consul-ui/app/styles/base/color/base-variables.scss index 99cde386bf60..685b839bbd09 100644 --- a/ui/packages/consul-ui/app/styles/base/color/base-variables.scss +++ b/ui/packages/consul-ui/app/styles/base/color/base-variables.scss @@ -18,6 +18,19 @@ $magenta-600: #9e2159; $magenta-700: #7d1a47; $magenta-800: #5a1434; $magenta-900: #360c1f; + +$rose-010: #fff2f8; +$rose-050: #fff2f8; +$rose-100: #f8d9e7; +$rose-200: #f8d9e7; +$rose-300: #e07eac; +$rose-400: #e07eac; +$rose-500: #ca2171; +$rose-600: #8e134a; +$rose-700: #8e134a; +$rose-800: #650d34; +$rose-900: #650d34; + $cobalt-050: #f0f5ff; $cobalt-100: #bfd4ff; $cobalt-200: #8ab1ff; diff --git a/ui/packages/consul-ui/app/styles/components.scss b/ui/packages/consul-ui/app/styles/components.scss index 5ac8ac29c874..441519b09588 100644 --- a/ui/packages/consul-ui/app/styles/components.scss +++ b/ui/packages/consul-ui/app/styles/components.scss @@ -1,4 +1,5 @@ @import './base/components/index'; +@import 'ember-power-select'; /**/ @@ -35,14 +36,8 @@ @import './components/radio-card'; @import './components/tabular-dl'; -/**/ - -@import './components/brand-loader'; -@import './components/loader'; - -/**/ - @import './components/app-view'; +@import 'consul-ui/components/brand-loader'; @import 'consul-ui/components/skip-links'; @import 'consul-ui/components/app'; /* app chrome */ @@ -51,10 +46,7 @@ @import 'consul-ui/components/main-nav-vertical'; @import 'consul-ui/components/hashicorp-consul'; /**/ -@import 'ember-power-select'; -/**/ @import 'consul-ui/components/menu-panel'; - @import 'consul-ui/components/inline-code'; @import 'consul-ui/components/overlay'; @import 'consul-ui/components/tooltip'; @@ -67,6 +59,7 @@ @import 'consul-ui/components/search-bar'; @import 'consul-ui/components/certificate'; +@import 'consul-ui/components/consul/loader'; @import 'consul-ui/components/consul/tomography/graph'; @import 'consul-ui/components/consul/discovery-chain'; @import 'consul-ui/components/consul/upstream-instance/list'; diff --git a/ui/packages/consul-ui/app/styles/components/brand-loader.scss b/ui/packages/consul-ui/app/styles/components/brand-loader.scss deleted file mode 100644 index aa474ee3c976..000000000000 --- a/ui/packages/consul-ui/app/styles/components/brand-loader.scss +++ /dev/null @@ -1,7 +0,0 @@ -@import './brand-loader/index'; -html body > .brand-loader { - display: none; -} -html.ember-loading body > .brand-loader { - @extend %brand-loader; -} diff --git a/ui/packages/consul-ui/app/styles/components/brand-loader/layout.scss b/ui/packages/consul-ui/app/styles/components/brand-loader/layout.scss deleted file mode 100644 index 22242ba50224..000000000000 --- a/ui/packages/consul-ui/app/styles/components/brand-loader/layout.scss +++ /dev/null @@ -1,7 +0,0 @@ -%brand-loader { - display: flex; - align-items: center; - justify-content: center; - width: 100vw; - height: 100vh; -} diff --git a/ui/packages/consul-ui/app/styles/components/loader.scss b/ui/packages/consul-ui/app/styles/components/loader.scss deleted file mode 100644 index d9c9c45f7588..000000000000 --- a/ui/packages/consul-ui/app/styles/components/loader.scss +++ /dev/null @@ -1,14 +0,0 @@ -@import './loader/index'; -.consul-loader { - @extend %loader; -} -%loader circle { - fill: $magenta-100; -} -html.ember-loading .view-loader, -html[data-state='idle'] .view-loader { - display: none; -} -.outlet[data-state='loading'] { - display: none; -} diff --git a/ui/packages/consul-ui/app/styles/components/loader/index.scss b/ui/packages/consul-ui/app/styles/components/loader/index.scss deleted file mode 100644 index bc182521964a..000000000000 --- a/ui/packages/consul-ui/app/styles/components/loader/index.scss +++ /dev/null @@ -1,2 +0,0 @@ -@import './skin'; -@import './layout'; diff --git a/ui/packages/consul-ui/app/styles/debug.scss b/ui/packages/consul-ui/app/styles/debug.scss index 8b04b03224e0..109f3283fe1f 100644 --- a/ui/packages/consul-ui/app/styles/debug.scss +++ b/ui/packages/consul-ui/app/styles/debug.scss @@ -4,7 +4,7 @@ // temporary component debugging setup @import 'consul-ui/components/main-nav-vertical/debug'; -.is-debug .brand-loader { +html.is-debug body > .brand-loader { display: none !important; } @@ -67,17 +67,17 @@ margin-bottom: 0; } figure { - margin-bottom: .5rem; + margin-bottom: 0.5rem; } figcaption { - margin-bottom: .5rem; + margin-bottom: 0.5rem; color: var(--gray-400); font-style: italic; } - figure > [type=text] { + figure > [type='text'] { border: 1px solid var(--gray-999); width: 100%; - padding: .5rem; + padding: 0.5rem; } } // &__snippets__tabs__button { diff --git a/ui/packages/consul-ui/app/styles/layout.scss b/ui/packages/consul-ui/app/styles/layout.scss index e816900c601f..19e7d2c2a534 100644 --- a/ui/packages/consul-ui/app/styles/layout.scss +++ b/ui/packages/consul-ui/app/styles/layout.scss @@ -1,5 +1,6 @@ @import 'layouts/index'; +/* position main app-view when there are/aren't breadcrumbs */ .app-view { margin-top: 50px; } @@ -8,6 +9,35 @@ margin-top: 10px; } } +/**/ + +/* transition the initial brand-loader out */ +html body > .brand-loader { + @extend %transition-pushover; + transition-property: transform, opacity; + transform: translate(0, 0); + opacity: 1; +} +html[data-state]:not(.ember-loading) body > .brand-loader { + @extend %animation-pushover, %animation-remove-from-flow; + opacity: 0; +} +@media #{$--sidebar-open} { + html[data-state] body > .brand-loader { + transform: translate(calc(var(--chrome-width) / 2), 0); + } +} +/**/ + +/* hide the Consul::Loader/spinning loader when idle/hide content when loading */ +html.ember-loading .view-loader, +html[data-state='idle'] .view-loader { + display: none; +} +.outlet[data-state='loading'] { + display: none; +} +/**/ /* all forms have a margin below the header */ html[data-route$='create'] .app-view > header + div > *:first-child, diff --git a/ui/packages/consul-ui/app/styles/variables.scss b/ui/packages/consul-ui/app/styles/variables.scss index 59a02ce99d3e..2405a6cee987 100644 --- a/ui/packages/consul-ui/app/styles/variables.scss +++ b/ui/packages/consul-ui/app/styles/variables.scss @@ -1,4 +1,5 @@ @import './base/reset/index'; @import './base/index'; @import './variables/custom-query'; +@import './variables/layout'; @import './variables/skin'; diff --git a/ui/packages/consul-ui/app/styles/variables/layout.scss b/ui/packages/consul-ui/app/styles/variables/layout.scss new file mode 100644 index 000000000000..7733342c3504 --- /dev/null +++ b/ui/packages/consul-ui/app/styles/variables/layout.scss @@ -0,0 +1,4 @@ +:root { + --chrome-width: 300px; + --chrome-height: 64px; +} diff --git a/ui/packages/consul-ui/app/styles/variables/skin.scss b/ui/packages/consul-ui/app/styles/variables/skin.scss index 5edde07b73d9..c0aea2172032 100644 --- a/ui/packages/consul-ui/app/styles/variables/skin.scss +++ b/ui/packages/consul-ui/app/styles/variables/skin.scss @@ -12,11 +12,12 @@ /* base brand colors */ --brand-050: #{$magenta-050}; - // --brand-100: #{$magenta-100}; + --brand-100: #{$rose-100}; // --brand-200: #{$magenta-200}; // --brand-300: #{$magenta-300}; // --brand-400: #{$magenta-400}; // --brand-500: #{$magenta-500}; + /* temporary rose-like color until its replaced by a numbered one */ --brand-600: #e03875; // --brand-700: #{$magenta-700}; --brand-800: #{$magenta-800}; diff --git a/ui/packages/consul-ui/app/templates/application.hbs b/ui/packages/consul-ui/app/templates/application.hbs index af37a5365fd8..d40a6c9d044f 100644 --- a/ui/packages/consul-ui/app/templates/application.hbs +++ b/ui/packages/consul-ui/app/templates/application.hbs @@ -30,15 +30,17 @@ as |source|> @nspace={{or nspace nspaces.firstObject}} @onchange={{action "reauthorize"}} as |consul|> - - {{outlet}} - - + + {{outlet}} + + {{/if}} diff --git a/ui/packages/consul-ui/lib/startup/templates/body.html.js b/ui/packages/consul-ui/lib/startup/templates/body.html.js index 17a4a1b0834e..3187b90b993c 100644 --- a/ui/packages/consul-ui/lib/startup/templates/body.html.js +++ b/ui/packages/consul-ui/lib/startup/templates/body.html.js @@ -1,6 +1,20 @@ // rootURL in production equals `{{.ContentPath}}` and therefore is replaced // with the value of -ui-content-path. During development rootURL uses the // value as set in environment.js + +const read = require('fs').readFileSync; + +const hbsRe = /{{(@[a-z]*)}}/g; + +const hbs = (path, attrs = {}) => + read(`${process.cwd()}/app/components/${path}`) + .toString() + .replace('{{yield}}', '') + .replace(hbsRe, (match, prop) => attrs[prop.substr(1)]); + +const BrandLoader = attrs => hbs('brand-loader/index.hbs', attrs); +const Enterprise = attrs => hbs('brand-loader/enterprise.hbs', attrs); + module.exports = ({ appName, environment, rootURL, config }) => ` - -
- - - - ${ - config.CONSUL_BINARY_TYPE !== 'oss' && config.CONSUL_BINARY_TYPE !== '' - ? ` - - ` - : `` - } - -
+${BrandLoader({ + color: '#8E96A3', + width: config.CONSUL_BINARY_TYPE !== 'oss' && config.CONSUL_BINARY_TYPE !== '' ? `394` : `198`, + subtitle: + config.CONSUL_BINARY_TYPE !== 'oss' && config.CONSUL_BINARY_TYPE !== '' ? Enterprise() : ``, +})}