mirror of
https://github.com/gristlabs/grist-core.git
synced 2024-09-28 17:10:48 +00:00
e180641c7d
Summary: User was not able to delete cards. This patch introduces a context menu for cards, analogous to the one available for rows on a GridView. Changes: - Row numbers on a GridView have the same icon as on columns to make context menu more discoverable. - Context menu for rows and columns, when activated, didn't switch section in rare conditions (i.e. when the section had 2 or more columns selected, one of which had the same rowId as a column in the section that the user switched from). - Card list layout and a single card layout has the same context menu as in a GridView, available by pressing the context menu button. Test Plan: Browser tests Reviewers: dsagal, paulfitz Reviewed By: dsagal Differential Revision: https://phab.getgrist.com/D2870
35 lines
1004 B
TypeScript
35 lines
1004 B
TypeScript
import { dom, DomArg, IDisposableOwner, styled } from "grainjs";
|
|
import { icon } from "app/client/ui2018/icons";
|
|
import { colors } from "app/client/ui2018/cssVars";
|
|
|
|
/**
|
|
* Creates a toggle button - little square button with a dropdown icon inside, used
|
|
* by a context menu for a row inside a grid, a card inside a cardlist and column name.
|
|
*/
|
|
export function menuToggle(obs: IDisposableOwner, ...args: DomArg[]) {
|
|
const contextMenu = cssMenuToggle(
|
|
icon('Dropdown', dom.cls('menu_toggle_icon')),
|
|
...args
|
|
);
|
|
return contextMenu;
|
|
}
|
|
|
|
const cssMenuToggle = styled('div.menu_toggle', `
|
|
background: white;
|
|
cursor: pointer;
|
|
--icon-color: ${colors.slate};
|
|
border: 1px solid ${colors.slate};
|
|
border-radius: 4px;
|
|
&:hover {
|
|
--icon-color: ${colors.darkGreen};
|
|
border-color: ${colors.darkGreen};
|
|
}
|
|
&:active {
|
|
--icon-color: ${colors.darkerGreen};
|
|
border-color: ${colors.darkerGreen};
|
|
}
|
|
& > .menu_toggle_icon {
|
|
display: block; /* don't create a line */
|
|
}
|
|
`);
|