From 79e80330cf6b13bd27563e04f4b3e069423acce5 Mon Sep 17 00:00:00 2001
From: George Gevoian <george@gevoian.com>
Date: Thu, 8 Feb 2024 00:10:01 -0500
Subject: [PATCH] (core) Hide top bar items to left of search while open

Summary:
On narrow screens, there wasn't enough room in the top bar to see the
text you were typing into the search input. To make more room, items to
the left of the search input are now hidden while search is open; the document
title is hidden on narrow screens, and the undo and redo buttons are always
hidden.

Test Plan: Manual.

Reviewers: JakubSerafin

Reviewed By: JakubSerafin

Subscribers: JakubSerafin

Differential Revision: https://phab.getgrist.com/D4187
---
 app/client/ui/TopBar.ts     | 11 +++++++++--
 app/client/ui2018/search.ts |  3 +++
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/app/client/ui/TopBar.ts b/app/client/ui/TopBar.ts
index 59ee6481..9fa60f70 100644
--- a/app/client/ui/TopBar.ts
+++ b/app/client/ui/TopBar.ts
@@ -14,7 +14,7 @@ import {cssHoverCircle, cssTopBarBtn} from 'app/client/ui/TopBarCss';
 import {buildLanguageMenu} from 'app/client/ui/LanguageMenu';
 import {docBreadcrumbs} from 'app/client/ui2018/breadcrumbs';
 import {basicButton} from 'app/client/ui2018/buttons';
-import {cssHideForNarrowScreen, testId, theme} from 'app/client/ui2018/cssVars';
+import {cssHideForNarrowScreen, isNarrowScreenObs, testId, theme} from 'app/client/ui2018/cssVars';
 import {IconName} from 'app/client/ui2018/IconList';
 import {menuAnnotate} from 'app/client/ui2018/menus';
 import {COMMENTS} from 'app/client/models/features';
@@ -72,6 +72,10 @@ export function createTopBarDoc(owner: MultiHolder, appModel: AppModel, pageMode
       return module.SearchModelImpl.create(use.owner, gristDoc);
     });
 
+  const isSearchOpen = Computed.create(owner, searchModelObs, (use, searchModel) => {
+    return Boolean(searchModel && use(searchModel.isOpen));
+  });
+
   const isUndoRedoAvailable = Computed.create(owner, use => {
     const gristDoc = use(pageModel.gristDoc);
     if (!gristDoc) { return false; }
@@ -102,7 +106,8 @@ export function createTopBarDoc(owner: MultiHolder, appModel: AppModel, pageMode
           isPublic: Computed.create(owner, doc, (use, _doc) => Boolean(_doc && _doc.public)),
           isTemplate: pageModel.isTemplate,
           isAnonymous,
-        })
+        }),
+        dom.hide(use => use(isSearchOpen) && use(isNarrowScreenObs())),
       )
     ),
     cssFlexSpace(),
@@ -111,12 +116,14 @@ export function createTopBarDoc(owner: MultiHolder, appModel: AppModel, pageMode
     dom.maybe(pageModel.undoState, (state) => [
       topBarUndoBtn('Undo',
         dom.on('click', () => state.isUndoDisabled.get() || allCommands.undo.run()),
+        dom.hide(use => use(isSearchOpen)),
         hoverTooltip('Undo', {key: 'topBarBtnTooltip'}),
         cssHoverCircle.cls('-disabled', use => use(state.isUndoDisabled) || !use(isUndoRedoAvailable)),
         testId('undo'),
       ),
       topBarUndoBtn('Redo',
         dom.on('click', () => state.isRedoDisabled.get() || allCommands.redo.run()),
+        dom.hide(use => use(isSearchOpen)),
         hoverTooltip('Redo', {key: 'topBarBtnTooltip'}),
         cssHoverCircle.cls('-disabled', use => use(state.isRedoDisabled) || !use(isUndoRedoAvailable)),
         testId('redo'),
diff --git a/app/client/ui2018/search.ts b/app/client/ui2018/search.ts
index ada9ab12..a164525d 100644
--- a/app/client/ui2018/search.ts
+++ b/app/client/ui2018/search.ts
@@ -42,6 +42,9 @@ const searchWrapper = styled('div', `
       width: 32px;
       padding: 0px;
     }
+    &-expand {
+      margin-left: 12px;
+    }
   }
 `);