Scrollbar fixes (#4628)

* fix/update scrollbars * undo rename * update scrollable * lint
voxel51 · Aug 8, 2024 · 3a46ef6 · 3a46ef6
1 parent f352551
commit 3a46ef6
Show file tree

Hide file tree

Showing 17 changed files with 164 additions and 96 deletions.
diff --git a/app/packages/app/src/components/Setup.tsx b/app/packages/app/src/components/Setup.tsx
@@ -7,7 +7,7 @@ import {
   useTheme,
 } from "@fiftyone/components";
 import { isNotebook } from "@fiftyone/state";
-import { isElectron, scrollbarStyles } from "@fiftyone/utilities";
+import { isElectron, styles } from "@fiftyone/utilities";
 import { animated, useSpring } from "@react-spring/web";
 import React, { useState } from "react";
 import { useRecoilValue } from "recoil";
@@ -40,7 +40,7 @@ const Code = styled.pre`
   border-radius: 3px;
   overflow: auto;
 
-  ${scrollbarStyles}
+  ${styles.scrollbarStyles}
 `;
 
 const port = (() => {
@@ -129,7 +129,7 @@ const SetupWrapper = styled.div`
   background: ${({ theme }) => theme.background.level2};
   border-top: 1px solid ${({ theme }) => theme.primary.plainBorder};
 
-  ${scrollbarStyles};
+  ${styles.scrollbarStyles}
 `;
 
 const SetupContainer = styled.div`

diff --git a/app/packages/components/src/scrollable.module.css b/app/packages/components/src/scrollable.module.css
@@ -2,18 +2,35 @@
   overflow: auto;
   overscroll-behavior: contain;
 
-  --light-color: var(--fo-palette-text-tertiary);
-  --dark-color: var(--fo-palette-background-level2);
+  --scrollbar-color: var(--fo-palette-text-tertiary);
+}
+
+@-moz-document url-prefix() {
+  .scrollable {
+    scrollbar-color: var(--scrollbar-color) transparent;
+    scrollbar-width: thin;
+  }
+}
+
+.scrollable::-webkit-scrollbar {
+  height: 14px;
+  width: 14px;
+}
+
+.scrollable::-webkit-scrollbar-corner {
+  background: transparent;
 }
 
 .scrollable::-webkit-scrollbar-track {
+  box-shadow: inset 0 0 14px 14px transparent;
+  height: 14px;
   width: 14px;
-  box-shadow: inset 0 0 14px 14px var(--dark-color);
 }
 
 .scrollable::-webkit-scrollbar-thumb {
-  box-shadow: inset 0 0 10px 10px var(--light-color);
+  border: solid 3px transparent;
   border-radius: 0;
+  box-shadow: inset 0 0 8px 8px var(--scrollbar-color);
 }
 
 .scrollableSm::-webkit-scrollbar {

diff --git a/app/packages/core/src/components/Grid/Grid.module.css b/app/packages/core/src/components/Grid/Grid.module.css
@@ -39,7 +39,7 @@
   }
 }
 
-.spotlightLooker {
+.spotlightGrid {
   width: 100%;
   height: 100%;
   display: block;

diff --git a/app/packages/core/src/components/Grid/Grid.tsx b/app/packages/core/src/components/Grid/Grid.tsx
@@ -159,7 +159,7 @@ function Grid() {
 
   useEscape();
 
-  return <div id={id} className={styles.spotlightLooker} data-cy="fo-grid" />;
+  return <div id={id} className={styles.spotlightGrid} data-cy="fo-grid" />;
 }
 
 export default React.memo(Grid);
diff --git a/app/packages/core/src/components/Histogram.tsx b/app/packages/core/src/components/Histogram.tsx
@@ -1,11 +1,7 @@
 import { Loading, useTheme } from "@fiftyone/components";
 import * as fos from "@fiftyone/state";
 import { distribution } from "@fiftyone/state";
-import {
-  DATE_FIELD,
-  DATE_TIME_FIELD,
-  scrollbarStyles,
-} from "@fiftyone/utilities";
+import { DATE_FIELD, DATE_TIME_FIELD, styles } from "@fiftyone/utilities";
 import React, { PureComponent, Suspense, useLayoutEffect } from "react";
 import useMeasure from "react-use-measure";
 import { Bar, BarChart, Tooltip, XAxis, YAxis } from "recharts";
@@ -20,11 +16,12 @@ import {
 import { ContentDiv, ContentHeader } from "./utils";
 
 const Container = styled.div`
-  ${scrollbarStyles}
   overflow-y: hidden;
   overflow-x: auto;
   width: 100%;
   flex: 1;
+
+  ${styles.scrollbarStyles}
 `;
 
 const LIMIT = 200;

diff --git a/app/packages/core/src/components/Sidebar/Sidebar.module.css b/app/packages/core/src/components/Sidebar/Sidebar.module.css
@@ -9,3 +9,13 @@
 .resizeHandle {
   transition: background-color 0.1s ease;
 }
+
+.sidebar {
+  margin-left: 1rem;
+}
+
+@-moz-document url-prefix() {
+  .sidebar {
+    margin-right: 1rem;
+  }
+}
diff --git a/app/packages/core/src/components/Sidebar/Sidebar.tsx b/app/packages/core/src/components/Sidebar/Sidebar.tsx
@@ -1,14 +1,15 @@
 import { Resizable, useTheme } from "@fiftyone/components";
 import * as fos from "@fiftyone/state";
 import { replace, useEventHandler } from "@fiftyone/state";
-import { move } from "@fiftyone/utilities";
+import { move, styles } from "@fiftyone/utilities";
 import { Box } from "@mui/material";
 import { Controller, animated, config } from "@react-spring/web";
 import { default as React, useCallback, useRef, useState } from "react";
 import { useRecoilState, useRecoilValue, useResetRecoilState } from "recoil";
 import styled from "styled-components";
 import SchemaSettings from "../Schema/SchemaSettings";
 import { Filter } from "./Entries";
+import style from "./Sidebar.module.css";
 import ViewSelection from "./ViewSelection";
 
 const MARGIN = 3;
@@ -373,12 +374,13 @@ const SidebarColumn = styled.div`
   overflow-x: hidden;
 
   background: ${({ theme }) => theme.background.sidebar};
+
+  ${styles.scrollbarStyles}
 `;
 
 const Container = animated(styled.div`
   position: relative;
   min-height: 100%;
-  margin: 0 1rem;
   scrollbar-width: none;
 
   & > div {
@@ -732,7 +734,10 @@ const InteractiveSidebar = ({
           down.current && animate(last.current);
         }}
       >
-        <Container style={containerController.springs}>
+        <Container
+          className={style.sidebar}
+          style={containerController.springs}
+        >
           {order.current.map((key) => {
             const entry = items.current[key].entry;
             if (entry.kind === fos.EntryKind.GROUP) {

diff --git a/app/packages/core/src/plugins/SchemaIO/components/JSONView.tsx b/app/packages/core/src/plugins/SchemaIO/components/JSONView.tsx
@@ -1,5 +1,5 @@
 import { JSONViewer } from "@fiftyone/components";
-import { scrollbarStyles } from "@fiftyone/utilities";
+import { styles } from "@fiftyone/utilities";
 import { Stack } from "@mui/material";
 import React from "react";
 import styled from "styled-components";
@@ -36,6 +36,6 @@ const ReactJSONContainer = styled.div`
   background: var(--fo-palette-background-level3);
   border-radius: 4px;
   .react-json-view {
-    ${scrollbarStyles}
+    ${styles.scrollbarStyles}
   }
 `;
diff --git a/app/packages/flashlight/src/index.ts b/app/packages/flashlight/src/index.ts
@@ -1,6 +1,7 @@
 /**
  * Copyright 2017-2024, Voxel51, Inc.
  */
+
 import { MARGIN, NUM_ROWS_PER_SECTION } from "./constants";
 import SectionElement from "./section";
 import {
@@ -22,6 +23,7 @@ import {
   flashlight,
   flashlightContainer,
   flashlightPixels,
+  scrollbar,
 } from "./styles.module.css";
 import tile from "./tile";
 import { argMin, getDims } from "./util";
@@ -64,7 +66,7 @@ export default class Flashlight<K> {
     this.showPixels();
     this.element = document.createElement("div");
     config.elementId && this.element.setAttribute("id", config.elementId);
-    this.element.classList.add(flashlight);
+    this.element.classList.add(flashlight, scrollbar);
     this.element.setAttribute("data-cy", "flashlight");
     this.state = this.getEmptyState(config);
 

diff --git a/app/packages/flashlight/src/styles.module.css b/app/packages/flashlight/src/styles.module.css
@@ -47,30 +47,6 @@
   width: 100%;
   height: 100%;
   overflow: auto;
-
-  --light-color: var(--fo-palette-text-tertiary);
-  --dark-color: var(--fo-palette-background-level2);
-
-  scrollbar-color: var(--light-color) var(--dark-color);
-}
-
-.flashlight::-webkit-scrollbar {
-  width: 16px;
-}
-
-.flashlight::-webkit-scrollbar-track {
-  border: solid 4px transparent var(--light-color);
-}
-
-.flashlight::-webkit-scrollbar-thumb {
-  box-shadow: inset 0 0 10px 10px transparent;
-  border: solid 4px transparent;
-  border-radius: 16px;
-  transition: box-shadow linear 0.5s;
-}
-
-.flashlight:hover::-webkit-scrollbar-thumb {
-  box-shadow: inset 0 0 10px 10px var(--light-color);
 }
 
 .flashlightContainer {
@@ -114,3 +90,35 @@
 .flashlightSection.flashlightSectionHidden > div > div {
   display: none;
 }
+
+.scrollbar {
+  --scrollbar-color: var(--fo-palette-text-tertiary);
+}
+
+@-moz-document url-prefix() {
+  .scrollbar {
+    scrollbar-color: var(--scrollbar-color) transparent;
+    scrollbar-width: thin;
+  }
+}
+
+.scrollbar::-webkit-scrollbar {
+  height: 14px;
+  width: 14px;
+}
+
+.scrollbar::-webkit-scrollbar-corner {
+  background: transparent;
+}
+
+.scrollbar::-webkit-scrollbar-track {
+  box-shadow: inset 0 0 14px 14px transparent;
+  height: 14px;
+  width: 14px;
+}
+
+.scrollbar::-webkit-scrollbar-thumb {
+  border: solid 3px transparent;
+  border-radius: 0;
+  box-shadow: inset 0 0 8px 8px var(--scrollbar-color);
+}
diff --git a/app/packages/spotlight/package.json b/app/packages/spotlight/package.json
@@ -18,9 +18,6 @@
         "dist",
         "README.md"
     ],
-    "dependencies": {
-        "@fiftyone/components": "*"
-    },
     "devDependencies": {
         "@biomejs/biome": "^1.7.1",
         "typescript": "^5.4.5",

diff --git a/app/packages/spotlight/src/styles.module.css b/app/packages/spotlight/src/styles.module.css
@@ -9,29 +9,11 @@
   overflow: auto;
   overscroll-behavior: contain;
 
-  --light-color: var(--fo-palette-text-tertiary);
-  --dark-color: var(--fo-palette-background-level2);
+  --scrollbar-color: var(--fo-palette-text-tertiary);
 }
 
-.spotlightLoaded {
-  background: var(--fo-palette-background-level2);
-}
-
-.spotlight.scrollbar::-webkit-scrollbar-track {
-  width: 14px;
-  box-shadow: inset 0 0 14px 14px var(--dark-color);
-}
-
-.spotlight.scrollbar::-webkit-scrollbar-thumb {
-  box-shadow: inset 0 0 10px 10px var(--light-color);
-  border-radius: 0;
-}
-
-.spotlightSection {
-  position: absolute;
-  display: block;
-  padding-left: 14px;
-  width: 100%;
+.spotlight::-webkit-scrollbar {
+  width: 0;
 }
 
 .spotlightContainer {
@@ -46,6 +28,23 @@
   outline: none;
 }
 
+.spotlightLoaded {
+  background: var(--fo-palette-background-level2);
+}
+
+@-moz-document {
+  .spotlight {
+    scrollbar-width: none;
+  }
+}
+
+.spotlightSection {
+  position: absolute;
+  display: block;
+  padding-left: 14px;
+  width: 100%;
+}
+
 .spotlightRow {
   display: block;
   position: absolute;
@@ -62,3 +61,38 @@
 .spotlightRow.spotlightRowHidden > div > div {
   display: none;
 }
+
+
+/* SCROLLBAR */
+
+.scrollbar {
+  --scrollbar-color: var(--fo-palette-text-tertiary);
+}
+
+@-moz-document url-prefix() {
+  .scrollbar {
+    scrollbar-color: var(--scrollbar-color) transparent;
+    scrollbar-width: thin;
+  }
+}
+
+.scrollbar::-webkit-scrollbar {
+  height: 14px;
+  width: 14px;
+}
+
+.scrollbar::-webkit-scrollbar-corner {
+  background: transparent;
+}
+
+.scrollbar::-webkit-scrollbar-track {
+  box-shadow: inset 0 0 14px 14px transparent;
+  height: 14px;
+  width: 14px;
+}
+
+.scrollbar::-webkit-scrollbar-thumb {
+  border: solid 3px transparent;
+  border-radius: 0;
+  box-shadow: inset 0 0 8px 8px var(--scrollbar-color);
+}
diff --git a/app/packages/spotlight/tsconfig.json b/app/packages/spotlight/tsconfig.json
@@ -6,6 +6,6 @@
     "plugins": [{ "name": "typescript-plugin-css-modules" }],
     "target": "ES2022"
   },
-  "include": ["./src/**/*"],
-  "extends": "../../tsconfig.json"
+  "extends": "../../tsconfig.json",
+  "include": ["./src/**/*"]
 }