From ffe4a343352427d657723e846d94a7c303874ec6 Mon Sep 17 00:00:00 2001
From: Cyprien P <cyprien.pindat@gmail.com>
Date: Thu, 14 Jan 2021 12:20:13 +0100
Subject: [PATCH] (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      |  2 ++
 app/client/ui/BottomBar.ts  | 16 ++++++++++++++++
 app/client/ui/PagePanels.ts |  8 ++++----
 3 files changed, 22 insertions(+), 4 deletions(-)
 create mode 100644 app/client/ui/BottomBar.ts

diff --git a/app/client/ui/AppUI.ts b/app/client/ui/AppUI.ts
index ad0c7c29..a85e8f00 100644
--- a/app/client/ui/AppUI.ts
+++ b/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)
   });
 }
diff --git a/app/client/ui/BottomBar.ts b/app/client/ui/BottomBar.ts
new file mode 100644
index 00000000..24b4ea8a
--- /dev/null
+++ b/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;
+`);
diff --git a/app/client/ui/PagePanels.ts b/app/client/ui/PagePanels.ts
index 6c499072..5a5f481b 100644
--- a/app/client/ui/PagePanels.ts
+++ b/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;