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/D3121pull/115/head
parent
1178d35237
commit
59699bf446
@ -0,0 +1,53 @@
|
||||
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;
|
||||
}
|
||||
`);
|
Loading…
Reference in new issue