You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
35 lines
1.0 KiB
35 lines
1.0 KiB
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 */
|
|
}
|
|
`);
|