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 d083a13aa3
commit d49cf9d3c4
2 changed files with 12 additions and 1 deletions

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

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>