mirror of https://github.com/hashicorp/consul
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.pull/10195/head
John Cowen
4 years ago
committed by
GitHub
parent
43cf4fa2dc
commit
e3f9a0f8ee
@ -0,0 +1,3 @@
|
||||
```release-note:improvement
|
||||
ui: Improve loader centering with new side navigation
|
||||
```
|
||||
@ -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,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%;
|
||||
@ -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';
|
||||
@ -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;
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
Loading…
Reference in new issue