diff --git a/app/client/ui/LeftPanelCommon.ts b/app/client/ui/LeftPanelCommon.ts index 608b9272..147b15c4 100644 --- a/app/client/ui/LeftPanelCommon.ts +++ b/app/client/ui/LeftPanelCommon.ts @@ -105,8 +105,8 @@ export const cssPageEntry = styled('div', ` } &-disabled, &-disabled:hover, &-disabled.weasel-popup-open { background-color: initial; - color: ${colors.mediumGrey}; - --icon-color: ${colors.mediumGrey}; + color: ${colors.darkGrey}; + --icon-color: ${colors.darkGrey}; } .${cssTools.className}-collapsed > & { margin-right: 0; diff --git a/app/client/ui/Tools.ts b/app/client/ui/Tools.ts index 4a90af7e..9a72ff09 100644 --- a/app/client/ui/Tools.ts +++ b/app/client/ui/Tools.ts @@ -8,13 +8,13 @@ import { hoverTooltip, tooltipCloseButton } from 'app/client/ui/tooltips'; import { colors } from 'app/client/ui2018/cssVars'; import { icon } from 'app/client/ui2018/icons'; import { cssLink } from 'app/client/ui2018/links'; +import { menuAnnotate } from 'app/client/ui2018/menus'; import { userOverrideParams } from 'app/common/gristUrls'; import { Disposable, dom, makeTestId, Observable, observable, styled } from "grainjs"; const testId = makeTestId('test-tools-'); export function tools(owner: Disposable, gristDoc: GristDoc, leftPanelOpen: Observable): Element { - const aclUIEnabled = Boolean(urlState().state.get().params?.aclUI); const isOwner = gristDoc.docPageModel.currentDoc.get()?.access === 'owners'; const isOverridden = Boolean(gristDoc.docPageModel.userOverride.get()); const canViewAccessRules = observable(false); @@ -28,22 +28,22 @@ export function tools(owner: Disposable, gristDoc: GristDoc, leftPanelOpen: Obse cssTools.cls('-collapsed', (use) => !use(leftPanelOpen)), cssSectionHeader("TOOLS"), - (aclUIEnabled ? - cssPageEntry( - cssPageEntry.cls('-selected', (use) => use(gristDoc.activeViewId) === 'acl'), - cssPageEntry.cls('-disabled', (use) => !use(canViewAccessRules)), - dom.domComputed(canViewAccessRules, (_canViewAccessRules) => { - return cssPageLink( - cssPageIcon('EyeShow'), - cssLinkText('Access Rules'), - _canViewAccessRules ? urlState().setLinkUrl({docPage: 'acl'}) : null, - isOverridden ? addRevertViewAsUI() : null, - ); - }), - testId('access-rules'), - ) : - null + cssPageEntry( + cssPageEntry.cls('-selected', (use) => use(gristDoc.activeViewId) === 'acl'), + cssPageEntry.cls('-disabled', (use) => !use(canViewAccessRules)), + dom.domComputed(canViewAccessRules, (_canViewAccessRules) => { + return cssPageLink( + cssPageIcon('EyeShow'), + cssLinkText('Access Rules', + menuAnnotate('Beta', cssBetaTag.cls('')) + ), + _canViewAccessRules ? urlState().setLinkUrl({docPage: 'acl'}) : null, + isOverridden ? addRevertViewAsUI() : null, + ); + }), + testId('access-rules'), ), + cssPageEntry( cssPageLink(cssPageIcon('Log'), cssLinkText('Document History'), testId('log'), dom.on('click', () => gristDoc.showTool('docHistory'))) @@ -159,3 +159,9 @@ const cssRevertViewAsButton = styled(cssExampleCardOpener, ` background-color: ${colors.slate}; } `); + +const cssBetaTag = styled('div', ` + .${cssPageEntry.className}-disabled & { + opacity: 0.4; + } +`); diff --git a/app/client/ui/UserManager.ts b/app/client/ui/UserManager.ts index 56d3eceb..6f731ae1 100644 --- a/app/client/ui/UserManager.ts +++ b/app/client/ui/UserManager.ts @@ -55,8 +55,6 @@ async function getModel(options: IUserManagerOptions): Promise = observable(null); - const aclUIEnabled = Boolean(urlState().state.get().params?.aclUI); - async function onConfirm(ctl: IModalControl) { const model = modelObs.get(); if (model) { @@ -107,15 +105,13 @@ export function showUserManagerModal(userApi: UserAPI, options: IUserManagerOpti dom.on('click', () => ctl.close()), testId('um-cancel') ), - (aclUIEnabled ? - cssAccessLink({href: urlState().makeUrl({docPage: 'acl'})}, - dom.text(use => (use(modelObs) && use(use(modelObs)!.isAnythingChanged)) ? 'Save & ' : ''), - 'Open Access Rules', - dom.on('click', (ev) => { - ev.preventDefault(); - return onConfirm(ctl).then(() => urlState().pushUrl({docPage: 'acl'})); - }), - ) : null + cssAccessLink({href: urlState().makeUrl({docPage: 'acl'})}, + dom.text(use => (use(modelObs) && use(use(modelObs)!.isAnythingChanged)) ? 'Save & ' : ''), + 'Open Access Rules', + dom.on('click', (ev) => { + ev.preventDefault(); + return onConfirm(ctl).then(() => urlState().pushUrl({docPage: 'acl'})); + }), ), testId('um-buttons'), ) diff --git a/app/client/ui2018/menus.ts b/app/client/ui2018/menus.ts index b2a98b7f..64a6c753 100644 --- a/app/client/ui2018/menus.ts +++ b/app/client/ui2018/menus.ts @@ -255,8 +255,8 @@ export function menuItemCmd(cmd: Command, label: string, ...args: DomElementArg[ ); } -export function menuAnnotate(text: string) { - return cssAnnotateMenuItem('Beta'); +export function menuAnnotate(text: string, ...args: DomElementArg[]) { + return cssAnnotateMenuItem(text, ...args); } export const menuDivider = styled(weasel.cssMenuDivider, ` diff --git a/app/common/gristUrls.ts b/app/common/gristUrls.ts index 8d5a220d..dd051a8c 100644 --- a/app/common/gristUrls.ts +++ b/app/common/gristUrls.ts @@ -65,7 +65,6 @@ export interface IGristUrlState { embed?: boolean; style?: InterfaceStyle; compare?: string; - aclUI?: boolean; linkParameters?: Record; // Parameters to pass as 'user.Link' in granular ACLs. // Encoded in URL as query params with extra '_' suffix. }; @@ -265,9 +264,6 @@ export function decodeUrl(gristConfig: Partial, location: Locat if (sp.has('compare')) { state.params!.compare = sp.get('compare')!; } - if (sp.has('aclUI')) { - state.params!.aclUI = isAffirmative(sp.get('aclUI')); - } for (const [k, v] of sp.entries()) { if (k.endsWith('_')) { if (!state.params!.linkParameters) { state.params!.linkParameters = {}; }