diff --git a/app/client/ui/DocMenu.ts b/app/client/ui/DocMenu.ts index a6faa14b..fadc25ba 100644 --- a/app/client/ui/DocMenu.ts +++ b/app/client/ui/DocMenu.ts @@ -75,7 +75,9 @@ function createLoadedDocMenu(owner: IDisposableOwner, home: HomeModel) { viewSettings, // Hide the sort and view options when showing the intro. {hideSort: showIntro, hideView: showIntro && page === 'all'}, - ['all', 'workspace'].includes(page) ? upgradeButton.showUpgradeButton() : null, + ['all', 'workspace'].includes(page) + ? upgradeButton.showUpgradeButton(css.upgradeButton.cls('')) + : null, ), // Build the pinned docs dom. Builds nothing if the selectedOrg is unloaded. @@ -118,8 +120,6 @@ function createLoadedDocMenu(owner: IDisposableOwner, home: HomeModel) { dom('div', showIntro ? buildHomeIntro(home) : null, buildAllDocsBlock(home, home.workspaces, showIntro, flashDocId, viewSettings), - dom.maybe(use => use(isNarrowScreenObs()), - () => upgradeButton.showUpgradeCard()), shouldShowTemplates(home, showIntro) ? buildAllDocsTemplates(home, viewSettings) : null, ) : (page === 'trash') ? @@ -147,7 +147,7 @@ function createLoadedDocMenu(owner: IDisposableOwner, home: HomeModel) { testId('doclist') ), dom.maybe(use => !use(isNarrowScreenObs()) && ['all', 'workspace'].includes(use(home.currentPage)), - () => upgradeButton.showUpgradeCard()), + () => upgradeButton.showUpgradeCard(css.upgradeCard.cls(''))), ); } diff --git a/app/client/ui/DocMenuCss.ts b/app/client/ui/DocMenuCss.ts index b6047e80..7672fa6b 100644 --- a/app/client/ui/DocMenuCss.ts +++ b/app/client/ui/DocMenuCss.ts @@ -333,3 +333,17 @@ export const sortSelector = styled('div', ` } } `); + +export const upgradeButton = styled('div', ` + margin-left: 32px; + + @media ${mediaSmall} { + & { + margin-left: 8px; + } + } +`); + +export const upgradeCard = styled('div', ` + margin-left: 64px; +`); diff --git a/app/client/ui/HomeLeftPane.ts b/app/client/ui/HomeLeftPane.ts index 39510c0b..fe46d1eb 100644 --- a/app/client/ui/HomeLeftPane.ts +++ b/app/client/ui/HomeLeftPane.ts @@ -52,6 +52,7 @@ export function createHomeLeftPane(leftPanelOpen: Observable, home: Hom ), dom.forEach(home.workspaces, (ws) => { if (ws.isSupportWorkspace) { return null; } + const info = getWorkspaceInfo(home.app, ws); const isTrivial = computed((use) => Boolean(getWorkspaceInfo(home.app, ws).isDefault && use(home.singleWorkspace))); // TODO: Introduce a "SwitchSelector" pattern to avoid the need for N computeds (and N @@ -65,7 +66,10 @@ export function createHomeLeftPane(leftPanelOpen: Observable, home: Hom cssPageLink(cssPageIcon('Folder'), cssLinkText(workspaceName(home.app, ws)), dom.hide(isRenaming), urlState().setLinkUrl({ws: ws.id}), - cssMenuTrigger(icon('Dots'), + // Don't show menu if workspace is personal and shared by another user; we could + // be a bit more nuanced here, but as of today the menu isn't particularly useful + // as all the menu options are disabled. + !info.self && info.owner ? null : cssMenuTrigger(icon('Dots'), menu(() => workspaceMenu(home, ws, renaming), {placement: 'bottom-start', parentSelectorToMark: '.' + cssPageEntry.className}), @@ -223,12 +227,11 @@ function workspaceMenu(home: HomeModel, ws: Workspace, renaming: Observable !roles.canEdit(ws.access)), testId('dm-delete-workspace')), - upgradableMenuItem(needUpgrade, manageWorkspaceUsers, + // TODO: Personal plans can't currently share workspaces, but that restriction + // should formally be documented and defined in `Features`, with this check updated + // to look there instead. + home.app.isPersonal ? null : upgradableMenuItem(needUpgrade, manageWorkspaceUsers, roles.canEditAccess(ws.access) ? "Manage Users" : "Access Details", - // TODO: Personal plans can't currently share workspaces, but that restriction - // should formally be documented and defined in `Features`, with this check updated - // to look there instead. - dom.cls('disabled', () => home.app.isPersonal), testId('dm-workspace-access')), upgradeText(needUpgrade, () => home.app.showUpgradeModal()), ]; diff --git a/app/client/ui/ProductUpgradesStub.ts b/app/client/ui/ProductUpgradesStub.ts index 75f8b43a..85797be6 100644 --- a/app/client/ui/ProductUpgradesStub.ts +++ b/app/client/ui/ProductUpgradesStub.ts @@ -1,6 +1,6 @@ import type {AppModel} from 'app/client/models/AppModel'; import {commonUrls} from 'app/common/gristUrls'; -import {Disposable, DomContents, IDisposableOwner, Observable, observable} from 'grainjs'; +import {Disposable, DomArg, DomContents, IDisposableOwner, Observable, observable} from 'grainjs'; export function buildNewSiteModal(context: Disposable, options: { planName: string, @@ -18,8 +18,8 @@ export function showTeamUpgradeConfirmation(owner: Disposable) { } export interface UpgradeButton { - showUpgradeCard(): DomContents; - showUpgradeButton(): DomContents; + showUpgradeCard(...args: DomArg[]): DomContents; + showUpgradeButton(...args: DomArg[]): DomContents; } export function buildUpgradeButton(owner: IDisposableOwner, app: AppModel): UpgradeButton {