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/D3732pull/468/head
Cyprien P
1 year ago
parent
c0e9c18128
commit
cabac3d9d8
@ -0,0 +1,132 @@
|
||||
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;
|
||||
`);
|
||||
Loading…
Reference in new issue