ui: Adds tick whilst editing the link template in the Settings area (#5820)

1. Amends our `base` animation placeholder to always reset
transition-duration. This has no effect on other components that are
already using this animation.
2. Adds a confirming class whenever a key is pressed, to show the green
tick. Uses CSS via `transition-delay` for debouncing.
This commit is contained in:
John Cowen 2019-05-17 12:33:12 +01:00 committed by GitHub
parent 2052307c1c
commit e455648f96
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 42 additions and 2 deletions

View File

@ -5,8 +5,18 @@ import { inject as service } from '@ember/service';
export default Controller.extend({
repo: service('settings'),
dom: service('dom'),
timeout: service('timeout'),
confirming: false,
applyTransition: function() {
const tick = get(this, 'timeout').tick;
set(this, 'confirming', true);
tick().then(() => {
set(this, 'confirming', false);
});
},
actions: {
key: function(e) {
this.applyTransition();
switch (true) {
case e.keyCode === 13:
// disable ENTER

View File

@ -1,9 +1,19 @@
import Service from '@ember/service';
import promisedTimeoutFactory from 'consul-ui/utils/promisedTimeout';
import { Promise } from 'rsvp';
import { next } from '@ember/runloop';
const promisedTimeout = promisedTimeoutFactory(Promise);
export default Service.extend({
// TODO: milliseconds should default to 0 or potentially just null
// if it is 0/null use tick/next instead
// if Octane eliminates the runloop things, look to use raf here instead
execute: function(milliseconds, cb) {
return promisedTimeout(milliseconds, cb);
},
tick: function() {
return new Promise(function(resolve, reject) {
next(resolve);
});
},
});

View File

@ -16,6 +16,7 @@
@import 'core/typography';
@import 'core/layout';
@import 'routes/dc/settings/index';
@import 'routes/dc/service/index';
@import 'routes/dc/nodes/index';
@import 'routes/dc/intention/index';

View File

@ -8,6 +8,8 @@
%blink-in-fade-out-active {
transition-duration: 0;
transition-duration: unset;
transition-delay: 0;
transition-delay: unset;
opacity: 1;
pointer-events: auto;
}

View File

@ -0,0 +1,17 @@
#urls_service span {
position: relative;
}
#urls_service span::after {
@extend %with-tick;
background-color: $green-500;
border-radius: 100%;
top: 13px;
right: 0;
}
#urls_service span::after {
@extend %blink-in-fade-out;
transition-delay: 3s;
}
#urls_service.confirming span::after {
@extend %blink-in-fade-out-active;
}

View File

@ -18,7 +18,7 @@
<p>
Add a link to the service detail page in the UI to get quick access to a service-wide metrics dashboard. Enter the dashboard URL into the field below. You can use the placeholders <code>{{'{{Datacenter}}'}}</code> and <code>{{'{{Service.Name}}'}}</code> which will be replaced with the name of the datacenter/service currently being viewed.
</p>
<label class="type-text">
<label class={{concat (if confirming 'confirming') ' type-text'}} id="urls_service">
<span>Link template for services</span>
<input type="text" name="urls[service]" value={{item.urls.service}} onchange={{action 'change'}} onkeypress={{action 'key'}} onkeydown={{action 'key'}} />
<em>e.g. https://grafana.example.com/d/1/consul-service-mesh&amp;orgid=1&amp;datacenter={{ '{{Datacenter}}' }}&amp;service-name={{ '{{Service.Name}}' }}</em>

View File

@ -2,7 +2,7 @@ import { moduleFor, test } from 'ember-qunit';
moduleFor('controller:settings', 'Unit | Controller | settings', {
// Specify the other units that are required for this test.
needs: ['service:settings', 'service:dom'],
needs: ['service:settings', 'service:dom', 'service:timeout'],
});
// Replace this with your real tests.