Fixed #9454 - Customizable Toast and Messages

primefaces · Oct 26, 2020 · c873236 · c873236
1 parent d257edd
commit c873236
Show file tree

Hide file tree

Showing 8 changed files with 35 additions and 4 deletions.
diff --git a/src/app/components/api/message.ts b/src/app/components/api/message.ts
@@ -8,4 +8,5 @@ export interface Message {
     sticky?: boolean;
     closable?: boolean;
     data?: any;
+    icon?: string;
 }
diff --git a/src/app/components/messages/messages.ts b/src/app/components/messages/messages.ts
@@ -13,7 +13,7 @@ import {RippleModule} from 'primeng/ripple';
                 <div *ngFor="let msg of value; let i=index" [ngClass]="'p-message p-message-' + msg.severity" role="alert" 
                     [@messageAnimation]="{value: 'visible', params: {showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions}}">
                     <div class="p-message-wrapper">
-                        <span class="p-message-icon pi" [ngClass]="{'pi-info-circle': msg.severity === 'info', 
+                       <span [class]="'p-message-icon pi' + (msg.icon ? ' ' + msg.icon : '')" [ngClass]="{'pi-info-circle': msg.severity === 'info', 
                             'pi-check': msg.severity === 'success',
                             'pi-exclamation-triangle': msg.severity === 'warn',
                             'pi-times-circle': msg.severity === 'error'}"></span>

diff --git a/src/app/components/toast/toast.ts b/src/app/components/toast/toast.ts
@@ -15,7 +15,7 @@ import {trigger,state,style,transition,animate,query,animateChild,AnimationEvent
                 (mouseenter)="onMouseEnter()" (mouseleave)="onMouseLeave()">
             <div class="p-toast-message-content" role="alert" aria-live="assertive" aria-atomic="true">
                 <ng-container *ngIf="!template">
-                    <span class="p-toast-message-icon pi" [ngClass]="{'pi-info-circle': message.severity == 'info', 'pi-exclamation-triangle': message.severity == 'warn',
+                    <span [class]="'p-message-icon pi' + (message.icon ? ' ' + message.icon : '')" [ngClass]="{'pi-info-circle': message.severity == 'info', 'pi-exclamation-triangle': message.severity == 'warn',
                         'pi-times-circle': message.severity == 'error', 'pi-check' :message.severity == 'success'}"></span>
                     <div class="p-toast-message-text">
                         <div class="p-toast-summary">{{message.summary}}</div>

diff --git a/src/app/showcase/components/messages/messagesdemo.css b/src/app/showcase/components/messages/messagesdemo.css
@@ -0,0 +1,10 @@
+:host ::ng-deep .p-message-custom {
+    background-color: #E1CFE7;
+    border: solid #8A427A;
+    border-width: 0 0 0 6px;
+    color: #2c1e30;
+}
+
+:host ::ng-deep .p-message-close-icon {
+    color: #2c1e30;
+}
diff --git a/src/app/showcase/components/messages/messagesdemo.ts b/src/app/showcase/components/messages/messagesdemo.ts
@@ -3,7 +3,8 @@ import {Message,MessageService} from 'primeng/api';
 
 @Component({
     templateUrl: './messagesdemo.html',
-    providers: [MessageService]
+    providers: [MessageService],
+    styleUrls: ['./messagesdemo.css']
 })
 export class MessagesDemo implements OnInit {
 
@@ -18,7 +19,8 @@ export class MessagesDemo implements OnInit {
             {severity:'success', summary:'Success', detail:'Message Content'},
             {severity:'info', summary:'Info', detail:'Message Content'},
             {severity:'warn', summary:'Warning', detail:'Message Content'},
-            {severity:'error', summary:'Error', detail:'Message Content'}
+            {severity:'error', summary:'Error', detail:'Message Content'},
+            {severity:'custom', summary:'Custom', detail:'Message Content', icon: 'pi-file'}
         ];
     }
 

diff --git a/src/app/showcase/components/toast/toastdemo.html b/src/app/showcase/components/toast/toastdemo.html
@@ -37,6 +37,7 @@ <h5>Severities</h5>
         <button type="button" pButton pRipple (click)="showInfo()" label="Info" class="p-button-info"></button>
         <button type="button" pButton pRipple (click)="showWarn()" label="Warn" class="p-button-warning"></button>
         <button type="button" pButton pRipple (click)="showError()" label="Error" class="p-button-danger"></button>
+        <button type="button" pButton pRipple (click)="showCustom()" label="Custom" class="p-button-help"></button>
 
         <h5>Positions</h5>
         <button type="button" pButton pRipple (click)="showTopLeft()" label="Top Left"></button>

diff --git a/src/app/showcase/components/toast/toastdemo.scss b/src/app/showcase/components/toast/toastdemo.scss
@@ -8,4 +8,17 @@ button {
         width: 100%;
         margin-bottom: .5rem;
     }
+}
+
+:host ::ng-deep {
+    .p-toast-message-custom {
+        background-color: #E1CFE7;
+        border: solid #8A427A;
+        border-width: 0 0 0 6px;
+        color: #2c1e30;
+    }
+
+    :host ::ng-deep .p-toast-icon-close {
+        color: #2c1e30;
+    }
 }
diff --git a/src/app/showcase/components/toast/toastdemo.ts b/src/app/showcase/components/toast/toastdemo.ts
@@ -27,6 +27,10 @@ export class ToastDemo {
         this.messageService.add({severity:'error', summary: 'Error', detail: 'Message Content'});
     }
 
+    showCustom() {
+        this.messageService.add({severity:'custom', summary: 'Custom', detail: 'Message Content', icon: 'pi-file'});
+    }
+
     showTopLeft() {
         this.messageService.add({key: 'tl', severity:'info', summary: 'Info', detail: 'Message Content'});
     }