inteligr8/alfresco-content-app
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-content-app.git synced 2025-09-17 14:21:14 +00:00
Code Issues Packages Projects Releases Wiki Activity

[ACS-4251] MatMenuItem button container now triggers click on children via querySelector instead of x-y co-ordinates. Removed embedded styles and added classes to the layout for toolbar-menu.component.html

Browse Source
This commit is contained in:
swapnil.verma
2023-02-07 13:41:07 +05:30
parent c845f6372b
commit 3a130d4f43
2 changed files with 16 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
projects/aca-shared/src/lib/components/tool-bar/toolbar-menu/toolbar-menu.component.html
View File

@@ -12,9 +12,10 @@
</button> </button>
<mat-menu #menu="matMenu" [overlapTrigger]="false"> <mat-menu #menu="matMenu" [overlapTrigger]="false">
<ng-container *ngFor="let child of actionRef.children; trackBy: trackByActionId" [ngSwitch]="child.type"> <ng-container *ngFor="let child of actionRef.children; trackBy: trackByActionId">
<ng-container [ngSwitch]="child.type">
<ng-container *ngSwitchCase="'custom'"> <ng-container *ngSwitchCase="'custom'">
<button mat-menu-item style="padding: 0" (click)="onCustomItemContainerClick($event)"> <button mat-menu-item class="aca-mat-menu-item-container" (click)="onCustomItemContainerClick($event)">
<adf-dynamic-component [id]="child.component" [data]="child.data"></adf-dynamic-component> <adf-dynamic-component [id]="child.component" [data]="child.data"></adf-dynamic-component>
</button> </button>
</ng-container> </ng-container>
@@ -22,9 +23,10 @@
<app-toolbar-menu-item [actionRef]="child" [menuId]="actionRef.id"></app-toolbar-menu-item> <app-toolbar-menu-item [actionRef]="child" [menuId]="actionRef.id"></app-toolbar-menu-item>
</ng-container> </ng-container>
<ng-container *ngSwitchDefault> <ng-container *ngSwitchDefault>
<button mat-menu-item style="padding: 0" (click)="onCustomItemContainerClick($event)"> <button mat-menu-item class="aca-mat-menu-item-container" (click)="onCustomItemContainerClick($event)">
<app-toolbar-menu-item [actionRef]="child" [menuId]="actionRef.id"></app-toolbar-menu-item> <app-toolbar-menu-item [actionRef]="child" [menuId]="actionRef.id"></app-toolbar-menu-item>
</button> </button>
</ng-container> </ng-container>
</ng-container> </ng-container>
</ng-container>
</mat-menu> </mat-menu>

30
projects/aca-shared/src/lib/components/tool-bar/toolbar-menu/toolbar-menu.component.ts
View File

@@ -23,17 +23,23 @@
* along with Alfresco. If not, see <http://www.gnu.org/licenses/>. * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
*/ */
import { Component, Input, ViewEncapsulation, HostListener, ViewChild, ViewChildren, QueryList } from '@angular/core'; import { Component, Input, ViewEncapsulation, HostListener, ViewChild } from '@angular/core';
import { ContentActionRef } from '@alfresco/adf-extensions'; import { ContentActionRef } from '@alfresco/adf-extensions';
import { MatMenu, MatMenuTrigger } from '@angular/material/menu'; import { MatMenu, MatMenuTrigger } from '@angular/material/menu';
import { ThemePalette } from '@angular/material/core'; import { ThemePalette } from '@angular/material/core';
import { ToolbarMenuItemComponent } from '../toolbar-menu-item/toolbar-menu-item.component';
@Component({ @Component({
selector: 'app-toolbar-menu', selector: 'app-toolbar-menu',
templateUrl: './toolbar-menu.component.html', templateUrl: './toolbar-menu.component.html',
encapsulation: ViewEncapsulation.None, encapsulation: ViewEncapsulation.None,
host: { class: 'app-toolbar-menu' } host: { class: 'app-toolbar-menu' },
styles: [
`
.aca-mat-menu-item-container {
padding: 0;
}
`
]
}) })
export class ToolbarMenuComponent { export class ToolbarMenuComponent {
@Input() @Input()
@@ -48,9 +54,6 @@ export class ToolbarMenuComponent {
@ViewChild(MatMenu) @ViewChild(MatMenu)
menu: MatMenu; menu: MatMenu;
@ViewChildren(ToolbarMenuItemComponent)
toolbarMenuItems: QueryList<ToolbarMenuItemComponent>;
@HostListener('document:keydown.Escape') @HostListener('document:keydown.Escape')
handleKeydownEscape() { handleKeydownEscape() {
this.matTrigger.closeMenu(); this.matTrigger.closeMenu();
@@ -61,19 +64,8 @@ export class ToolbarMenuComponent {
} }
onCustomItemContainerClick(event) { onCustomItemContainerClick(event) {
console.log(event); const ev = new MouseEvent('click');
const el: HTMLElement = event.target; event.target.querySelector('.mat-menu-item').dispatchEvent(ev);
const x = window.scrollX + el.getBoundingClientRect().left + 5;
const y = window.scrollY + el.getBoundingClientRect().top + 5;
const opts = {
bubbles: false,
screenX: x,
screenY: y
};
const ev = new MouseEvent('click', opts);
document.elementFromPoint(x, y).dispatchEvent(ev);
event.stopPropagation(); event.stopPropagation();
} }
} }