Summary: After the welcome questions are dismissed, a video tour modal will now be displayed. The video tour is also accessible via a tool button in the left panel of the home page, as well as a text button next to the Examples & Templates header. Test Plan: Browser tests. Reviewers: dsagal Reviewed By: dsagal Subscribers: dsagal Differential Revision: https://phab.getgrist.com/D3477pull/214/head
George Gevoian
2 years ago
parent
a91d493ffc
commit
abebe812db
@ -0,0 +1,142 @@
|
||||
import * as commands from 'app/client/components/commands';
|
||||
import {cssLinkText, cssPageEntryMain, cssPageIcon, cssPageLink} from 'app/client/ui/LeftPanelCommon';
|
||||
import {colors} from 'app/client/ui2018/cssVars';
|
||||
import {icon} from 'app/client/ui2018/icons';
|
||||
import {modal} from 'app/client/ui2018/modals';
|
||||
import {commonUrls, shouldHideUiElement} from 'app/common/gristUrls';
|
||||
import {dom, makeTestId, styled} from 'grainjs';
|
||||
|
||||
const testId = makeTestId('test-video-tour-');
|
||||
|
||||
/**
|
||||
* Opens a modal containing a video tour of Grist.
|
||||
*/
|
||||
export function openVideoTour(refElement: HTMLElement) {
|
||||
return modal(
|
||||
(ctl) => {
|
||||
return [
|
||||
cssModal.cls(''),
|
||||
cssCloseButton(
|
||||
cssCloseIcon('CrossBig'),
|
||||
dom.on('click', () => ctl.close()),
|
||||
testId('close'),
|
||||
),
|
||||
cssVideoWrap(
|
||||
cssVideo(
|
||||
{
|
||||
src: commonUrls.videoTour,
|
||||
title: 'YouTube video player',
|
||||
frameborder: '0',
|
||||
allow: 'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture',
|
||||
allowfullscreen: '',
|
||||
},
|
||||
),
|
||||
),
|
||||
testId('modal'),
|
||||
];
|
||||
},
|
||||
{
|
||||
refElement,
|
||||
variant: 'collapsing',
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Creates a text button that shows the video tour on click.
|
||||
*/
|
||||
export function createVideoTourTextButton(): HTMLDivElement {
|
||||
const elem: HTMLDivElement = cssVideoTourTextButton(
|
||||
cssVideoIcon('Video'),
|
||||
'Grist Video Tour',
|
||||
dom.on('click', () => openVideoTour(elem)),
|
||||
testId('text-button'),
|
||||
);
|
||||
|
||||
return elem;
|
||||
}
|
||||
|
||||
/**
|
||||
* Creates the "Video Tour" button for the "Tools" section of the left panel.
|
||||
*
|
||||
* Shows the video tour on click.
|
||||
*/
|
||||
export function createVideoTourToolsButton(): HTMLDivElement | null {
|
||||
if (shouldHideUiElement('helpCenter')) { return null; }
|
||||
|
||||
let iconElement: HTMLElement;
|
||||
|
||||
const commandsGroup = commands.createGroup({
|
||||
videoTourToolsOpen: () => openVideoTour(iconElement),
|
||||
}, null, true);
|
||||
|
||||
return cssPageEntryMain(
|
||||
dom.autoDispose(commandsGroup),
|
||||
cssPageLink(
|
||||
iconElement = cssPageIcon('Video'),
|
||||
cssLinkText('Video Tour'),
|
||||
dom.cls('tour-help-center'),
|
||||
dom.on('click', () => openVideoTour(iconElement)),
|
||||
testId('tools-button'),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
const cssModal = styled('div', `
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
padding: 16px;
|
||||
width: 100%;
|
||||
max-width: 864px;
|
||||
`);
|
||||
|
||||
const cssVideoWrap = styled('div', `
|
||||
position: relative;
|
||||
padding-bottom: 56.25%;
|
||||
height: 0;
|
||||
`);
|
||||
|
||||
const cssVideo = styled('iframe', `
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
`);
|
||||
|
||||
const cssVideoTourTextButton = styled('div', `
|
||||
color: ${colors.lightGreen};
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
color: ${colors.darkGreen};
|
||||
}
|
||||
`);
|
||||
|
||||
const cssVideoIcon = styled(icon, `
|
||||
background-color: ${colors.lightGreen};
|
||||
cursor: pointer;
|
||||
margin: 0px 4px 3px 0;
|
||||
|
||||
.${cssVideoTourTextButton.className}:hover > & {
|
||||
background-color: ${colors.darkGreen};
|
||||
}
|
||||
`);
|
||||
|
||||
const cssCloseButton = styled('div', `
|
||||
align-self: flex-end;
|
||||
margin: -8px;
|
||||
padding: 4px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
--icon-color: ${colors.slate};
|
||||
|
||||
&:hover {
|
||||
background-color: ${colors.mediumGreyOpaque};
|
||||
}
|
||||
`);
|
||||
|
||||
const cssCloseIcon = styled(icon, `
|
||||
padding: 12px;
|
||||
`);
|
||||
Loading…
Reference in new issue