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) Automatically or explicitly show document tours in the same way as example cards.

Browse Source 
Summary:
Extracts code from showExampleCard into a generic function which is reused for document tours.

It handles reading and writing to user preferences for automatic showing and explicitly reopening.

Test Plan:
Manually tested that it automatically shows a tour just once and clicking to reopen works.

There's not much new functionality so there's little that needs testing. This is an initial version that's mostly internal and is likely to be polished for users in the future.

If I should still add tests, I'd like confirmation that the current behaviour is as desired.

Reviewers: dsagal

Reviewed By: dsagal

Differential Revision: https://phab.getgrist.com/D2944
This commit is contained in:
Alex Hall
2021-07-27 18:03:35 +02:00
parent 15f1ef96fa
commit cd0c6de53e
4 changed files with 112 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
app/client/ui/ExampleCard.ts
View File

@@ -1,44 +1,24 @@
import {AppModel} from 'app/client/models/AppModel';
import {getUserOrgPrefObs} from 'app/client/models/UserPrefs';
import {IExampleInfo} from 'app/client/ui/ExampleInfo';
import {prepareForTransition, TransitionWatcher} from 'app/client/ui/transitions';
import {colors, mediaXSmall, testId, vars} from 'app/client/ui2018/cssVars';
import {icon} from 'app/client/ui2018/icons';
import {cssLink} from 'app/client/ui2018/links';
import {dom, Observable, styled} from 'grainjs';
import {dom, styled} from 'grainjs';
import {AutomaticHelpToolInfo} from "app/client/ui/Tools";
let prevCardClose: (() => void)|null = null;
// Open a popup with a card introducing this example, if the user hasn't dismissed it in the past.
export function showExampleCard(
example: IExampleInfo, appModel: AppModel, btnElem: HTMLElement, reopen: boolean = false
example: IExampleInfo, toolInfo: AutomaticHelpToolInfo
) {
const prefObs: Observable<number[]|undefined> = getUserOrgPrefObs(appModel, 'seenExamples');
const seenExamples = prefObs.get() || [];
// If this example was previously dismissed, don't show the card, unless the user is reopening it.
if (!reopen && seenExamples.includes(example.id)) {
return;
}
// When an example card is closed, if it's the first time it's dismissed, save this fact, to avoid
// opening the card again in the future.
async function markAsSeen() {
if (!seenExamples.includes(example.id)) {
const seen = new Set(seenExamples);
seen.add(example.id);
prefObs.set([...seen].sort());
}
}
const {elem: btnElem, markAsSeen, reopen} = toolInfo;
// Close the example card.
function close() {
prevCardClose = null;
collapseAndRemoveCard(cardElem, btnElem.getBoundingClientRect());
// If we fail to save this preference, it's probably not worth alerting the user about,
// so just log to console.
// tslint:disable-next-line:no-console
markAsSeen().catch((err) => console.warn("Failed to save userPref", err));
markAsSeen();
}
const card = example.welcomeCard;