gristlabs_grist-core/app/client/ui/BottomBar.ts
Cyprien P 4cd9a2d740 (core) Making side bars a bit more usable for narrow screen
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
2021-01-19 15:22:01 +01:00

24 lines
754 B
TypeScript

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