mirror of
https://github.com/gristlabs/grist-core.git
synced 2024-10-27 20:44:07 +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
65 lines
2.0 KiB
TypeScript
65 lines
2.0 KiB
TypeScript
import {getSingleOrg, shouldHideUiElement} from 'app/common/gristUrls';
|
|
import {getOrgName} from 'app/common/UserAPI';
|
|
import {dom, makeTestId, styled} from 'grainjs';
|
|
import {AppModel} from 'app/client/models/AppModel';
|
|
import {urlState} from 'app/client/models/gristUrlState';
|
|
import {theme} from 'app/client/ui2018/cssVars';
|
|
import {menuDivider, menuIcon, menuItem, menuItemLink, menuSubHeader} from 'app/client/ui2018/menus';
|
|
import {icon} from 'app/client/ui2018/icons';
|
|
|
|
const testId = makeTestId('test-site-switcher-');
|
|
|
|
/**
|
|
* Adds a menu divider and a site switcher, if there is need for one.
|
|
*/
|
|
export function maybeAddSiteSwitcherSection(appModel: AppModel) {
|
|
const orgs = appModel.topAppModel.orgs;
|
|
return dom.maybe((use) => use(orgs).length > 0 && !getSingleOrg() && !shouldHideUiElement("multiSite"), () => [
|
|
menuDivider(),
|
|
buildSiteSwitcher(appModel),
|
|
]);
|
|
}
|
|
|
|
/**
|
|
* Builds a menu sub-section that displays a list of orgs/sites that the current
|
|
* valid user has access to, with buttons to navigate to them.
|
|
*
|
|
* Used by AppHeader and AccountWidget.
|
|
*/
|
|
export function buildSiteSwitcher(appModel: AppModel) {
|
|
const orgs = appModel.topAppModel.orgs;
|
|
|
|
return [
|
|
menuSubHeader('Switch Sites'),
|
|
dom.forEach(orgs, (org) =>
|
|
menuItemLink(urlState().setLinkUrl({ org: org.domain || undefined }),
|
|
cssOrgSelected.cls('', appModel.currentOrg ? org.id === appModel.currentOrg.id : false),
|
|
getOrgName(org),
|
|
cssOrgCheckmark('Tick', testId('org-tick')),
|
|
testId('org'),
|
|
)
|
|
),
|
|
menuItem(
|
|
() => appModel.showNewSiteModal(),
|
|
menuIcon('Plus'),
|
|
'Create new team site',
|
|
testId('create-new-site'),
|
|
),
|
|
];
|
|
}
|
|
|
|
const cssOrgSelected = styled('div', `
|
|
background-color: ${theme.siteSwitcherActiveBg};
|
|
color: ${theme.siteSwitcherActiveFg};
|
|
`);
|
|
|
|
const cssOrgCheckmark = styled(icon, `
|
|
flex: none;
|
|
margin-left: 16px;
|
|
--icon-color: ${theme.siteSwitcherActiveFg};
|
|
display: none;
|
|
.${cssOrgSelected.className} > & {
|
|
display: block;
|
|
}
|
|
`);
|