Introduce DapperScrollbars (#12961)

* Install new scrollbars library * First pass at new wrapper for scrollbars * Replace FancyScrollbars with DapperScrollbars in Page components * Polish DapperScrollbars * Update dropdown component to use DapperScrollbars * Update a couple dropdowns to conform to new constraints * Update legend to use Dapper Scrollbars * Fix linting error * Implement DapperScrollbars in overlays * Ensure proper functionality in page contents * Use fixed sizing for overlay scrollbars * Updoot
influxdata · Mar 28, 2019 · 133b131 · 133b131
1 parent f9c3086
commit 133b131
Show file tree

Hide file tree

Showing 14 changed files with 317 additions and 76 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -26,6 +26,7 @@
 1. [12793](https://github.com/influxdata/influxdb/pull/12793): Fix task creation error when switching schedule types.
 1. [12805](https://github.com/influxdata/influxdb/pull/12805): Fix hidden horizonal scrollbars in flux raw data view
 1. [12827](https://github.com/influxdata/influxdb/pull/12827): Fix screen tearing bug in Raw Data View
+1. [12961](https://github.com/influxdata/influxdb/pull/12961): Fix scroll clipping in graph legends & dropdown menus
 1. [12959](https://github.com/influxdata/influxdb/pull/12959): Fix routing loop
 
 ### UI Improvements

diff --git a/ui/package-lock.json b/ui/package-lock.json
diff --git a/ui/package.json b/ui/package.json
@@ -177,6 +177,7 @@
     "react-resize-detector": "^2.3.0",
     "react-router": "^3.0.2",
     "react-router-redux": "^4.0.8",
+    "react-scrollbars-custom": "^4.0.0-alpha.8",
     "react-tooltip": "^3.2.1",
     "react-virtualized": "^9.18.5",
     "redux": "^4.0.0",

diff --git a/ui/src/clockface/components/dropdowns/Dropdown.scss b/ui/src/clockface/components/dropdowns/Dropdown.scss
@@ -46,7 +46,6 @@
   line-height: 12px;
   font-weight: 600;
   color: fade-out($g20-white, 0.18);
-  white-space: nowrap;
   position: relative;
   text-align: left;
 
@@ -64,13 +63,21 @@
     cursor: pointer;
   }
 
+  .dropdown--action & {
+    padding-left: 11px;
+  }
+}
+
+.dropdown-item--children {
   .dropdown-wrap & {
     word-break: break-all;
     white-space: pre-wrap;
   }
 
-  .dropdown--action & {
-    padding-left: 11px;
+  .dropdown-truncate & {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
 }
 
@@ -150,8 +157,7 @@
   $dividerA,
   $dividerB,
   $dividerText,
-  $scrollA,
-  $scrollB
+  $checkbox
 ) {
   @include gradient-h($backgroundA, $backgroundB);
 
@@ -167,13 +173,7 @@
     background-color: $dividerA;
   }
   .dropdown-item--checkbox:after {
-    background-color: $scrollA;
-  }
-  .fancy-scroll--thumb-h {
-    @include gradient-h($scrollA, $scrollB);
-  }
-  .fancy-scroll--thumb-v {
-    @include gradient-v($scrollA, $scrollB);
+    background-color: $checkbox;
   }
 }
 
@@ -186,8 +186,7 @@
     $c-amethyst,
     $c-ocean,
     $c-potassium,
-    $c-neutrino,
-    $c-hydrogen
+    $c-neutrino
   );
 }
 
@@ -200,8 +199,7 @@
     $c-sapphire,
     $c-ocean,
     $c-laser,
-    $c-neutrino,
-    $c-hydrogen
+    $c-neutrino
   );
 }
 
@@ -214,8 +212,7 @@
     $c-ocean,
     $c-viridian,
     $c-krypton,
-    $c-neutrino,
-    $c-krypton
+    $c-neutrino
   );
 }
 
@@ -228,12 +225,6 @@
     $g0-obsidian,
     $g2-kevlar,
     $g11-sidewalk,
-    $c-pool,
-    $c-comet
+    $c-pool
   );
 }
-
-/* TODO: Make fancyscroll more customizable */
-.dropdown--menu-container .fancy-scroll--track-h {
-  display: none;
-}
diff --git a/ui/src/clockface/components/dropdowns/Dropdown.tsx b/ui/src/clockface/components/dropdowns/Dropdown.tsx
@@ -1,13 +1,13 @@
 // Libraries
-import React, {Component, CSSProperties, MouseEvent} from 'react'
+import React, {Component, MouseEvent} from 'react'
 import classnames from 'classnames'
 
 // Components
 import {ClickOutside} from 'src/shared/components/ClickOutside'
 import DropdownDivider from 'src/clockface/components/dropdowns/DropdownDivider'
 import DropdownItem from 'src/clockface/components/dropdowns/DropdownItem'
 import DropdownButton from 'src/clockface/components/dropdowns/DropdownButton'
-import FancyScrollbar from 'src/shared/components/fancy_scrollbar/FancyScrollbar'
+import DapperScrollbars from 'src/shared/components/dapperScrollbars/DapperScrollbars'
 import WaitingText from 'src/shared/components/WaitingText'
 
 // Types
@@ -26,30 +26,36 @@ export enum DropdownMode {
   Radio = 'radio',
 }
 
