mirror of
https://github.com/gristlabs/grist-core.git
synced 2024-10-27 20:44:07 +00:00
(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
This commit is contained in:
parent
6f9b85fc8c
commit
710014ce54
@ -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,
|
||||
|
@ -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 {
|
||||
|
Loading…
Reference in New Issue
Block a user