status-im
/
consul
mirror of https://github.com/status-im/consul.git
2
0
Fork 0
Code Issues Projects 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 d0405ba8b9
commit ece09e300d
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 Component from '@ember/component';
import { get, set } from '@ember/object'; import { get, set } from '@ember/object';
import { inject as service } from '@ember/service'; import { inject as service } from '@ember/service';
import qsaFactory from 'consul-ui/utils/qsa-factory';
const $$ = qsaFactory();
import SlotsMixin from 'ember-block-slots'; import SlotsMixin from 'ember-block-slots';
const STATE_READY = 'ready'; const STATE_READY = 'ready';
@ -8,8 +10,9 @@ const STATE_SUCCESS = 'success';
const STATE_ERROR = 'error'; const STATE_ERROR = 'error';
export default Component.extend(SlotsMixin, { export default Component.extend(SlotsMixin, {
wait: service('timeout'), wait: service('timeout'),
interval: null,
classNames: ['with-feedback'], classNames: ['with-feedback'],
transition: '',
transitionClassName: 'feedback-dialog-out',
state: STATE_READY, state: STATE_READY,
permanent: true, permanent: true,
init: function() { init: function() {
@ -17,26 +20,30 @@ export default Component.extend(SlotsMixin, {
this.success = this._success.bind(this); this.success = this._success.bind(this);
this.error = this._error.bind(this); this.error = this._error.bind(this);
}, },
_success: function() { applyTransition: function() {
set(this, 'state', STATE_SUCCESS); const wait = get(this, 'wait').execute;
get(this, 'wait') const className = get(this, 'transitionClassName');
.execute(3000, interval => { wait(0)
clearInterval(get(this, 'interval')); .then(() => {
set(this, 'interval', interval); set(this, 'transition', className);
return wait(0);
}) })
.then(() => { .then(() => {
return new Promise(resolve => {
$$(`.${className}`, this.element)[0].addEventListener('transitionend', resolve);
});
})
.then(() => {
set(this, 'transition', '');
set(this, 'state', STATE_READY); set(this, 'state', STATE_READY);
}); });
}, },
_success: function() {
set(this, 'state', STATE_SUCCESS);
this.applyTransition();
},
_error: function() { _error: function() {
set(this, 'state', STATE_ERROR); set(this, 'state', STATE_ERROR);
get(this, 'wait') this.applyTransition();
.execute(3000, interval => {
clearInterval(get(this, 'interval'));
set(this, 'interval', interval);
})
.then(() => {
set(this, 'state', STATE_READY);
});
}, },
}); });

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 './decoration/index';
@import './color/index'; @import './color/index';
@import './animation/index';
@import './typography/index'; @import './typography/index';
@import './icons/index'; @import './icons/index';

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

@ -2,6 +2,10 @@
main .with-feedback { main .with-feedback {
@extend %feedback-dialog-inline; @extend %feedback-dialog-inline;
} }
%feedback-dialog-inline .feedback-dialog-out {
@extend %blink-in-fade-out;
transition-delay: 3s;
}
@media #{$--lt-spacious-page-header} { @media #{$--lt-spacious-page-header} {
.actions .with-feedback p { .actions .with-feedback p {
bottom: auto; bottom: auto;
@ -9,6 +13,8 @@ main .with-feedback {
} }
.actions .with-feedback p::after { .actions .with-feedback p::after {
bottom: auto; 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'; @import './layout';

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

@ -1,23 +1,12 @@
%feedback-dialog-inline { %feedback-dialog-inline {
position: relative; @extend %tooltip;
display: flex;
justify-content: center;
} }
%feedback-dialog-inline p::after { %feedback-dialog-inline p::after {
content: ''; @extend %tooltip-tail;
display: block; top: auto !important;
position: absolute; bottom: -13px;
left: 50%;
margin-left: -5px;
bottom: -5px;
width: 10px;
height: 10px;
transform: rotate(45deg);
} }
%feedback-dialog-inline p { %feedback-dialog-inline p {
padding: 10px; @extend %tooltip-bubble;
position: absolute;
bottom: 100%;
text-align: center;
white-space: nowrap; //temp
} }

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'; @import './with-tooltip/index';
%app-view h1 span { %app-view h1 span {
@extend %with-tooltip; @extend %with-pseudo-tooltip;
}
%app-view h1 span {
text-indent: -9000px;
font-size: 0;
top: -9px;
} }

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

@ -1,2 +1,27 @@
@import './skin'; @import './skin';
@import './layout'; @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; position: relative;
display: inline-flex; display: inline-flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
%with-tooltip::before, %tooltip-bubble,
%with-tooltip::after { %tooltip-tail {
position: absolute; position: absolute;
} }
%with-tooltip::before { %tooltip-bubble {
padding: 10px; padding: 10px;
bottom: calc(100% + 5px); bottom: calc(100% + 5px);
text-align: center; text-align: center;
@ -18,22 +18,16 @@
// text of the element %with-tooltip // text of the element %with-tooltip
text-indent: 0; text-indent: 0;
} }
%with-tooltip::after { %tooltip-tail {
content: ''; content: '';
left: 50%; left: 50%;
margin-left: -5px; margin-left: -10px;
top: -10px; top: -10px;
width: 10px; transform: scale(1, 0.5);
height: 10px; width: 0;
transform: rotate(45deg); height: 0;
} background-color: transparent !important;
%with-tooltip::after, border-left: 9px solid transparent;
%with-tooltip::before { border-right: 9px solid transparent;
display: none; border-top: 18px solid $ui-gray-800;
}
%with-tooltip:hover::after,
%with-tooltip:hover::before,
%with-tooltip:focus::after,
%with-tooltip:focus::before {
display: block;
} }

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

@ -1,9 +1,9 @@
%with-tooltip::before, %tooltip-bubble,
%with-tooltip::after { %tooltip-tail {
color: $ui-white; color: $ui-white;
background-color: $ui-gray-800; background-color: $ui-gray-800;
} }
%with-tooltip::before { %tooltip-bubble {
border-radius: $decor-radius-200; border-radius: $decor-radius-200;
box-shadow: 0 3px 1px 0 rgba($ui-black, 0.12); 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} { @media #{$--lt-spacious-page-header} {
.actions button.copy-btn { .actions button.copy-btn {
margin-top: -42px; margin-top: -56px;
padding: 0; padding: 0;
} }
} }
@ -38,7 +38,7 @@ main form + div .with-confirmation {
margin-bottom: 2em; margin-bottom: 2em;
} }
@media #{$--lt-wide-form} { @media #{$--lt-wide-form} {
main form [type="reset"] { main form [type='reset'] {
float: right; float: right;
margin-right: 0 !important; margin-right: 0 !important;
} }

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

@ -51,7 +51,7 @@ th,
%breadcrumbs a, %breadcrumbs a,
%action-group a, %action-group a,
%tab-nav, %tab-nav,
%with-tooltip::before { %tooltip-bubble {
font-weight: $typo-weight-medium; font-weight: $typo-weight-medium;
} }
main label a[rel*='help'], main label a[rel*='help'],
@ -84,7 +84,7 @@ td {
} }
th, th,
%form-element > span, %form-element > span,
%with-tooltip::before, %tooltip-bubble,
%healthchecked-resource strong, %healthchecked-resource strong,
%footer { %footer {
font-size: $typo-size-700; 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-num: 1150;
$ideal-content-width: #{$ideal-content-width-num}px; $ideal-content-width: #{$ideal-content-width-num}px;
$ideal-viewport-padding-num: 24; $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; $minimum-viewport-padding: 10px;
$ideal-content-padding: 33px; $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-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)); 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} { @media #{$--min-padding} {
%viewport-container { %viewport-container {
padding-left: $minimum-viewport-padding; padding-left: $minimum-viewport-padding;
padding-right: $minimum-viewport-padding; padding-right: $minimum-viewport-padding;
} }
%content-container {
padding-left: $ideal-viewport-padding;
padding-right: $ideal-viewport-padding;
}
} }
@media #{$--max-padding} { @media #{$--max-padding} {
%viewport-container { %viewport-container {
@ -49,9 +51,3 @@ $ideal-content-padding: 33px;
padding-right: $ideal-viewport-padding; 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}} {{yield}}
{{#if (eq state 'success') }} {{#if (eq state 'success') }}
{{#yield-slot 'success'}}{{yield}}{{/yield-slot}} {{#yield-slot 'success' (block-params transition)}}{{yield}}{{/yield-slot}}
{{else if (eq state 'error') }} {{else if (eq state 'error') }}
{{#yield-slot 'error'}}{{yield}}{{/yield-slot}} {{#yield-slot 'error' (block-params transition)}}{{yield}}{{/yield-slot}}
{{/if}} {{/if}}
{{#if (or permanent (eq state 'ready')) }} {{#if (or permanent (eq state 'ready')) }}
{{#yield-slot 'action' (block-params success error)}}{{yield}}{{message}}{{/yield-slot}} {{#yield-slot 'action' (block-params success error)}}{{yield}}{{message}}{{/yield-slot}}

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

@ -4,13 +4,13 @@
Copy Output Copy Output
{{/copy-button}} {{/copy-button}}
{{/block-slot}} {{/block-slot}}
{{#block-slot 'success'}} {{#block-slot 'success' as |transition|}}
<p> <p class={{transition}}>
Copied output! Copied IP Address!
</p> </p>
{{/block-slot}} {{/block-slot}}
{{#block-slot 'error'}} {{#block-slot 'error' as |transition|}}
<p> <p class={{transition}}>
Sorry, something went wrong! Sorry, something went wrong!
</p> </p>
{{/block-slot}} {{/block-slot}}

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

@ -24,13 +24,13 @@
Copy token ID Copy token ID
{{/copy-button}} {{/copy-button}}
{{/block-slot}} {{/block-slot}}
{{#block-slot 'success'}} {{#block-slot 'success' as |transition|}}
<p> <p class={{transition}}>
Copied token ID! Copied token ID!
</p> </p>
{{/block-slot}} {{/block-slot}}
{{#block-slot 'error'}} {{#block-slot 'error' as |transition|}}
<p> <p class={{transition}}>
Sorry, something went wrong! Sorry, something went wrong!
</p> </p>
{{/block-slot}} {{/block-slot}}

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

@ -24,13 +24,13 @@
Copy UUID Copy UUID
{{/copy-button}} {{/copy-button}}
{{/block-slot}} {{/block-slot}}
{{#block-slot 'success'}} {{#block-slot 'success' as |transition|}}
<p> <p class={{transition}}>
Copied UUID! Copied UUID!
</p> </p>
{{/block-slot}} {{/block-slot}}
{{#block-slot 'error'}} {{#block-slot 'error' as |transition|}}
<p> <p class={{transition}}>
Sorry, something went wrong! Sorry, something went wrong!
</p> </p>
{{/block-slot}} {{/block-slot}}

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

@ -32,13 +32,13 @@
{{item.Address}} {{item.Address}}
{{/copy-button}} {{/copy-button}}
{{/block-slot}} {{/block-slot}}
{{#block-slot 'success'}} {{#block-slot 'success' as |transition|}}
<p> <p class={{transition}}>
Copied IP Address! Copied IP Address!
</p> </p>
{{/block-slot}} {{/block-slot}}
{{#block-slot 'error'}} {{#block-slot 'error' as |transition|}}
<p> <p class={{transition}}>
Sorry, something went wrong! Sorry, something went wrong!
</p> </p>
{{/block-slot}} {{/block-slot}}

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

@ -1,6 +1,6 @@
export default function(P = Promise, timeout = setTimeout) { export default function(P = Promise, timeout = setTimeout) {
// var interval; // var interval;
return function(milliseconds, cb) { return function(milliseconds, cb = function() {}) {
// clearInterval(interval); // clearInterval(interval);
// const cb = typeof _cb !== 'function' ? (i) => { clearInterval(interval);interval = i; } : _cb; // const cb = typeof _cb !== 'function' ? (i) => { clearInterval(interval);interval = i; } : _cb;
return new P((resolve, reject) => { return new P((resolve, reject) => {