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:
parent
2052307c1c
commit
e455648f96
|
@ -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
|
||||
|
|
|
@ -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);
|
||||
});
|
||||
},
|
||||
});
|
||||
|
|
|
@ -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';
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
}
|
|
@ -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&orgid=1&datacenter={{ '{{Datacenter}}' }}&service-name={{ '{{Service.Name}}' }}</em>
|
||||
|
|
|
@ -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.
|
||||
|
|
Loading…
Reference in New Issue