Summary:
This diff brings in the new welcome tour. It builds upon `client/ui/OnBoardingPopup` that was committed to that purposes. Per this diff, the tour is accessible behind a flag and won't be visible to user: few caveats listed below needs to be adressed first.
This diff also brings few changes to onboarding module.
- allow to refer to element with selector
- usually dynamic selection of element sounds useful for when the
element does not exist yet when the tour starts. But the actual
reason when add it here, is to allow selecting the first cell.
- if the selector yields undefined (missing element), the popup
is simply skipped
- got rid of the internal registry to link between popup contents
and popup options. All is now define in the same interface. Registry
overall felt overkill and not needed.
- adds an option to show message as a simple modal that is centered
on the screen
This diff also brings the new welcome tour and hide it behind a flag
CAVEATS that need to be addressed in follow up commit:
- The url needs cleanup, #repeat-welcome-tour sticks to it and so even when navigating to home page. This could eventually become an issue: if user opens another document it would starts the onboarding tour again.
- For now you have to manually make sure the right panel is opened with the Column tab selected before starting the tour.
- On boarding tours were not designed with mobile support in mind. So probably a good idea to disable.
- Backend support needs to be done (persistence of first time user).
Test Plan:
Updated `projects/OnBoardingPopup` and adds new `nbrowser/welcomeTour`
To launch the tour:
- open any document
- open manually the right panel and the field tab
- append the flag `#repeat-welcome-tour` at the end of the url in the url bar and reload the page
Reviewers: dsagal
Reviewed By: dsagal
Differential Revision: https://phab.getgrist.com/D2917
Summary:
- Adjust ExampleCard css to fit on x-small screens, including its close button,
so that it may be closed.
- In TopBar on small screens, hide Notifications button and default action for
Share; adjust spacing.
- Add overflow: hidden to PagePanels, to make sure it doesn't slide off of
visible area.
Test Plan: Tested on iOS.
Reviewers: paulfitz
Reviewed By: paulfitz
Differential Revision: https://phab.getgrist.com/D2741
Summary:
- Add isNarrowScreenObs() observable.
- Remove optimizeNarrowScreen flag (now assumed always true).
- Added viewport support and mobile tweaks to Error/Billing/Welcome pages.
- Fix responsiveness of panel transitions, and of side panel state.
- Close left panel on navigation to another page or workspace.
- Start panels collapsed in both doc and docmenu cases.
Test Plan: Tested manually, and fixed tests to accept the new behavior.
Reviewers: paulfitz
Reviewed By: paulfitz
Differential Revision: https://phab.getgrist.com/D2726
Test Plan: Added a check for bottom-footer on small screen to the InterfaceStyle test.
Reviewers: paulfitz
Reviewed By: paulfitz
Differential Revision: https://phab.getgrist.com/D2722
Summary:
Side panels sliding out of the viewport was causing the
browser window to be scrollable, hence it was possible to scroll the
page panels out of the viewport. Solution is to use fixed positioning
instead of absolute.
Test Plan: Tested manually on FF and Chrome.
Reviewers: paulfitz
Reviewed By: paulfitz
Differential Revision: https://phab.getgrist.com/D2714
Summary:
Diff makes side panels slide horizontally when opening/closing them.
Caveats:
. Right panel: even though the panel do transition nicely, the content however disappears suddently. We could prevent disposal of the dom by removing the two below lines. But it's hard to tell what possible side effect we could get from it as I don't know why these line were added in the first place. I could investigate further, but maybe it's already good enough as it is.
```
private _buildContentDom() {
return dom.domComputed((use) => {
// if (!use(this._isOpen)) { return null; } // remove line
const tool = use(this._extraTool);
```
```
private _buildHeaderDom() {
return dom.domComputed((use) => {
// if (!use(this._isOpen)) { return null; } // remove line
const tool = use(this._extraTool);
return tool ? this._buildToolHeader(tool) : this._buildStandardHeader();
```
Test Plan: Tested manually on desktop environnment with FF and chrome by shrinking the window.
Reviewers: paulfitz
Reviewed By: paulfitz
Differential Revision: https://phab.getgrist.com/D2710
Summary:
- Enable narrow-screen layout for home page
- Clean up margins/spacing on small-screen home page
- Use "<768" as small-screen condition rather than "<=768".
- Include meta-viewport tag conditionally, off by default.
- Include "Toggle Mobile Mode" option in AccountMenu to toggle it on.
- In a test, add an after() clause to restore window size even when test fails
Test Plan: Only tested manually on iPhone (Safari & FF).
Reviewers: paulfitz
Reviewed By: paulfitz
Subscribers: cyprien
Differential Revision: https://phab.getgrist.com/D2708
Summary:
- closes side bars when tapping content area
- opens left panel when tapping the page name
Test Plan: Includes browser tests.
Reviewers: paulfitz
Reviewed By: paulfitz
Differential Revision: https://phab.getgrist.com/D2705
Test Plan: Tested Manually, behave well also for long page name.
Reviewers: paulfitz
Reviewed By: paulfitz
Differential Revision: https://phab.getgrist.com/D2702
Summary:
This commit adds a bottom bar with 2 openers button for each side panels.
It takes care of showing/hiding other openers when appropriate.
It also implements the new style for narrow screen with the side panels overlapping the main pane.
Remaining tasks:
- adjust content of the breadcrumbs for narrow screen.
- content of the bottom bar
Test Plan: Adds test to projects/PagePanels
Reviewers: paulfitz
Reviewed By: paulfitz
Subscribers: dsagal
Differential Revision: https://phab.getgrist.com/D2701
Summary:
- Supports multi-page printing with some aggressive css overrides.
- Relies on a new function implemented by grist-plugin-api to print a
multi-page CustomView.
- Renders all rows for printing for scrolly-based views.
Test Plan:
Doesn't seem possible to do a selenium test for printing. Tested
manually on Chrome, Firefox, and Safari.
Reviewers: paulfitz
Reviewed By: paulfitz
Differential Revision: https://phab.getgrist.com/D2635
Summary:
This adds query parameters useful for tailoring the Grist experience, with an eye to embedding.
Setting `style=light` removes side and top bars, as a first pass at a focused view of a single document page (this would benefit from refining).
Setting `embed=true` has no significant effect just yet other than it restricts document access to viewer at most (this can be overridden by specifying `/m/default`).
Test Plan: added tests
Reviewers: dsagal
Reviewed By: dsagal
Differential Revision: https://phab.getgrist.com/D2585
Summary:
- Hides left and right panels and the top bar
- Hides cursor and active-section highlight
- Hides "=" icon on formulas
- Nudges browser to include background for row/column headers, which is not
otherwise included.
Still only what's visible is printed (e.g. large tables not paginated).
Test Plan: Tried a few pages manually on Firefox and Chrome.
Reviewers: paulfitz
Reviewed By: paulfitz
Differential Revision: https://phab.getgrist.com/D2579
Cyprien P
Dmitry S
Paul Fitzpatrick