mirror of https://github.com/status-im/consul.git
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
43cf4fa2dc
commit
e3f9a0f8ee
|
@ -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 {
|
.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 {
|
||||||
|
|
|
@ -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
|
# 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
|
||||||
|
|
||||||
|
|
|
@ -1,2 +1,5 @@
|
||||||
@import './skin';
|
@import './skin';
|
||||||
@import './layout';
|
@import './layout';
|
||||||
|
.consul-loader {
|
||||||
|
@extend %loader;
|
||||||
|
}
|
|
@ -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%;
|
|
@ -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);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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';
|
||||||
|
|
|
@ -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
|
// 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 {
|
||||||
|
|
|
@ -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,
|
||||||
|
|
|
@ -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';
|
||||||
|
|
|
@ -0,0 +1,4 @@
|
||||||
|
:root {
|
||||||
|
--chrome-width: 300px;
|
||||||
|
--chrome-height: 64px;
|
||||||
|
}
|
|
@ -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};
|
||||||
|
|
|
@ -30,15 +30,17 @@ as |source|>
|
||||||
@nspace={{or nspace nspaces.firstObject}}
|
@nspace={{or nspace nspaces.firstObject}}
|
||||||
@onchange={{action "reauthorize"}}
|
@onchange={{action "reauthorize"}}
|
||||||
as |consul|>
|
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>
|
</HashicorpConsul>
|
||||||
{{/if}}
|
{{/if}}
|
||||||
</Route>
|
</Route>
|
||||||
|
|
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue