gristlabs_grist-core/app/client/components/ViewAsBanner.ts
Cyprien P cabac3d9d8 (core) Adds new view as banner
Summary:
Diff removes view-as pill in the document breadcrumbs and add new view-as banner.

Note: Banners are still missing mechanism to handle several banners. As of now both doc-usage and view-as banners could show up at the same time.

Test Plan: Refactored existing test.

Reviewers: jarek

Reviewed By: jarek

Subscribers: jarek

Differential Revision: https://phab.getgrist.com/D3732
2023-01-03 12:33:34 +01:00

133 lines
3.9 KiB
TypeScript

import { reportError } from 'app/client/models/AppModel';
import { Banner } from "app/client/components/Banner";
import { DocPageModel } from "app/client/models/DocPageModel";
import { icon } from "app/client/ui2018/icons";
import { primaryButtonLink } from 'app/client/ui2018/buttons';
import { Disposable, dom, styled } from "grainjs";
import { testId, theme } from 'app/client/ui2018/cssVars';
import { urlState } from 'app/client/models/gristUrlState';
import { userOverrideParams } from 'app/common/gristUrls';
import { cssMenuItem } from 'popweasel';
import { getUserRoleText } from 'app/common/UserAPI';
import { PermissionDataWithExtraUsers } from 'app/common/ActiveDocAPI';
import { waitGrainObs } from 'app/common/gutil';
import { cssSelectBtn } from 'app/client/ui2018/select';
import { ACLUsersPopup } from 'app/client/aclui/ACLUsers';
import { UserOverride } from 'app/common/DocListAPI';
import { makeT } from 'app/client/lib/localization';
const t = makeT('components.ViewAsBanner');
export class ViewAsBanner extends Disposable {
private _userOverride = this._docPageModel.userOverride;
private _usersPopup = ACLUsersPopup.create(this);
constructor (private _docPageModel: DocPageModel) {
super();
}
public buildDom() {
return dom.maybe(this._userOverride, (userOverride) => {
this._initViewAsUsers().catch(reportError);
return dom.create(Banner, {
content: this._buildContent(userOverride),
style: 'info',
showCloseButton: false,
showExpandButton: false,
bannerCssClass: cssBanner.className,
});
});
}
private _buildContent(userOverride: UserOverride) {
const {user, access} = userOverride;
return cssContent(
cssMessageText(
cssMessageIcon('EyeShow'),
'You are viewing this document as',
),
cssSelectBtn(
{tabIndex: '0'},
cssBtnText(
user ? cssMember(
user.name || user.email,
cssRole('(', getUserRoleText({...user, access}), ')', dom.show(Boolean(access))),
) : t('UnknownUser'),
),
dom(
'div', {style: 'flex: none;'},
cssInlineCollapseIcon('Collapse'),
),
elem => this._usersPopup.attachPopup(elem, {}),
testId('select-open'),
),
cssPrimaryButtonLink(
'View as Yourself', cssIcon('Convert'),
urlState().setHref(userOverrideParams(null)),
testId('revert'),
),
testId('view-as-banner'),
);
}
private async _initViewAsUsers() {
await waitGrainObs(this._docPageModel.gristDoc);
const permissionData = await this._getUsersForViewAs();
this._usersPopup.init(this._docPageModel, permissionData);
}
private _getUsersForViewAs(): Promise<PermissionDataWithExtraUsers> {
const docId = this._docPageModel.currentDocId.get()!;
const docApi = this._docPageModel.appModel.api.getDocAPI(docId);
return docApi.getUsersForViewAs();
}
}
const cssContent = styled('div', `
display: flex;
justify-content: center;
width: 100%;
column-gap: 13px;
align-items: center;
& .${cssSelectBtn.className} {
width: 184px;
}
`);
const cssIcon = styled(icon, `
margin-left: 10px;
`);
const cssMember = styled('span', `
font-weight: 500;
color: ${theme.text};
.${cssMenuItem.className}-sel & {
color: ${theme.menuItemSelectedFg};
}
`);
const cssRole = styled('span', `
font-weight: 400;
margin-left: 1ch;
`);
const cssMessageText = styled('span', `
`);
const cssMessageIcon = styled(icon, `
margin-right: 10px;
`);
const cssPrimaryButtonLink = styled(primaryButtonLink, `
margin-left: 5px;
`);
const cssBtnText = styled('div', `
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
`);
const cssInlineCollapseIcon = styled(icon, `
margin: 0 2px;
pointer-events: none;
`);
const cssBanner = styled('div', `
border-bottom: 1px solid ${theme.pagePanelsBorder};
height: 45px;
`);