feat/2731: make plots ribbon sticky on scroll

iterative · Nov 12, 2022 · 3522711 · 3522711
1 parent 2cfd5ea
commit 3522711
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 2 deletions.
diff --git a/webview/src/plots/components/ribbon/Ribbon.tsx b/webview/src/plots/components/ribbon/Ribbon.tsx
@@ -1,7 +1,9 @@
+import cx from 'classnames'
 import { MessageFromWebviewType } from 'dvc/src/webview/contract'
 import React, { useEffect, useState } from 'react'
 import { useSelector } from 'react-redux'
 import { performOrderedUpdate, reorderObjectList } from 'dvc/src/util/array'
+import { useInView } from 'react-intersection-observer'
 import styles from './styles.module.scss'
 import { RibbonBlock } from './RibbonBlock'
 import { sendMessage } from '../../../shared/vscode'
@@ -12,6 +14,12 @@ import { Lines, Refresh } from '../../../shared/components/icons'
 const MAX_NB_EXP = 7
 
 export const Ribbon: React.FC = () => {
+  const [ref, needsShadow] = useInView({
+    root: document.querySelector('#webview-wrapper'),
+    rootMargin: '-5px',
+    threshold: 0.95
+  })
+
   const revisions = useSelector(
     (state: PlotsState) => state.webview.selectedRevisions
   )
@@ -42,7 +50,11 @@ export const Ribbon: React.FC = () => {
   }
 
   return (
-    <ul className={styles.list} data-testid="ribbon">
+    <ul
+      ref={ref}
+      data-testid="ribbon"
+      className={cx(styles.list, needsShadow && styles.withShadow)}
+    >
       <li className={styles.buttonWrapper}>
         <IconButton
           onClick={selectRevisions}

diff --git a/webview/src/plots/components/ribbon/styles.module.scss b/webview/src/plots/components/ribbon/styles.module.scss
@@ -73,12 +73,22 @@
 
 .list {
   display: flex;
+  position: sticky;
   align-items: center;
   gap: 6px;
   border-bottom: 1px solid $border-color;
   padding: 10px 15px;
   margin: 0;
   flex-wrap: wrap;
+  top: 0;
+  width: 100%;
+  z-index: 100;
+  background-color: var(--vscode-editor-background);
+  transition: box-shadow 0.25s;
+
+  &.withShadow {
+    box-shadow: 0 5px 8px -2px $shadow;
+  }
 }
 
 .buttonWrapper {

diff --git a/webview/src/shared/components/webviewWrapper/WebviewWrapper.tsx b/webview/src/shared/components/webviewWrapper/WebviewWrapper.tsx
@@ -14,6 +14,7 @@ export const WebviewWrapper = ({
 
   return (
     <div
+      id="webview-wrapper"
       className={cx(styles.webviewWrapper, className)}
       style={themeVariables}
       onContextMenu={e => {

diff --git a/webview/src/shared/components/webviewWrapper/styles.module.scss b/webview/src/shared/components/webviewWrapper/styles.module.scss
@@ -1,4 +1,5 @@
 .webviewWrapper {
   width: 100%;
-  height: 100%;
+  height: auto;
+  min-height: 100%;
 }