status-im
/
consul
mirror of https://github.com/status-im/consul.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

ui: Adds warning flash messages (yellow with warning icon) (#5033)

This commit is contained in:
John Cowen 2018-12-04 17:03:23 +00:00 committed by John Cowen
parent acd121f988
commit 23a236ae95
2 changed files with 12 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
ui-v2/app/styles/components/flash-message/skin.scss
View File

@ -5,12 +5,18 @@
%flash-message p.success strong { %flash-message p.success strong {
@extend %with-passing; @extend %with-passing;
} }
%flash-message p.warning strong {
@extend %with-warning;
}
%flash-message p.error strong { %flash-message p.error strong {
@extend %with-critical; @extend %with-critical;
} }
%flash-message p.success { %flash-message p.success {
@extend %frame-green-500; @extend %frame-green-500;
} }
%flash-message p.warning {
@extend %frame-yellow-500;
}
%flash-message p.error { %flash-message p.error {
@extend %frame-red-500; @extend %frame-red-500;
} }

7
ui-v2/app/templates/components/app-view.hbs
View File

@ -5,7 +5,12 @@
{{#flash-message flash=flash as |component flash|}} {{#flash-message flash=flash as |component flash|}}
{{! flashes automatically ucfirst the type }} {{! flashes automatically ucfirst the type }}
<p data-notification class="{{if (eq component.flashType 'Success') 'success' 'error'}} notification-{{lowercase flash.action}}"><strong>{{if (eq component.flashType 'Success') 'Success!' 'Error!'}}</strong> {{#yield-slot 'notification' (block-params (lowercase component.flashType) (lowercase flash.action) flash.item )}}{{yield}}{{/yield-slot}}</p> <p data-notification class="{{lowercase component.flashType}} notification-{{lowercase flash.action}}">
<strong>
{{component.flashType}}!
</strong>
{{#yield-slot 'notification' (block-params (lowercase component.flashType) (lowercase flash.action) flash.item )}}{{yield}}{{/yield-slot}}
</p>
{{/flash-message}} {{/flash-message}}
{{/each}} {{/each}}
<div> <div>