From 24d90610076f5d5d9ec922a2097dcb50a3a9dcc6 Mon Sep 17 00:00:00 2001
From: Cyprien P <cyprien.pindat@gmail.com>
Date: Mon, 18 Jan 2021 13:43:24 +0100
Subject: [PATCH] (core) Show a simpler breadcrumbs [narrow screen]

Test Plan: Includes new browser tests

Reviewers: paulfitz

Reviewed By: paulfitz

Differential Revision: https://phab.getgrist.com/D2706
---
 app/client/ui/PagePanels.ts      |  2 +-
 app/client/ui2018/breadcrumbs.ts | 39 ++++++++++++++++++++++++++++----
 2 files changed, 35 insertions(+), 6 deletions(-)

diff --git a/app/client/ui/PagePanels.ts b/app/client/ui/PagePanels.ts
index 73a8943a..dc1bda58 100644
--- a/app/client/ui/PagePanels.ts
+++ b/app/client/ui/PagePanels.ts
@@ -292,7 +292,7 @@ const cssBottomFooter = styled ('div', `
   bottom: 0;
   left: 0;
   right: 0;
-  @media (min-width: ${maxNarrowScreenWidth}px) {
+  @media not all and (max-width: ${maxNarrowScreenWidth}px) {
     & {
       display: none;
     }
diff --git a/app/client/ui2018/breadcrumbs.ts b/app/client/ui2018/breadcrumbs.ts
index a20eaa8b..bd352868 100644
--- a/app/client/ui2018/breadcrumbs.ts
+++ b/app/client/ui2018/breadcrumbs.ts
@@ -6,7 +6,7 @@
  * Workspace is a clickable link and document and page names are editable labels.
  */
 import { urlState } from 'app/client/models/gristUrlState';
-import { colors, testId } from 'app/client/ui2018/cssVars';
+import { colors, cssHideForNarrowScreen, maxNarrowScreenWidth, testId } from 'app/client/ui2018/cssVars';
 import { editableLabel } from 'app/client/ui2018/editableLabel';
 import { icon } from 'app/client/ui2018/icons';
 import { UserOverride } from 'app/common/DocListAPI';
@@ -46,6 +46,22 @@ const cssWorkspaceName = styled(cssBreadcrumbsLink, `
   margin-left: 8px;
 `);
 
+const cssWorkspaceNarrowScreen = styled(icon, `
+  transform: rotateY(180deg);
+  width: 32px;
+  height: 32px;
+  margin-bottom: 4px;
+  margin-left: -7px;
+  margin-right: 8px;
+  background-color: ${colors.slate};
+  cursor: pointer;
+  @media not all and (max-width: ${maxNarrowScreenWidth}px) {
+    & {
+      display: none;
+    }
+  }
+`);
+
 const cssEditableName = styled('input', `
   &:hover, &:focus {
     color: ${colors.dark};
@@ -98,14 +114,24 @@ export function docBreadcrumbs(
   }
   ): Element {
     return cssBreadcrumbs(
-      cssIcon('Home'),
+      cssIcon('Home',
+              testId('bc-home'),
+              cssHideForNarrowScreen.cls('')),
       dom.maybe(workspace, _workspace => [
         cssWorkspaceName(
           urlState().setLinkUrl({ws: _workspace.id}),
           dom.text(_workspace.name),
-          testId('bc-workspace')
+          testId('bc-workspace'),
+          cssHideForNarrowScreen.cls('')
         ),
-        separator(' / ')
+        cssWorkspaceNarrowScreen(
+          'Expand',
+          urlState().setLinkUrl({ws: _workspace.id}),
+          testId('bc-workspace-ns')
+        ),
+        separator(' / ',
+                  testId('bc-separator'),
+                  cssHideForNarrowScreen.cls(''))
       ]),
       editableLabel(
         docName, options.docNameSave, testId('bc-doc'), cssEditableName.cls(''),
@@ -136,10 +162,13 @@ export function docBreadcrumbs(
           return cssTag('fiddle', tooltip({title: fiddleExplanation}), testId('fiddle-tag'));
         }
       }),
-      separator(' / '),
+      separator(' / ',
+                testId('bc-separator'),
+                cssHideForNarrowScreen.cls('')),
       editableLabel(
         pageName, options.pageNameSave, testId('bc-page'), cssEditableName.cls(''),
         dom.boolAttr('disabled', options.isPageNameReadOnly || false),
+        dom.cls(cssHideForNarrowScreen.className),
       ),
     );
 }