gristlabs_grist-core/app/client/ui/welcomeTour.ts
Dmitry S 1605e18f66 (core) Enable auto triggering of Welcome Tour, and various improvements.
Summary:
- Add showGristTour preference, and trigger tour automatically.
- Tour is only triggered for new and anonymous users on a personal org, with
  edit permission.

- Automatically open the right panel at tour start.
- Don't show tours on mobile, since that's not ready (popups are cut off
  and can't be dismissed)
- Cancel previous tour if a new one is somehow started.
- Remove #repeat- trigger hash tags from the URL when the tour starts.
- Ensure Help Center popup is positioned even when left panel is collapsed.
- Polish up the content of the last two cards in the tour.

Test Plan: Added test case for triggering and opening right panel.

Reviewers: alexmojaki, paulfitz

Reviewed By: alexmojaki

Differential Revision: https://phab.getgrist.com/D2955
2021-07-30 14:17:54 -04:00

126 lines
3.3 KiB
TypeScript

import * as commands from 'app/client/components/commands';
import { urlState } from 'app/client/models/gristUrlState';
import { IOnBoardingMsg, startOnBoarding } from "app/client/ui/OnBoardingPopups";
import { colors } from 'app/client/ui2018/cssVars';
import { icon } from "app/client/ui2018/icons";
import { cssLink } from "app/client/ui2018/links";
import { dom, styled } from "grainjs";
export const welcomeTour: IOnBoardingMsg[] = [
{
title: 'Editing Data',
body: () => [
dom('p',
'Double-click or hit ', Key(KeyContent('Enter')), ' on a cell to edit it. ',
'Start with ', Key(KeyStrong('=')), ' to enter a formula.'
)
],
selector: '.field_clip',
placement: 'bottom',
},
{
selector: '.tour-creator-panel',
title: 'Configuring your document',
body: () => [
dom('p',
'Toggle the ', dom('em', 'creator panel'), ' to format columns, ',
'convert to card view, select data, and more.'
)
],
placement: 'left',
cropPadding: true,
},
{
selector: '.tour-type-selector',
title: 'Customizing columns',
body: () => [
dom('p',
'Set formatting options, formulas, or column types, such as dates, choices, or attachments. '),
dom('p',
'Make it relational! Use the ', Key('Reference'), ' type to link tables. '
)
],
placement: 'right',
},
{
selector: '.tour-add-new',
title: 'Building up',
body: () => [
dom('p', 'Use ', Key('Add New'), ' to add widgets, pages, or import more data. ')
],
placement: 'right',
},
{
selector: '.tour-share-icon',
title: 'Sharing',
body: () => [
dom('p', 'Use the Share button (', Icon('Share'), ') to share the document or export data.')
],
placement: 'bottom',
cropPadding: true,
},
{
selector: '.tour-help-center',
title: 'Flying higher',
body: () => [
dom('p', 'Use ', Key(GreyIcon('Help'), 'Help Center'), ' for documentation, videos, and tutorials.'),
dom('p', 'Use ', Key(GreyIcon('Feedback'), 'Give Feedback'), ' for issues or questions.'),
],
placement: 'right',
},
{
selector: '.tour-welcome',
title: 'Welcome to Grist!',
body: () => [
dom('p', 'Browse our ',
cssLink({target: '_blank', href: urlState().makeUrl({homePage: "templates"})},
'template library', cssInlineIcon('FieldLink')),
"to discover what's possible and get inspired."
),
],
showHasModal: true,
}
];
export function startWelcomeTour(onFinishCB: () => void) {
commands.allCommands.fieldTabOpen.run();
startOnBoarding(welcomeTour, onFinishCB);
}
const KeyContent = styled('span', `
font-style: normal;
font-family: inherit;
color: ${colors.darkGreen};
`);
const KeyStrong = styled(KeyContent, `
font-weight: 700;
`);
const Key = styled('div', `
display: inline-block;
padding: 2px 5px;
border-radius: 4px;
margin: 0px 2px;
border: 1px solid ${colors.slate};
color: black;
background-color: white;
font-family: inherit;
font-style: normal;
white-space: nowrap;
`);
const Icon = styled(icon, `
--icon-color: ${colors.lightGreen};
`);
const GreyIcon = styled(icon, `
--icon-color: ${colors.slate};
margin-right: 8px;
`);
const cssInlineIcon = styled(icon, `
margin: -3px 8px 0 4px;
`);