Archives/gristlabs_grist-core
1
0
Fork 0
mirror of https://github.com/gristlabs/grist-core.git synced 2025-06-13 20:53:59 +00:00
Code Issues Projects Releases Wiki Activity

(core) Animate side panels

Browse Source 
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
This commit is contained in:
Cyprien P 2021-01-25 14:09:09 +01:00
parent 6f9b85fc8c
commit 710014ce54
2 changed files with 16 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/client/ui/AppUI.ts
View File

@ -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,

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

@ -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 {