luxolus
/
open-consul
2
0
Fork 0
Code Issues 1 Pull Requests Packages Releases Wiki Activity

UI: Tooltips and feedback-dialogs are the same thing - merge (#4678)

This commit is contained in:
John Cowen 2018-09-21 11:13:21 +01:00 committed by GitHub
parent 577dbef70a
commit df40c77e0e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
20 changed files with 125 additions and 105 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
ui-v2/app/components/feedback-dialog.js
View File

@ -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();
},
});

13
ui-v2/app/styles/base/animation/index.scss Normal file
View File

@ -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
ui-v2/app/styles/base/index.scss
View File

@ -1,4 +1,5 @@
@import './decoration/index';
@import './color/index';
@import './animation/index';
@import './typography/index';
@import './icons/index';

8
ui-v2/app/styles/components/feedback-dialog.scss
View File

@ -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
ui-v2/app/styles/components/feedback-dialog/index.scss
View File

@ -1,2 +1 @@
@import './skin';
@import './layout';

23
ui-v2/app/styles/components/feedback-dialog/layout.scss
View File

@ -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;
}

5
ui-v2/app/styles/components/feedback-dialog/skin.scss
View File

@ -1,5 +0,0 @@
%feedback-dialog-inline p,
%feedback-dialog-inline p::after {
color: $ui-white;
background-color: $ui-gray-800;
}

7
ui-v2/app/styles/components/with-tooltip.scss
View File

@ -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;
}

25
ui-v2/app/styles/components/with-tooltip/index.scss
View File

@ -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;
}

32
ui-v2/app/styles/components/with-tooltip/layout.scss
View File

@ -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;
}

6
ui-v2/app/styles/components/with-tooltip/skin.scss
View File

@ -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);
}

4
ui-v2/app/styles/core/layout.scss
View File

@ -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;
}

4
ui-v2/app/styles/core/typography.scss
View File

@ -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;

18
ui-v2/app/styles/layouts/containers.scss
View File

@ -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));
}

4
ui-v2/app/templates/components/feedback-dialog.hbs
View File

@ -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}}

16
ui-v2/app/templates/components/healthcheck-status.hbs
View File

@ -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>

8
ui-v2/app/templates/dc/acls/edit.hbs
View File

@ -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}}

8
ui-v2/app/templates/dc/intentions/edit.hbs
View File

@ -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}}

8
ui-v2/app/templates/dc/nodes/show.hbs
View File

@ -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}}

2
ui-v2/app/utils/promisedTimeout.js
View File

@ -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) => {