Merge pull request #457 from AllenInstitute/feature/filelist-scrollable-styling

Update scroll styling for file lists

Author: aswallace

packages/core/components/DirectoryTree/DirectoryTree.module.css

@@ -32,6 +32,11 @@
     list-style: none;
 }
 
+/* Add padding to emphasize at end of list */
+.scroll-container li:last-of-type {
+    padding-bottom: 30px;
+}
+
 .error-message {
     position: absolute;
     top: 50%;
@@ -46,3 +51,15 @@
 .error-message p {
     margin: 0;
 }
+
+.vertical-gradient {
+    background-image: linear-gradient(to bottom, transparent, var(--secondary-background-color));
+    position: absolute;
+    height: 60px;
+    width: 100%;
+    pointer-events: none;
+    opacity: 1;
+    /* Should cover FileList gradient (10) but not file count (99) or aggregate info (999)*/
+    z-index: 50;
+    bottom: 0;
+}

packages/core/components/DirectoryTree/index.tsx

@@ -75,6 +75,7 @@ export default function DirectoryTree(props: FileListProps) {
     return (
         <div className={classNames(props.className, styles.container)}>
             <RootLoadingIndicator visible={isLoading} />
+            <div className={styles.verticalGradient} />
             <ul
                 className={styles.scrollContainer}
                 role="tree"

packages/core/components/FileList/FileList.module.css

@@ -8,18 +8,7 @@
 
 .list {
     height: calc(100% - 3px);
-}
-
-.horizontal-overflow::after {
-    background-image: linear-gradient(to right, transparent, var(--secondary-background-color));
-    bottom: 0;
-    content: " ";
-    height: 100%;
-    right: 0;
-    position: absolute;
-    pointer-events: none;
-    width: 60px;
-    z-index: 11;
+    position: relative;
 }
 
 .row-count-display {
@@ -35,3 +24,61 @@
     margin-top: var(--row-count-margin-top);
     margin-block-end: 0;
 }
+
+.horizontal-gradient {
+    background-image: linear-gradient(to right, transparent, rgba(0, 0, 0, 0.9));
+    position: absolute;
+    height: calc(100% - var(--scrollbar-size));
+    width: 60px;
+    pointer-events: none;
+    opacity: 1;
+    z-index: 10;
+    right: 0;
+}
+
+/* For browsers that always show scrollbar, adjust shadow to avoid covering */
+@supports selector(::-webkit-scrollbar) {
+    .vertical-gradient {
+        background-image: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.9));
+        position: absolute;
+        height: 50px;
+        width: calc(100% - var(--scrollbar-size));
+        pointer-events: none;
+        opacity: 1;
+        z-index: 10;
+        bottom: 0;
+    }
+
+    .vertical-gradient-cropped {
+        bottom: var(--scrollbar-size) !important;
+    }
+
+    .horizontal-gradient-cropped {
+        right: calc(var(--scrollbar-size)) !important;
+    }
+}
+
+@supports (scrollbar-color: auto) {
+    .vertical-gradient {
+        background-image: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.9));
+        position: absolute;
+        height: 50px;
+        width: 100%;
+        pointer-events: none;
+        opacity: 1;
+        z-index: 10;
+        bottom: 0;
+    }
+
+    .vertical-gradient-cropped {
+        position: absolute;
+        bottom: 0 !important;
+        width: 100% !important;
+    }
+
+    .horizontal-gradient-cropped {
+        position: absolute;
+        right: 0 !important;
+        height: 100% !important;
+    }
+}

packages/core/components/FileList/index.tsx

