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

Fix buggy context-menu behaviour after cdk update (#2672)

Browse Source
This commit is contained in:
Popovics András 2017-11-20 14:41:21 +00:00 committed by Eugenio Romano
parent d138d6af16
commit a62d550325
2 changed files with 33 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
lib/core/context-menu/context-menu-holder.component.spec.ts
View File

@ -17,7 +17,7 @@
import { OverlayContainer } from '@angular/cdk/overlay';
import { ViewportRuler } from '@angular/cdk/scrolling';
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { fakeAsync, ComponentFixture, TestBed, tick } from '@angular/core/testing';
import { ContextMenuHolderComponent } from './context-menu-holder.component';
import { ContextMenuModule } from './context-menu.module';
import { ContextMenuService } from './context-menu.service';
@ -148,61 +148,65 @@ describe('ContextMenuHolderComponent', () => {
component.mdMenuElement.clientWidth = 200;
});
it('should set position to mouse position', () => {
it('should set position to mouse position', fakeAsync(() => {
const contextMenuEvent = {
clientX: 100,
clientY: 210
};
component.showMenu(<any> contextMenuEvent, [{}]);
tick();
expect(component.mdMenuElement.parentElement.style).toEqual({
left: '100px',
top: '210px'
});
});
}));
it('should ajust position relative to right margin of the screen', () => {
it('should ajust position relative to right margin of the screen', fakeAsync(() => {
const contextMenuEvent = {
clientX: 1000,
clientY: 210
};
component.showMenu(<any> contextMenuEvent, [{}]);
tick();
expect(component.mdMenuElement.parentElement.style).toEqual({
left: '800px',
top: '210px'
});
});
}));
it('should ajust position relative to bottom margin of the screen', () => {
it('should ajust position relative to bottom margin of the screen', fakeAsync(() => {
const contextMenuEvent = {
clientX: 100,
clientY: 600
};
component.showMenu(<any> contextMenuEvent, [{}]);
tick();
expect(component.mdMenuElement.parentElement.style).toEqual({
left: '100px',
top: '440px'
});
});
}));
it('should ajust position relative to bottom - right margin of the screen', () => {
it('should ajust position relative to bottom - right margin of the screen', fakeAsync(() => {
const contextMenuEvent = {
clientX: 900,
clientY: 610
};
component.showMenu(<any> contextMenuEvent, [{}]);
tick();
expect(component.mdMenuElement.parentElement.style).toEqual({
left: '700px',
top: '450px'
});
});
}));
});
describe('Menu direction', () => {
@ -212,52 +216,56 @@ describe('ContextMenuHolderComponent', () => {
component.mdMenuElement.clientWidth = 200;
});
it('should set default menu direction', () => {
it('should set default menu direction', fakeAsync(() => {
const contextMenuEvent = {
clientX: 100,
clientY: 210
};
component.showMenu(<any> contextMenuEvent, [{}]);
tick();
expect(component.menuTrigger.menu.xPosition).toBe('after');
expect(component.menuTrigger.menu.yPosition).toBe('below');
});
}));
it('should ajust direction relative to right margin of the screen', () => {
it('should ajust direction relative to right margin of the screen', fakeAsync(() => {
const contextMenuEvent = {
clientX: 1000,
clientY: 210
};
component.showMenu(<any> contextMenuEvent, [{}]);
tick();
expect(component.menuTrigger.menu.xPosition).toBe('before');
expect(component.menuTrigger.menu.yPosition).toBe('below');
});
}));
it('should ajust direction relative to bottom margin of the screen', () => {
it('should ajust direction relative to bottom margin of the screen', fakeAsync(() => {
const contextMenuEvent = {
clientX: 100,
clientY: 600
};
component.showMenu(<any> contextMenuEvent, [{}]);
tick();
expect(component.menuTrigger.menu.xPosition).toBe('after');
expect(component.menuTrigger.menu.yPosition).toBe('above');
});
}));
it('should ajust position relative to bottom - right margin of the screen', () => {
it('should ajust position relative to bottom - right margin of the screen', fakeAsync(() => {
const contextMenuEvent = {
clientX: 900,
clientY: 610
};
component.showMenu(<any> contextMenuEvent, [{}]);
tick();
expect(component.menuTrigger.menu.xPosition).toBe('before');
expect(component.menuTrigger.menu.yPosition).toBe('above');
});
}));
});
});

10
lib/core/context-menu/context-menu-holder.component.ts
View File

@ -66,7 +66,7 @@ export class ContextMenuHolderComponent implements OnInit, OnDestroy {
@HostListener('window:resize', ['$event'])
onResize(event) {
if (this.mdMenuElement) {
this.setPosition();
this.setPositionAfterCDKrecalculation();
}
}
@ -130,10 +130,16 @@ export class ContextMenuHolderComponent implements OnInit, OnDestroy {
this.menuTrigger.openMenu();
if (this.mdMenuElement) {
this.setPosition();
this.setPositionAfterCDKrecalculation();
}
}
setPositionAfterCDKrecalculation() {
setTimeout(() => {
this.setPosition();
}, 0);
}
get mdMenuElement() {
return this.menuElement;
}