-interface OwnProps {
+interface ThumbColors {
+  start: string
+  stop: string
+}
+
+interface PassedProps {
   children: JSX.Element[]
   onChange: (value: any) => void
+  selectedID?: string
+  widthPixels?: number
+  menuWidthPixels?: number
+  menuHeader?: JSX.Element
+  icon?: IconFont
+  customClass?: string
 }
 
-interface DefaultProps {
-  buttonTestID?: string
-  selectedID?: string
+export interface DefaultProps {
   buttonColor?: ComponentColor
   buttonSize?: ComponentSize
-  menuColor?: DropdownMenuColors
   status?: ComponentStatus
-  widthPixels?: number
-  icon?: IconFont
-  wrapText?: boolean
-  customClass?: string
   maxMenuHeight?: number
+  menuColor?: DropdownMenuColors
   mode?: DropdownMode
   titleText?: string
-  menuHeader?: JSX.Element
+  wrapMenuText?: boolean
   testID?: string
+  buttonTestID?: string
 }
 
-export type Props = OwnProps & DefaultProps
+export type Props = PassedProps & DefaultProps
 
 interface State {
   expanded: boolean
@@ -61,11 +67,11 @@ class Dropdown extends Component<Props, State> {
     buttonColor: ComponentColor.Default,
     buttonSize: ComponentSize.Small,
     status: ComponentStatus.Default,
-    wrapText: false,
     maxMenuHeight: 250,
     menuColor: DropdownMenuColors.Sapphire,
     mode: DropdownMode.Radio,
     titleText: '',
+    wrapMenuText: false,
     testID: 'dropdown',
     buttonTestID: 'dropdown-button',
   }
@@ -110,16 +116,17 @@ class Dropdown extends Component<Props, State> {
       buttonColor,
       buttonSize,
       status,
-      wrapText,
       customClass,
       mode,
+      wrapMenuText,
     } = this.props
 
     return classnames(
       `dropdown dropdown-${buttonSize} dropdown-${buttonColor}`,
       {
         disabled: status === ComponentStatus.Disabled,
-        'dropdown-wrap': wrapText,
+        'dropdown-wrap': wrapMenuText,
+        'dropdown-truncate': !wrapMenuText,
         [customClass]: customClass,
         [`dropdown--${mode}`]: mode,
       }
@@ -178,6 +185,8 @@ class Dropdown extends Component<Props, State> {
     const {
       selectedID,
       maxMenuHeight,
+      widthPixels,
+      menuWidthPixels,
       menuHeader,
       menuColor,
       children,
@@ -190,15 +199,32 @@ class Dropdown extends Component<Props, State> {
       return null
     }
 
+    let width = '100%'
+
+    if (widthPixels) {
+      width = `${widthPixels}px`
+    }
+
+    if (menuWidthPixels) {
+      width = `${menuWidthPixels}px`
+    }
+
+    const {start, stop} = this.thumbColorsFromTheme
+
     return (
       <div
         className={`dropdown--menu-container dropdown--${menuColor}`}
-        style={this.menuStyle}
+        style={{width}}
       >
-        <FancyScrollbar
+        <DapperScrollbars
+          style={{
+            maxWidth: '100%',
+            maxHeight: `${maxMenuHeight}px`,
+          }}
+          autoSize={true}
           autoHide={false}
-          autoHeight={true}
-          maxHeight={maxMenuHeight}
+          thumbStartColor={start}
+          thumbStopColor={stop}
         >
           <div
             className="dropdown--menu"
@@ -226,28 +252,32 @@ class Dropdown extends Component<Props, State> {
               }
             })}
           </div>
-        </FancyScrollbar>
+        </DapperScrollbars>
       </div>
     )
   }
 
-  private get menuStyle(): CSSProperties {
-    const {wrapText, widthPixels} = this.props
-
-    let containerWidth = '100%'
-
-    if (widthPixels) {
-      containerWidth = `${widthPixels}px`
-    }
-
-    if (wrapText && widthPixels) {
-      return {
-        width: containerWidth,
-      }
-    }
-
-    return {
-      minWidth: containerWidth,
+  private get thumbColorsFromTheme(): ThumbColors {
+    const {menuColor} = this.props
+
+    switch (menuColor) {
+      case DropdownMenuColors.Amethyst:
+      case DropdownMenuColors.Sapphire:
+        return {
+          start: '#BEF0FF',
+          stop: '#6BDFFF',
+        }
+      case DropdownMenuColors.Malachite:
+        return {
+          start: '#BEF0FF',
+          stop: '#A5F3B4',
+        }
+      default:
+      case DropdownMenuColors.Onyx:
+        return {
+          start: '#22ADF6',
+          stop: '#9394FF',
+        }
     }
   }
 

diff --git a/ui/src/clockface/components/overlays/Overlay.tsx b/ui/src/clockface/components/overlays/Overlay.tsx
@@ -7,7 +7,7 @@ import OverlayContainer from 'src/clockface/components/overlays/OverlayContainer
 import OverlayHeading from 'src/clockface/components/overlays/OverlayHeading'
 import OverlayBody from 'src/clockface/components/overlays/OverlayBody'
 import OverlayFooter from 'src/clockface/components/overlays/OverlayFooter'
-import FancyScrollbar from 'src/shared/components/fancy_scrollbar/FancyScrollbar'
+import DapperScrollbars from 'src/shared/components/dapperScrollbars/DapperScrollbars'
 
 // Styles
 import 'src/clockface/components/overlays/Overlay.scss'
@@ -59,15 +59,16 @@ class Overlay extends Component<Props, State> {
 
   public render() {
     return (
-      <FancyScrollbar
+      <DapperScrollbars
         className={this.overlayClass}
         thumbStartColor="#ffffff"
         thumbStopColor="#C9D0FF"
         autoHide={false}
+        autoSize={false}
       >
         {this.childContainer}
         <div className="overlay--mask" />
-      </FancyScrollbar>
+      </DapperScrollbars>
     )
   }