Merge branch 'autohide-scrollbars'

3 files changed, 66 insertions, 136 deletions

diff --git a/app/components/CustomScrollbars.css b/app/components/CustomScrollbars.css
index 074c081209..fb00d1b7cb 100644
--- a/app/components/CustomScrollbars.css
+++ b/app/components/CustomScrollbars.css
@@ -19,4 +19,11 @@
   width: 8px;
   transition: height 0.25s ease-in-out, opacity 0.25s ease-in-out;
   pointer-events: none;
+  opacity: 0;
+}
+
+.custom-scrollbars__thumb--visible {
+  /* thumb appears without animation */
+  transition: height 0.25s ease-in-out;
+  opacity: 1;
 }
\ No newline at end of file
diff --git a/app/components/CustomScrollbars.js b/app/components/CustomScrollbars.js
index 6d0ce96daa..d2f89d5e15 100644
--- a/app/components/CustomScrollbars.js
+++ b/app/components/CustomScrollbars.js
@@ -6,24 +6,43 @@ type ScrollbarUpdateContext = {
   position: boolean,
 };
 
+const AUTOHIDE_TIMEOUT = 1000;
+
 export default class CustomScrollbars extends Component {
   props: {
+    autoHide: boolean,
     thumbInset: { x: number, y: number },
     children: ?React.Element<*>,
   };
 
   static defaultProps = {
+    autoHide: true,
     thumbInset: { x: 2, y: 2 },
   };
 
+  state = {
+    canScroll: false,
+    showScrollIndicators: true,
+  };
+
   _scrollableElement: ?HTMLElement;
   _thumbElement: ?HTMLElement;
+  _autoHideTimer: ?number;
 
   componentDidMount() {
     this._updateScrollbarsHelper({
       position: true,
       size: true
     });
+
+    // show scroll indicators briefly when mounted
+    if(this.props.autoHide) {
+      this._startAutoHide();
+    }
+  }
+
+  componentWillUnmount() {
+    this._stopAutoHide();
   }
 
   componentDidUpdate() {
@@ -34,9 +53,11 @@ export default class CustomScrollbars extends Component {
   }
 
   render() {
+    const showScrollbars = this.state.canScroll && this.state.showScrollIndicators;
+    const thumbAnimationClass = showScrollbars ? ' custom-scrollbars__thumb--visible' : '';
     return (
       <div className="custom-scrollbars">
-        <div className="custom-scrollbars__thumb"
+        <div className={ `custom-scrollbars__thumb ${thumbAnimationClass}` }
           style={{ position: 'absolute', top: 0, right: 0 }}
           ref={ this._onThumbRef }></div>
         <div className="custom-scrollbars__scrollable"
@@ -49,7 +70,6 @@ export default class CustomScrollbars extends Component {
     );
   }
 
-
   _onScrollableRef = (ref) => {
     this._scrollableElement = ref;
   }
@@ -60,6 +80,35 @@ export default class CustomScrollbars extends Component {
 
   _onScroll = () => {
     this._updateScrollbarsHelper({ position: true });
+
+    if(this.props.autoHide) {
+      this._startAutoHide();
+    }
+  }
+
+  _startAutoHide() {
+    if(this._autoHideTimer) {
+      clearTimeout(this._autoHideTimer);
+    }
+
+    this._autoHideTimer = setTimeout(() => {
+      this.setState({
+        showScrollIndicators: false,
+      });
+    }, AUTOHIDE_TIMEOUT);
+
+    if(!this.state.showScrollIndicators) {
+      this.setState({
+        showScrollIndicators: true,
+      });
+    }
+  }
+
+  _stopAutoHide() {
+    if(this._autoHideTimer) {
+      clearTimeout(this._autoHideTimer);
+      this._autoHideTimer = null;
+    }
   }
 
   _computeThumbPosition(scrollable: HTMLElement, thumb: HTMLElement) {
@@ -118,10 +167,14 @@ export default class CustomScrollbars extends Component {
       thumb.style.setProperty('height', thumbHeight + 'px');
 
       // hide thumb when there is nothing to scroll
-      if(thumbHeight < scrollable.offsetHeight) {
-        thumb.style.setProperty('opacity', '1');
-      } else {
-        thumb.style.setProperty('opacity', '0');
+      const canScroll = (thumbHeight < scrollable.offsetHeight);
+      if(this.state.canScroll !== canScroll) {
+        this.setState({ canScroll });
+
+        // flash the scroll indicators when the view becomes scrollable
+        if(this.props.autoHide && canScroll) {
+          this._startAutoHide();
+        }
       }
     }
 
diff --git a/flow-typed/npm/react-custom-scrollbars_vx.x.x.js b/flow-typed/npm/react-custom-scrollbars_vx.x.x.js
deleted file mode 100644
index 53d38c8e01..0000000000
--- a/flow-typed/npm/react-custom-scrollbars_vx.x.x.js
+++ /dev/null
@@ -1,130 +0,0 @@
-// flow-typed signature: eb83d1f239fcbd0e79bfd75f3b51fc89
-// flow-typed version: <<STUB>>/react-custom-scrollbars_v^4.0.2/flow_v0.50.0
-
-/**
- * This is an autogenerated libdef stub for:
- *
- *   'react-custom-scrollbars'
- *
- * Fill this stub out by replacing all the `any` types.
- *
- * Once filled out, we encourage you to share your work with the
- * community by sending a pull request to:
- * https://github.com/flowtype/flow-typed
- */
-
-declare module 'react-custom-scrollbars' {
-  declare module.exports: any;
-}
-
-/**
- * We include stubs for each file inside this npm package in case you need to
- * require those files directly. Feel free to delete any files that aren't
- * needed.
- */
-declare module 'react-custom-scrollbars/dist/react-custom-scrollbars' {
-  declare module.exports: any;
-}
-
-declare module 'react-custom-scrollbars/dist/react-custom-scrollbars.min' {
-  declare module.exports: any;
-}
-
-declare module 'react-custom-scrollbars/karma.conf' {
-  declare module.exports: any;
-}
-
-declare module 'react-custom-scrollbars/lib/index' {
-  declare module.exports: any;
-}
-
-declare module 'react-custom-scrollbars/lib/Scrollbars/defaultRenderElements' {
-  declare module.exports: any;
-}
-
-declare module 'react-custom-scrollbars/lib/Scrollbars/index' {
-  declare module.exports: any;
-}
-
-declare module 'react-custom-scrollbars/lib/Scrollbars/styles' {
-  declare module.exports: any;
-}
-
-declare module 'react-custom-scrollbars/lib/utils/getInnerHeight' {
-  declare module.exports: any;
-}
-
-declare module 'react-custom-scrollbars/lib/utils/getInnerWidth' {
-  declare module.exports: any;
-}
-
-declare module 'react-custom-scrollbars/lib/utils/getScrollbarWidth' {
-  declare module.exports: any;
-}
-
-declare module 'react-custom-scrollbars/lib/utils/isString' {
-  declare module.exports: any;
-}
-
-declare module 'react-custom-scrollbars/lib/utils/returnFalse' {
-  declare module.exports: any;
-}
-
-declare module 'react-custom-scrollbars/prepublish' {
-  declare module.exports: any;
-}
-
-declare module 'react-custom-scrollbars/test' {
-  declare module.exports: any;
-}
-
-declare module 'react-custom-scrollbars/webpack.config' {
-  declare module.exports: any;
-}
-
-// Filename aliases
-declare module 'react-custom-scrollbars/dist/react-custom-scrollbars.js' {
-  declare module.exports: $Exports<'react-custom-scrollbars/dist/react-custom-scrollbars'>;
-}
-declare module 'react-custom-scrollbars/dist/react-custom-scrollbars.min.js' {
-  declare module.exports: $Exports<'react-custom-scrollbars/dist/react-custom-scrollbars.min'>;
-}
-declare module 'react-custom-scrollbars/karma.conf.js' {
-  declare module.exports: $Exports<'react-custom-scrollbars/karma.conf'>;
-}
-declare module 'react-custom-scrollbars/lib/index.js' {
-  declare module.exports: $Exports<'react-custom-scrollbars/lib/index'>;
-}
-declare module 'react-custom-scrollbars/lib/Scrollbars/defaultRenderElements.js' {
-  declare module.exports: $Exports<'react-custom-scrollbars/lib/Scrollbars/defaultRenderElements'>;
-}
-declare module 'react-custom-scrollbars/lib/Scrollbars/index.js' {
-  declare module.exports: $Exports<'react-custom-scrollbars/lib/Scrollbars/index'>;
-}
-declare module 'react-custom-scrollbars/lib/Scrollbars/styles.js' {
-  declare module.exports: $Exports<'react-custom-scrollbars/lib/Scrollbars/styles'>;
-}
-declare module 'react-custom-scrollbars/lib/utils/getInnerHeight.js' {
-  declare module.exports: $Exports<'react-custom-scrollbars/lib/utils/getInnerHeight'>;
-}
-declare module 'react-custom-scrollbars/lib/utils/getInnerWidth.js' {
-  declare module.exports: $Exports<'react-custom-scrollbars/lib/utils/getInnerWidth'>;
-}
-declare module 'react-custom-scrollbars/lib/utils/getScrollbarWidth.js' {
-  declare module.exports: $Exports<'react-custom-scrollbars/lib/utils/getScrollbarWidth'>;
-}
-declare module 'react-custom-scrollbars/lib/utils/isString.js' {
-  declare module.exports: $Exports<'react-custom-scrollbars/lib/utils/isString'>;
-}
-declare module 'react-custom-scrollbars/lib/utils/returnFalse.js' {
-  declare module.exports: $Exports<'react-custom-scrollbars/lib/utils/returnFalse'>;
-}
-declare module 'react-custom-scrollbars/prepublish.js' {
-  declare module.exports: $Exports<'react-custom-scrollbars/prepublish'>;
-}
-declare module 'react-custom-scrollbars/test.js' {
-  declare module.exports: $Exports<'react-custom-scrollbars/test'>;
-}
-declare module 'react-custom-scrollbars/webpack.config.js' {
-  declare module.exports: $Exports<'react-custom-scrollbars/webpack.config'>;
-}