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) Making side bars a bit more usable for narrow screen

Browse Source 
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
This commit is contained in:
Cyprien P 2021-01-19 10:28:07 +01:00
parent 3ad9b18ddf
commit 4cd9a2d740
3 changed files with 15 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -149,6 +149,6 @@ function pagePanelsDoc(owner: IDisposableOwner, appModel: AppModel, appObj: App)
onResize,
testId,
optimizeNarrowScreen: true,
contentBottom: dom.create(createBottomBarDoc, pageModel)
contentBottom: dom.create(createBottomBarDoc, pageModel, leftPanelOpen, rightPanelOpen)
});
}

13
app/client/ui/BottomBar.ts
View File

@ -1,10 +1,16 @@
import {DocPageModel} from 'app/client/models/DocPageModel';
import {dom, MultiHolder, styled} from 'grainjs';
import {testId} from 'app/client/ui2018/cssVars';
import {dom, MultiHolder, Observable, styled} from 'grainjs';
export function createBottomBarDoc(owner: MultiHolder, pageModel: DocPageModel) {
export function createBottomBarDoc(owner: MultiHolder, pageModel: DocPageModel, leftPanelOpen: Observable<boolean>,
rightPanelOpen: Observable<boolean>) {
return dom.maybe(pageModel.gristDoc, (gristDoc) => (
cssPageName(dom.text(gristDoc.currentPageName))
cssPageName(
dom.text(gristDoc.currentPageName),
dom.on('click', () => { rightPanelOpen.set(false); leftPanelOpen.set(true); }),
testId('page-name'),
)
));
}
@ -13,4 +19,5 @@ const cssPageName = styled('div', `
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
cursor: pointer;
`);

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

@ -117,6 +117,10 @@ export function pagePanels(page: PageContents) {
),
cssContentOverlay(
dom.show((use) => use(left.panelOpen) || Boolean(right && use(right.panelOpen))),
dom.on('click', () => {
left.panelOpen.set(false);
if (right) { right.panelOpen.set(false); }
}),
testId('overlay'))
), (
!optimizeNarrowScreen ? null :