Make scrollbar styling consistent (#174)

* Update scrollbar styling * Changed math. * fixed stylelint being annoying * revert firefox scrollbar auto * ...eslint
deephaven · Sep 3, 2021 · 7f558e2 · 7f558e2
1 parent 21663a2
commit 7f558e2
Show file tree

Hide file tree

Showing 4 changed files with 64 additions and 61 deletions.
diff --git a/packages/components/src/BaseStyleSheet.scss b/packages/components/src/BaseStyleSheet.scss
@@ -602,31 +602,54 @@ input[type='number']::-webkit-inner-spin-button {
   opacity: 1;
 }
 
-// Scroll Bar styling for webkit and firefox.
+// make width same as monaco scrollbar
 ::-webkit-scrollbar {
-  width: 12px;
-  height: 12px;
-  background-color: rgba($black, 0.1);
-  border-radius: 10px;
+  width: 14px;
+  height: 14px;
 }
 
-::-webkit-scrollbar-corner {
-  background-color: rgba($white, 0.1);
+// style the same as monaco scrollbar
+::-webkit-scrollbar-thumb {
+  background: rgba(var(--scrollbar-color), 0.18);
+  border-radius: 0;
 }
 
 ::-webkit-scrollbar-track {
-  border-radius: 10px;
-  background-color: rgba($black, 0.1);
+  background: transparent;
+  border-radius: 0;
 }
 
-::-webkit-scrollbar-thumb {
-  border-radius: 10px;
-  background-color: rgba($white, 0.3);
+::-webkit-scrollbar-corner {
+  background: rgba(0, 0, 0, 0.1);
+}
+
+::-webkit-scrollbar-track:horizontal {
+  border-top: 1px solid rgba(var(--scrollbar-color), 0.15);
+}
+
+::-webkit-scrollbar-track:vertical {
+  border-left: 1px solid rgba(var(--scrollbar-color), 0.15);
 }
 
 ::-webkit-scrollbar-thumb:hover {
-  border-radius: 10px;
-  background-color: rgba($white, 0.6);
+  background: rgba(var(--scrollbar-color), 0.25);
+}
+
+::-webkit-scrollbar-thumb:active {
+  background: rgba(var(--scrollbar-color), 0.35);
+}
+
+/* stylelint-disable no-descending-specificity */
+:root {
+  --scrollbar-color: 255, 255, 255;
+}
+/* stylelint-enable no-descending-specificity */
+
+// used in inverted color sections, like light modals
+.theme-bg-light {
+  --scrollbar-color: 0, 0, 0;
+
+  scrollbar-color: rgba($black, 0.5) rgba($black, 0.3); // firefox
 }
 
 /********** Monaco Overides *********/

diff --git a/packages/grid/src/GridRenderer.js b/packages/grid/src/GridRenderer.js
@@ -2069,19 +2069,18 @@ class GridRenderer {
       context.fillRect(
         width - rowHeaderWidth - scrollBarSize + scrollBarCasingWidth,
         height - columnHeaderHeight - scrollBarSize + scrollBarCasingWidth,
-        scrollBarSize - scrollBarCasingWidth * 2,
-        scrollBarSize - scrollBarCasingWidth * 2
+        scrollBarSize - scrollBarCasingWidth,
+        scrollBarSize - scrollBarCasingWidth
       );
     }
 
     if (hasHorizontalBar) {
       const x = scrollX;
       const y = height - columnHeaderHeight - hScrollBarSize;
-      const radius = hScrollBarSize * 0.5 - scrollBarCasingWidth;
 
       // scrollbar casing
       context.fillStyle = scrollBarCasingColor;
-      context.fillRect(0, y, barWidth, hScrollBarSize);
+      context.fillRect(0, y, barWidth, hScrollBarSize - scrollBarCasingWidth);
 
       // scrollbar track
       context.fillStyle = isHorizontalBarHover
@@ -2091,7 +2090,7 @@ class GridRenderer {
         0,
         y + scrollBarCasingWidth,
         barWidth,
-        hScrollBarSize - scrollBarCasingWidth * 2
+        hScrollBarSize - scrollBarCasingWidth
       );
 
       // scrollbar thumb
@@ -2102,32 +2101,22 @@ class GridRenderer {
       } else {
         context.fillStyle = scrollBarColor;
       }
-      context.beginPath();
-      context.arc(
-        x + radius,
-        y + radius + scrollBarCasingWidth,
-        radius,
-        Math.PI * 0.5,
-        Math.PI * 1.5
-      );
-      context.arc(
-        x + handleWidth - radius,
-        y + radius + scrollBarCasingWidth,
-        radius,
-        Math.PI * 1.5,
-        Math.PI * 0.5
+
+      context.fillRect(
+        x,
+        y + scrollBarCasingWidth,
+        handleWidth,
+        hScrollBarSize - scrollBarCasingWidth
       );
-      context.fill();
     }
 
     if (hasVerticalBar) {
       const x = width - rowHeaderWidth - vScrollBarSize;
       const y = scrollY;
-      const radius = vScrollBarSize * 0.5 - scrollBarCasingWidth;
 
       // scrollbar casing
       context.fillStyle = scrollBarCasingColor;
-      context.fillRect(x, 0, vScrollBarSize, barHeight);
+      context.fillRect(x, 0, vScrollBarSize - scrollBarCasingWidth, barHeight);
 
       // scrollbar track
       context.fillStyle = isVerticalBarHover
@@ -2136,7 +2125,7 @@ class GridRenderer {
       context.fillRect(
         x + scrollBarCasingWidth,
         0,
-        vScrollBarSize - scrollBarCasingWidth * 2,
+        vScrollBarSize - scrollBarCasingWidth,
         barHeight
       );
 
@@ -2148,22 +2137,13 @@ class GridRenderer {
       } else {
         context.fillStyle = scrollBarColor;
       }
-      context.beginPath();
-      context.arc(
-        x + radius + scrollBarCasingWidth,
-        y + radius,
-        radius,
-        Math.PI,
-        0
-      );
-      context.arc(
-        x + radius + scrollBarCasingWidth,
-        y + handleHeight - radius,
-        radius,
-        0,
-        Math.PI
+
+      context.fillRect(
+        x + scrollBarCasingWidth,
+        y,
+        vScrollBarSize - scrollBarCasingWidth,
+        handleHeight
       );
-      context.fill();
     }
 
     context.translate(-rowHeaderWidth, -columnHeaderHeight);

diff --git a/packages/iris-grid/src/IrisGridTheme.js b/packages/iris-grid/src/IrisGridTheme.js
@@ -54,8 +54,8 @@ export default Object.freeze({
   groupedColumnDividerColor: IrisGridTheme['grouped-column-divider-color'],
   columnHoverBackgroundColor: null,
   headerHorizontalPadding: 12,
-  scrollBarSize: 11,
-  scrollBarHoverSize: 15, // system default scrollbar width is 17
+  scrollBarSize: 13,
+  scrollBarHoverSize: 16, // system default scrollbar width is 17
   minScrollHandleSize: 24,
   rowHeight: 19,
   columnWidth: 100,

diff --git a/packages/iris-grid/src/IrisGridTheme.module.scss b/packages/iris-grid/src/IrisGridTheme.module.scss
@@ -24,13 +24,13 @@ $selection-outline-casing-color: $gray-900;
   row-hover-bg: mix($gray-600, $gray-700, 50%);
   selected-row-hover-bg: rgba($blue, 0.25);
 
-  scroll-bar-bg: $gray-700;
-  scroll-bar-hover-bg: $gray-600;
-  scroll-bar-casing-color: $black;
-  scroll-bar-corner-color: $gray-800;
-  scroll-bar-color: $gray-400;
-  scroll-bar-hover-color: $gray-300;
-  scroll-bar-active-color: $gray-200;
+  scroll-bar-bg: $gray-850;
+  scroll-bar-hover-bg: $gray-800;
+  scroll-bar-casing-color: $gray-600;
+  scroll-bar-corner-color: $gray-850;
+  scroll-bar-color: $gray-500;
+  scroll-bar-hover-color: $gray-400;
+  scroll-bar-active-color: $gray-300;
 
   text-color: $white;
   positive-number-color: $green;