Summary: - Brings in a new utility `contextMenu` to open context menu next to the mouse position - Use this utility to show a CellContextMenu, that sort of merge cell context menu and column context menu together. - Show cell context menu on context click on any grid's cell. - Also takes care of showing the row context menu for detail view on a context click that occurs on cells and not only on the row num header as it was the case prior to this diff. - task: https://gristlabs.getgrist.com/doc/check-ins/p/5#a1.s9.r1529.c31 - discussion: https://grist.quip.com/ETGkAroLnc0Y/Cell-Context-Menu {F40092} Test Plan: - Adds project test and nbrowser for cell context menu and new cases for the detail row context menu. Reviewers: jarek Reviewed By: jarek Differential Revision: https://phab.getgrist.com/D3237pull/131/head
Cyprien P
2 years ago
parent
ec7bc9bef3
commit
196ab6c473
@ -0,0 +1,85 @@
|
||||
import { allCommands } from 'app/client/components/commands';
|
||||
import { menuDivider, menuItemCmd } from 'app/client/ui2018/menus';
|
||||
import { dom } from 'grainjs';
|
||||
import { IMultiColumnContextMenu } from 'app/client/ui/GridViewMenus';
|
||||
|
||||
interface IRowContextMenu {
|
||||
disableInsert: boolean;
|
||||
disableDelete: boolean;
|
||||
isViewSorted: boolean;
|
||||
numRows: number;
|
||||
}
|
||||
|
||||
export function CellContextMenu(rowOptions: IRowContextMenu, colOptions: IMultiColumnContextMenu) {
|
||||
|
||||
const { disableInsert, disableDelete, isViewSorted } = rowOptions;
|
||||
const { disableModify, isReadonly } = colOptions;
|
||||
|
||||
const disableForReadonlyColumn = dom.cls('disabled', Boolean(disableModify) || isReadonly);
|
||||
const disableForReadonlyView = dom.cls('disabled', isReadonly);
|
||||
|
||||
const numCols: number = colOptions.numColumns;
|
||||
const nameClearColumns = colOptions.isFiltered ?
|
||||
(numCols > 1 ? `Clear ${numCols} entire columns` : 'Clear entire column') :
|
||||
(numCols > 1 ? `Clear ${numCols} columns` : 'Clear column');
|
||||
const nameDeleteColumns = numCols > 1 ? `Delete ${numCols} columns` : 'Delete column';
|
||||
|
||||
const numRows: number = rowOptions.numRows;
|
||||
const nameDeleteRows = numRows > 1 ? `Delete ${numRows} rows` : 'Delete row';
|
||||
|
||||
const nameClearCells = (numRows > 1 || numCols > 1) ? 'Clear values' : 'Clear cell';
|
||||
|
||||
const result: Array<Element|null> = [];
|
||||
|
||||
result.push(
|
||||
|
||||
// TODO: implement copy/paste actions
|
||||
|
||||
colOptions.isFormula ?
|
||||
null :
|
||||
menuItemCmd(allCommands.clearValues, nameClearCells, disableForReadonlyColumn),
|
||||
menuItemCmd(allCommands.clearColumns, nameClearColumns, disableForReadonlyColumn),
|
||||
|
||||
...(
|
||||
(numCols > 1 || numRows > 1) ? [] : [
|
||||
menuDivider(),
|
||||
menuItemCmd(allCommands.copyLink, 'Copy anchor link')
|
||||
]
|
||||
),
|
||||
|
||||
menuDivider(),
|
||||
|
||||
// inserts
|
||||
...(
|
||||
isViewSorted ?
|
||||
// When the view is sorted, any newly added records get shifts instantly at the top or
|
||||
// bottom. It could be very confusing for users who might expect the record to stay above or
|
||||
// below the active row. Thus in this case we show a single `insert row` command.
|
||||
[menuItemCmd(allCommands.insertRecordAfter, 'Insert row',
|
||||
dom.cls('disabled', disableInsert))] :
|
||||
|
||||
[menuItemCmd(allCommands.insertRecordBefore, 'Insert row above',
|
||||
dom.cls('disabled', disableInsert)),
|
||||
menuItemCmd(allCommands.insertRecordAfter, 'Insert row below',
|
||||
dom.cls('disabled', disableInsert))]
|
||||
),
|
||||
|
||||
menuItemCmd(allCommands.insertFieldBefore, 'Insert column to the left',
|
||||
disableForReadonlyView),
|
||||
menuItemCmd(allCommands.insertFieldAfter, 'Insert column to the right',
|
||||
disableForReadonlyView),
|
||||
|
||||
|
||||
menuDivider(),
|
||||
|
||||
// deletes
|
||||
menuItemCmd(allCommands.deleteRecords, nameDeleteRows,
|
||||
dom.cls('disabled', disableDelete)),
|
||||
|
||||
menuItemCmd(allCommands.deleteFields, nameDeleteColumns, disableForReadonlyColumn),
|
||||
|
||||
// todo: add "hide N columns"
|
||||
);
|
||||
|
||||
return result;
|
||||
}
|
||||
@ -0,0 +1,98 @@
|
||||
/**
|
||||
* This module implements context menu to be shown on contextmenu event (most commonly associated
|
||||
* with right+click, but could varies slightly depending on platform, ie: mac support ctrl+click as
|
||||
* well).
|
||||
*
|
||||
* To prevent the default context menu to show everywhere else (including on the top of your custom
|
||||
* context menu) dont forget to prevent it by including below line at the root of the dom:
|
||||
* `dom.on('contextmenu', ev => ev.preventDefault())`
|
||||
*/
|
||||
import { Disposable, dom, DomArg, DomContents } from "grainjs";
|
||||
import { cssMenuElem } from 'app/client/ui2018/menus';
|
||||
import { IOpenController, Menu } from 'popweasel';
|
||||
|
||||
export type IContextMenuContentFunc = (ctx: ContextMenuController) => DomContents;
|
||||
|
||||
class ContextMenuController extends Disposable implements IOpenController {
|
||||
private _content: HTMLElement;
|
||||
constructor(private _event: MouseEvent, contentFunc: IContextMenuContentFunc) {
|
||||
super();
|
||||
|
||||
setTimeout(() => this._updatePosition(), 0);
|
||||
|
||||
// Create content and add to the dom but keep hidden until menu gets positioned
|
||||
const menu = Menu.create(null, this, [contentFunc(this)], {
|
||||
menuCssClass: cssMenuElem.className + ' grist-floating-menu'
|
||||
});
|
||||
const content = this._content = menu.content;
|
||||
content.style.visibility = 'hidden';
|
||||
document.body.appendChild(content);
|
||||
|
||||
// Prevents arrow to move the cursor while menu is open.
|
||||
dom.onKeyElem(content, 'keydown', {
|
||||
ArrowLeft: (ev) => ev.stopPropagation(),
|
||||
ArrowRight: (ev) => ev.stopPropagation()
|
||||
// UP and DOWN are already handle by the menu to navigate the menu)
|
||||
});
|
||||
|
||||
// On click anywhere on the page (outside popup content), close it.
|
||||
const onClick = (evt: MouseEvent) => {
|
||||
const target: Node|null = evt.target as Node;
|
||||
if (target && !content.contains(target)) {
|
||||
this.close();
|
||||
}
|
||||
};
|
||||
this.autoDispose(dom.onElem(document, 'contextmenu', onClick, {useCapture: true}));
|
||||
this.autoDispose(dom.onElem(document, 'click', onClick, {useCapture: true}));
|
||||
|
||||
// Cleanup involves removing the element.
|
||||
this.onDispose(() => {
|
||||
dom.domDispose(content);
|
||||
content.remove();
|
||||
});
|
||||
}
|
||||
|
||||
public close() {
|
||||
this.dispose();
|
||||
}
|
||||
public setOpenClass() {}
|
||||
|
||||
// IOpenController expects a trigger elem but context menu has no trigger. Let's return body for
|
||||
// now. As of time of writing the trigger elem is only used by popweasel when certain options are
|
||||
// enabled, ie: strectToSelector, parentSelectoToMark.
|
||||
// TODO: make a PR on popweasel to support using Menu with no trigger element.
|
||||
public getTriggerElem() { return document.body; }
|
||||
public update() {}
|
||||
|
||||
private _updatePosition() {
|
||||
const content = this._content;
|
||||
const ev = this._event;
|
||||
const rect = content.getBoundingClientRect();
|
||||
// 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';
|
||||
// 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';
|
||||
// show content
|
||||
content.style.visibility = '';
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Show the return value of contentFunc() in a context menu next to the mouse.
|
||||
*/
|
||||
function showContextMenu(ev: MouseEvent, contentFunc: IContextMenuContentFunc) {
|
||||
return ContextMenuController.create(null, ev, contentFunc);
|
||||
}
|
||||
|
||||
/**
|
||||
* Show a context menu on contextmenu.
|
||||
*/
|
||||
export function contextMenu(contentFunc: IContextMenuContentFunc): DomArg {
|
||||
return (elem) => {
|
||||
dom.onElem(elem, 'contextmenu', (ev) => {
|
||||
ev.preventDefault();
|
||||
ev.stopPropagation();
|
||||
dom.autoDisposeElem(elem, showContextMenu(ev, contentFunc));
|
||||
});
|
||||
};
|
||||
}
|
||||
Loading…
Reference in new issue