gristlabs_grist-core/app/client/ui/HomeIntro.ts

125 lines
3.8 KiB
TypeScript
Raw Normal View History

import {getLoginOrSignupUrl} from 'app/client/models/gristUrlState';
import {HomeModel} from 'app/client/models/HomeModel';
import * as css from 'app/client/ui/DocMenuCss';
import {createDocAndOpen, importDocAndOpen} from 'app/client/ui/HomeLeftPane';
import {bigBasicButton} from 'app/client/ui2018/buttons';
import {mediaXSmall, testId} from 'app/client/ui2018/cssVars';
import {icon} from 'app/client/ui2018/icons';
import {cssLink} from 'app/client/ui2018/links';
import {commonUrls} from 'app/common/gristUrls';
import {dom, DomContents, DomCreateFunc, styled} from 'grainjs';
export function buildHomeIntro(homeModel: HomeModel): DomContents {
const user = homeModel.app.currentValidUser;
if (user) {
return [
css.docListHeader(`Welcome to Grist, ${user.name}!`, testId('welcome-title')),
cssIntroSplit(
cssIntroLeft(
cssIntroImage({src: 'https://www.getgrist.com/themes/grist/assets/images/empty-folder.png'}),
testId('intro-image'),
),
cssIntroRight(
cssParagraph(
'Watch video on ',
cssLink({href: 'https://support.getgrist.com/creating-doc/', target: '_blank'}, 'creating a document'),
'.', dom('br'),
'Learn more in our ', cssLink({href: commonUrls.help, target: '_blank'}, 'Help Center'), '.',
testId('welcome-text')
),
makeCreateButtons(homeModel),
),
),
];
} else {
return [
cssIntroSplit(
cssIntroLeft(
cssLink({href: 'https://support.getgrist.com/creating-doc/', target: '_blank'},
cssIntroImage({src: 'https://www.getgrist.com/themes/grist/assets/images/video-create-doc.png'}),
),
testId('intro-image'),
),
cssIntroRight(
css.docListHeader('Welcome to Grist!', testId('welcome-title')),
cssParagraph(
'You can explore and experiment without logging in. ',
'To save your work, however, youll need to ',
cssLink({href: getLoginOrSignupUrl()}, 'sign up'), '.', dom('br'),
'Learn more in our ', cssLink({href: commonUrls.help, target: '_blank'}, 'Help Center'), '.',
testId('welcome-text')
),
makeCreateButtons(homeModel),
),
),
];
}
}
function makeCreateButtons(homeModel: HomeModel) {
return cssBtnGroup(
cssBtn(cssBtnIcon('Import'), 'Import Document', testId('intro-import-doc'),
dom.on('click', () => importDocAndOpen(homeModel)),
),
cssBtn(cssBtnIcon('Page'), 'Create Empty Document', testId('intro-create-doc'),
dom.on('click', () => createDocAndOpen(homeModel)),
),
);
}
const cssIntroSplit = styled(css.docBlock, `
display: flex;
align-items: center;
@media ${mediaXSmall} {
& {
display: block;
}
}
`);
const cssIntroLeft = styled('div', `
flex: 0.4 1 0px;
overflow: hidden;
max-height: 150px;
text-align: center;
margin: 32px 0;
`);
const cssIntroRight = styled('div', `
flex: 0.6 1 0px;
overflow: auto;
margin-left: 8px;
`);
const cssParagraph = styled(css.docBlock, `
line-height: 1.6;
`);
const cssBtnGroup = styled('div', `
display: inline-flex;
flex-direction: column;
align-items: stretch;
margin-top: -16px;
`);
const cssBtn = styled(bigBasicButton, `
display: block;
margin-right: 16px;
margin-top: 16px;
text-align: left;
`);
const cssBtnIcon = styled(icon, `
margin-right: 8px;
`);
// Helper to create an image scaled down to half of its intrinsic size.
// Based on https://stackoverflow.com/a/25026615/328565
const cssIntroImage: DomCreateFunc<HTMLDivElement> =
(...args) => _cssImageWrap1(_cssImageWrap2(_cssImageScaled(...args)));
const _cssImageWrap1 = styled('div', `width: 200%; margin-left: -50%;`);
const _cssImageWrap2 = styled('div', `display: inline-block;`);
const _cssImageScaled = styled('img', `width: 50%;`);