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:
parent
b9edfe1b16
commit
b574093cf1
|
@ -0,0 +1,3 @@
|
|||
```release-note:improvement
|
||||
ui: Improve loader centering with new side navigation
|
||||
```
|
|
@ -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 {
|
||||
|
|
|
@ -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
|
@ -0,0 +1,5 @@
|
|||
@import './skin';
|
||||
@import './layout';
|
||||
.brand-loader {
|
||||
@extend %brand-loader;
|
||||
}
|
|
@ -0,0 +1,6 @@
|
|||
%brand-loader {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
margin-top: -26px;
|
||||
left: 50%;
|
||||
}
|
|
@ -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
|
||||
|
||||
|
|
|
@ -1,2 +1,5 @@
|
|||
@import './skin';
|
||||
@import './layout';
|
||||
.consul-loader {
|
||||
@extend %loader;
|
||||
}
|
|
@ -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%;
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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';
|
||||
|
|
|
@ -1,7 +0,0 @@
|
|||
@import './brand-loader/index';
|
||||
html body > .brand-loader {
|
||||
display: none;
|
||||
}
|
||||
html.ember-loading body > .brand-loader {
|
||||
@extend %brand-loader;
|
||||
}
|
|
@ -1,7 +0,0 @@
|
|||
%brand-loader {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
}
|
|
@ -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;
|
||||
}
|
|
@ -1,2 +0,0 @@
|
|||
@import './skin';
|
||||
@import './layout';
|
|
@ -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 {
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -1,4 +1,5 @@
|
|||
@import './base/reset/index';
|
||||
@import './base/index';
|
||||
@import './variables/custom-query';
|
||||
@import './variables/layout';
|
||||
@import './variables/skin';
|
||||
|
|
|
@ -0,0 +1,4 @@
|
|||
:root {
|
||||
--chrome-width: 300px;
|
||||
--chrome-height: 64px;
|
||||
}
|
|
@ -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};
|
||||
|
|
|
@ -30,15 +30,17 @@ as |source|>
|
|||
@nspace={{or nspace nspaces.firstObject}}
|
||||
@onchange={{action "reauthorize"}}
|
||||
as |consul|>
|
||||
<Outlet
|
||||
@name="application"
|
||||
@model={{hash
|
||||
app=consul
|
||||
}}
|
||||
as |o|>
|
||||
{{outlet}}
|
||||
</Outlet>
|
||||
<Consul::Loader class="view-loader" />
|
||||
<Outlet
|
||||
@name="application"
|
||||
@model={{hash
|
||||
app=consul
|
||||
}}
|
||||
as |o|>
|
||||
{{outlet}}
|
||||
</Outlet>
|
||||
<Consul::Loader
|
||||
class="view-loader"
|
||||
/>
|
||||
</HashicorpConsul>
|
||||
{{/if}}
|
||||
</Route>
|
||||
|
|
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue