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/D2930pull/69/head
parent
bb8cb2593d
commit
24fc3a2d00
@ -0,0 +1,71 @@
|
||||
import {docUrl, urlState} from 'app/client/models/gristUrlState';
|
||||
import {colors} from 'app/client/ui2018/cssVars';
|
||||
import {Document, Workspace} from 'app/common/UserAPI';
|
||||
import {dom, makeTestId, styled} from 'grainjs';
|
||||
import {HomeModel, ViewSettings} from 'app/client/models/HomeModel';
|
||||
import * as css from 'app/client/ui/DocMenuCss';
|
||||
import {buildPinnedDoc} from 'app/client/ui/PinnedDocs';
|
||||
import sortBy = require('lodash/sortBy');
|
||||
|
||||
const testId = makeTestId('test-dm-');
|
||||
|
||||
/**
|
||||
* Builds all `templateDocs` according to the specified `viewSettings`.
|
||||
*/
|
||||
export function buildTemplateDocs(home: HomeModel, templateDocs: Document[], viewSettings: ViewSettings) {
|
||||
const {currentView, currentSort} = viewSettings;
|
||||
return dom.domComputed((use) => [use(currentView), use(currentSort)] as const, (opts) => {
|
||||
const [view, sort] = opts;
|
||||
// Template docs are sorted by name in HomeModel. We only re-sort if we want a different order.
|
||||
let sortedDocs = templateDocs;
|
||||
if (sort === 'date') {
|
||||
sortedDocs = sortBy(templateDocs, (d) => d.removedAt || d.updatedAt).reverse();
|
||||
}
|
||||
return cssTemplateDocs(dom.forEach(sortedDocs, d => buildTemplateDoc(home, d, d.workspace, view)));
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Build a single template doc according to `view`.
|
||||
*
|
||||
* If `view` is set to 'list', the template will be rendered
|
||||
* as a clickable row that includes a title and description.
|
||||
*
|
||||
* If `view` is set to 'icons', the template will be rendered
|
||||
* as a clickable tile that includes a title, image and description.
|
||||
*/
|
||||
function buildTemplateDoc(home: HomeModel, doc: Document, workspace: Workspace, view: 'list'|'icons') {
|
||||
if (view === 'icons') {
|
||||
return buildPinnedDoc(home, doc, workspace, true);
|
||||
} else {
|
||||
return css.docRowWrapper(
|
||||
cssDocRowLink(
|
||||
urlState().setLinkUrl(docUrl(doc, {org: workspace.orgDomain})),
|
||||
cssDocName(doc.name, testId('template-doc-title')),
|
||||
doc.options?.description ? cssDocRowDetails(doc.options.description, testId('template-doc-description')) : null,
|
||||
),
|
||||
testId('template-doc'),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
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 cssDocRowDetails = styled('div', `
|
||||
margin: 0 16px;
|
||||
line-height: 1.6;
|
||||
color: ${colors.slate};
|
||||
`);
|
||||
|
||||
const cssTemplateDocs = styled('div', `
|
||||
margin-bottom: 16px;
|
||||
`);
|
Loading…
Reference in new issue