gristlabs_grist-core/app/client/ui/MenuToggle.ts

35 lines
1.0 KiB
TypeScript
Raw Normal View History

import { theme } from "app/client/ui2018/cssVars";
import { icon } from "app/client/ui2018/icons";
import { dom, DomArg, IDisposableOwner, styled } from "grainjs";
/**
* 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: ${theme.menuToggleBg};
cursor: pointer;
--icon-color: ${theme.menuToggleFg};
border: 1px solid ${theme.menuToggleBorder};
border-radius: 4px;
&:hover {
--icon-color: ${theme.menuToggleHoverFg};
border-color: ${theme.menuToggleHoverFg};
}
&:active {
--icon-color: ${theme.menuToggleActiveFg};
border-color: ${theme.menuToggleActiveFg};
}
& > .menu_toggle_icon {
display: block; /* don't create a line */
}
`);