inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-07-24 17:32:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix submenu

Browse Source
This commit is contained in:
Eugenio Romano
2019-03-19 01:21:14 +00:00
parent 2f4da55e67
commit cee34922ca
3 changed files with 9 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
demo-shell/src/app/components/app-layout/app-layout.component.html
View File

@@ -35,7 +35,7 @@
<ng-container *ngFor="let link of links">
<a appNestedMenuPosition mat-list-item #appMenuTrigger *ngIf="link.children" [attr.data-automation-id]="link.title | translate"
class="adf-sidenav-link" [matMenuTriggerFor]="nestedMenu" menuMinimized="{{ isMenuMinimized() }}"
class="adf-sidenav-link" [matMenuTriggerFor]="nestedMenu"
[matMenuTriggerData]="{links: link.children}">
<mat-icon matListIcon class="adf-sidenav-menu-icon">{{link.icon}}</mat-icon>
@@ -85,4 +85,4 @@
{{ link.title | translate }}
</button>
</ng-template>
</mat-menu>
</mat-menu>

31
demo-shell/src/app/components/app-layout/cloud/directives/nested-menu-position.directive.ts
View File

@@ -15,43 +15,24 @@
* limitations under the License.
*/
import { Directive, HostListener, Input } from '@angular/core';
import { Directive, HostListener } from '@angular/core';
@Directive({
selector: '[appNestedMenuPosition]'
})
export class NestedMenuPositionDirective {
@Input()
menuMinimized: string;
nestedMenuLeftPadding: string = '220px';
@HostListener('click', ['$event'])
onClick(event: any) {
onClick() {
const bodyRect = document.body.getBoundingClientRect();
let overlayContainer = (document.querySelector('.cdk-overlay-connected-position-bounding-box') as HTMLElement);
(document.querySelector('.cdk-overlay-pane') as HTMLElement).style.width = '100%';
if (this.menuMinimized === 'false') {
setTimeout( () => {
const elementPosition = this.getElementOffset(event);
overlayContainer.style.top = elementPosition.top - bodyRect.top + 'px';
overlayContainer.style.left = this.nestedMenuLeftPadding;
});
}
}
setTimeout(() => {
overlayContainer.style.left = this.nestedMenuLeftPadding;
});
}
isMenuClicked(item: string) {
return item.includes('adf-sidenav-menu-label');
}
getElementOffset(event) {
if (this.isMenuClicked(event.target.className)) {
return event.target.offsetParent.getBoundingClientRect();
} else {
return event.target.getBoundingClientRect();
}
}
}