gristlabs_grist-core/app/client/ui/LeftPanelCommon.ts
Cyprien P 693f2f6325 (core) Brings welcome tour and hide behind a flag
Summary:
This diff brings in the new welcome tour. It builds upon `client/ui/OnBoardingPopup` that was committed to that purposes. Per this diff,  the tour is accessible behind a flag and won't be visible to user: few caveats listed below needs to be adressed first.

This diff also brings few changes to onboarding module.
  - allow to refer to element with selector
     - usually dynamic selection of element sounds useful for when the
     element does not exist yet when the tour starts. But the actual
     reason when add it here, is to allow selecting the first cell.
     - if the selector yields undefined (missing element), the popup
     is simply skipped
  - got rid of the internal registry to link between popup contents
  and popup options. All is now define in the same interface. Registry
  overall felt overkill and not needed.
  - adds an option to show message as a simple modal that is centered
  on the screen

This diff also brings the new welcome tour and hide it behind a flag

CAVEATS that need to be addressed in follow up commit:
 - The url needs cleanup, #repeat-welcome-tour sticks to it and so even when navigating to home page. This could eventually become an issue: if user opens another document it would starts the onboarding tour again.
 - For now you have to manually make sure the right panel is opened with the Column tab selected before starting the tour.
  - On boarding tours were not designed with mobile support in mind. So probably a good idea to disable.
  - Backend support needs to be done (persistence of first time user).

Test Plan:
Updated `projects/OnBoardingPopup` and adds new `nbrowser/welcomeTour`
To launch the tour:
  - open any document
  - open manually the right panel and the field tab
  - append the flag `#repeat-welcome-tour` at the end of the url in the url bar and reload the page

Reviewers: dsagal

Reviewed By: dsagal

Differential Revision: https://phab.getgrist.com/D2917
2021-07-19 16:30:53 +02:00

159 lines
4.0 KiB
TypeScript

/**
* These styles are used in HomeLeftPanel, and in Tools for the document left panel.
* They work in a structure like this:
*
* import * as css from 'app/client/ui/LeftPanelStyles';
* css.cssLeftPanel(
* css.cssScrollPane(
* css.cssTools(
* css.cssSectionHeader(...),
* css.cssPageEntry(css.cssPageLink(cssPageIcon(...), css.cssLinkText(...))),
* css.cssPageEntry(css.cssPageLink(cssPageIcon(...), css.cssLinkText(...))),
* )
* )
* )
*/
import {beaconOpenMessage} from 'app/client/lib/helpScout';
import {AppModel} from 'app/client/models/AppModel';
import {colors, testId, vars} from 'app/client/ui2018/cssVars';
import {icon} from 'app/client/ui2018/icons';
import {commonUrls} from 'app/common/gristUrls';
import {dom, DomContents, Observable, styled} from 'grainjs';
/**
* Creates the "help tools", a button/link to open HelpScout beacon, and one to open the
* HelpCenter in a new tab.
*/
export function createHelpTools(appModel: AppModel, spacer = true): DomContents {
const isEfcr = (appModel.topAppModel.productFlavor === 'efcr');
return [
spacer ? cssSpacer() : null,
cssPageEntry(
cssPageLink(cssPageIcon('Feedback'),
cssLinkText('Give Feedback', dom.cls('tour-feedback')),
dom.on('click', () => beaconOpenMessage({appModel})),
),
dom.hide(isEfcr),
testId('left-feedback'),
),
cssPageEntry(
cssPageLink(cssPageIcon('Help'), {href: commonUrls.help, target: '_blank'}, cssLinkText(
'Help Center',
dom.cls('tour-help-center')
)),
dom.hide(isEfcr),
),
];
}
/**
* Creates a basic left panel, used in error and billing pages. It only contains the help tools.
*/
export function leftPanelBasic(appModel: AppModel, panelOpen: Observable<boolean>) {
return cssLeftPanel(
cssScrollPane(
cssTools(
cssTools.cls('-collapsed', (use) => !use(panelOpen)),
createHelpTools(appModel),
)
)
);
}
export const cssLeftPanel = styled('div', `
flex: 1 1 0px;
font-size: ${vars.mediumFontSize};
display: flex;
flex-direction: column;
`);
export const cssScrollPane = styled('div', `
flex: 1 1 0px;
overflow: hidden auto;
display: flex;
flex-direction: column;
`);
export const cssTools = styled('div', `
flex: none;
margin-top: auto;
padding: 16px 0 16px 0;
`);
export const cssSectionHeader = styled('div', `
margin: 24px 0 8px 24px;
color: ${colors.slate};
text-transform: uppercase;
font-weight: 500;
font-size: ${vars.xsmallFontSize};
letter-spacing: 1px;
.${cssTools.className}-collapsed > & {
visibility: hidden;
}
`);
export const cssPageEntry = styled('div', `
margin: 0px 16px 0px 0px;
border-radius: 0 3px 3px 0;
color: ${colors.dark};
--icon-color: ${colors.slate};
cursor: default;
&:hover, &.weasel-popup-open, &-renaming {
background-color: ${colors.mediumGrey};
}
&-selected, &-selected:hover, &-selected.weasel-popup-open {
background-color: ${colors.darkBg};
color: ${colors.light};
--icon-color: ${colors.light};
}
&-disabled, &-disabled:hover, &-disabled.weasel-popup-open {
background-color: initial;
color: ${colors.darkGrey};
--icon-color: ${colors.darkGrey};
}
.${cssTools.className}-collapsed > & {
margin-right: 0;
}
`);
export const cssPageLink = styled('a', `
display: flex;
align-items: center;
height: 32px;
line-height: 32px;
padding-left: 24px;
outline: none;
cursor: pointer;
&, &:hover, &:focus {
text-decoration: none;
outline: none;
color: inherit;
}
.${cssTools.className}-collapsed & {
padding-left: 16px;
}
`);
export const cssLinkText = styled('span', `
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
.${cssTools.className}-collapsed & {
display: none;
}
`);
export const cssPageIcon = styled(icon, `
flex: none;
margin-right: var(--page-icon-margin, 8px);
.${cssTools.className}-collapsed & {
margin-right: 0;
}
`);
export const cssSpacer = styled('div', `
height: 18px;
`);