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) Adds current page name to the bottom bar [narrow screen]

Browse Source 
Test Plan: Tested Manually, behave well also for long page name.

Reviewers: paulfitz

Reviewed By: paulfitz

Differential Revision: https://phab.getgrist.com/D2702
This commit is contained in:
Cyprien P 2021-01-14 12:20:13 +01:00
parent 4ca1c09e35
commit ffe4a34335
3 changed files with 22 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

@ -6,6 +6,7 @@ import {DocPageModelImpl} from 'app/client/models/DocPageModel';
import {HomeModelImpl} from 'app/client/models/HomeModel';
import {App} from 'app/client/ui/App';
import {appHeader} from 'app/client/ui/AppHeader';
import {createBottomBarDoc} from 'app/client/ui/BottomBar';
import {createDocMenu} from 'app/client/ui/DocMenu';
import {createForbiddenPage, createNotFoundPage, createOtherErrorPage} from 'app/client/ui/errorPages';
import {createHomeLeftPane} from 'app/client/ui/HomeLeftPane';
@ -148,5 +149,6 @@ function pagePanelsDoc(owner: IDisposableOwner, appModel: AppModel, appObj: App)
onResize,
testId,
optimizeNarrowScreen: true,
contentBottom: dom.create(createBottomBarDoc, pageModel)
});
}

16
app/client/ui/BottomBar.ts Normal file
View File

@ -0,0 +1,16 @@
import {DocPageModel} from 'app/client/models/DocPageModel';
import {dom, MultiHolder, styled} from 'grainjs';
export function createBottomBarDoc(owner: MultiHolder, pageModel: DocPageModel) {
return dom.maybe(pageModel.gristDoc, (gristDoc) => (
cssPageName(dom.text(gristDoc.currentPageName))
));
}
const cssPageName = styled('div', `
margin: 0 10px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
`);

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

@ -27,6 +27,7 @@ export interface PageContents {
onResize?: () => void; // Callback for when either pane is opened, closed, or resized.
testId?: TestId;
optimizeNarrowScreen?: boolean; // If true, show an optimized layout when screen is narrow.
contentBottom?: DomArg;
}
export function pagePanels(page: PageContents) {
@ -136,7 +137,7 @@ export function pagePanels(page: PageContents) {
cssPanelOpenerNarrowScreenBtn.cls('-open', left.panelOpen)
)
),
dom('div', cssFlexSpacer.cls('')),
page.contentBottom,
(!right || right.hideOpener ? null :
cssPanelOpenerNarrowScreenBtn(
cssPanelOpenerNarrowScreen(
@ -165,9 +166,6 @@ const cssVBox = styled('div', `
const cssHBox = styled('div', `
display: flex;
`);
const cssFlexSpacer = styled('div', `
flex-grow: 1;
`);
const cssPageContainer = styled(cssHBox, `
position: absolute;
isolation: isolate; /* Create a new stacking context */
@ -283,6 +281,8 @@ const cssBottomFooter = styled ('div', `
z-index: 20;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
padding: 8px 16px;
position: absolute;
bottom: 0;