mirror of
https://github.com/gristlabs/grist-core.git
synced 2024-09-28 15:30:49 +00:00
59699bf446
Summary: Adds links to manage team and go to billing account in the org menu (opened by clicking the dropdown in the top-left corner of Grist). Tweaks some wording of items in both AppHeader and AccountWidget, and adds a link to create a new team site to the Site Switcher in both menus. Also tweaks the UI of UserManager by adding an animation when the manager is opened from the doc access dialog. Test Plan: Browser tests. Reviewers: dsagal Reviewed By: dsagal Subscribers: dsagal Differential Revision: https://phab.getgrist.com/D3121
54 lines
1.6 KiB
TypeScript
54 lines
1.6 KiB
TypeScript
import {commonUrls} 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 {menuIcon, menuItemLink, menuSubHeader} from 'app/client/ui2018/menus';
|
|
import {icon} from 'app/client/ui2018/icons';
|
|
import {colors} from 'app/client/ui2018/cssVars';
|
|
|
|
const testId = makeTestId('test-site-switcher-');
|
|
|
|
/**
|
|
* 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'),
|
|
)
|
|
),
|
|
menuItemLink(
|
|
{ href: commonUrls.createTeamSite },
|
|
menuIcon('Plus'),
|
|
'Create new team site',
|
|
testId('create-new-site'),
|
|
),
|
|
];
|
|
}
|
|
|
|
const cssOrgSelected = styled('div', `
|
|
background-color: ${colors.dark};
|
|
color: ${colors.light};
|
|
`);
|
|
|
|
const cssOrgCheckmark = styled(icon, `
|
|
flex: none;
|
|
margin-left: 16px;
|
|
--icon-color: ${colors.light};
|
|
display: none;
|
|
.${cssOrgSelected.className} > & {
|
|
display: block;
|
|
}
|
|
`);
|