mirror of
https://github.com/gristlabs/grist-core.git
synced 2024-09-28 17:20:48 +00:00
693f2f6325
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
113 lines
2.8 KiB
TypeScript
113 lines
2.8 KiB
TypeScript
import { IOnBoardingMsg, startOnBoarding } from "app/client/ui/OnBoardingPopups";
|
|
import { colors } from 'app/client/ui2018/cssVars';
|
|
import { icon } from "app/client/ui2018/icons";
|
|
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: 'Keep learning',
|
|
body: () => [
|
|
dom('p', 'Unlock Grist\'s hidden power. Dive into our documentation, videos, ',
|
|
'and tutorials to take your spreadsheet-database to the next level. '),
|
|
],
|
|
placement: 'right',
|
|
},
|
|
{
|
|
selector: '.tour-feedback',
|
|
title: 'Give feedback',
|
|
body: () => [
|
|
dom('p', 'Use ', Key('Give Feedback'), ' button (', Icon('Feedback'), ') for issues or questions. '),
|
|
],
|
|
placement: 'right',
|
|
},
|
|
{
|
|
selector: '.tour-welcome',
|
|
title: 'Welcome to Grist!',
|
|
showHasModal: true,
|
|
}
|
|
|
|
];
|
|
|
|
export function startWelcomeTour(onFinishCB: () => void) {
|
|
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('code', `
|
|
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};
|
|
`);
|