Merge branch 'enable-scrollbar-autohide-on-mac-only'

5 files changed, 37 insertions, 8 deletions

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 019d3efe51..292ddfc053 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -23,6 +23,8 @@ Line wrap the file at 100 chars.                                              Th
 
 
 ## [Unreleased]
+### Changed
+- Auto-hide scrollbars on macOS only, leaving them visible on other platforms.
 
 
 ## [2018.4-beta1] - 2018-10-01
diff --git a/gui/packages/desktop/src/renderer/components/AdvancedSettings.js b/gui/packages/desktop/src/renderer/components/AdvancedSettings.js
index 8602b48b75..284867f3ca 100644
--- a/gui/packages/desktop/src/renderer/components/AdvancedSettings.js
+++ b/gui/packages/desktop/src/renderer/components/AdvancedSettings.js
@@ -43,7 +43,7 @@ export class AdvancedSettings extends Component<Props> {
               <SettingsHeader>
                 <HeaderTitle>Advanced</HeaderTitle>
               </SettingsHeader>
-              <CustomScrollbars style={styles.advanced_settings__scrollview} autoHide={true}>
+              <CustomScrollbars style={styles.advanced_settings__scrollview}>
                 <Cell.Container>
                   <Cell.Label>Enable IPv6</Cell.Label>
                   <Switch isOn={this.props.enableIpv6} onChange={this.props.setEnableIpv6} />
diff --git a/gui/packages/desktop/src/renderer/components/CustomScrollbars.js b/gui/packages/desktop/src/renderer/components/CustomScrollbars.js
index db7613fb6b..9754c2d364 100644
--- a/gui/packages/desktop/src/renderer/components/CustomScrollbars.js
+++ b/gui/packages/desktop/src/renderer/components/CustomScrollbars.js
@@ -32,7 +32,8 @@ type ScrollPosition = 'top' | 'bottom' | 'middle';
 
 export default class CustomScrollbars extends React.Component<Props, State> {
   static defaultProps = {
-    autoHide: true,
+    // auto-hide on macOS by default
+    autoHide: process.platform === 'darwin',
     trackPadding: { x: 2, y: 2 },
   };
 
@@ -121,8 +122,12 @@ export default class CustomScrollbars extends React.Component<Props, State> {
     });
 
     // do not hide the scrollbar if user is dragging a thumb but left the track area.
-    if (this.props.autoHide && !this.state.isDragging) {
-      this._startAutoHide();
+    if (!this.state.isDragging) {
+      if (this.props.autoHide) {
+        this._startAutoHide();
+      } else {
+        this._startAutoShrink();
+      }
     }
   };
 
@@ -159,8 +164,12 @@ export default class CustomScrollbars extends React.Component<Props, State> {
         y: event.clientY,
       };
 
-      if (this.props.autoHide && !this._isPointInsideOfElement(track, cursorPosition)) {
-        this._startAutoHide();
+      if (!this._isPointInsideOfElement(track, cursorPosition)) {
+        if (this.props.autoHide) {
+          this._startAutoHide();
+        } else {
+          this._startAutoShrink();
+        }
       }
     }
   };
@@ -253,6 +262,11 @@ export default class CustomScrollbars extends React.Component<Props, State> {
       if (!this.state.isDragging) {
         this._startAutoHide();
       }
+    } else {
+      // only auto-shrink when scrolling with mousewheel
+      if (!this.state.isDragging) {
+        this._startAutoShrink();
+      }
     }
   };
 
@@ -278,6 +292,19 @@ export default class CustomScrollbars extends React.Component<Props, State> {
     }, AUTOHIDE_TIMEOUT);
   }
 
+  _startAutoShrink() {
+    if (this._autoHideTimer) {
+      clearTimeout(this._autoHideTimer);
+    }
+
+    this._autoHideTimer = setTimeout(() => {
+      this.setState({
+        showTrack: false,
+        isWide: false,
+      });
+    }, AUTOHIDE_TIMEOUT);
+  }
+
   _stopAutoHide() {
     if (this._autoHideTimer) {
       clearTimeout(this._autoHideTimer);
diff --git a/gui/packages/desktop/src/renderer/components/SelectLocation.js b/gui/packages/desktop/src/renderer/components/SelectLocation.js
index 754b104037..ba599c6e09 100644
--- a/gui/packages/desktop/src/renderer/components/SelectLocation.js
+++ b/gui/packages/desktop/src/renderer/components/SelectLocation.js
@@ -91,7 +91,7 @@ export default class SelectLocation extends Component<Props, State> {
                 <HeaderTitle>Select location</HeaderTitle>
               </SettingsHeader>
 
-              <CustomScrollbars autoHide={true} ref={this._scrollViewRef}>
+              <CustomScrollbars ref={this._scrollViewRef}>
                 <View style={styles.content}>
                   <SettingsHeader style={styles.subtitle_header}>
                     <HeaderSubTitle>
diff --git a/gui/packages/desktop/src/renderer/components/Settings.js b/gui/packages/desktop/src/renderer/components/Settings.js
index f1cb4d8fdc..846d7b8519 100644
--- a/gui/packages/desktop/src/renderer/components/Settings.js
+++ b/gui/packages/desktop/src/renderer/components/Settings.js
@@ -45,7 +45,7 @@ export default class Settings extends Component<Props> {
                 <HeaderTitle>Settings</HeaderTitle>
               </SettingsHeader>
 
-              <CustomScrollbars style={styles.settings__scrollview} autoHide={true}>
+              <CustomScrollbars style={styles.settings__scrollview}>
                 <View style={styles.settings__content}>
                   <View>
                     {this._renderTopButtons()}