Archives/gristlabs_grist-core
1
0
Fork 0
mirror of https://github.com/gristlabs/grist-core.git synced 2026-03-02 04:09:24 +00:00
Code Issues Projects Releases Wiki Activity

(core) Redesign examples and templates UI

Browse Source 
Summary:
The old Examples and Templates workspace is now
a page that pulls templates from a new public Grist Templates org.
The All Documents view will pull featured templates from that org, where
featured templates are simply pinned documents in Grist Templates. The
Examples and Templates page will also show the featured templates, as
well as the rest of the available templates organized by category. The
categories are equivalent to workspaces in Grist Templates, and are
generated dynamically.

Test Plan: Browser tests.

Reviewers: paulfitz, dsagal

Reviewed By: paulfitz, dsagal

Subscribers: dsagal, paulfitz, jarek

Differential Revision: https://phab.getgrist.com/D2930
This commit is contained in:
George Gevoian
2021-07-28 12:02:06 -07:00
parent bb8cb2593d
commit 24fc3a2d00
19 changed files with 594 additions and 311 deletions
Download Patch File Download Diff File Expand all files Collapse all files

93
app/client/ui/HomeIntro.ts
View File

@@ -1,16 +1,12 @@
import {localStorageBoolObs} from 'app/client/lib/localStorageObs';
import {docUrl, getLoginOrSignupUrl, urlState} from 'app/client/models/gristUrlState';
import {HomeModel, ViewSettings} from 'app/client/models/HomeModel';
import {getLoginOrSignupUrl} from 'app/client/models/gristUrlState';
import {HomeModel} from 'app/client/models/HomeModel';
import * as css from 'app/client/ui/DocMenuCss';
import {examples} from 'app/client/ui/ExampleInfo';
import {createDocAndOpen, importDocAndOpen} from 'app/client/ui/HomeLeftPane';
import {buildPinnedDoc} from 'app/client/ui/PinnedDocs';
import {bigBasicButton} from 'app/client/ui2018/buttons';
import {colors, mediaXSmall, testId} from 'app/client/ui2018/cssVars';
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 {Document, Workspace} from 'app/common/UserAPI';
import {dom, DomContents, DomCreateFunc, styled} from 'grainjs';
export function buildHomeIntro(homeModel: HomeModel): DomContents {
@@ -71,59 +67,6 @@ function makeCreateButtons(homeModel: HomeModel) {
);
}
export function buildExampleList(home: HomeModel, workspace: Workspace, viewSettings: ViewSettings) {
const hideExamplesObs = localStorageBoolObs('hide-examples');
return cssDocBlock(
dom.autoDispose(hideExamplesObs),
cssDocBlockHeader(css.docBlockHeaderLink.cls(''), css.docHeaderIcon('FieldTable'), 'Examples & Templates',
dom.domComputed(hideExamplesObs, (collapsed) =>
collapsed ? cssCollapseIcon('Expand') : cssCollapseIcon('Collapse')
),
dom.on('click', () => hideExamplesObs.set(!hideExamplesObs.get())),
testId('examples-header'),
),
dom.maybe((use) => !use(hideExamplesObs), () => _buildExampleListDocs(home, workspace, viewSettings)),
css.docBlock.cls((use) => '-' + use(home.currentView)),
testId('examples-list'),
);
}
export function buildExampleListBody(home: HomeModel, workspace: Workspace, viewSettings: ViewSettings) {
return cssDocBlock(
_buildExampleListDocs(home, workspace, viewSettings),
css.docBlock.cls((use) => '-' + use(viewSettings.currentView)),
testId('examples-body'),
);
}
function _buildExampleListDocs(home: HomeModel, workspace: Workspace, viewSettings: ViewSettings) {
return [
cssParagraph(
'Explore these examples, read tutorials based on them, or use any of them as a template.',
testId('examples-desc'),
),
dom.domComputed(viewSettings.currentView, (view) =>
dom.forEach(workspace.docs, doc => buildExampleItem(doc, home, workspace, view))
),
];
}
function buildExampleItem(doc: Document, home: HomeModel, workspace: Workspace, view: 'list'|'icons') {
const ex = examples.find((e) => e.matcher.test(doc.name));
if (view === 'icons') {
return buildPinnedDoc(home, doc, workspace, ex);
} else {
return css.docRowWrapper(
cssDocRowLink(
urlState().setLinkUrl(docUrl(doc)),
cssDocName(ex?.title || doc.name, testId('examples-doc-name')),
ex ? cssItemDetails(ex.desc, testId('examples-desc')) : null,
),
testId('examples-doc'),
);
}
}
const cssIntroSplit = styled(css.docBlock, `
display: flex;
align-items: center;
@@ -171,36 +114,6 @@ const cssBtnIcon = styled(icon, `
margin-right: 8px;
`);
const cssDocRowLink = styled(css.docRowLink, `
display: block;
height: unset;
line-height: 1.6;
padding: 8px 0;
`);
const cssDocName = styled(css.docName, `
margin: 0 16px;
`);
const cssItemDetails = styled('div', `
margin: 0 16px;
line-height: 1.6;
color: ${colors.slate};
`);
const cssDocBlock = styled(css.docBlock, `
margin-top: 32px;
`);
const cssDocBlockHeader = styled('div', `
cursor: pointer;
`);
const cssCollapseIcon = styled(css.docHeaderIcon, `
margin-left: 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> =