mirror of
https://github.com/gristlabs/grist-core.git
synced 2024-10-27 20:44:07 +00:00
caf830db08
Summary: Adds a new Record Card view section to each non-summary table, which can be from opened from various parts of the Grist UI to view and edit records in a popup card view. Work is still ongoing, so the feature is locked away behind a flag; follow-up work is planned to finish up the implementation and add end-to-end tests. Test Plan: Python and server tests. Browser tests will be included in a follow-up. Reviewers: jarek, paulfitz Reviewed By: jarek Subscribers: paulfitz Differential Revision: https://phab.getgrist.com/D4114
96 lines
3.8 KiB
TypeScript
96 lines
3.8 KiB
TypeScript
import { allCommands } from 'app/client/components/commands';
|
|
import { makeT } from 'app/client/lib/localization';
|
|
import { menuDivider, menuItemCmd } from 'app/client/ui2018/menus';
|
|
import { IMultiColumnContextMenu } from 'app/client/ui/GridViewMenus';
|
|
import { COMMENTS } from 'app/client/models/features';
|
|
import { dom } from 'grainjs';
|
|
|
|
const t = makeT('CellContextMenu');
|
|
|
|
export interface ICellContextMenu {
|
|
disableInsert: boolean;
|
|
disableDelete: boolean;
|
|
isViewSorted: boolean;
|
|
numRows: number;
|
|
}
|
|
|
|
export function CellContextMenu(cellOptions: ICellContextMenu, colOptions: IMultiColumnContextMenu) {
|
|
|
|
const { disableInsert, disableDelete, isViewSorted, numRows } = cellOptions;
|
|
const { numColumns, disableModify, isReadonly, isFiltered } = colOptions;
|
|
|
|
// disableModify is true if the column is a summary column or is being transformed.
|
|
// isReadonly is true for readonly mode.
|
|
const disableForReadonlyColumn = dom.cls('disabled', Boolean(disableModify) || isReadonly);
|
|
const disableForReadonlyView = dom.cls('disabled', isReadonly);
|
|
|
|
const nameClearColumns = isFiltered ?
|
|
t("Reset {{count}} entire columns", {count: numColumns}) :
|
|
t("Reset {{count}} columns", {count: numColumns});
|
|
const nameDeleteColumns = t("Delete {{count}} columns", {count: numColumns});
|
|
|
|
const nameDeleteRows = t("Delete {{count}} rows", {count: numRows});
|
|
|
|
const nameClearCells = (numRows > 1 || numColumns > 1) ? t("Clear values") : t("Clear cell");
|
|
|
|
const result: Array<Element|null> = [];
|
|
|
|
result.push(
|
|
menuItemCmd(allCommands.contextMenuCut, t('Cut'), disableForReadonlyColumn),
|
|
menuItemCmd(allCommands.contextMenuCopy, t('Copy')),
|
|
menuItemCmd(allCommands.contextMenuPaste, t('Paste'), disableForReadonlyColumn),
|
|
menuDivider(),
|
|
colOptions.isFormula ?
|
|
null :
|
|
menuItemCmd(allCommands.clearValues, nameClearCells, disableForReadonlyColumn),
|
|
menuItemCmd(allCommands.clearColumns, nameClearColumns, disableForReadonlyColumn),
|
|
|
|
...(
|
|
(numColumns > 1 || numRows > 1) ? [] : [
|
|
menuDivider(),
|
|
menuItemCmd(allCommands.copyLink, t("Copy anchor link")),
|
|
menuDivider(),
|
|
menuItemCmd(allCommands.filterByThisCellValue, t("Filter by this value")),
|
|
menuItemCmd(allCommands.openDiscussion, t('Comment'), dom.cls('disabled', (
|
|
isReadonly || numRows === 0 || numColumns === 0
|
|
)), dom.hide(use => !use(COMMENTS()))) //TODO: i18next
|
|
]
|
|
),
|
|
|
|
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, t("Insert row"),
|
|
dom.cls('disabled', disableInsert))] :
|
|
|
|
[menuItemCmd(allCommands.insertRecordBefore, t("Insert row above"),
|
|
dom.cls('disabled', disableInsert)),
|
|
menuItemCmd(allCommands.insertRecordAfter, t("Insert row below"),
|
|
dom.cls('disabled', disableInsert))]
|
|
),
|
|
menuItemCmd(allCommands.duplicateRows, t("Duplicate rows", {count: numRows}),
|
|
dom.cls('disabled', disableInsert || numRows === 0)),
|
|
menuItemCmd(allCommands.insertFieldBefore, t("Insert column to the left"),
|
|
disableForReadonlyView),
|
|
menuItemCmd(allCommands.insertFieldAfter, t("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;
|
|
}
|