Use custom scrollbar

It gives the same better good looking scrollbar in all OS. Close #208
sqlectron · Jul 19, 2016 · b5cba47 · b5cba47
1 parent 4a385e8
commit b5cba47
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 2 deletions.
diff --git a/src/renderer/components/query-result-table.scss b/src/renderer/components/query-result-table.scss
@@ -28,8 +28,13 @@
 
 .Grid.grid-body {
   background: rgb(245, 245, 245);
+  overflow: hidden !important;
 }
 
+.Grid.grid-body ::-webkit-scrollbar{ display: none }
+.Grid.grid-body:hover { overflow:auto !important; }
+.Grid.grid-body:hover ::-webkit-scrollbar { display: block }
+
 .Grid.grid-body > .Grid__innerScrollContainer {
   background: #fff;
 }

diff --git a/src/renderer/containers/app.css b/src/renderer/containers/app.css
@@ -40,3 +40,7 @@ span.list-item {
 span.clickable {
   cursor: pointer;
 }
+
+::-webkit-scrollbar { width:8px; height:8px }
+::-webkit-scrollbar-track { background: #fff; }
+::-webkit-scrollbar-thumb { background: #666; border-radius:5px }
diff --git a/src/renderer/containers/query-browser.css b/src/renderer/containers/query-browser.css
@@ -0,0 +1,11 @@
+#sidebar { overflow-y: hidden; overflow-x: hidden; }
+#sidebar ::-webkit-scrollbar{ display:none }
+
+#sidebar:hover { overflow-y:auto; overflow-y:overlay }
+#sidebar:hover ::-webkit-scrollbar { display:block }
+
+#sidebar ::-webkit-scrollbar { -webkit-appearance:none }
+#sidebar ::-webkit-scrollbar-thumb {
+  box-shadow: inset 0 -2px,inset 0 -8px,inset 0 2px,inset 0 8px;
+  min-height: 36px
+}
diff --git a/src/renderer/containers/query-browser.jsx b/src/renderer/containers/query-browser.jsx
@@ -25,6 +25,7 @@ import MenuHandler from '../menu-handler';
 
 
 import { ResizableBox } from 'react-resizable';
+require('./query-browser.css');
 require('../components/react-resizable.css');
 require('../components/react-tabs.scss');
 
@@ -37,7 +38,7 @@ const STYLES = {
     boxSizing: 'border-box',
     padding: '50px 10px 40px 10px',
   },
-  sidebar: { overflowY: 'auto' },
+  sidebar: {},
   content: { flex: 1, overflow: 'auto', paddingLeft: '5px' },
   resizeable: { width: 'auto', maxWidth: '100%' },
 };
@@ -443,7 +444,7 @@ class QueryBrowserContainer extends Component {
             onReConnectionClick={::this.onReConnectionClick} />
         </div>
         <div style={STYLES.container}>
-          <div style={STYLES.sidebar}>
+          <div id="sidebar" style={STYLES.sidebar}>
             <ResizableBox className="react-resizable react-resizable-ew-resize"
               onResizeStop={(event, { size }) => this.setState({ sideBarWidth: size.width })}
               width={SIDEBAR_WIDTH}