(core) Adds current page name to the bottom bar [narrow screen]

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

Reviewers: paulfitz

Reviewed By: paulfitz

Differential Revision: https://phab.getgrist.com/D2702

app/client/ui/AppUI.ts

@@ -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)
   });
 }

app/client/ui/BottomBar.ts

@@ -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;
+`);

app/client/ui/PagePanels.ts

@@ -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;