Panel shadow on scroll

questdb · Oct 12, 2023 · 5abf62b · 5abf62b
1 parent f8ea99a
commit 5abf62b
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 10 deletions.
diff --git a/packages/web-console/src/components/Panel/header.tsx b/packages/web-console/src/components/Panel/header.tsx
@@ -28,7 +28,7 @@ import styled from "styled-components"
 import { color } from "../../utils"
 import { Text } from "../../components/Text"
 
-export const Root = styled.div`
+export const Root = styled.div<{ shadow?: boolean }>`
   position: relative;
   display: flex;
   justify-content: space-between;
@@ -38,6 +38,12 @@ export const Root = styled.div`
   background: ${color("backgroundLighter")};
   border-top: 1px solid transparent;
   z-index: 5;
+
+  ${({ shadow }) =>
+    shadow &&
+    `
+      box-shadow: 0 2px 10px 0 rgba(23, 23, 23, 0.65)
+  `}
 `
 
 const Title = styled(Text)`
@@ -51,11 +57,13 @@ const Title = styled(Text)`
 export const Header = ({
   title,
   afterTitle,
+  shadow,
 }: {
   title: React.ReactNode
   afterTitle?: React.ReactNode
+  shadow?: boolean
 }) => (
-  <Root>
+  <Root shadow={shadow}>
     <Title color="foreground">{title}</Title>
     {afterTitle}
   </Root>

diff --git a/packages/web-console/src/scenes/Schema/index.tsx b/packages/web-console/src/scenes/Schema/index.tsx
@@ -113,18 +113,13 @@ const Schema = ({
   const { updateSettings } = useLocalStorage()
   const dispatch = useDispatch()
   const { appendQuery } = useEditor()
+  const [scrollAtTop, setScrollAtTop] = useState(false)
+  const scrollerRef = useRef<HTMLDivElement | null>(null)
 
   const handleChange = useCallback((name: string) => {
     setOpened(name)
   }, [])
 
-  const handleScrollingStateChange = useCallback(
-    (isScrolling) => {
-      setIsScrolling(isScrolling)
-    },
-    [setIsScrolling],
-  )
-
   const listItemContent = useCallback(
     (index: number) => {
       if (tables) {
@@ -213,6 +208,10 @@ const Schema = ({
     })
   }, [errorRef, fetchTables])
 
+  useEffect(() => {
+    setScrollAtTop(scrollerRef.current?.scrollTop === 0)
+  }, [isScrolling])
+
   return (
     <Wrapper ref={innerRef} {...rest}>
       <Panel.Header
@@ -236,6 +235,7 @@ const Schema = ({
             )}
           </div>
         }
+        shadow={!scrollAtTop}
       />
       <Content _loading={loading}>
         {loading ? (
@@ -244,9 +244,10 @@ const Schema = ({
           <LoadingError error={loadingError} />
         ) : (
           <VirtualList
-            isScrolling={handleScrollingStateChange}
+            isScrolling={setIsScrolling}
             itemContent={listItemContent}
             totalCount={tables?.length}
+            scrollerRef={(ref) => (scrollerRef.current = ref as HTMLDivElement)}
           />
         )}
         {!loading && <FlexSpacer />}