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) Show a simpler breadcrumbs [narrow screen]

Browse Source 
Test Plan: Includes new browser tests

Reviewers: paulfitz

Reviewed By: paulfitz

Differential Revision: https://phab.getgrist.com/D2706
This commit is contained in:
Cyprien P 2021-01-18 13:43:24 +01:00
parent 4cd9a2d740
commit 24d9061007
2 changed files with 35 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/client/ui/PagePanels.ts
View File

@ -292,7 +292,7 @@ const cssBottomFooter = styled ('div', `
bottom: 0; bottom: 0;
left: 0; left: 0;
right: 0; right: 0;
@media (min-width: ${maxNarrowScreenWidth}px) { @media not all and (max-width: ${maxNarrowScreenWidth}px) {
& { & {
display: none; display: none;
} }

39
app/client/ui2018/breadcrumbs.ts
View File

@ -6,7 +6,7 @@
* Workspace is a clickable link and document and page names are editable labels. * Workspace is a clickable link and document and page names are editable labels.
*/ */
import { urlState } from 'app/client/models/gristUrlState'; 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 { editableLabel } from 'app/client/ui2018/editableLabel';
import { icon } from 'app/client/ui2018/icons'; import { icon } from 'app/client/ui2018/icons';
import { UserOverride } from 'app/common/DocListAPI'; import { UserOverride } from 'app/common/DocListAPI';
@ -46,6 +46,22 @@ const cssWorkspaceName = styled(cssBreadcrumbsLink, `
margin-left: 8px; 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', ` const cssEditableName = styled('input', `
&:hover, &:focus { &:hover, &:focus {
color: ${colors.dark}; color: ${colors.dark};
@ -98,14 +114,24 @@ export function docBreadcrumbs(
} }
): Element { ): Element {
return cssBreadcrumbs( return cssBreadcrumbs(
cssIcon('Home'), cssIcon('Home',
testId('bc-home'),
cssHideForNarrowScreen.cls('')),
dom.maybe(workspace, _workspace => [ dom.maybe(workspace, _workspace => [
cssWorkspaceName( cssWorkspaceName(
urlState().setLinkUrl({ws: _workspace.id}), urlState().setLinkUrl({ws: _workspace.id}),
dom.text(_workspace.name), 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( editableLabel(
docName, options.docNameSave, testId('bc-doc'), cssEditableName.cls(''), docName, options.docNameSave, testId('bc-doc'), cssEditableName.cls(''),
@ -136,10 +162,13 @@ export function docBreadcrumbs(
return cssTag('fiddle', tooltip({title: fiddleExplanation}), testId('fiddle-tag')); return cssTag('fiddle', tooltip({title: fiddleExplanation}), testId('fiddle-tag'));
} }
}), }),
separator(' / '), separator(' / ',
testId('bc-separator'),
cssHideForNarrowScreen.cls('')),
editableLabel( editableLabel(
pageName, options.pageNameSave, testId('bc-page'), cssEditableName.cls(''), pageName, options.pageNameSave, testId('bc-page'), cssEditableName.cls(''),
dom.boolAttr('disabled', options.isPageNameReadOnly || false), dom.boolAttr('disabled', options.isPageNameReadOnly || false),
dom.cls(cssHideForNarrowScreen.className),
), ),
); );
} }