From d5f08f4b03505702bdc291742a7026c437f05821 Mon Sep 17 00:00:00 2001 From: Philipp Hugenroth Date: Thu, 19 Aug 2021 12:33:34 +0200 Subject: [PATCH] Adjust display style & selected behaviour Signed-off-by: Philipp Hugenroth --- .../core-components/src/layout/Page/Page.tsx | 31 +++-- .../src/layout/Sidebar/Items.tsx | 106 +++++++++++++----- .../src/layout/Sidebar/SidebarGroup.tsx | 17 ++- .../CatalogResultListItem.tsx | 1 + .../General/UserSettingsAppearanceCard.tsx | 2 +- 5 files changed, 104 insertions(+), 53 deletions(-) diff --git a/packages/core-components/src/layout/Page/Page.tsx b/packages/core-components/src/layout/Page/Page.tsx index 57653d23b5..ed59fc530d 100644 --- a/packages/core-components/src/layout/Page/Page.tsx +++ b/packages/core-components/src/layout/Page/Page.tsx @@ -16,24 +16,21 @@ import React, { PropsWithChildren } from 'react'; import { BackstageTheme } from '@backstage/theme'; -import { makeStyles, ThemeProvider } from '@material-ui/core/styles'; +import { makeStyles, ThemeProvider } from '@material-ui/core'; +import { sidebarConfig } from '../Sidebar'; -export type PageClassKey = 'root'; - -const useStyles = makeStyles( - () => ({ - root: { - display: 'grid', - gridTemplateAreas: - "'pageHeader pageHeader pageHeader' 'pageSubheader pageSubheader pageSubheader' 'pageNav pageContent pageSidebar'", - gridTemplateRows: 'max-content auto 1fr', - gridTemplateColumns: 'auto 1fr auto', - height: '100vh', - overflowY: 'auto', - }, - }), - { name: 'BackstagePage' }, -); +const useStyles = makeStyles({ + root: { + display: 'grid', + gridTemplateAreas: + "'pageHeader pageHeader pageHeader' 'pageSubheader pageSubheader pageSubheader' 'pageNav pageContent pageSidebar'", + gridTemplateRows: 'max-content auto 1fr', + gridTemplateColumns: 'auto 1fr auto', + // TODO: Only mobile + height: `calc(100vh - ${sidebarConfig.mobileSidebarHeight}px)`, + overflowY: 'auto', + }, +}); type Props = { themeId: string; diff --git a/packages/core-components/src/layout/Sidebar/Items.tsx b/packages/core-components/src/layout/Sidebar/Items.tsx index ed089ad6a1..13602b83d0 100644 --- a/packages/core-components/src/layout/Sidebar/Items.tsx +++ b/packages/core-components/src/layout/Sidebar/Items.tsx @@ -38,36 +38,82 @@ import { } from 'react-router-dom'; import { sidebarConfig, SidebarContext } from './config'; -export type SidebarItemClassKey = - | 'root' - | 'buttonItem' - | 'closed' - | 'open' - | 'label' - | 'iconContainer' - | 'searchRoot' - | 'searchField' - | 'searchFieldHTMLInput' - | 'searchContainer' - | 'secondaryAction' - | 'selected'; -const useStyles = makeStyles( - theme => { - const { - selectedIndicatorWidth, - drawerWidthClosed, - drawerWidthOpen, - iconContainerWidth, - } = sidebarConfig; - return { - root: { - color: theme.palette.navigation.color, - display: 'flex', - flexFlow: 'row nowrap', - alignItems: 'center', - height: 48, - cursor: 'pointer', +const useStyles = makeStyles(theme => { + const { + selectedIndicatorWidth, + drawerWidthClosed, + drawerWidthOpen, + iconContainerWidth, + } = sidebarConfig; + return { + root: { + color: theme.palette.navigation.color, + display: 'flex', + flexFlow: 'row nowrap', + alignItems: 'center', + height: 48, + cursor: 'pointer', + }, + buttonItem: { + background: 'none', + border: 'none', + width: 'auto', + margin: 0, + padding: 0, + textAlign: 'inherit', + font: 'inherit', + }, + closed: { + width: drawerWidthClosed, + justifyContent: 'center', + }, + open: { + // Does not apply on mobile + // width: drawerWidthOpen, + }, + label: { + // XXX (@koroeskohr): I can't seem to achieve the desired font-weight from the designs + fontWeight: 'bold', + whiteSpace: 'nowrap', + lineHeight: 'auto', + flex: '3 1 auto', + width: '110px', + overflow: 'hidden', + 'text-overflow': 'ellipsis', + }, + iconContainer: { + boxSizing: 'border-box', + height: '100%', + width: iconContainerWidth, + marginRight: -theme.spacing(2), + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + }, + searchRoot: { + marginBottom: 12, + }, + searchField: { + color: '#b5b5b5', + fontWeight: 'bold', + fontSize: theme.typography.fontSize, + }, + searchFieldHTMLInput: { + padding: `${theme.spacing(2)} 0 ${theme.spacing(2)}`, + }, + searchContainer: { + width: drawerWidthOpen - iconContainerWidth, + }, + secondaryAction: { + width: theme.spacing(6), + textAlign: 'center', + marginRight: theme.spacing(1), + }, + selected: { + '&$root': { + borderLeft: `solid ${selectedIndicatorWidth}px ${theme.palette.navigation.indicator}`, + color: theme.palette.navigation.selectedColor, }, buttonItem: { background: 'none', @@ -136,7 +182,7 @@ const useStyles = makeStyles( }, }, }; - }, + }}, { name: 'BackstageSidebarItem' }, ); diff --git a/packages/core-components/src/layout/Sidebar/SidebarGroup.tsx b/packages/core-components/src/layout/Sidebar/SidebarGroup.tsx index db3c39e227..02267931dc 100644 --- a/packages/core-components/src/layout/Sidebar/SidebarGroup.tsx +++ b/packages/core-components/src/layout/Sidebar/SidebarGroup.tsx @@ -24,6 +24,7 @@ import { import React, { useContext } from 'react'; import { useLocation } from 'react-router-dom'; import { Link } from '../../components'; +import { sidebarConfig } from './config'; import { MobileSidebarContext } from './MobileSidebar'; interface SidebarGroupProps extends BottomNavigationActionProps { @@ -32,11 +33,15 @@ interface SidebarGroupProps extends BottomNavigationActionProps { const useStyles = makeStyles(theme => ({ root: { + flexGrow: 0, + margin: `0 ${theme.spacing(2)}px`, color: theme.palette.navigation.color, }, selected: { color: `${theme.palette.navigation.selectedColor}!important`, + borderTop: `solid ${sidebarConfig.selectedIndicatorWidth}px ${theme.palette.navigation.indicator}`, + marginTop: '-1px', }, label: { @@ -60,17 +65,19 @@ export const SidebarGroup = ({ const { selectedMenuItemIndex, setSelectedMenuItemIndex } = useContext(MobileSidebarContext); - const onChange = (_, value) => { - if (value === selectedMenuItemIndex && to !== location.pathname) { + const onChange = (_: React.ChangeEvent<{}>, value: number) => { + if (value === selectedMenuItemIndex) { setSelectedMenuItemIndex(-1); - } else if (value !== selectedMenuItemIndex) { + } else { setSelectedMenuItemIndex(value); } }; const selected = - value === selectedMenuItemIndex || - (selectedMenuItemIndex >= 0 && to === location.pathname); + (value === selectedMenuItemIndex && selectedMenuItemIndex >= 0) || + (!(value === selectedMenuItemIndex) && + !(selectedMenuItemIndex >= 0) && + to === location.pathname); return ( // @ts-ignore Material UI issue: https://github.com/mui-org/material-ui/issues/27820 diff --git a/plugins/catalog/src/components/CatalogResultListItem/CatalogResultListItem.tsx b/plugins/catalog/src/components/CatalogResultListItem/CatalogResultListItem.tsx index 1aaa50a7bf..f0a32ec0e2 100644 --- a/plugins/catalog/src/components/CatalogResultListItem/CatalogResultListItem.tsx +++ b/plugins/catalog/src/components/CatalogResultListItem/CatalogResultListItem.tsx @@ -31,6 +31,7 @@ const useStyles = makeStyles({ }, itemText: { width: '100%', + wordBreak: 'break-all', marginBottom: '1rem', }, }); diff --git a/plugins/user-settings/src/components/General/UserSettingsAppearanceCard.tsx b/plugins/user-settings/src/components/General/UserSettingsAppearanceCard.tsx index 8f6e60e289..cb198c8d01 100644 --- a/plugins/user-settings/src/components/General/UserSettingsAppearanceCard.tsx +++ b/plugins/user-settings/src/components/General/UserSettingsAppearanceCard.tsx @@ -23,7 +23,7 @@ export const UserSettingsAppearanceCard = () => ( - + {/* */} );