gristlabs_grist-core/app/client/ui/SiteSwitcher.ts
George Gevoian ec157dc469 (core) Add dark mode to user preferences
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
2022-09-05 19:17:32 -07:00

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;
}
`);