From 746af79164987d94d7ac891580fd974f5b379859 Mon Sep 17 00:00:00 2001 From: Philipp Hugenroth Date: Thu, 19 Aug 2021 13:56:04 +0200 Subject: [PATCH] Align to current screen size Signed-off-by: Philipp Hugenroth --- packages/app/src/components/Root/Root.tsx | 6 +-- .../app/src/components/search/SearchPage.tsx | 3 +- .../core-components/src/layout/Page/Page.tsx | 12 ++++-- .../src/layout/Sidebar/Bar.tsx | 42 ++++++++++++------- .../src/layout/Sidebar/Items.tsx | 5 ++- .../src/layout/Sidebar/Page.tsx | 22 ++++++---- .../src/layout/Sidebar/SidebarGroup.tsx | 12 +++++- plugins/shortcuts/src/AddShortcut.tsx | 2 +- .../General/UserSettingsAppearanceCard.tsx | 27 +++++++----- .../src/components/SettingsPage.tsx | 2 +- 10 files changed, 86 insertions(+), 47 deletions(-) diff --git a/packages/app/src/components/Root/Root.tsx b/packages/app/src/components/Root/Root.tsx index fa7fc892b2..b9b0384afb 100644 --- a/packages/app/src/components/Root/Root.tsx +++ b/packages/app/src/components/Root/Root.tsx @@ -15,7 +15,7 @@ */ import { - MobileSidebar, + Sidebar, sidebarConfig, SidebarContext, SidebarDivider, @@ -84,7 +84,7 @@ const SidebarLogo = () => { export const Root = ({ children }: PropsWithChildren<{}>) => { return ( - + } to="/search"> @@ -125,7 +125,7 @@ export const Root = ({ children }: PropsWithChildren<{}>) => { > - + {children} ); diff --git a/packages/app/src/components/search/SearchPage.tsx b/packages/app/src/components/search/SearchPage.tsx index 7829fa66aa..fefed84f58 100644 --- a/packages/app/src/components/search/SearchPage.tsx +++ b/packages/app/src/components/search/SearchPage.tsx @@ -54,9 +54,8 @@ const useStyles = makeStyles((theme: Theme) => ({ const SearchPage = () => { const classes = useStyles(); - // Think about abstraction to utils here const isMobileScreen = useMediaQuery(theme => - theme.breakpoints.up('xs'), + theme.breakpoints.down('xs'), ); return ( diff --git a/packages/core-components/src/layout/Page/Page.tsx b/packages/core-components/src/layout/Page/Page.tsx index ed59fc530d..9f49174977 100644 --- a/packages/core-components/src/layout/Page/Page.tsx +++ b/packages/core-components/src/layout/Page/Page.tsx @@ -19,18 +19,22 @@ import { BackstageTheme } from '@backstage/theme'; import { makeStyles, ThemeProvider } from '@material-ui/core'; import { sidebarConfig } from '../Sidebar'; -const useStyles = makeStyles({ +const useStyles = makeStyles(theme => ({ 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)`, + [theme.breakpoints.up('sm')]: { + height: '100vh', + }, + [theme.breakpoints.down('xs')]: { + height: `calc(100vh - ${sidebarConfig.mobileSidebarHeight}px)`, + }, overflowY: 'auto', }, -}); +})); type Props = { themeId: string; diff --git a/packages/core-components/src/layout/Sidebar/Bar.tsx b/packages/core-components/src/layout/Sidebar/Bar.tsx index 9ee63c1c3d..ead77d4cae 100644 --- a/packages/core-components/src/layout/Sidebar/Bar.tsx +++ b/packages/core-components/src/layout/Sidebar/Bar.tsx @@ -21,6 +21,7 @@ import React, { useRef, useState, useContext, PropsWithChildren } from 'react'; import { sidebarConfig, SidebarContext } from './config'; import { BackstageTheme } from '@backstage/theme'; import { SidebarPinStateContext } from './Page'; +import { MobileSidebar } from './MobileSidebar'; export type SidebarClassKey = 'root' | 'drawer' | 'drawerOpen'; @@ -80,12 +81,11 @@ type Props = { closeDelayMs?: number; }; -export function Sidebar(props: PropsWithChildren) { - const { - openDelayMs = sidebarConfig.defaultOpenDelayMs, - closeDelayMs = sidebarConfig.defaultCloseDelayMs, - children, - } = props; +const DesktopSidebar = ({ + openDelayMs = sidebarConfig.defaultOpenDelayMs, + closeDelayMs = sidebarConfig.defaultCloseDelayMs, + children, +}: PropsWithChildren) => { const classes = useStyles(); const isSmallScreen = useMediaQuery(theme => theme.breakpoints.down('md'), @@ -138,18 +138,30 @@ export function Sidebar(props: PropsWithChildren) { isOpen, }} > -
- {children} -
- + className={clsx(classes.drawer, { + [classes.drawerOpen]: isOpen, + })} + > + {children} + + ); -} +}; + +export const Sidebar = ({ children }: React.PropsWithChildren<{}>) => { + const isMobileScreen = useMediaQuery(theme => + theme.breakpoints.down('xs'), + ); + + return isMobileScreen ? ( + {children} + ) : ( + {children} + ); +}; diff --git a/packages/core-components/src/layout/Sidebar/Items.tsx b/packages/core-components/src/layout/Sidebar/Items.tsx index 13602b83d0..19fd8c0c0a 100644 --- a/packages/core-components/src/layout/Sidebar/Items.tsx +++ b/packages/core-components/src/layout/Sidebar/Items.tsx @@ -69,8 +69,9 @@ const useStyles = makeStyles(theme => { justifyContent: 'center', }, open: { - // Does not apply on mobile - // width: drawerWidthOpen, + [theme.breakpoints.up('sm')]: { + width: drawerWidthOpen, + }, }, label: { // XXX (@koroeskohr): I can't seem to achieve the desired font-weight from the designs diff --git a/packages/core-components/src/layout/Sidebar/Page.tsx b/packages/core-components/src/layout/Sidebar/Page.tsx index d33564b5d4..cecc985a28 100644 --- a/packages/core-components/src/layout/Sidebar/Page.tsx +++ b/packages/core-components/src/layout/Sidebar/Page.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import { makeStyles } from '@material-ui/core/styles'; +import { makeStyles } from '@material-ui/core'; import React, { createContext, PropsWithChildren, @@ -25,12 +25,20 @@ import { sidebarConfig } from './config'; import { BackstageTheme } from '@backstage/theme'; import { LocalStorage } from './localStorage'; -const useStyles = makeStyles({ - root: { - width: '100%', - minHeight: '100%', - transition: 'padding-left 0.1s ease-out', - }, +const useStyles = makeStyles( + theme => ({ + root: { + width: '100%', + minHeight: '100%', + transition: 'padding-left 0.1s ease-out', + [theme.breakpoints.up('sm')]: { + paddingLeft: ({ isPinned }) => + isPinned + ? sidebarConfig.drawerWidthOpen + : sidebarConfig.drawerWidthClosed, + }, + }, + }), { name: 'BackstageSidebarPage' }, ); diff --git a/packages/core-components/src/layout/Sidebar/SidebarGroup.tsx b/packages/core-components/src/layout/Sidebar/SidebarGroup.tsx index 02267931dc..75dbb9ae91 100644 --- a/packages/core-components/src/layout/Sidebar/SidebarGroup.tsx +++ b/packages/core-components/src/layout/Sidebar/SidebarGroup.tsx @@ -20,6 +20,7 @@ import { BottomNavigationAction, BottomNavigationActionProps, makeStyles, + useMediaQuery, } from '@material-ui/core'; import React, { useContext } from 'react'; import { useLocation } from 'react-router-dom'; @@ -59,11 +60,15 @@ export const SidebarGroup = ({ label, icon, value, + children, }: React.PropsWithChildren) => { const classes = useStyles(); const location = useLocation(); const { selectedMenuItemIndex, setSelectedMenuItemIndex } = useContext(MobileSidebarContext); + const isMobileScreen = useMediaQuery(theme => + theme.breakpoints.down('xs'), + ); const onChange = (_: React.ChangeEvent<{}>, value: number) => { if (value === selectedMenuItemIndex) { @@ -79,8 +84,9 @@ export const SidebarGroup = ({ !(selectedMenuItemIndex >= 0) && to === location.pathname); - return ( - // @ts-ignore Material UI issue: https://github.com/mui-org/material-ui/issues/27820 + return isMobileScreen ? ( + // Material UI issue: https://github.com/mui-org/material-ui/issues/27820 + // @ts-ignore + ) : ( + <>{children} ); }; diff --git a/plugins/shortcuts/src/AddShortcut.tsx b/plugins/shortcuts/src/AddShortcut.tsx index 87c2750206..7c1c5ca118 100644 --- a/plugins/shortcuts/src/AddShortcut.tsx +++ b/plugins/shortcuts/src/AddShortcut.tsx @@ -31,7 +31,7 @@ import { alertApiRef, useApi } from '@backstage/core-plugin-api'; const useStyles = makeStyles(theme => ({ card: { - width: 400, + maxWidth: 400, }, header: { marginBottom: theme.spacing(1), diff --git a/plugins/user-settings/src/components/General/UserSettingsAppearanceCard.tsx b/plugins/user-settings/src/components/General/UserSettingsAppearanceCard.tsx index cb198c8d01..83937f9300 100644 --- a/plugins/user-settings/src/components/General/UserSettingsAppearanceCard.tsx +++ b/plugins/user-settings/src/components/General/UserSettingsAppearanceCard.tsx @@ -13,17 +13,24 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import React from 'react'; -import { List } from '@material-ui/core'; import { InfoCard } from '@backstage/core-components'; +import { BackstageTheme } from '@backstage/theme'; +import { List, useMediaQuery } from '@material-ui/core'; +import React from 'react'; import { UserSettingsPinToggle } from './UserSettingsPinToggle'; import { UserSettingsThemeToggle } from './UserSettingsThemeToggle'; -export const UserSettingsAppearanceCard = () => ( - - - - {/* */} - - -); +export const UserSettingsAppearanceCard = () => { + const isMobileScreen = useMediaQuery(theme => + theme.breakpoints.down('xs'), + ); + + return ( + + + + {!isMobileScreen && } + + + ); +}; diff --git a/plugins/user-settings/src/components/SettingsPage.tsx b/plugins/user-settings/src/components/SettingsPage.tsx index 20ea6820f4..d5c7171148 100644 --- a/plugins/user-settings/src/components/SettingsPage.tsx +++ b/plugins/user-settings/src/components/SettingsPage.tsx @@ -28,7 +28,7 @@ type Props = { export const SettingsPage = ({ providerSettings }: Props) => { const isMobileScreen = useMediaQuery(theme => - theme.breakpoints.up('xs'), + theme.breakpoints.down('xs'), ); return (