@@ -47,6 +47,7 @@ const TALL_ROW_HEIGHT = 19;
  */
 export default function FileList(props: FileListProps) {
     const [totalCount, setTotalCount] = React.useState<number | null>(null);
+    const [lastVisibleRowIndex, setLastVisibleRowIndex] = React.useState<number>(0);
     const fileView = useSelector(selection.selectors.getFileView);
     const fileSelection = useSelector(selection.selectors.getFileSelection);
     const fileGridColumnCount = useSelector(selection.selectors.getFileGridColCount);
@@ -74,6 +75,14 @@ export default function FileList(props: FileListProps) {
     const calculatedHeight = Math.min(MAX_NON_ROOT_HEIGHT, dataDrivenHeight);
     const height = isRoot ? measuredHeight : calculatedHeight;
 
+    const totalRows = Math.ceil(
+        (totalCount || DEFAULT_TOTAL_COUNT) / (fileView === FileView.LIST ? 1 : fileGridColumnCount)
+    );
+    // complement to isColumnWidthOverflowing
+    const isRowHeightOverflowing = totalRows * rowHeight > height;
+    // hide overlay when we reach the bottom of the list
+    const atEndOfList = lastVisibleRowIndex === totalRows - 1;
+
     const listRef = React.useRef<FixedSizeList | null>(null);
     const gridRef = React.useRef<FixedSizeGrid | null>(null);
     const outerRef = React.useRef<HTMLDivElement | null>(null);
@@ -196,6 +205,7 @@ export default function FileList(props: FileListProps) {
                             const overscanStopIndex =
                                 overscanRowStopIndex * (overscanColumnStopIndex + 1);
 
+                            setLastVisibleRowIndex(visibleRowStopIndex);
                             onItemsRendered({
                                 // call onItemsRendered from InfiniteLoader
                                 visibleStartIndex,
@@ -216,7 +226,10 @@ export default function FileList(props: FileListProps) {
                                     itemSize={rowHeight} // row height
                                     height={height} // height of the list itself; affects number of rows rendered at any given time
                                     itemCount={totalCount || DEFAULT_TOTAL_COUNT}
-                                    onItemsRendered={onItemsRendered}
+                                    onItemsRendered={(renderProps) => {
+                                        setLastVisibleRowIndex(renderProps.visibleStopIndex);
+                                        onItemsRendered(renderProps);
+                                    }}
                                     outerElementType={Header}
                                     outerRef={outerRef}
                                     ref={callbackRefList}
@@ -262,14 +275,24 @@ export default function FileList(props: FileListProps) {
     return (
         <div className={classNames(styles.container, className)}>
             <div
-                className={classNames(styles.list, {
-                    [styles.horizontalOverflow]: isColumnWidthOverflowing,
-                })}
+                className={classNames(styles.list)}
                 style={{
                     height: isRoot ? undefined : `${calculatedHeight}px`,
                 }}
                 ref={measuredNodeRef}
             >
+                <div
+                    className={classNames({
+                        [styles.horizontalGradient]: isColumnWidthOverflowing,
+                        [styles.horizontalGradientCropped]: isRowHeightOverflowing,
+                    })}
+                ></div>
+                <div
+                    className={classNames({
+                        [styles.verticalGradient]: isRowHeightOverflowing && !atEndOfList,
+                        [styles.verticalGradientCropped]: isColumnWidthOverflowing,
+                    })}
+                ></div>
                 {content}
             </div>
             <p className={styles.rowCountDisplay}>

packages/core/styles/global.css

@@ -34,15 +34,15 @@ main {
 @supports selector(::-webkit-scrollbar) {
     body *::-webkit-scrollbar {
         background-color: var(--accent-dark);
-        width: 12px;
-        height: 12px;
+        width: var(--scrollbar-size);
+        height: var(--scrollbar-size);
     }
     body *::-webkit-scrollbar-corner {
         background-color: var(--accent-dark);
     }
     body *::-webkit-scrollbar-thumb {
         background-color: var(--medium-grey);
-        border-radius: 8px
+        border-radius: 8px;
     }
 }
 
@@ -94,6 +94,7 @@ body {
     --margin: 12px;
     --transition-duration: 0.5s;
     --font-family: 'Open Sans', sans-serif;
+    --scrollbar-size: 12px;
 }
 
 h1 {