Archives/gristlabs_grist-core
1
0
Fork 0
mirror of https://github.com/gristlabs/grist-core.git synced 2025-06-13 20:53:59 +00:00
Code Issues Projects Releases Wiki Activity

(core) Initial page for custom widget

Browse Source 
Summary: Adding a custom widget will show the initial page with some information instead of a blank page.

Test Plan: Existing tests

Reviewers: dsagal

Reviewed By: dsagal

Subscribers: dsagal

Differential Revision: https://phab.getgrist.com/D2978
This commit is contained in:
Jarosław Sadziński 2021-08-10 13:18:37 +02:00
parent 79f6f605f8
commit 800731e771
2 changed files with 47 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
app/client/components/CustomView.ts
View File

@ -57,12 +57,15 @@ export class CustomView extends Disposable {
private _updateData: () => void; // debounced call to let the view know linked data changed. private _updateData: () => void; // debounced call to let the view know linked data changed.
private _updateCursor: () => void; // debounced call to let the view know linked cursor changed. private _updateCursor: () => void; // debounced call to let the view know linked cursor changed.
private _rpc: Rpc; // rpc connection to view. private _rpc: Rpc; // rpc connection to view.
private _emptyWidgetPage: string;
public create(gristDoc: GristDoc, viewSectionModel: ViewSectionRec) { public create(gristDoc: GristDoc, viewSectionModel: ViewSectionRec) {
BaseView.call(this as any, gristDoc, viewSectionModel); BaseView.call(this as any, gristDoc, viewSectionModel);
this._customDef = this.viewSection.customDef; this._customDef = this.viewSection.customDef;
this._emptyWidgetPage = new URL("custom-widget.html", gristDoc.app.topAppModel.getUntrustedContentOrigin()).href;
this.autoDisposeCallback(() => { this.autoDisposeCallback(() => {
if (this._customSection) { if (this._customSection) {
this._customSection.dispose(); this._customSection.dispose();
@ -227,7 +230,7 @@ export class CustomView extends Disposable {
// in a simple and unambiguous way. // in a simple and unambiguous way.
let fullUrl: string; let fullUrl: string;
if (!baseUrl) { if (!baseUrl) {
fullUrl = baseUrl; fullUrl = this._emptyWidgetPage;
} else { } else {
const url = new URL(baseUrl); const url = new URL(baseUrl);
url.searchParams.append('access', access); url.searchParams.append('access', access);

43
static/custom-widget.html Normal file
View File

@ -0,0 +1,43 @@
<!doctype html>
<html>
<head>
<meta charset="utf8">
<link rel="icon" type="image/x-icon" href="favicon.png" />
<link rel="stylesheet" href="icons/icons.css">
<title>Custom widget</title>
<style>
body {
margin: 0;
font-size: 13px;
color: #262633;
font-family: -apple-system, BlinkMacSystemFont, Segoe UI,
Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
}
</style>
</head>
<body>
<div style="padding: 20px">
<div style="font-size: 20px; font-weight: 600;">
<span style="font-size: 20px; font-weight: 600;">Custom widget</span>
<span style="font-size: 16px; font-weight: 400; color:#a7a7a7">(not configured)</span>
</div>
<p>
The Custom widget allows a user to insert almost anything in their document.
Creating a custom widget currently requires knowledge of web development,
and access to a public web server (for example, GitHub Pages).
</p>
<p>
To configure this widget, open the right panel by clicking <i>Widget options</i> in the section menu.
</p>
<p>
Learn more about Custom Widgets at:
<a target="_blank" href="https://support.getgrist.com/widget-custom">
https://support.getgrist.com/widget-custom
</a>
</p>
</div>
</body>
</html>