Archives/gristlabs_grist-core
1
0
Fork 0
mirror of https://github.com/gristlabs/grist-core.git synced 2024-10-27 20:44:07 +00:00
Code Issues Projects Releases Wiki Activity

(core) Improve context menu placement on narrow screens

Browse Source 
Summary: On narrow screens, the menu is now less likely to overflow the viewport.

Test Plan: Manual.

Reviewers: jarek

Reviewed By: jarek

Subscribers: jarek

Differential Revision: https://phab.getgrist.com/D4094
This commit is contained in:
George Gevoian 2023-10-24 18:57:29 -04:00
parent fed697e676
commit 1a04c2cffe
1 changed files with 3 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
app/client/ui/contextMenu.ts
View File

@ -71,7 +71,9 @@ class ContextMenuController extends Disposable implements IOpenController {
const ev = this._event; const ev = this._event;
const rect = content.getBoundingClientRect(); const rect = content.getBoundingClientRect();
// position menu on the right of the cursor if it can fit, on the left otherwise // position menu on the right of the cursor if it can fit, on the left otherwise
content.style.left = ((ev.pageX + rect.width < window.innerWidth) ? ev.pageX : ev.pageX - rect.width) + 'px'; content.style.left = ((ev.pageX + rect.width < window.innerWidth)
? ev.pageX
: Math.max(ev.pageX - rect.width, 0)) + 'px';
// position menu below the cursor if it can fit, otherwise fit at the bottom of the screen // position menu below the cursor if it can fit, otherwise fit at the bottom of the screen
content.style.bottom = Math.max(window.innerHeight - (ev.pageY + rect.height), 0) + 'px'; content.style.bottom = Math.max(window.innerHeight - (ev.pageY + rect.height), 0) + 'px';
// show content // show content