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

18
app/client/ui/ExampleInfo.ts
View File

@@ -1,13 +1,9 @@
import {DomContents} from 'grainjs';
export interface IExampleInfo {
id: number;
matcher: RegExp;
urlId: string;
title: string;
imgUrl: string;
tutorialUrl: string;
bgColor: string;
desc: () => DomContents;
welcomeCard: WelcomeCard;
}
@@ -19,12 +15,10 @@ interface WelcomeCard {
export const examples: IExampleInfo[] = [{
id: 1, // Identifies the example in UserPrefs.seenExamples
matcher: /Lightweight CRM/,
urlId: 'lightweight-crm',
title: 'Lightweight CRM',
imgUrl: 'https://www.getgrist.com/themes/grist/assets/images/use-cases/lightweight-crm.png',
tutorialUrl: 'https://support.getgrist.com/lightweight-crm/',
bgColor: '#FDEDD7',
desc: () => 'CRM template and example for linking data, and creating productive layouts.',
welcomeCard: {
title: 'Welcome to the Lightweight CRM template',
text: 'Check out our related tutorial for how to link data, and create ' +
@@ -33,12 +27,10 @@ export const examples: IExampleInfo[] = [{
},
}, {
id: 2, // Identifies the example in UserPrefs.seenExamples
matcher: /Investment Research/,
urlId: 'investment-research',
title: 'Investment Research',
imgUrl: 'https://www.getgrist.com/themes/grist/assets/images/use-cases/data-visualization.png',
tutorialUrl: 'https://support.getgrist.com/investment-research/',
bgColor: '#CEF2E4',
desc: () => 'Example for analyzing and visualizing with summary tables and linked charts.',
welcomeCard: {
title: 'Welcome to the Investment Research template',
text: 'Check out our related tutorial to learn how to create summary tables and charts, ' +
@@ -47,12 +39,10 @@ export const examples: IExampleInfo[] = [{
},
}, {
id: 3, // Identifies the example in UserPrefs.seenExamples
matcher: /Afterschool Program/,
urlId: 'afterschool-program',
title: 'Afterschool Program',
imgUrl: 'https://www.getgrist.com/themes/grist/assets/images/use-cases/business-management.png',
tutorialUrl: 'https://support.getgrist.com/afterschool-program/',
bgColor: '#D7E3F5',
desc: () => 'Example for how to model business data, use formulas, and manage complexity.',
welcomeCard: {
title: 'Welcome to the Afterschool Program template',
text: 'Check out our related tutorial for how to model business data, use formulas, ' +