mirror of
https://github.com/gristlabs/grist-core.git
synced 2024-09-28 07:20:48 +00:00
3b76b33423
Summary: - Unify where in the code tours get initiated. - Avoid start a new tour while one is being started or is in progress. - Ignore welcome tour when on a doc that has a doc tour. - Fix tours when starting with a special page like Access Rules. - Remove mention of the no-longer-present "Give Feedback" button in the last message of the welcome tour. Test Plan: Add a browser test case that docTour preempts the welcome tour and shows no errors (this test case fails in multiple ways without the changes). Reviewers: georgegevoian Reviewed By: georgegevoian Differential Revision: https://phab.getgrist.com/D3330
125 lines
3.2 KiB
TypeScript
125 lines
3.2 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 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;
|
|
`);
|