Commit Graph

15 Commits

Author SHA1 Message Date
Cyprien P
693f2f6325 (core) Brings welcome tour and hide behind a flag
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
2021-07-19 16:30:53 +02:00
Dmitry S
aae4a58300 (core) A few improvements to CSS on mobile.
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
2021-03-01 11:17:51 -05:00
Dmitry S
de1719ee08 (core) Make side panels responsive and start closed on small screens.
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
2021-02-08 15:07:04 -05:00
Dmitry S
c9fa13eadc (core) Don't show mobile-friendly bottom bar when printing or embedding.
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
2021-02-04 09:51:53 -05:00
Cyprien P
b5c1fc0c1a (core) Fix page panels scrolling out of the viewport.
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
2021-01-27 18:25:41 +01:00
Cyprien P
710014ce54 (core) Animate side panels
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
2021-01-25 15:01:39 +01:00
Dmitry S
586b6568af (core) Add viewport meta tag conditionally, and show a toggle for it on small devices.
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
2021-01-21 14:54:02 -05:00
Cyprien P
24d9061007 (core) Show a simpler breadcrumbs [narrow screen]
Test Plan: Includes new browser tests

Reviewers: paulfitz

Reviewed By: paulfitz

Differential Revision: https://phab.getgrist.com/D2706
2021-01-19 15:23:36 +01:00
Cyprien P
4cd9a2d740 (core) Making side bars a bit more usable for narrow screen
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
2021-01-19 15:22:01 +01:00
Cyprien P
ffe4a34335 (core) Adds current page name to the bottom bar [narrow screen]
Test Plan: Tested Manually, behave well also for long page name.

Reviewers: paulfitz

Reviewed By: paulfitz

Differential Revision: https://phab.getgrist.com/D2702
2021-01-14 18:30:48 +01:00
Cyprien P
4ca1c09e35 (core) Adds scafoldings for the narrow screen layout
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
2021-01-13 16:13:44 +01:00
Dmitry S
99ab09651e (core) Implement 'Print widget' option to print individual view sections.
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
2020-10-10 00:35:33 -04:00
Paul Fitzpatrick
20d8124f45 (core) support ?embed=true and &style=light for a clean embed experience
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
2020-08-14 13:34:38 -04:00
Dmitry S
4e20f7a8a2 (core) Add some media queries to improve printing
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
2020-08-10 10:36:34 -04:00
Dmitry S
ec182792be Initial config with a few files that build on client and server side. 2020-05-20 00:50:46 -04:00