From 1062145fe7a904fc444b2bcd57377e009cac3fbb Mon Sep 17 00:00:00 2001
From: Ivan Shcheklein <shcheklein@gmail.com>
Date: Fri, 11 Nov 2022 18:40:36 -0800
Subject: [PATCH] feat/2731: make plots ribbon sticky on scroll

---
 webview/src/plots/components/ribbon/Ribbon.tsx     | 14 +++++++++++++-
 .../src/plots/components/ribbon/styles.module.scss | 10 ++++++++++
 .../components/webviewWrapper/WebviewWrapper.tsx   |  1 +
 .../components/webviewWrapper/styles.module.scss   |  3 ++-
 4 files changed, 26 insertions(+), 2 deletions(-)

diff --git a/webview/src/plots/components/ribbon/Ribbon.tsx b/webview/src/plots/components/ribbon/Ribbon.tsx
index c81125410e..ab21c21925 100644
--- 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
index 1bd59ec8b2..a1fd8e32f5 100644
--- 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
index 64197cf737..5397b3854f 100644
--- 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
index 289632f4b7..b6100496d1 100644
--- 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%;
 }