From 710014ce540f1ff83a4c460df3cbf57f86c403b1 Mon Sep 17 00:00:00 2001
From: Cyprien P <cyprien.pindat@gmail.com>
Date: Mon, 25 Jan 2021 14:09:09 +0100
Subject: [PATCH] (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
---
 app/client/ui/AppUI.ts      |  2 +-
 app/client/ui/PagePanels.ts | 21 +++++++++++++++------
 2 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/app/client/ui/AppUI.ts b/app/client/ui/AppUI.ts
index dc5101a5..955ff873 100644
--- a/app/client/ui/AppUI.ts
+++ b/app/client/ui/AppUI.ts
@@ -146,7 +146,7 @@ function pagePanelsDoc(owner: IDisposableOwner, appModel: AppModel, appObj: App)
       panelWidth: leftPanelWidth,
       panelOpen: leftPanelOpen,
       header: appHeader(appModel.currentOrgName || pageModel.currentOrgName, appModel.topAppModel.productFlavor),
-      content: pageModel.createLeftPane(leftPanelOpen),
+      content: pageModel.createLeftPane(isNarrowScreen() ? Observable.create(null, true) : leftPanelOpen),
     },
     rightPanel: {
       panelWidth: rightPanelWidth,
diff --git a/app/client/ui/PagePanels.ts b/app/client/ui/PagePanels.ts
index 62061538..19d91aad 100644
--- a/app/client/ui/PagePanels.ts
+++ b/app/client/ui/PagePanels.ts
@@ -3,7 +3,7 @@
  */
 import {resizeFlexVHandle} from 'app/client/ui/resizeHandle';
 import {transition} from 'app/client/ui/transitions';
-import {colors, cssHideForNarrowScreen, mediaNotSmall, mediaSmall} from 'app/client/ui2018/cssVars';
+import {colors, cssHideForNarrowScreen, isNarrowScreen, mediaNotSmall, mediaSmall} from 'app/client/ui2018/cssVars';
 import {icon} from 'app/client/ui2018/icons';
 import {dom, DomArg, noTestId, Observable, styled, TestId} from "grainjs";
 
@@ -48,7 +48,7 @@ export function pagePanels(page: PageContents) {
 
       // Opening/closing the left pane, with transitions.
       cssLeftPane.cls('-open', left.panelOpen),
-      transition(left.panelOpen, {
+      optimizeNarrowScreen && isNarrowScreen() ? null : transition(left.panelOpen, {
         prepare(elem, open) { elem.style.marginRight = (open ? -1 : 1) * (left.panelWidth.get() - 48) + 'px'; },
         run(elem, open) { elem.style.marginRight = ''; },
         finish: onResize,
@@ -107,7 +107,7 @@ export function pagePanels(page: PageContents) {
 
         // Opening/closing the right pane, with transitions.
         cssRightPane.cls('-open', right.panelOpen),
-        transition(right.panelOpen, {
+        optimizeNarrowScreen && isNarrowScreen() ? null : transition(right.panelOpen, {
           prepare(elem, open) { elem.style.marginLeft = (open ? -1 : 1) * right.panelWidth.get() + 'px'; },
           run(elem, open) { elem.style.marginLeft = ''; },
           finish: onResize,
@@ -193,13 +193,17 @@ export const cssLeftPane = styled(cssVBox, `
   transition: margin-right 0.4s;
   @media ${mediaSmall} {
     .${cssPageContainer.className}-optimizeNarrowScreen & {
-      width: 0px;
+      width: 240px;
       position: absolute;
       z-index: 10;
       top: 0;
       bottom: 0;
-      left: 0;
+      left: -${240 + 15}px; /* adds an extra 15 pixels to also hide the box shadow */
       box-shadow: 10px 0 5px rgba(0, 0, 0, 0.2);
+      transition: left 0.4s;
+    }
+    .${cssPageContainer.className}-optimizeNarrowScreen &-open {
+      left: 0;
     }
   }
   &-open {
@@ -233,12 +237,17 @@ const cssRightPane = styled(cssVBox, `
   z-index: 0;
   @media ${mediaSmall} {
     .${cssPageContainer.className}-optimizeNarrowScreen & {
+      width: 240px;
       position: absolute;
       z-index: 10;
       top: 0;
       bottom: 0;
-      right: 0;
+      right: -${240 + 15}px; /* adds an extra 15 pixels to also hide the box shadow */
       box-shadow: -10px 0 5px rgba(0, 0, 0, 0.2);
+      transition: right 0.4s;
+    }
+    .${cssPageContainer.className}-optimizeNarrowScreen &-open {
+      right: 0;
     }
   }
   &-open {