feat: add custom scrollbar to main container

fixes #922
MauriceNino · Jan 7, 2024 · 9eacee2 · 9eacee2
1 parent 56bd9d8
commit 9eacee2
Show file tree

Hide file tree

Showing 10 changed files with 128 additions and 73 deletions.
diff --git a/.yarn/cache/@types-lodash-es-npm-4.17.12-87dce3f795-990a99e224.zip b/.yarn/cache/@types-lodash-es-npm-4.17.12-87dce3f795-990a99e224.zip
diff --git a/.yarn/cache/@types-lodash-npm-4.14.202-76de3e302b-a91acf3564.zip b/.yarn/cache/@types-lodash-npm-4.14.202-76de3e302b-a91acf3564.zip
diff --git a/.yarn/cache/can-use-dom-npm-0.1.0-48c60a9052-488fc94c40.zip b/.yarn/cache/can-use-dom-npm-0.1.0-48c60a9052-488fc94c40.zip
diff --git a/.yarn/cache/simplebar-core-npm-1.2.4-2dd1c4c362-9bef0a29cc.zip b/.yarn/cache/simplebar-core-npm-1.2.4-2dd1c4c362-9bef0a29cc.zip
diff --git a/.yarn/cache/simplebar-react-npm-3.2.4-bd9abdfe55-0355a7ccb9.zip b/.yarn/cache/simplebar-react-npm-3.2.4-bd9abdfe55-0355a7ccb9.zip
diff --git a/apps/view/src/App.tsx b/apps/view/src/App.tsx
@@ -1,9 +1,9 @@
 import { ConfigProvider } from 'antd';
 import { FC, useMemo } from 'react';
 import {
-  createGlobalStyle,
   DefaultTheme,
   ThemeProvider,
+  createGlobalStyle,
 } from 'styled-components';
 import { useColorScheme } from 'use-color-scheme';
 import { MainWidgetContainer } from './components/main-widget-container';
@@ -53,12 +53,13 @@ const GlobalStyle = createGlobalStyle<{ noBg: boolean }>`
   body {
     background-color: ${({ theme, noBg }) =>
       noBg ? 'transparent' : theme.colors.background};
+    height: 100vh;
+    width: 100vw;
   }
 
   #root {
-    overflow-x: hidden;
     width: 100%;
-    min-height: 100vh;
+    height: 100%;
 
     background: ${({ theme, noBg }) =>
       noBg

diff --git a/apps/view/src/components/main-widget-container.tsx b/apps/view/src/components/main-widget-container.tsx
@@ -1,6 +1,8 @@
 import { Transient } from '@dash/common';
 import { motion, Variants } from 'framer-motion';
 import { FC, useEffect } from 'react';
+import SimpleBar from 'simplebar-react';
+import 'simplebar-react/dist/simplebar.min.css';
 import { default as styled } from 'styled-components';
 import { GlassPane } from '../components/glass-pane';
 import { useIsMobile } from '../services/mobile';
@@ -33,24 +35,28 @@ const itemVariants: Variants = {
   },
 };
 
-const FlexContainer = styled(motion.div)<Transient<{ mobile: boolean }>>`
-  width: ${({ $mobile }) => ($mobile ? 'calc(100vw - 50px)' : '92vw')};
-  min-height: ${({ $mobile }) => ($mobile ? 'calc(100vh - 50px)' : '86vh')};
-  margin: ${({ $mobile }) => ($mobile ? '50px' : '7vh')} auto
-    ${({ $mobile }) => ($mobile ? '50px' : '7vh')} auto;
+const ContentContainer = styled.div<Transient<{ mobile: boolean }>>`
+  width: 100vw;
+  max-width: 100%;
+  min-height: 100vh;
+  /* prettier-ignore */
+  padding: ${({ $mobile }) => ($mobile ? '50px' : '7vh')} ${({ $mobile }) =>
+    $mobile ? '25px' : '4vw'};
+  display: flex;
+`;
 
