(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
This commit is contained in:
George Gevoian 2022-08-03 08:19:33 -07:00
parent 771e1edd54
commit 1c6ab775dd
4 changed files with 30 additions and 13 deletions

View File

@ -75,7 +75,9 @@ function createLoadedDocMenu(owner: IDisposableOwner, home: HomeModel) {
viewSettings, viewSettings,
// Hide the sort and view options when showing the intro. // Hide the sort and view options when showing the intro.
{hideSort: showIntro, hideView: showIntro && page === 'all'}, {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. // Build the pinned docs dom. Builds nothing if the selectedOrg is unloaded.
@ -118,8 +120,6 @@ function createLoadedDocMenu(owner: IDisposableOwner, home: HomeModel) {
dom('div', dom('div',
showIntro ? buildHomeIntro(home) : null, showIntro ? buildHomeIntro(home) : null,
buildAllDocsBlock(home, home.workspaces, showIntro, flashDocId, viewSettings), buildAllDocsBlock(home, home.workspaces, showIntro, flashDocId, viewSettings),
dom.maybe(use => use(isNarrowScreenObs()),
() => upgradeButton.showUpgradeCard()),
shouldShowTemplates(home, showIntro) ? buildAllDocsTemplates(home, viewSettings) : null, shouldShowTemplates(home, showIntro) ? buildAllDocsTemplates(home, viewSettings) : null,
) : ) :
(page === 'trash') ? (page === 'trash') ?
@ -147,7 +147,7 @@ function createLoadedDocMenu(owner: IDisposableOwner, home: HomeModel) {
testId('doclist') testId('doclist')
), ),
dom.maybe(use => !use(isNarrowScreenObs()) && ['all', 'workspace'].includes(use(home.currentPage)), dom.maybe(use => !use(isNarrowScreenObs()) && ['all', 'workspace'].includes(use(home.currentPage)),
() => upgradeButton.showUpgradeCard()), () => upgradeButton.showUpgradeCard(css.upgradeCard.cls(''))),
); );
} }

View File

@ -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;
`);

View File

@ -52,6 +52,7 @@ export function createHomeLeftPane(leftPanelOpen: Observable<boolean>, home: Hom
), ),
dom.forEach(home.workspaces, (ws) => { dom.forEach(home.workspaces, (ws) => {
if (ws.isSupportWorkspace) { return null; } if (ws.isSupportWorkspace) { return null; }
const info = getWorkspaceInfo(home.app, ws);
const isTrivial = computed((use) => Boolean(getWorkspaceInfo(home.app, ws).isDefault && const isTrivial = computed((use) => Boolean(getWorkspaceInfo(home.app, ws).isDefault &&
use(home.singleWorkspace))); use(home.singleWorkspace)));
// TODO: Introduce a "SwitchSelector" pattern to avoid the need for N computeds (and N // TODO: Introduce a "SwitchSelector" pattern to avoid the need for N computeds (and N
@ -65,7 +66,10 @@ export function createHomeLeftPane(leftPanelOpen: Observable<boolean>, home: Hom
cssPageLink(cssPageIcon('Folder'), cssLinkText(workspaceName(home.app, ws)), cssPageLink(cssPageIcon('Folder'), cssLinkText(workspaceName(home.app, ws)),
dom.hide(isRenaming), dom.hide(isRenaming),
urlState().setLinkUrl({ws: ws.id}), 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), menu(() => workspaceMenu(home, ws, renaming),
{placement: 'bottom-start', parentSelectorToMark: '.' + cssPageEntry.className}), {placement: 'bottom-start', parentSelectorToMark: '.' + cssPageEntry.className}),
@ -223,12 +227,11 @@ function workspaceMenu(home: HomeModel, ws: Workspace, renaming: Observable<Work
upgradableMenuItem(needUpgrade, deleteWorkspace, "Delete", upgradableMenuItem(needUpgrade, deleteWorkspace, "Delete",
dom.cls('disabled', user => !roles.canEdit(ws.access)), dom.cls('disabled', user => !roles.canEdit(ws.access)),
testId('dm-delete-workspace')), testId('dm-delete-workspace')),
upgradableMenuItem(needUpgrade, manageWorkspaceUsers,
roles.canEditAccess(ws.access) ? "Manage Users" : "Access Details",
// TODO: Personal plans can't currently share workspaces, but that restriction // TODO: Personal plans can't currently share workspaces, but that restriction
// should formally be documented and defined in `Features`, with this check updated // should formally be documented and defined in `Features`, with this check updated
// to look there instead. // to look there instead.
dom.cls('disabled', () => home.app.isPersonal), home.app.isPersonal ? null : upgradableMenuItem(needUpgrade, manageWorkspaceUsers,
roles.canEditAccess(ws.access) ? "Manage Users" : "Access Details",
testId('dm-workspace-access')), testId('dm-workspace-access')),
upgradeText(needUpgrade, () => home.app.showUpgradeModal()), upgradeText(needUpgrade, () => home.app.showUpgradeModal()),
]; ];

View File

@ -1,6 +1,6 @@
import type {AppModel} from 'app/client/models/AppModel'; import type {AppModel} from 'app/client/models/AppModel';
import {commonUrls} from 'app/common/gristUrls'; 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: { export function buildNewSiteModal(context: Disposable, options: {
planName: string, planName: string,
@ -18,8 +18,8 @@ export function showTeamUpgradeConfirmation(owner: Disposable) {
} }
export interface UpgradeButton { export interface UpgradeButton {
showUpgradeCard(): DomContents; showUpgradeCard(...args: DomArg<HTMLElement>[]): DomContents;
showUpgradeButton(): DomContents; showUpgradeButton(...args: DomArg<HTMLElement>[]): DomContents;
} }
export function buildUpgradeButton(owner: IDisposableOwner, app: AppModel): UpgradeButton { export function buildUpgradeButton(owner: IDisposableOwner, app: AppModel): UpgradeButton {