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) Hide top bar items to left of search while open

Browse Source 
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
This commit is contained in:
George Gevoian 2024-02-08 00:10:01 -05:00
parent 7de33078f3
commit 79e80330cf
2 changed files with 12 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
app/client/ui/TopBar.ts
View File

@ -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'),

3
app/client/ui2018/search.ts
View File

@ -42,6 +42,9 @@ const searchWrapper = styled('div', `
width: 32px;
padding: 0px;
}
&-expand {
margin-left: 12px;
}
}
`);