mirror of
https://github.com/gristlabs/grist-core.git
synced 2024-09-28 23:10:46 +00:00
ec157dc469
Summary: Adds initial implementation of dark mode. Preferences for dark mode are available on the account settings page. Dark mode is currently a beta feature as there are still some small bugs to squash and a few remaining UI elements to style. Test Plan: Browser tests. Reviewers: jarek Reviewed By: jarek Subscribers: paulfitz, jarek Differential Revision: https://phab.getgrist.com/D3587
35 lines
1.0 KiB
TypeScript
35 lines
1.0 KiB
TypeScript
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 */
|
|
}
|
|
`);
|