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) Add behavioral and coaching call popups

Browse Source 
Summary:
Adds a new category of popups that are shown dynamically when
certain parts of the UI are first rendered, and a free coaching
call popup that's shown to users on their site home page.

Test Plan: Browser tests.

Reviewers: jarek

Reviewed By: jarek

Differential Revision: https://phab.getgrist.com/D3706
This commit is contained in:
George Gevoian
2022-12-19 21:06:39 -05:00
parent fa75c93d67
commit e52e15591d
41 changed files with 1236 additions and 126 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
app/client/ui/PagePanels.ts
View File

@@ -9,7 +9,7 @@ import {transition, TransitionWatcher} from 'app/client/ui/transitions';
import {cssHideForNarrowScreen, isScreenResizing, mediaNotSmall, mediaSmall, theme} from 'app/client/ui2018/cssVars';
import {isNarrowScreenObs} from 'app/client/ui2018/cssVars';
import {icon} from 'app/client/ui2018/icons';
import {dom, DomArg, MultiHolder, noTestId, Observable, styled, subscribe, TestId} from "grainjs";
import {dom, DomElementArg, MultiHolder, noTestId, Observable, styled, subscribe, TestId} from "grainjs";
import noop from 'lodash/noop';
import once from 'lodash/once';
import {SessionObs} from 'app/client/lib/sessionObs';
@@ -26,21 +26,21 @@ export interface PageSidePanel {
panelWidth: Observable<number>;
panelOpen: Observable<boolean>;
hideOpener?: boolean; // If true, don't show the opener handle.
header: DomArg;
content: DomArg;
header: DomElementArg;
content: DomElementArg;
}
export interface PageContents {
leftPanel: PageSidePanel;
rightPanel?: PageSidePanel; // If omitted, the right panel isn't shown at all.
headerMain: DomArg;
contentMain: DomArg;
headerMain: DomElementArg;
contentMain: DomElementArg;
onResize?: () => void; // Callback for when either pane is opened, closed, or resized.
testId?: TestId;
contentTop?: DomArg;
contentBottom?: DomArg;
contentTop?: DomElementArg;
contentBottom?: DomElementArg;
}
export function pagePanels(page: PageContents) {
@@ -55,6 +55,7 @@ export function pagePanels(page: PageContents) {
let lastLeftOpen = left.panelOpen.get();
let lastRightOpen = right?.panelOpen.get() || false;
let leftPaneDom: HTMLElement;
let rightPaneDom: HTMLElement;
let onLeftTransitionFinish = noop;
// When switching to mobile mode, close panels; when switching to desktop, restore the
@@ -89,6 +90,16 @@ export function pagePanels(page: PageContents) {
watcher.onDispose(() => resolve(undefined));
left.panelOpen.set(true);
}),
rightPanelOpen: () => new Promise((resolve, reject) => {
if (!right) {
reject(new Error('PagePanels rightPanelOpen called while right panel is undefined'));
return;
}
const watcher = new TransitionWatcher(rightPaneDom);
watcher.onDispose(() => resolve(undefined));
right.panelOpen.set(true);
}),
}, null, true);
let contentWrapper: HTMLElement;
return cssPageContainer(
@@ -262,7 +273,7 @@ export function pagePanels(page: PageContents) {
dom.show(right.panelOpen),
cssHideForNarrowScreen.cls('')),
cssRightPane(
rightPaneDom = cssRightPane(
testId('right-panel'),
cssRightPaneHeader(right.header),
right.content,