Archives/gristlabs_grist-core
1
0
Fork 0
mirror of https://github.com/gristlabs/grist-core.git synced 2024-10-27 20:44:07 +00:00
Code Issues Projects Releases Wiki Activity

(core) Keeps side panels closed when opening doc on a narrow screen

Browse Source 
Test Plan: Includes nbrowser tests.

Reviewers: paulfitz

Reviewed By: paulfitz

Differential Revision: https://phab.getgrist.com/D2709
This commit is contained in:
Cyprien P 2021-01-21 10:33:08 +01:00
parent 24d9061007
commit eb90385ee9
2 changed files with 18 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -15,7 +15,7 @@ import {pagePanels} from 'app/client/ui/PagePanels';
import {RightPanel} from 'app/client/ui/RightPanel'; import {RightPanel} from 'app/client/ui/RightPanel';
import {createTopBarDoc, createTopBarHome} from 'app/client/ui/TopBar'; import {createTopBarDoc, createTopBarHome} from 'app/client/ui/TopBar';
import {WelcomePage} from 'app/client/ui/WelcomePage'; import {WelcomePage} from 'app/client/ui/WelcomePage';
import {testId} from 'app/client/ui2018/cssVars'; import {isNarrowScreen, testId} from 'app/client/ui2018/cssVars';
import {Computed, dom, IDisposable, IDisposableOwner, Observable, replaceContent, subscribe} from 'grainjs'; import {Computed, dom, IDisposable, IDisposableOwner, Observable, replaceContent, subscribe} from 'grainjs';
// When integrating into the old app, we might in theory switch between new-style and old-style // When integrating into the old app, we might in theory switch between new-style and old-style
@ -103,15 +103,24 @@ function pagePanelsHome(owner: IDisposableOwner, appModel: AppModel) {
}); });
} }
// Create session observable. But if device is a narrow screen create a regular observable.
function createPanelObs<T>(owner: IDisposableOwner, key: string, _default: T, isValid: (val: any) => val is T) {
if (isNarrowScreen()) {
return Observable.create(owner, _default);
}
return createSessionObs<T>(owner, key, _default, isValid);
}
function pagePanelsDoc(owner: IDisposableOwner, appModel: AppModel, appObj: App) { function pagePanelsDoc(owner: IDisposableOwner, appModel: AppModel, appObj: App) {
const pageModel = DocPageModelImpl.create(owner, appObj, appModel); const pageModel = DocPageModelImpl.create(owner, appObj, appModel);
// To simplify manual inspection in the common case, keep the most recently created // To simplify manual inspection in the common case, keep the most recently created
// DocPageModel available as a global variable. // DocPageModel available as a global variable.
(window as any).gristDocPageModel = pageModel; (window as any).gristDocPageModel = pageModel;
const leftPanelOpen = createSessionObs<boolean>(owner, "leftPanelOpen", true, isBoolean); const leftPanelOpen = createPanelObs<boolean>(owner, "leftPanelOpen", isNarrowScreen() ? false : true,
const rightPanelOpen = createSessionObs<boolean>(owner, "rightPanelOpen", false, isBoolean); isBoolean);
const leftPanelWidth = createSessionObs<number>(owner, "leftPanelWidth", 240, isNumber); const rightPanelOpen = createPanelObs<boolean>(owner, "rightPanelOpen", false, isBoolean);
const rightPanelWidth = createSessionObs<number>(owner, "rightPanelWidth", 240, isNumber); const leftPanelWidth = createPanelObs<number>(owner, "leftPanelWidth", 240, isNumber);
const rightPanelWidth = createPanelObs<number>(owner, "rightPanelWidth", 240, isNumber);
// The RightPanel component gets created only when an instance of GristDoc is set in pageModel. // The RightPanel component gets created only when an instance of GristDoc is set in pageModel.
// use.owner is a feature of grainjs to make the new RightPanel owned by the computed itself: // use.owner is a feature of grainjs to make the new RightPanel owned by the computed itself:

4
app/client/ui2018/cssVars.ts
View File

@ -157,6 +157,10 @@ export const testId: TestId = makeTestId('test-');
// Max width for narrow screen layout (in px). Note: 768px is bootstrap's definition of small screen // Max width for narrow screen layout (in px). Note: 768px is bootstrap's definition of small screen
export const maxNarrowScreenWidth = 768; export const maxNarrowScreenWidth = 768;
export function isNarrowScreen() {
return window.innerWidth <= 768;
}
export const cssHideForNarrowScreen = styled('div', ` export const cssHideForNarrowScreen = styled('div', `
@media (max-width: ${maxNarrowScreenWidth}px) { @media (max-width: ${maxNarrowScreenWidth}px) {
& { & {