From 4389ceefea0dfe89dfb84df10e943de3eb7e97c4 Mon Sep 17 00:00:00 2001 From: Philipp Hugenroth Date: Mon, 28 Jun 2021 18:09:52 +0200 Subject: [PATCH 1/6] Don't open sidebar on click for smaller screens Signed-off-by: Philipp Hugenroth --- packages/core-components/src/layout/Sidebar/Bar.tsx | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) diff --git a/packages/core-components/src/layout/Sidebar/Bar.tsx b/packages/core-components/src/layout/Sidebar/Bar.tsx index f6edac81b7..65da4d2d75 100644 --- a/packages/core-components/src/layout/Sidebar/Bar.tsx +++ b/packages/core-components/src/layout/Sidebar/Bar.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import { makeStyles } from '@material-ui/core'; +import { makeStyles, useMediaQuery } from '@material-ui/core'; import clsx from 'clsx'; import React, { useRef, useState, useContext, PropsWithChildren } from 'react'; import { sidebarConfig, SidebarContext } from './config'; @@ -82,6 +82,9 @@ export const Sidebar = ({ children, }: PropsWithChildren) => { const classes = useStyles(); + const isSmallScreen = useMediaQuery(theme => + theme.breakpoints.down('md'), + ); const [state, setState] = useState(State.Closed); const hoverTimerRef = useRef(); const { isPinned } = useContext(SidebarPinStateContext); @@ -94,7 +97,7 @@ export const Sidebar = ({ clearTimeout(hoverTimerRef.current); hoverTimerRef.current = undefined; } - if (state !== State.Open) { + if (state !== State.Open && !isSmallScreen) { hoverTimerRef.current = window.setTimeout(() => { hoverTimerRef.current = undefined; setState(State.Open); @@ -122,6 +125,8 @@ export const Sidebar = ({ } }; + const isOpen = (state === State.Open && !isSmallScreen) || isPinned; + return (
{children} From 2316beb6b3ba138fe9db9c287c7a4a5e87e67869 Mon Sep 17 00:00:00 2001 From: Philipp Hugenroth Date: Mon, 28 Jun 2021 18:15:47 +0200 Subject: [PATCH 2/6] Set height of page to 100vh - Add SidebarScroll Wrapper Signed-off-by: Philipp Hugenroth --- packages/app/src/components/Root/Root.tsx | 11 +++++++---- .../core-components/src/layout/Page/Page.tsx | 3 ++- .../src/layout/Sidebar/Items.tsx | 8 ++++++++ .../src/layout/Sidebar/index.ts | 1 + packages/core/src/layout/Page/Page.tsx | 3 ++- plugins/shortcuts/src/Shortcuts.tsx | 18 +++++++----------- 6 files changed, 27 insertions(+), 17 deletions(-) diff --git a/packages/app/src/components/Root/Root.tsx b/packages/app/src/components/Root/Root.tsx index 09ee571cf6..48141e4f53 100644 --- a/packages/app/src/components/Root/Root.tsx +++ b/packages/app/src/components/Root/Root.tsx @@ -39,6 +39,7 @@ import { SidebarItem, SidebarDivider, SidebarSpace, + SidebarScrollWrapper, } from '@backstage/core-components'; const useSidebarLogoStyles = makeStyles({ @@ -88,10 +89,12 @@ export const Root = ({ children }: PropsWithChildren<{}>) => ( {/* End global nav */} - - - - + + + + + + diff --git a/packages/core-components/src/layout/Page/Page.tsx b/packages/core-components/src/layout/Page/Page.tsx index 8acb54c268..8d1dfe2943 100644 --- a/packages/core-components/src/layout/Page/Page.tsx +++ b/packages/core-components/src/layout/Page/Page.tsx @@ -25,7 +25,8 @@ const useStyles = makeStyles(() => ({ "'pageHeader pageHeader pageHeader' 'pageSubheader pageSubheader pageSubheader' 'pageNav pageContent pageSidebar'", gridTemplateRows: 'auto auto 1fr', gridTemplateColumns: 'auto 1fr auto', - minHeight: '100vh', + height: '100vh', + overflowY: 'auto', }, })); diff --git a/packages/core-components/src/layout/Sidebar/Items.tsx b/packages/core-components/src/layout/Sidebar/Items.tsx index 9bccffc6c4..28ebab3e18 100644 --- a/packages/core-components/src/layout/Sidebar/Items.tsx +++ b/packages/core-components/src/layout/Sidebar/Items.tsx @@ -290,3 +290,11 @@ export const SidebarDivider = styled('hr')({ border: 'none', margin: '12px 0px', }); + +export const SidebarScrollWrapper = styled('div')({ + flex: '0 1 auto', + overflowY: 'scroll', + // Display at least one item in the container + // Question: Can this be a config/theme variable - if so, which? :/ + minHeight: '48px', +}); diff --git a/packages/core-components/src/layout/Sidebar/index.ts b/packages/core-components/src/layout/Sidebar/index.ts index fc0e29f9a6..58e193dbaf 100644 --- a/packages/core-components/src/layout/Sidebar/index.ts +++ b/packages/core-components/src/layout/Sidebar/index.ts @@ -23,6 +23,7 @@ export { SidebarSearchField, SidebarSpace, SidebarSpacer, + SidebarScrollWrapper, } from './Items'; export { IntroCard, SidebarIntro } from './Intro'; export { diff --git a/packages/core/src/layout/Page/Page.tsx b/packages/core/src/layout/Page/Page.tsx index 8acb54c268..8d1dfe2943 100644 --- a/packages/core/src/layout/Page/Page.tsx +++ b/packages/core/src/layout/Page/Page.tsx @@ -25,7 +25,8 @@ const useStyles = makeStyles(() => ({ "'pageHeader pageHeader pageHeader' 'pageSubheader pageSubheader pageSubheader' 'pageNav pageContent pageSidebar'", gridTemplateRows: 'auto auto 1fr', gridTemplateColumns: 'auto 1fr auto', - minHeight: '100vh', + height: '100vh', + overflowY: 'auto', }, })); diff --git a/plugins/shortcuts/src/Shortcuts.tsx b/plugins/shortcuts/src/Shortcuts.tsx index 775b0b3809..86aa9565d3 100644 --- a/plugins/shortcuts/src/Shortcuts.tsx +++ b/plugins/shortcuts/src/Shortcuts.tsx @@ -22,18 +22,14 @@ import { ShortcutItem } from './ShortcutItem'; import { AddShortcut } from './AddShortcut'; import { shortcutsApiRef } from './api'; -import { Progress, SidebarItem } from '@backstage/core-components'; +import { + Progress, + SidebarItem, + SidebarScrollWrapper, +} from '@backstage/core-components'; import { useApi } from '@backstage/core-plugin-api'; -const useStyles = makeStyles({ - root: { - flex: '1 1 auto', - overflowY: 'scroll', - }, -}); - export const Shortcuts = () => { - const classes = useStyles(); const shortcutApi = useApi(shortcutsApiRef); const shortcuts = useObservable( useMemo(() => shortcutApi.shortcut$(), [shortcutApi]), @@ -50,7 +46,7 @@ export const Shortcuts = () => { }; return ( -
+ { /> )) )} -
+ ); }; From e1ec6adc3ed6f5a65eb24cd4833550e9315d7644 Mon Sep 17 00:00:00 2001 From: Philipp Hugenroth Date: Tue, 29 Jun 2021 15:25:15 +0200 Subject: [PATCH 3/6] Fix sflaky sidebar in 'peek' state Signed-off-by: Philipp Hugenroth --- packages/core-components/src/layout/Sidebar/Items.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/core-components/src/layout/Sidebar/Items.tsx b/packages/core-components/src/layout/Sidebar/Items.tsx index 28ebab3e18..dbaa50b76e 100644 --- a/packages/core-components/src/layout/Sidebar/Items.tsx +++ b/packages/core-components/src/layout/Sidebar/Items.tsx @@ -293,7 +293,7 @@ export const SidebarDivider = styled('hr')({ export const SidebarScrollWrapper = styled('div')({ flex: '0 1 auto', - overflowY: 'scroll', + overflowY: 'auto', // Display at least one item in the container // Question: Can this be a config/theme variable - if so, which? :/ minHeight: '48px', From a446bffdb2636e3ac56da33d7392b674b1e13c2f Mon Sep 17 00:00:00 2001 From: Philipp Hugenroth Date: Tue, 29 Jun 2021 17:10:53 +0200 Subject: [PATCH 4/6] Add changeset Signed-off-by: Philipp Hugenroth --- .changeset/beige-ladybugs-sip.md | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 .changeset/beige-ladybugs-sip.md diff --git a/.changeset/beige-ladybugs-sip.md b/.changeset/beige-ladybugs-sip.md new file mode 100644 index 0000000000..8587d3bb92 --- /dev/null +++ b/.changeset/beige-ladybugs-sip.md @@ -0,0 +1,7 @@ +--- +'example-app': patch +'@backstage/core': patch +'@backstage/core-components': patch +--- + +Improve UX of the Sidebar by adding SidebarScrollWrapper component allowing the user to scroll through Plugins & Shortcuts on smaller screens. Prevent the Sidebar from opening on click on small devices From 9c0f0dd3277ee0139ea6cb72c1949f3fe12ead8b Mon Sep 17 00:00:00 2001 From: Philipp Hugenroth Date: Tue, 29 Jun 2021 17:37:29 +0200 Subject: [PATCH 5/6] Remove unused import Signed-off-by: Philipp Hugenroth --- plugins/shortcuts/src/Shortcuts.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/plugins/shortcuts/src/Shortcuts.tsx b/plugins/shortcuts/src/Shortcuts.tsx index 86aa9565d3..69ab6a48ac 100644 --- a/plugins/shortcuts/src/Shortcuts.tsx +++ b/plugins/shortcuts/src/Shortcuts.tsx @@ -16,7 +16,6 @@ import React, { useMemo } from 'react'; import { useObservable } from 'react-use'; -import { makeStyles } from '@material-ui/core'; import PlayListAddIcon from '@material-ui/icons/PlaylistAdd'; import { ShortcutItem } from './ShortcutItem'; import { AddShortcut } from './AddShortcut'; From 1799795d94dc9c3e484335644a061d68433c7cc3 Mon Sep 17 00:00:00 2001 From: Philipp Hugenroth Date: Thu, 1 Jul 2021 10:38:48 +0200 Subject: [PATCH 6/6] Adjust changeset to actual change Signed-off-by: Philipp Hugenroth --- .changeset/beige-ladybugs-sip.md | 2 -- 1 file changed, 2 deletions(-) diff --git a/.changeset/beige-ladybugs-sip.md b/.changeset/beige-ladybugs-sip.md index 8587d3bb92..f1ef84e233 100644 --- a/.changeset/beige-ladybugs-sip.md +++ b/.changeset/beige-ladybugs-sip.md @@ -1,6 +1,4 @@ --- -'example-app': patch -'@backstage/core': patch '@backstage/core-components': patch ---