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.
This commit is contained in:
John Cowen 2021-05-07 12:23:29 +01:00 committed by GitHub
parent 43cf4fa2dc
commit e3f9a0f8ee
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
26 changed files with 185 additions and 80 deletions

3
.changelog/10181.txt Normal file
View File

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

View File

@ -1,7 +1,3 @@
.app {
--chrome-width: 300px;
--chrome-height: 64px;
}
.app .skip-links { .app .skip-links {
@extend %skip-links; @extend %skip-links;
} }
@ -44,7 +40,7 @@ main {
z-index: 10; z-index: 10;
} }
main { main {
margin-top: var(--chrome-height); margin-top: var(--chrome-height, 64px);
transition-property: margin-left; transition-property: margin-left;
} }
@ -54,11 +50,11 @@ main {
left: 0; left: 0;
} }
%main-nav-horizontal-toggle:checked + header > div > nav:first-of-type { %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 ~ main,
%main-nav-horizontal-toggle ~ footer { %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 ~ main,
%main-nav-horizontal-toggle:checked ~ footer { %main-nav-horizontal-toggle:checked ~ footer {
@ -70,7 +66,7 @@ main {
left: 0; left: 0;
} }
%main-nav-horizontal-toggle + header > div > nav:first-of-type { %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 ~ main,
%main-nav-horizontal-toggle ~ footer { %main-nav-horizontal-toggle ~ footer {

View File

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

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

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

View File

@ -0,0 +1,6 @@
%brand-loader {
position: absolute;
top: 50%;
margin-top: -26px;
left: 50%;
}

View File

@ -1,12 +1,13 @@
# Consul::Loader # Consul::Loader
Simple template-only component to show the circular animated Consul loader animation.
```hbs preview-template ```hbs preview-template
<div style="position: relative;height: 300px;width: 300px;margin: 0 auto;"> <div style="position: relative;height: 300px;width: 300px;margin: 0 auto;">
<Consul::Loader /> <Consul::Loader />
</div> </div>
``` ```
Simple template-only component to show the circular animated Consul loader animation.
### See ### See

View File

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

View File

@ -1,3 +1,6 @@
%loader circle {
fill: var(--brand-100);
}
%loader circle { %loader circle {
animation: loader-animation 1.5s infinite ease-in-out; animation: loader-animation 1.5s infinite ease-in-out;
transform-origin: 50% 50%; transform-origin: 50% 50%;

View File

@ -21,3 +21,18 @@
transition-timing-function: cubic-bezier(0.1, 0.1, 0.25, 0.9); transition-timing-function: cubic-bezier(0.1, 0.1, 0.25, 0.9);
transition-duration: 0.1s; 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);
}
}

View File

@ -18,6 +18,19 @@ $magenta-600: #9e2159;
$magenta-700: #7d1a47; $magenta-700: #7d1a47;
$magenta-800: #5a1434; $magenta-800: #5a1434;
$magenta-900: #360c1f; $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-050: #f0f5ff;
$cobalt-100: #bfd4ff; $cobalt-100: #bfd4ff;
$cobalt-200: #8ab1ff; $cobalt-200: #8ab1ff;

View File

@ -1,4 +1,5 @@
@import './base/components/index'; @import './base/components/index';
@import 'ember-power-select';
/**/ /**/
@ -35,14 +36,8 @@
@import './components/radio-card'; @import './components/radio-card';
@import './components/tabular-dl'; @import './components/tabular-dl';
/**/
@import './components/brand-loader';
@import './components/loader';
/**/
@import './components/app-view'; @import './components/app-view';
@import 'consul-ui/components/brand-loader';
@import 'consul-ui/components/skip-links'; @import 'consul-ui/components/skip-links';
@import 'consul-ui/components/app'; @import 'consul-ui/components/app';
/* app chrome */ /* app chrome */
@ -51,10 +46,7 @@
@import 'consul-ui/components/main-nav-vertical'; @import 'consul-ui/components/main-nav-vertical';
@import 'consul-ui/components/hashicorp-consul'; @import 'consul-ui/components/hashicorp-consul';
/**/ /**/
@import 'ember-power-select';
/**/
@import 'consul-ui/components/menu-panel'; @import 'consul-ui/components/menu-panel';
@import 'consul-ui/components/inline-code'; @import 'consul-ui/components/inline-code';
@import 'consul-ui/components/overlay'; @import 'consul-ui/components/overlay';
@import 'consul-ui/components/tooltip'; @import 'consul-ui/components/tooltip';
@ -67,6 +59,7 @@
@import 'consul-ui/components/search-bar'; @import 'consul-ui/components/search-bar';
@import 'consul-ui/components/certificate'; @import 'consul-ui/components/certificate';
@import 'consul-ui/components/consul/loader';
@import 'consul-ui/components/consul/tomography/graph'; @import 'consul-ui/components/consul/tomography/graph';
@import 'consul-ui/components/consul/discovery-chain'; @import 'consul-ui/components/consul/discovery-chain';
@import 'consul-ui/components/consul/upstream-instance/list'; @import 'consul-ui/components/consul/upstream-instance/list';

View File

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

View File

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

View File

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

View File

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

View File

@ -4,7 +4,7 @@
// temporary component debugging setup // temporary component debugging setup
@import 'consul-ui/components/main-nav-vertical/debug'; @import 'consul-ui/components/main-nav-vertical/debug';
.is-debug .brand-loader { html.is-debug body > .brand-loader {
display: none !important; display: none !important;
} }
@ -67,17 +67,17 @@
margin-bottom: 0; margin-bottom: 0;
} }
figure { figure {
margin-bottom: .5rem; margin-bottom: 0.5rem;
} }
figcaption { figcaption {
margin-bottom: .5rem; margin-bottom: 0.5rem;
color: var(--gray-400); color: var(--gray-400);
font-style: italic; font-style: italic;
} }
figure > [type=text] { figure > [type='text'] {
border: 1px solid var(--gray-999); border: 1px solid var(--gray-999);
width: 100%; width: 100%;
padding: .5rem; padding: 0.5rem;
} }
} }
// &__snippets__tabs__button { // &__snippets__tabs__button {

View File

@ -1,5 +1,6 @@
@import 'layouts/index'; @import 'layouts/index';
/* position main app-view when there are/aren't breadcrumbs */
.app-view { .app-view {
margin-top: 50px; margin-top: 50px;
} }
@ -8,6 +9,35 @@
margin-top: 10px; 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 */ /* all forms have a margin below the header */
html[data-route$='create'] .app-view > header + div > *:first-child, html[data-route$='create'] .app-view > header + div > *:first-child,

View File

@ -1,4 +1,5 @@
@import './base/reset/index'; @import './base/reset/index';
@import './base/index'; @import './base/index';
@import './variables/custom-query'; @import './variables/custom-query';
@import './variables/layout';
@import './variables/skin'; @import './variables/skin';

View File

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

View File

@ -12,11 +12,12 @@
/* base brand colors */ /* base brand colors */
--brand-050: #{$magenta-050}; --brand-050: #{$magenta-050};
// --brand-100: #{$magenta-100}; --brand-100: #{$rose-100};
// --brand-200: #{$magenta-200}; // --brand-200: #{$magenta-200};
// --brand-300: #{$magenta-300}; // --brand-300: #{$magenta-300};
// --brand-400: #{$magenta-400}; // --brand-400: #{$magenta-400};
// --brand-500: #{$magenta-500}; // --brand-500: #{$magenta-500};
/* temporary rose-like color until its replaced by a numbered one */
--brand-600: #e03875; --brand-600: #e03875;
// --brand-700: #{$magenta-700}; // --brand-700: #{$magenta-700};
--brand-800: #{$magenta-800}; --brand-800: #{$magenta-800};

View File

@ -38,7 +38,9 @@ as |source|>
as |o|> as |o|>
{{outlet}} {{outlet}}
</Outlet> </Outlet>
<Consul::Loader class="view-loader" /> <Consul::Loader
class="view-loader"
/>
</HashicorpConsul> </HashicorpConsul>
{{/if}} {{/if}}
</Route> </Route>

File diff suppressed because one or more lines are too long