ui: Loader amends/improvements (#10181)

* ui: Loader amends/improvements

1. Create a JS compatible template only 'glimmer' component so we can
use it with or without glimmer.
2. Add a set of `rose` colors.
3. Animate the brand loader to keep it centered when the side
navigation appears.
4. Tweak the color of Consul::Loader to use a 'rose' color.
5. Move everything loader related to the `app/components/` folder and
add docs.

.changelog/10181.txt

@@ -0,0 +1,3 @@
+```release-note:improvement
+ui: Improve loader centering with new side navigation
+```

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 {

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
+<div style="position: relative;height: 300px;">
+  <BrandLoader
+    @width="198"
+    @color="#e07eac"
+  >
+  </BrandLoader>
+</div>
+```
+
+```hbs preview-template
+<div style="position: relative;height: 300px;">
+  <BrandLoader
+    @width="394"
+    @color="#8E96A3"
+  >
+    <BrandLoader::Enterprise />
+  </BrandLoader>
+</div>
+```
+
+## 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}}`|

ui/packages/consul-ui/app/components/brand-loader/index.scss

@@ -0,0 +1,5 @@
+@import './skin';
+@import './layout';
+.brand-loader {
+  @extend %brand-loader;
+}

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%;
+}

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
 <div style="position: relative;height: 300px;width: 300px;margin: 0 auto;">
   <Consul::Loader />
 </div>
 ```
 
-Simple template-only component to show the circular animated Consul loader animation.
 
 ### See
 

ui/packages/consul-ui/app/components/consul/loader/index.scss

@@ -1,2 +1,5 @@
 @import './skin';
 @import './layout';
+.consul-loader {
+  @extend %loader;
+}

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%;

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);
+  }
+}

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;

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';

ui/packages/consul-ui/app/styles/components/brand-loader.scss

@@ -1,7 +0,0 @@
-@import './brand-loader/index';
-html body > .brand-loader {
-  display: none;
-}
-html.ember-loading body > .brand-loader {
-  @extend %brand-loader;
-}

ui/packages/consul-ui/app/styles/components/brand-loader/layout.scss

@@ -1,7 +0,0 @@
-%brand-loader {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100vw;
-  height: 100vh;
-}

ui/packages/consul-ui/app/styles/components/loader.scss

@@ -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;
-}

ui/packages/consul-ui/app/styles/components/loader/index.scss

@@ -1,2 +0,0 @@
-@import './skin';
-@import './layout';

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 {

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,

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';

ui/packages/consul-ui/app/styles/variables/layout.scss

@@ -0,0 +1,4 @@
+:root {
+  --chrome-width: 300px;
+  --chrome-height: 64px;
+}

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};

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
-  @name="application"
+    @name="application"
-  @model={{hash
+    @model={{hash
-    app=consul
+      app=consul
-  }}
+    }}
-  as |o|>
+    as |o|>
-    {{outlet}}
+      {{outlet}}
-  </Outlet>
+    </Outlet>
-    <Consul::Loader class="view-loader" />
+    <Consul::Loader
+      class="view-loader"
+    />
   </HashicorpConsul>
 {{/if}}
 </Route>