From 1c6ab775dd2333fb3507078bf061981c6c43f102 Mon Sep 17 00:00:00 2001 From: George Gevoian Date: Wed, 3 Aug 2022 08:19:33 -0700 Subject: [PATCH] (core) Polish upgrade button Summary: On mobile, clicking the upgrade button will now immediately display the plans modal. The button margins have also been adjusted to be smaller on mobile. Finally, some disabled options related to workspace sharing in the left panel (on personal sites) are now hidden instead. Test Plan: Browser tests. Reviewers: jarek Reviewed By: jarek Differential Revision: https://phab.getgrist.com/D3555 --- app/client/ui/DocMenu.ts | 8 ++++---- app/client/ui/DocMenuCss.ts | 14 ++++++++++++++ app/client/ui/HomeLeftPane.ts | 15 +++++++++------ app/client/ui/ProductUpgradesStub.ts | 6 +++--- 4 files changed, 30 insertions(+), 13 deletions(-) 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 {