luxolus
/
open-consul
2
0
Fork 0
Code Issues 1 Pull Requests Packages 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 d083a13aa3
commit d49cf9d3c4
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 {
@extend %with-passing;
}
%flash-message p.warning strong {
@extend %with-warning;
}
%flash-message p.error strong {
@extend %with-critical;
}
%flash-message p.success {
@extend %frame-green-500;
}
%flash-message p.warning {
@extend %frame-yellow-500;
}
%flash-message p.error {
@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|}}
{{! 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}}
{{/each}}
<div>