imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix edge case in context menu chevron positioning (#7899)

Browse source 
* Fix edge case in context menu chevron positioning

Signed-off-by: Robin Townsend <robin@robin.town>

* Expand context menu positioning regression tests

Signed-off-by: Robin Townsend <robin@robin.town>
This commit is contained in:
Robin 2022-02-25 12:49:57 -05:00 • committed by GitHub
parent 3e4e7efd89
commit ece2b8572a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 93 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/components/structures/ContextMenu.tsx
View file

@ -271,7 +271,7 @@ export default class ContextMenu extends React.PureComponent<IProps, IState> {
windowHeight - contextMenuRect.height - WINDOW_PADDING, windowHeight - contextMenuRect.height - WINDOW_PADDING,
); );
if (chevronOffset.top !== undefined) { if (chevronOffset.top !== undefined) {
chevronOffset.top = props.chevronOffset + props.bottom - position.bottom; chevronOffset.top = props.chevronOffset + position.bottom - props.bottom;
} }
} }
if (position.left !== undefined) { if (position.left !== undefined) {
@ -288,7 +288,7 @@ export default class ContextMenu extends React.PureComponent<IProps, IState> {
windowWidth - contextMenuRect.width - WINDOW_PADDING, windowWidth - contextMenuRect.width - WINDOW_PADDING,
); );
if (chevronOffset.left !== undefined) { if (chevronOffset.left !== undefined) {
chevronOffset.left = props.chevronOffset + props.right - position.right; chevronOffset.left = props.chevronOffset + position.right - props.right;
} }
} }
} }

107
test/components/views/context_menus/ContextMenu-test.tsx
View file

@ -34,26 +34,101 @@ describe("<ContextMenu />", () => {
height: menuSize, height: menuSize,
}); });
const targetY = windowSize - menuSize + 50;
const targetChevronOffset = 25; const targetChevronOffset = 25;
const wrapper = mount( describe("near top edge of window", () => {
<ContextMenu const targetY = -50;
top={targetY}
left={0}
chevronFace={ChevronFace.Right}
chevronOffset={targetChevronOffset}
/>,
);
const chevron = wrapper.find(".mx_ContextualMenu_chevron_right");
const actualY = parseInt(wrapper.getDOMNode().style.getPropertyValue("top")); const wrapper = mount(
const actualChevronOffset = parseInt(chevron.getDOMNode().style.getPropertyValue("top")); <ContextMenu
bottom={windowSize - targetY - menuSize}
right={menuSize}
chevronFace={ChevronFace.Left}
chevronOffset={targetChevronOffset}
/>,
);
const chevron = wrapper.find(".mx_ContextualMenu_chevron_left");
it("stays within the window", () => { const actualY = windowSize - parseInt(wrapper.getDOMNode().style.getPropertyValue("bottom")) - menuSize;
expect(actualY + menuSize).toBeLessThanOrEqual(windowSize); const actualChevronOffset = parseInt(chevron.getDOMNode().style.getPropertyValue("top"));
it("stays within the window", () => {
expect(actualY).toBeGreaterThanOrEqual(0);
});
it("positions the chevron correctly", () => {
expect(actualChevronOffset).toEqual(targetChevronOffset + targetY - actualY);
});
}); });
it("positions the chevron correctly", () => {
expect(actualChevronOffset).toEqual(targetChevronOffset + targetY - actualY); describe("near right edge of window", () => {
const targetX = windowSize - menuSize + 50;
const wrapper = mount(
<ContextMenu
bottom={0}
left={targetX}
chevronFace={ChevronFace.Top}
chevronOffset={targetChevronOffset}
/>,
);
const chevron = wrapper.find(".mx_ContextualMenu_chevron_top");
const actualX = parseInt(wrapper.getDOMNode().style.getPropertyValue("left"));
const actualChevronOffset = parseInt(chevron.getDOMNode().style.getPropertyValue("left"));
it("stays within the window", () => {
expect(actualX + menuSize).toBeLessThanOrEqual(windowSize);
});
it("positions the chevron correctly", () => {
expect(actualChevronOffset).toEqual(targetChevronOffset + targetX - actualX);
});
});
describe("near bottom edge of window", () => {
const targetY = windowSize - menuSize + 50;
const wrapper = mount(
<ContextMenu
top={targetY}
left={0}
chevronFace={ChevronFace.Right}
chevronOffset={targetChevronOffset}
/>,
);
const chevron = wrapper.find(".mx_ContextualMenu_chevron_right");
const actualY = parseInt(wrapper.getDOMNode().style.getPropertyValue("top"));
const actualChevronOffset = parseInt(chevron.getDOMNode().style.getPropertyValue("top"));
it("stays within the window", () => {
expect(actualY + menuSize).toBeLessThanOrEqual(windowSize);
});
it("positions the chevron correctly", () => {
expect(actualChevronOffset).toEqual(targetChevronOffset + targetY - actualY);
});
});
describe("near left edge of window", () => {
const targetX = -50;
const wrapper = mount(
<ContextMenu
top={0}
right={windowSize - targetX - menuSize}
chevronFace={ChevronFace.Bottom}
chevronOffset={targetChevronOffset}
/>,
);
const chevron = wrapper.find(".mx_ContextualMenu_chevron_bottom");
const actualX = windowSize - parseInt(wrapper.getDOMNode().style.getPropertyValue("right")) - menuSize;
const actualChevronOffset = parseInt(chevron.getDOMNode().style.getPropertyValue("left"));
it("stays within the window", () => {
expect(actualX).toBeGreaterThanOrEqual(0);
});
it("positions the chevron correctly", () => {
expect(actualChevronOffset).toEqual(targetChevronOffset + targetX - actualX);
});
}); });
}); });