mirror of https://github.com/status-im/consul.git
UI: Tooltips and feedback-dialogs are the same thing - merge (#4678)
This commit is contained in:
parent
d0405ba8b9
commit
ece09e300d
|
@ -1,6 +1,8 @@
|
|||
import Component from '@ember/component';
|
||||
import { get, set } from '@ember/object';
|
||||
import { inject as service } from '@ember/service';
|
||||
import qsaFactory from 'consul-ui/utils/qsa-factory';
|
||||
const $$ = qsaFactory();
|
||||
|
||||
import SlotsMixin from 'ember-block-slots';
|
||||
const STATE_READY = 'ready';
|
||||
|
@ -8,8 +10,9 @@ const STATE_SUCCESS = 'success';
|
|||
const STATE_ERROR = 'error';
|
||||
export default Component.extend(SlotsMixin, {
|
||||
wait: service('timeout'),
|
||||
interval: null,
|
||||
classNames: ['with-feedback'],
|
||||
transition: '',
|
||||
transitionClassName: 'feedback-dialog-out',
|
||||
state: STATE_READY,
|
||||
permanent: true,
|
||||
init: function() {
|
||||
|
@ -17,26 +20,30 @@ export default Component.extend(SlotsMixin, {
|
|||
this.success = this._success.bind(this);
|
||||
this.error = this._error.bind(this);
|
||||
},
|
||||
_success: function() {
|
||||
set(this, 'state', STATE_SUCCESS);
|
||||
get(this, 'wait')
|
||||
.execute(3000, interval => {
|
||||
clearInterval(get(this, 'interval'));
|
||||
set(this, 'interval', interval);
|
||||
applyTransition: function() {
|
||||
const wait = get(this, 'wait').execute;
|
||||
const className = get(this, 'transitionClassName');
|
||||
wait(0)
|
||||
.then(() => {
|
||||
set(this, 'transition', className);
|
||||
return wait(0);
|
||||
})
|
||||
.then(() => {
|
||||
return new Promise(resolve => {
|
||||
$$(`.${className}`, this.element)[0].addEventListener('transitionend', resolve);
|
||||
});
|
||||
})
|
||||
.then(() => {
|
||||
set(this, 'transition', '');
|
||||
set(this, 'state', STATE_READY);
|
||||
});
|
||||
},
|
||||
_success: function() {
|
||||
set(this, 'state', STATE_SUCCESS);
|
||||
this.applyTransition();
|
||||
},
|
||||
_error: function() {
|
||||
set(this, 'state', STATE_ERROR);
|
||||
get(this, 'wait')
|
||||
.execute(3000, interval => {
|
||||
clearInterval(get(this, 'interval'));
|
||||
set(this, 'interval', interval);
|
||||
})
|
||||
.then(() => {
|
||||
set(this, 'state', STATE_READY);
|
||||
});
|
||||
this.applyTransition();
|
||||
},
|
||||
});
|
||||
|
|
|
@ -0,0 +1,13 @@
|
|||
%blink-in-fade-out {
|
||||
transition-property: opacity;
|
||||
transition-duration: 0.1s;
|
||||
transition-timing-function: linear;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
%blink-in-fade-out-active {
|
||||
transition-duration: 0;
|
||||
transition-duration: unset;
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
}
|
|
@ -1,4 +1,5 @@
|
|||
@import './decoration/index';
|
||||
@import './color/index';
|
||||
@import './animation/index';
|
||||
@import './typography/index';
|
||||
@import './icons/index';
|
||||
|
|
|
@ -2,6 +2,10 @@
|
|||
main .with-feedback {
|
||||
@extend %feedback-dialog-inline;
|
||||
}
|
||||
%feedback-dialog-inline .feedback-dialog-out {
|
||||
@extend %blink-in-fade-out;
|
||||
transition-delay: 3s;
|
||||
}
|
||||
@media #{$--lt-spacious-page-header} {
|
||||
.actions .with-feedback p {
|
||||
bottom: auto;
|
||||
|
@ -9,6 +13,8 @@ main .with-feedback {
|
|||
}
|
||||
.actions .with-feedback p::after {
|
||||
bottom: auto;
|
||||
top: -5px;
|
||||
top: -13px !important;
|
||||
border-bottom: 18px solid $ui-gray-800;
|
||||
border-top: 0;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,2 +1 @@
|
|||
@import './skin';
|
||||
@import './layout';
|
||||
|
|
|
@ -1,23 +1,12 @@
|
|||
%feedback-dialog-inline {
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
@extend %tooltip;
|
||||
}
|
||||
|
||||
%feedback-dialog-inline p::after {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
margin-left: -5px;
|
||||
bottom: -5px;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
transform: rotate(45deg);
|
||||
@extend %tooltip-tail;
|
||||
top: auto !important;
|
||||
bottom: -13px;
|
||||
}
|
||||
%feedback-dialog-inline p {
|
||||
padding: 10px;
|
||||
position: absolute;
|
||||
bottom: 100%;
|
||||
text-align: center;
|
||||
white-space: nowrap; //temp
|
||||
@extend %tooltip-bubble;
|
||||
}
|
||||
|
|
|
@ -1,5 +0,0 @@
|
|||
%feedback-dialog-inline p,
|
||||
%feedback-dialog-inline p::after {
|
||||
color: $ui-white;
|
||||
background-color: $ui-gray-800;
|
||||
}
|
|
@ -1,9 +1,4 @@
|
|||
@import './with-tooltip/index';
|
||||
%app-view h1 span {
|
||||
@extend %with-tooltip;
|
||||
}
|
||||
%app-view h1 span {
|
||||
text-indent: -9000px;
|
||||
font-size: 0;
|
||||
top: -9px;
|
||||
@extend %with-pseudo-tooltip;
|
||||
}
|
||||
|
|
|
@ -1,2 +1,27 @@
|
|||
@import './skin';
|
||||
@import './layout';
|
||||
%with-pseudo-tooltip {
|
||||
@extend %tooltip;
|
||||
}
|
||||
%with-pseudo-tooltip::before {
|
||||
@extend %tooltip-bubble;
|
||||
}
|
||||
%with-pseudo-tooltip::after {
|
||||
@extend %tooltip-tail;
|
||||
}
|
||||
%with-pseudo-tooltip {
|
||||
text-indent: -9000px;
|
||||
font-size: 0;
|
||||
top: -9px;
|
||||
}
|
||||
|
||||
%with-pseudo-tooltip::after,
|
||||
%with-pseudo-tooltip::before {
|
||||
@extend %blink-in-fade-out;
|
||||
}
|
||||
%with-pseudo-tooltip:hover::after,
|
||||
%with-pseudo-tooltip:hover::before,
|
||||
%with-pseudo-tooltip:focus::after,
|
||||
%with-pseudo-tooltip:focus::before {
|
||||
@extend %blink-in-fade-out-active;
|
||||
}
|
||||
|
|
|
@ -1,14 +1,14 @@
|
|||
%with-tooltip {
|
||||
%tooltip {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
%with-tooltip::before,
|
||||
%with-tooltip::after {
|
||||
%tooltip-bubble,
|
||||
%tooltip-tail {
|
||||
position: absolute;
|
||||
}
|
||||
%with-tooltip::before {
|
||||
%tooltip-bubble {
|
||||
padding: 10px;
|
||||
bottom: calc(100% + 5px);
|
||||
text-align: center;
|
||||
|
@ -18,22 +18,16 @@
|
|||
// text of the element %with-tooltip
|
||||
text-indent: 0;
|
||||
}
|
||||
%with-tooltip::after {
|
||||
%tooltip-tail {
|
||||
content: '';
|
||||
left: 50%;
|
||||
margin-left: -5px;
|
||||
margin-left: -10px;
|
||||
top: -10px;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
%with-tooltip::after,
|
||||
%with-tooltip::before {
|
||||
display: none;
|
||||
}
|
||||
%with-tooltip:hover::after,
|
||||
%with-tooltip:hover::before,
|
||||
%with-tooltip:focus::after,
|
||||
%with-tooltip:focus::before {
|
||||
display: block;
|
||||
transform: scale(1, 0.5);
|
||||
width: 0;
|
||||
height: 0;
|
||||
background-color: transparent !important;
|
||||
border-left: 9px solid transparent;
|
||||
border-right: 9px solid transparent;
|
||||
border-top: 18px solid $ui-gray-800;
|
||||
}
|
||||
|
|
|
@ -1,9 +1,9 @@
|
|||
%with-tooltip::before,
|
||||
%with-tooltip::after {
|
||||
%tooltip-bubble,
|
||||
%tooltip-tail {
|
||||
color: $ui-white;
|
||||
background-color: $ui-gray-800;
|
||||
}
|
||||
%with-tooltip::before {
|
||||
%tooltip-bubble {
|
||||
border-radius: $decor-radius-200;
|
||||
box-shadow: 0 3px 1px 0 rgba($ui-black, 0.12);
|
||||
}
|
||||
|
|
|
@ -28,7 +28,7 @@ html.template-edit main {
|
|||
}
|
||||
@media #{$--lt-spacious-page-header} {
|
||||
.actions button.copy-btn {
|
||||
margin-top: -42px;
|
||||
margin-top: -56px;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
@ -38,7 +38,7 @@ main form + div .with-confirmation {
|
|||
margin-bottom: 2em;
|
||||
}
|
||||
@media #{$--lt-wide-form} {
|
||||
main form [type="reset"] {
|
||||
main form [type='reset'] {
|
||||
float: right;
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
|
|
|
@ -51,7 +51,7 @@ th,
|
|||
%breadcrumbs a,
|
||||
%action-group a,
|
||||
%tab-nav,
|
||||
%with-tooltip::before {
|
||||
%tooltip-bubble {
|
||||
font-weight: $typo-weight-medium;
|
||||
}
|
||||
main label a[rel*='help'],
|
||||
|
@ -84,7 +84,7 @@ td {
|
|||
}
|
||||
th,
|
||||
%form-element > span,
|
||||
%with-tooltip::before,
|
||||
%tooltip-bubble,
|
||||
%healthchecked-resource strong,
|
||||
%footer {
|
||||
font-size: $typo-size-700;
|
||||
|
|
|
@ -3,7 +3,7 @@ $ideal-viewport-width: #{$ideal-viewport-width-num}px;
|
|||
$ideal-content-width-num: 1150;
|
||||
$ideal-content-width: #{$ideal-content-width-num}px;
|
||||
$ideal-viewport-padding-num: 24;
|
||||
$ideal-viewport-padding: #{ideal-viewport-padding-num}px;
|
||||
$ideal-viewport-padding: #{$ideal-viewport-padding-num}px;
|
||||
$minimum-viewport-padding: 10px;
|
||||
$ideal-content-padding: 33px;
|
||||
|
||||
|
@ -29,15 +29,17 @@ $ideal-content-padding: 33px;
|
|||
padding-left: calc(#{$ideal-viewport-padding-num}vw / (#{$ideal-viewport-width-num} / 100));
|
||||
padding-right: calc(#{$ideal-viewport-padding-num}vw / (#{$ideal-viewport-width-num} / 100));
|
||||
}
|
||||
%content-container {
|
||||
padding-left: calc(33% / (#{$ideal-viewport-width-num} / 100));
|
||||
padding-right: calc(33% / (#{$ideal-viewport-width-num} / 100));
|
||||
padding-left: calc(24vw / (#{$ideal-viewport-width-num} / 100));
|
||||
padding-right: calc(24vw / (#{$ideal-viewport-width-num} / 100));
|
||||
}
|
||||
@media #{$--min-padding} {
|
||||
%viewport-container {
|
||||
padding-left: $minimum-viewport-padding;
|
||||
padding-right: $minimum-viewport-padding;
|
||||
}
|
||||
%content-container {
|
||||
padding-left: $ideal-viewport-padding;
|
||||
padding-right: $ideal-viewport-padding;
|
||||
}
|
||||
}
|
||||
@media #{$--max-padding} {
|
||||
%viewport-container {
|
||||
|
@ -49,9 +51,3 @@ $ideal-content-padding: 33px;
|
|||
padding-right: $ideal-viewport-padding;
|
||||
}
|
||||
}
|
||||
%content-container {
|
||||
padding-left: calc(33% / (#{$ideal-viewport-width-num} / 100));
|
||||
padding-right: calc(33% / (#{$ideal-viewport-width-num} / 100));
|
||||
padding-left: calc(24vw / (#{$ideal-viewport-width-num} / 100));
|
||||
padding-right: calc(24vw / (#{$ideal-viewport-width-num} / 100));
|
||||
}
|
||||
|
|
|
@ -1,8 +1,8 @@
|
|||
{{yield}}
|
||||
{{#if (eq state 'success') }}
|
||||
{{#yield-slot 'success'}}{{yield}}{{/yield-slot}}
|
||||
{{#yield-slot 'success' (block-params transition)}}{{yield}}{{/yield-slot}}
|
||||
{{else if (eq state 'error') }}
|
||||
{{#yield-slot 'error'}}{{yield}}{{/yield-slot}}
|
||||
{{#yield-slot 'error' (block-params transition)}}{{yield}}{{/yield-slot}}
|
||||
{{/if}}
|
||||
{{#if (or permanent (eq state 'ready')) }}
|
||||
{{#yield-slot 'action' (block-params success error)}}{{yield}}{{message}}{{/yield-slot}}
|
||||
|
|
|
@ -4,15 +4,15 @@
|
|||
Copy Output
|
||||
{{/copy-button}}
|
||||
{{/block-slot}}
|
||||
{{#block-slot 'success'}}
|
||||
<p>
|
||||
Copied output!
|
||||
</p>
|
||||
{{#block-slot 'success' as |transition|}}
|
||||
<p class={{transition}}>
|
||||
Copied IP Address!
|
||||
</p>
|
||||
{{/block-slot}}
|
||||
{{#block-slot 'error'}}
|
||||
<p>
|
||||
Sorry, something went wrong!
|
||||
</p>
|
||||
{{#block-slot 'error' as |transition|}}
|
||||
<p class={{transition}}>
|
||||
Sorry, something went wrong!
|
||||
</p>
|
||||
{{/block-slot}}
|
||||
{{/feedback-dialog}}
|
||||
<dl>
|
||||
|
|
|
@ -24,13 +24,13 @@
|
|||
Copy token ID
|
||||
{{/copy-button}}
|
||||
{{/block-slot}}
|
||||
{{#block-slot 'success'}}
|
||||
<p>
|
||||
{{#block-slot 'success' as |transition|}}
|
||||
<p class={{transition}}>
|
||||
Copied token ID!
|
||||
</p>
|
||||
{{/block-slot}}
|
||||
{{#block-slot 'error'}}
|
||||
<p>
|
||||
{{#block-slot 'error' as |transition|}}
|
||||
<p class={{transition}}>
|
||||
Sorry, something went wrong!
|
||||
</p>
|
||||
{{/block-slot}}
|
||||
|
|
|
@ -24,13 +24,13 @@
|
|||
Copy UUID
|
||||
{{/copy-button}}
|
||||
{{/block-slot}}
|
||||
{{#block-slot 'success'}}
|
||||
<p>
|
||||
{{#block-slot 'success' as |transition|}}
|
||||
<p class={{transition}}>
|
||||
Copied UUID!
|
||||
</p>
|
||||
{{/block-slot}}
|
||||
{{#block-slot 'error'}}
|
||||
<p>
|
||||
{{#block-slot 'error' as |transition|}}
|
||||
<p class={{transition}}>
|
||||
Sorry, something went wrong!
|
||||
</p>
|
||||
{{/block-slot}}
|
||||
|
|
|
@ -32,13 +32,13 @@
|
|||
{{item.Address}}
|
||||
{{/copy-button}}
|
||||
{{/block-slot}}
|
||||
{{#block-slot 'success'}}
|
||||
<p>
|
||||
{{#block-slot 'success' as |transition|}}
|
||||
<p class={{transition}}>
|
||||
Copied IP Address!
|
||||
</p>
|
||||
{{/block-slot}}
|
||||
{{#block-slot 'error'}}
|
||||
<p>
|
||||
{{#block-slot 'error' as |transition|}}
|
||||
<p class={{transition}}>
|
||||
Sorry, something went wrong!
|
||||
</p>
|
||||
{{/block-slot}}
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
export default function(P = Promise, timeout = setTimeout) {
|
||||
// var interval;
|
||||
return function(milliseconds, cb) {
|
||||
return function(milliseconds, cb = function() {}) {
|
||||
// clearInterval(interval);
|
||||
// const cb = typeof _cb !== 'function' ? (i) => { clearInterval(interval);interval = i; } : _cb;
|
||||
return new P((resolve, reject) => {
|
||||
|
|
Loading…
Reference in New Issue