Skip to content
This repository has been archived by the owner on Sep 11, 2024. It is now read-only.

Fix edge case in context menu chevron positioning #7899

Merged
merged 3 commits into from
Feb 25, 2022
Merged

Fix edge case in context menu chevron positioning #7899

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
0eecc0c
Fix edge case in context menu chevron positioning
robintown Feb 25, 2022
5f6fbb9
Expand context menu positioning regression tests
robintown Feb 25, 2022
72763b2
Merge branch 'develop' into context-menu-fixes
robintown Feb 25, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions src/components/structures/ContextMenu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -271,7 +271,7 @@ export default class ContextMenu extends React.PureComponent<IProps, IState> {
windowHeight - contextMenuRect.height - WINDOW_PADDING,
);
if (chevronOffset.top !== undefined) {
chevronOffset.top = props.chevronOffset + props.bottom - position.bottom;
chevronOffset.top = props.chevronOffset + position.bottom - props.bottom;
}
}
if (position.left !== undefined) {
Expand All @@ -288,7 +288,7 @@ export default class ContextMenu extends React.PureComponent<IProps, IState> {
windowWidth - contextMenuRect.width - WINDOW_PADDING,
);
if (chevronOffset.left !== undefined) {
chevronOffset.left = props.chevronOffset + props.right - position.right;
chevronOffset.left = props.chevronOffset + position.right - props.right;
}
}
}
Expand Down
111 changes: 93 additions & 18 deletions test/components/views/context_menus/ContextMenu-test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,26 +34,101 @@ describe("<ContextMenu />", () => {
height: menuSize,
});

const targetY = windowSize - menuSize + 50;
const targetChevronOffset = 25;

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);
describe("near top edge of window", () => {
const targetY = -50;

const wrapper = mount(
<ContextMenu
bottom={windowSize - targetY - menuSize}
right={menuSize}
chevronFace={ChevronFace.Left}
chevronOffset={targetChevronOffset}
/>,
);
const chevron = wrapper.find(".mx_ContextualMenu_chevron_left");

const actualY = windowSize - parseInt(wrapper.getDOMNode().style.getPropertyValue("bottom")) - menuSize;
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);
});
});
});