Add compact HUD option; fix pointer events around controls

It decreased padding.
streamr-dev · May 30, 2024 · c38a5bb · c38a5bb
1 parent c3345e6
commit c38a5bb
Show file tree

Hide file tree

Showing 5 changed files with 64 additions and 21 deletions.
diff --git a/src/components/App.tsx b/src/components/App.tsx
@@ -39,7 +39,7 @@ function Page() {
 
   const isLoadingNodes = useIsFetchingOperatorNodesForStream(streamId || undefined)
 
-  const { showNetworkSelector, showSearch, showNodeList } = useHud()
+  const { showNetworkSelector, showSearch, showNodeList, compact } = useHud()
 
   return (
     <StoreProvider>
@@ -48,15 +48,15 @@ function Page() {
       <MapAutoUpdater />
       <LoadingIndicator large loading={isLoadingNodes} />
       <ErrorBoundary>
-        <Controls>
+        <Controls $compact={compact}>
           <NetworkSelectorWrap $alwaysGrow={!showSearch}>
             {showNetworkSelector && <NetworkSelector />}
           </NetworkSelectorWrap>
           <MapNavigationControl />
         </Controls>
         <Backdrop />
         {(showSearch || showNodeList) && (
-          <SidebarContainer>
+          <SidebarContainer $compact={compact}>
             <Sidebar>
               {showSearch && <SearchBox />}
               {showNodeList && (
@@ -101,16 +101,24 @@ const OutletWrap = styled.div`
   }
 `
 
-const SidebarContainer = styled.div`
-  width: 100vw;
-  position: absolute;
+const SidebarContainer = styled.div<{ $compact?: boolean }>`
+  box-sizing: border-box;
+  height: 100vh;
+  left: 0;
   overflow: hidden;
   pointer-events: none;
-  left: 0;
-  height: 100vh;
+  position: absolute;
   top: 0;
-  padding-top: min(calc(40px + 20vw), 104px);
-  box-sizing: border-box;
+  width: 100vw;
+
+  ${({ $compact = false }) =>
+    $compact
+      ? css`
+          padding-top: min(calc(40px + 20vw), 72px);
+        `
+      : css`
+          padding-top: min(calc(40px + 20vw), 104px);
+        `}
 
   @media ${TabletMedia} {
     overflow: auto;
@@ -182,17 +190,20 @@ function Sidebar(props: HTMLAttributes<HTMLDivElement>) {
     }
   }, [])
 
+  const { compact } = useHud()
+
   return (
     <SidebarRoot
       {...props}
       ref={sidebarRootRef}
       $animate={animate}
       $expand={activeView === ActiveView.List}
+      $compact={compact}
     />
   )
 }
 
-const SidebarRoot = styled.div<{ $expand?: boolean; $animate?: boolean }>`
+const SidebarRoot = styled.div<{ $expand?: boolean; $animate?: boolean; $compact?: boolean }>`
   box-sizing: border-box;
   max-height: 100%;
   pointer-events: auto;
@@ -219,23 +230,45 @@ const SidebarRoot = styled.div<{ $expand?: boolean; $animate?: boolean }>`
   }
 
   @media ${TabletMedia} {
+    box-sizing: content-box;
     transform: translateY(0);
     height: auto;
-    padding: 32px;
     width: min(460px, max(360px, 50vw));
   }
+
+  ${({ $compact = false }) =>
+    $compact
+      ? css`
+          @media ${TabletMedia} {
+            padding: 16px;
+          }
+        `
+      : css`
+          @media ${TabletMedia} {
+            padding: 32px;
+          }
+        `}
 `
 
-const Controls = styled.div`
+const Controls = styled.div<{ $compact?: boolean }>`
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
   gap: 8px;
   height: 100vh;
-  padding: max(12px, min(32px, 10vw));
+  pointer-events: none;
   position: absolute;
   right: 0;
   top: 0;
+
+  ${({ $compact }) =>
+    $compact
+      ? css`
+          padding: max(12px, min(16px, 10vw));
+        `
+      : css`
+          padding: max(12px, min(32px, 10vw));
+        `}
 `
 
 function MapAutoUpdater() {

diff --git a/src/components/Framable.stories.tsx b/src/components/Framable.stories.tsx
@@ -25,7 +25,12 @@ function Framable(props: FramableProps) {
 
   const path = streamId ? `/streams/${encodeURIComponent(streamId)}` : `/`
 
-  return <IFrame src={`http://localhost:3000${path}?hud=${hudToNumber(hud)}`} />
+  return (
+    <>
+      <div>HUD: {hudToNumber(hud)}</div>
+      <IFrame src={`http://localhost:3000${path}?hud=${hudToNumber(hud)}`} />
+    </>
+  )
 }
 
 const Story: Meta<typeof Framable> = {
@@ -52,8 +57,9 @@ export const Default: StoryObj<typeof Framable> = {
       'showNetworkSelector',
       'showResetViewportButton',
       'showSearch',
-      'showStats',
+      'compact',
       'showZoomButtons',
+      'autoCenter',
     ],
     streamId: '',
   },
@@ -67,8 +73,9 @@ export const Default: StoryObj<typeof Framable> = {
         'showNetworkSelector',
         'showResetViewportButton',
         'showSearch',
-        'showStats',
+        'compact',
         'showZoomButtons',
+        'autoCenter',
       ],
     },
   },

diff --git a/src/components/MapNavigationControl.tsx b/src/components/MapNavigationControl.tsx
@@ -242,4 +242,6 @@ const ButtonGroup = styled.div`
 
 const ZoomGroup = styled(ButtonGroup)``
 
-const NavigationControlRoot = styled.div``
+const NavigationControlRoot = styled.div`
+  pointer-events: auto;
+`
diff --git a/src/components/NetworkSelector/index.tsx b/src/components/NetworkSelector/index.tsx
@@ -115,7 +115,9 @@ const NetworkItem = styled.button`
   }
 `
 
-const NetworkSelectorRoot = styled.div``
+const NetworkSelectorRoot = styled.div`
+  pointer-events: auto;
+`
 
 export default function NetworkSelector() {
   const [open, setOpen] = useState<boolean>(false)

diff --git a/src/utils/index.tsx b/src/utils/index.tsx
@@ -95,7 +95,7 @@ const Hud = {
   showNetworkSelector: /*     */ 0x0008,
   showResetViewportButton: /* */ 0x0010,
   showSearch: /*              */ 0x0020,
-  showStats: /*               */ 0x0040,
+  compact: /*                 */ 0x0040,
   showZoomButtons: /*         */ 0x0080,
   autoCenter: /*              */ 0x0100,
 } as const
@@ -106,7 +106,6 @@ const fallbackHud =
   Hud.showNetworkSelector |
   Hud.showResetViewportButton |
   Hud.showSearch |
-  Hud.showStats |
   Hud.showZoomButtons
 
 export function useHud() {