Skip to content

Commit

Permalink
Fixed #10308 - styleClass and contentStyleClass Support for Message
Browse files Browse the repository at this point in the history
  • Loading branch information
@yigitfindikli
yigitfindikli committed Jun 7, 2021
1 parent ba5ef4e commit a737323
Show file tree
Hide file tree
Showing 3 changed files with 43 additions and 29 deletions.
4 changes: 3 additions & 1 deletion src/app/components/api/message.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,4 +9,6 @@ export interface Message {
closable?: boolean;
data?: any;
icon?: string;
}
contentStyleClass?: string;
styleClass?: string;
}
32 changes: 16 additions & 16 deletions src/app/components/toast/toast.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,9 +11,9 @@ import {trigger,state,style,transition,animate,query,animateChild,AnimationEvent
@Component({
selector: 'p-toastItem',
template: `
<div #container [attr.id]="message.id" class="p-toast-message" [ngClass]="'p-toast-message-' + message.severity" [@messageState]="{value: 'visible', params: {showTransformParams: showTransformOptions, hideTransformParams: hideTransformOptions, showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions}}"
<div #container [attr.id]="message.id" class="p-toast-message" [ngClass]="['p-toast-message-' + message.severity, message.styleClass]" [@messageState]="{value: 'visible', params: {showTransformParams: showTransformOptions, hideTransformParams: hideTransformOptions, showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions}}"
(mouseenter)="onMouseEnter()" (mouseleave)="onMouseLeave()">
<div class="p-toast-message-content" role="alert" aria-live="assertive" aria-atomic="true">
<div class="p-toast-message-content" role="alert" aria-live="assertive" aria-atomic="true" [ngClass]="message.contentStyleClass">
<ng-container *ngIf="!template">
<span [class]="'p-toast-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>
Expand All @@ -22,10 +22,10 @@ import {trigger,state,style,transition,animate,query,animateChild,AnimationEvent
<div class="p-toast-detail">{{message.detail}}</div>
</div>
</ng-container>
<ng-container *ngTemplateOutlet="template; context: {$implicit: message}"></ng-container>
<button type="button" class="p-toast-icon-close p-link" (click)="onCloseIconClick($event)" (keydown.enter)="onCloseIconClick($event)" *ngIf="message.closable !== false" pRipple>
<span class="p-toast-icon-close-icon pi pi-times"></span>
</button>
<ng-container *ngTemplateOutlet="template; context: {$implicit: message}"></ng-container>
</div>
</div>
`,
Expand Down Expand Up @@ -74,7 +74,7 @@ export class ToastItem implements AfterViewInit, OnDestroy {
timeout: any;

constructor(private zone: NgZone) {}

ngAfterViewInit() {
this.initTimeout();
}
Expand All @@ -98,18 +98,18 @@ export class ToastItem implements AfterViewInit, OnDestroy {
this.timeout = null;
}
}

onMouseEnter() {
this.clearTimeout();
}

onMouseLeave() {
this.initTimeout();
}

onCloseIconClick(event) {
this.clearTimeout();

this.onClose.emit({
index: this.index,
message: this.message
Expand All @@ -128,8 +128,8 @@ export class ToastItem implements AfterViewInit, OnDestroy {
template: `
<div #container [ngClass]="'p-toast p-component p-toast-' + position" [ngStyle]="style" [class]="styleClass">
<p-toastItem *ngFor="let msg of messages; let i=index" [message]="msg" [index]="i" (onClose)="onMessageClose($event)"
[template]="template" @toastAnimation (@toastAnimation.start)="onAnimationStart($event)"
[showTransformOptions]="showTransformOptions" [hideTransformOptions]="hideTransformOptions"
[template]="template" @toastAnimation (@toastAnimation.start)="onAnimationStart($event)"
[showTransformOptions]="showTransformOptions" [hideTransformOptions]="hideTransformOptions"
[showTransitionOptions]="showTransitionOptions" [hideTransitionOptions]="hideTransitionOptions"></p-toastItem>
</div>
`,
Expand All @@ -149,19 +149,19 @@ export class Toast implements OnInit,AfterContentInit,OnDestroy {
@Input() key: string;

@Input() autoZIndex: boolean = true;

@Input() baseZIndex: number = 0;

@Input() style: any;

@Input() styleClass: string;

@Input() position: string = 'top-right';

@Input() preventOpenDuplicates: boolean = false;

@Input() preventDuplicates: boolean = false;

@Input() showTransformOptions: string = 'translateY(100%)';

@Input() hideTransformOptions: string = 'translateY(-100%)';
Expand All @@ -185,7 +185,7 @@ export class Toast implements OnInit,AfterContentInit,OnDestroy {
messagesArchieve: Message[];

template: TemplateRef<any>;

constructor(public messageService: MessageService, private cd: ChangeDetectorRef) {}

ngOnInit() {
Expand All @@ -212,7 +212,7 @@ export class Toast implements OnInit,AfterContentInit,OnDestroy {
}

this.cd.markForCheck();
});
});
}

add(messages: Message[]): void {
Expand Down Expand Up @@ -279,11 +279,11 @@ export class Toast implements OnInit,AfterContentInit,OnDestroy {
}
}

ngOnDestroy() {
ngOnDestroy() {
if (this.messageSubscription) {
this.messageSubscription.unsubscribe();
}

if (this.clearSubscription) {
this.clearSubscription.unsubscribe();
}
Expand Down
36 changes: 24 additions & 12 deletions src/app/showcase/components/toast/toastdemo.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ <h5>Positions</h5>
<button type="button" pButton pRipple (click)="showTopLeft()" label="Top Left"></button>
<button type="button" pButton pRipple (click)="showTopCenter()" label="Top Center" class="p-button-warning"></button>
<button type="button" pButton pRipple (click)="showBottomCenter()" label="Bottom Center" class="p-button-success"></button>

<h5>Multiple</h5>
<button type="button" pButton pRipple (click)="showMultiple()" label="Multiple" class="p-button-warning"></button>
<button type="button" pButton pRipple (click)="showSticky()" label="Sticky"></button>
Expand Down Expand Up @@ -132,6 +132,18 @@ <h5>Getting Started</h5>
<td>null</td>
<td>Arbitrary object to associate with the message.</td>
</tr>
<tr>
<td>styleClass</td>
<td>string</td>
<td>null</td>
<td>Style class of the message.</td>
</tr>
<tr>
<td>contentStyleClass</td>
<td>string</td>
<td>null</td>
<td>Style class of the content.</td>
</tr>
</tbody>
</table>
</div>
Expand All @@ -140,7 +152,7 @@ <h5>Getting Started</h5>
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;p-toast&gt;&lt;/p-toast&gt;
</app-code>

<app-code lang="typescript" ngNonBindable ngPreserveWhitespaces>
import &#123;Component&#125; from '@angular/core';
import &#123;MessageService&#125; from 'primeng/api';
Expand All @@ -149,18 +161,18 @@ <h5>Getting Started</h5>
templateUrl: './my.component.html'
&#125;)
export class MyComponent &#123;

constructor(private messageService: MessageService) &#123;&#125;

addSingle() &#123;
this.messageService.add(&#123;severity:'success', summary:'Service Message', detail:'Via MessageService'&#125;);
&#125;

addMultiple() &#123;
this.messageService.addAll([&#123;severity:'success', summary:'Service Message', detail:'Via MessageService'&#125;,
&#123;severity:'info', summary:'Info Message', detail:'Via MessageService'&#125;]);
&#125;

clear() &#123;
this.messageService.clear();
&#125;
Expand Down Expand Up @@ -238,7 +250,7 @@ <h5>Templating</h5>
</app-code>

<h5>Animation Configuration</h5>
<p>Transition of the animations can be customized using the <i>showTransitionOptions</i>, <i>hideTransitionOptions</i>, <i>showTransformOptions</i> and <i>hideTransformOptions</i> properties,
<p>Transition of the animations can be customized using the <i>showTransitionOptions</i>, <i>hideTransitionOptions</i>, <i>showTransformOptions</i> and <i>hideTransformOptions</i> properties,
example below disables the animations altogether.</p>

<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
Expand All @@ -249,7 +261,7 @@ <h5>Animation Configuration</h5>
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;p-toast [showTransformOptions]="'translateX(100%)'"&gt;&lt;/p-toast&gt;
</app-code>

<h5>Properties</h5>
<div class="doc-tablewrapper">
<table class="doc-table">
Expand Down Expand Up @@ -337,7 +349,7 @@ <h5>Properties</h5>
</tbody>
</table>
</div>

<h5>Events</h5>
<div class="doc-tablewrapper">
<table class="doc-table">
Expand Down Expand Up @@ -467,7 +479,7 @@ <h5>Dependencies</h5>
&lt;button type="button" pButton pRipple (click)="showTopLeft()" label="Top Left"&gt;&lt;/button&gt;
&lt;button type="button" pButton pRipple (click)="showTopCenter()" label="Top Center" class="p-button-warning"&gt;&lt;/button&gt;
&lt;button type="button" pButton pRipple (click)="showBottomCenter()" label="Bottom Center" class="p-button-success"&gt;&lt;/button&gt;

&lt;h5&gt;Multiple&lt;/h5&gt;
&lt;button type="button" pButton pRipple (click)="showMultiple()" label="Multiple" class="p-button-warning"&gt;&lt;/button&gt;
&lt;button type="button" pButton pRipple (click)="showSticky()" label="Sticky"&gt;&lt;/button&gt;
Expand All @@ -488,7 +500,7 @@ <h5>Dependencies</h5>
templateUrl: './toastdemo.html',
styleUrls: ['./toastdemo.scss'],
providers: [MessageService]

&#125;)
export class ToastDemo &#123;

Expand Down Expand Up @@ -550,7 +562,7 @@ <h5>Dependencies</h5>
onReject() &#123;
this.messageService.clear('c');
&#125;

clear() &#123;
this.messageService.clear();
&#125;
Expand Down

0 comments on commit a737323

Please sign in to comment.