Fixed #12031 - Component: Responsive Overlay #12044
Conversation
|
👋 Hi, |
|
👋 Hi, |
github-actions
bot
added
the
Resolution: Needs Revision
| @Component({ | ||
| selector: 'p-overlay', | ||
| template: ` | ||
| <div #overlay [ngClass]="panelClass" [class]="panelStyleClass" [ngStyle]="panelStyle" [@overlayAnimation]="{value: 'visible', params: {transform: transformOptions, showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions}}" (click)="onOverlayClick($event)" (click)="onOverlayClick($event)"> |
There was a problem hiding this comment.
duplicate event handler in template
(click)="onOverlayClick($event)"
| const viewport = DomHandler.getViewport(); | ||
| if (value && viewport.width < this.overlayBreakpoints) { | ||
| this._overlayDirection = value; | ||
| switch (value) { |
There was a problem hiding this comment.
Hi, mb create private method for that.
this. transformOptions = this.method(value);
//
private method(value: string): string {
switch (value) {
case 'start':
return 'translate3d(0px, -100%, 0px)';
case 'end':
return 'translate3d(0px, 100%, 0px)';
case 'center':
return 'scale(0.8)';
}
}
|
|
||
| if(this.overlayViewChild) { | ||
| if (viewport.width < this.overlayBreakpoints) { | ||
| switch (this.overlayDirection) { |
There was a problem hiding this comment.
also mb create method
DomHandler.addClass(this.el.nativeElement, this.getOverlayDirection(this.overlayDirection))There was a problem hiding this comment.
Hi @volvachev
Thanks for your feedback, it's not the production version of the code it'll be updated and refactored before release.
|
👋 Hi, |
New component: p-overlay