+const FlexContainer = styled(motion.div)<Transient<{ mobile: boolean }>>`
+  width: 100%;
+  min-height: 100%;
   display: flex;
   flex-flow: row wrap;
   column-gap: 40px;
   row-gap: ${({ $mobile }) => ($mobile ? '40px' : '70px')};
 `;
 
 const ErrorContainer = styled(motion.div)<Transient<{ mobile: boolean }>>`
-  width: ${({ $mobile }) => ($mobile ? 'calc(100vw - 50px)' : '92vw')};
-  min-height: ${({ $mobile }) => ($mobile ? 'calc(100vh - 50px)' : '86vh')};
-  margin: ${({ $mobile }) => ($mobile ? '50px' : '7vh')} auto
-    ${({ $mobile }) => ($mobile ? '50px' : '7vh')} auto;
-
+  width: 100%;
+  min-height: 100%;
   display: flex;
   flex-flow: row wrap;
   column-gap: 40px;
@@ -90,17 +96,21 @@ export const MainWidgetContainer: FC = () => {
 
   if (error) {
     return (
-      <ErrorContainer
-        variants={containerVariants}
-        initial='initial'
-        animate='animate'
-        exit='exit'
-        $mobile={isMobile}
-      >
-        <GlassPane variants={itemVariants} grow={0} minWidth={500}>
-          <ErrorWidget errorText={error.text} />
-        </GlassPane>
-      </ErrorContainer>
+      <SimpleBar style={{ height: '100%' }}>
+        <ContentContainer $mobile={isMobile}>
+          <ErrorContainer
+            variants={containerVariants}
+            initial='initial'
+            animate='animate'
+            exit='exit'
+            $mobile={isMobile}
+          >
+            <GlassPane variants={itemVariants} grow={0} minWidth={500}>
+              <ErrorWidget errorText={error.text} />
+            </GlassPane>
+          </ErrorContainer>
+        </ContentContainer>
+      </SimpleBar>
     );
   }
 
@@ -151,48 +161,50 @@ export const MainWidgetContainer: FC = () => {
   };
 
   return (
-    <>
-      <FlexContainer
-        $mobile={isMobile}
-        variants={containerVariants}
-        initial='initial'
-        animate='animate'
-        exit='exit'
-      >
-        {config.widget_list.map(widget => {
-          const currentConfig = configs[widget];
-
-          return (
-            <GlassPane
-              key={widget}
-              variants={itemVariants}
-              layoutId={`widget_${widget}`}
-              grow={currentConfig.grow}
-              minWidth={currentConfig.minWidth}
-            >
-              <currentConfig.Widget
-                // @ts-ignore
-                data={currentConfig.data}
-                // @ts-ignore
-                load={currentConfig.load}
-                config={config}
-              />
-            </GlassPane>
-          );
-        })}
-      </FlexContainer>
-
-      {config.show_dash_version === 'bottom_right' && (
-        <ThemedText
-          style={{
-            position: 'fixed',
-            right: '10px',
-            bottom: '10px',
-          }}
+    <SimpleBar style={{ height: '100%' }}>
+      <ContentContainer $mobile={isMobile}>
+        <FlexContainer
+          $mobile={isMobile}
+          variants={containerVariants}
+          initial='initial'
+          animate='animate'
+          exit='exit'
         >
-          {osData?.dash_version}
-        </ThemedText>
-      )}
-    </>
+          {config.widget_list.map(widget => {
+            const currentConfig = configs[widget];
+
+            return (
+              <GlassPane
+                key={widget}
+                variants={itemVariants}
+                layoutId={`widget_${widget}`}
+                grow={currentConfig.grow}
+                minWidth={currentConfig.minWidth}
+              >
+                <currentConfig.Widget
+                  // @ts-ignore
+                  data={currentConfig.data}
+                  // @ts-ignore
+                  load={currentConfig.load}
+                  config={config}
+                />
+              </GlassPane>
+            );
+          })}
+        </FlexContainer>
+
+        {config.show_dash_version === 'bottom_right' && (
+          <ThemedText
+            style={{
+              position: 'fixed',
+              right: '10px',
+              bottom: '10px',
+            }}
+          >
+            {osData?.dash_version}
+          </ThemedText>
+        )}
+      </ContentContainer>
+    </SimpleBar>
   );
 };
diff --git a/apps/view/src/index.css b/apps/view/src/index.css
@@ -136,9 +136,3 @@ table {
   border-collapse: collapse;
   border-spacing: 0;
 }
-
-html,
-body {
-  height: unset !important;
-  width: unset !important;
-}
diff --git a/package.json b/package.json
@@ -68,6 +68,7 @@
     "regenerator-runtime": "0.13.11",
     "rxjs": "7.8.1",
     "sass": "1.63.6",
+    "simplebar-react": "3.2.4",
     "socket.io": "4.7.2",
     "socket.io-client": "4.7.2",
     "store": "2.0.12",

diff --git a/yarn.lock b/yarn.lock
@@ -9743,6 +9743,22 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/lodash-es@npm:^4.17.6":
+  version: 4.17.12
+  resolution: "@types/lodash-es@npm:4.17.12"
+  dependencies:
+    "@types/lodash": "*"
+  checksum: 990a99e2243bebe9505cb5ad19fbc172beb4a8e00f9075c99fc06c46c2801ffdb40bc2867271cf580d5f48994fc9fb076ec92cd60a20e621603bf22114e5b077
+  languageName: node
+  linkType: hard
+
+"@types/lodash@npm:*":
+  version: 4.14.202
+  resolution: "@types/lodash@npm:4.14.202"
+  checksum: a91acf3564a568c6f199912f3eb2c76c99c5a0d7e219394294213b3f2d54f672619f0fde4da22b29dc5d4c31457cd799acc2e5cb6bd90f9af04a1578483b6ff7
+  languageName: node
+  linkType: hard
+
 "@types/mdast@npm:^3.0.0":
   version: 3.0.10
   resolution: "@types/mdast@npm:3.0.10"
@@ -12476,6 +12492,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"can-use-dom@npm:^0.1.0":
+  version: 0.1.0
+  resolution: "can-use-dom@npm:0.1.0"
+  checksum: 488fc94c40f2fcce46ebd41abf17ef0449acf0d6b145116036cd592a8e977e5729918d4b3b7c642ce7b1f5b83d330ade39a172cf6b6ef91093785991a868b308
+  languageName: node
+  linkType: hard
+
 "caniuse-api@npm:^3.0.0":
   version: 3.0.0
   resolution: "caniuse-api@npm:3.0.0"
@@ -14241,6 +14264,7 @@ __metadata:
     rxjs: 7.8.1
     sass: 1.63.6
     semantic-release-plus: 20.0.0
+    simplebar-react: 3.2.4
     socket.io: 4.7.2
     socket.io-client: 4.7.2
     store: 2.0.12
@@ -20268,7 +20292,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"lodash-es@npm:^4.17.15":
+"lodash-es@npm:^4.17.15, lodash-es@npm:^4.17.21":
   version: 4.17.21
   resolution: "lodash-es@npm:4.17.21"
   checksum: 05cbffad6e2adbb331a4e16fbd826e7faee403a1a04873b82b42c0f22090f280839f85b95393f487c1303c8a3d2a010048bf06151a6cbe03eee4d388fb0a12d2
@@ -26739,6 +26763,29 @@ __metadata:
   languageName: node
   linkType: hard
 
+"simplebar-core@npm:^1.2.4":
+  version: 1.2.4
+  resolution: "simplebar-core@npm:1.2.4"
+  dependencies:
+    "@types/lodash-es": ^4.17.6
+    can-use-dom: ^0.1.0
+    lodash: ^4.17.21
+    lodash-es: ^4.17.21
+  checksum: 9bef0a29cc2ddba488776bc05eac6cbf3daa6e72fbcb54ff288cbbb2e64cadf22cc378ac3627f86c32c29ddf9f63d7accf8772e4013318aaba353625869ae866
+  languageName: node
+  linkType: hard
+
+"simplebar-react@npm:3.2.4":
+  version: 3.2.4
+  resolution: "simplebar-react@npm:3.2.4"
+  dependencies:
+    simplebar-core: ^1.2.4
+  peerDependencies:
+    react: ">=16.8.0"
+  checksum: 0355a7ccb99114de99c84c7e548058f299c716d3fb2ac769bdb83138da19e75936f84698b9f4134d17be84322845a4290093f37b2f3c3ee2299e3bd8863c6196
+  languageName: node
+  linkType: hard
+
 "sirv@npm:^1.0.7":
   version: 1.0.19
   resolution: "sirv@npm:1.0.19"