Scroll Bars can now be hidden (#2713)

* Scroll Bars can now be hidden

* Fix lint problems

* fix lint errors

* Fix lint

* Fix lint

* Change scrollBar to showScrollBar

Author: gregueiras

browser/components/MarkdownPreview.js

@@ -11,6 +11,7 @@ import mermaidRender from './render/MermaidRender'
 import SequenceDiagram from '@rokt33r/js-sequence-diagrams'
 import Chart from 'chart.js'
 import eventEmitter from 'browser/main/lib/eventEmitter'
+import config from 'browser/main/lib/ConfigManager'
 import htmlTextHelper from 'browser/lib/htmlTextHelper'
 import convertModeName from 'browser/lib/convertModeName'
 import copy from 'copy-to-clipboard'
@@ -194,10 +195,12 @@ ${allowCustomCSS ? customCSS : ''}
 
 const scrollBarStyle = `
 ::-webkit-scrollbar {
+  ${config.get().ui.showScrollBar ? '' : 'display: none;'}
   width: 12px;
 }
 
 ::-webkit-scrollbar-thumb {
+  ${config.get().ui.showScrollBar ? '' : 'display: none;'}
   background-color: rgba(0, 0, 0, 0.15);
 }
 
@@ -207,10 +210,12 @@ const scrollBarStyle = `
 `
 const scrollBarDarkStyle = `
 ::-webkit-scrollbar {
+  ${config.get().ui.showScrollBar ? '' : 'display: none;'}
   width: 12px;
 }
 
 ::-webkit-scrollbar-thumb {
+  ${config.get().ui.showScrollBar ? '' : 'display: none;'}
   background-color: rgba(0, 0, 0, 0.3);
 }
 

browser/main/index.js

@@ -4,6 +4,7 @@ import { store, history } from './store'
 import React, { Fragment } from 'react'
 import ReactDOM from 'react-dom'
 require('!!style!css!stylus?sourceMap!./global.styl')
+import config from 'browser/main/lib/ConfigManager'
 import { Route, Switch, Redirect } from 'react-router-dom'
 import { ConnectedRouter } from 'connected-react-router'
 import DevTools from './DevTools'
@@ -77,6 +78,16 @@ document.addEventListener('click', function(e) {
   if (infoPanel) infoPanel.style.display = 'none'
 })
 
+if (!config.get().ui.showScrollBar) {
+  document.styleSheets[54].insertRule('::-webkit-scrollbar {display: none}')
+  document.styleSheets[54].insertRule(
+    '::-webkit-scrollbar-corner {display: none}'
+  )
+  document.styleSheets[54].insertRule(
+    '::-webkit-scrollbar-thumb {display: none}'
+  )
+}
+
 const el = document.getElementById('content')
 
 function notify(...args) {

browser/main/lib/ConfigManager.js

@@ -49,6 +49,7 @@ export const DEFAULT_CONFIG = {
     theme: 'default',
     showCopyNotification: true,
     disableDirectWrite: false,
+    showScrollBar: true,
     defaultNote: 'ALWAYS_ASK', // 'ALWAYS_ASK', 'SNIPPET_NOTE', 'MARKDOWN_NOTE'
     showMenuBar: false
   },

browser/main/modals/PreferencesModal/UiTab.js

@@ -94,6 +94,7 @@ class UiTab extends React.Component {
         showTagsAlphabetically: this.refs.showTagsAlphabetically.checked,
         saveTagsAlphabetically: this.refs.saveTagsAlphabetically.checked,
         enableLiveNoteCounts: this.refs.enableLiveNoteCounts.checked,
+        showScrollBar: this.refs.showScrollBar.checked,
         showMenuBar: this.refs.showMenuBar.checked,
         disableDirectWrite:
           this.refs.uiD2w != null ? this.refs.uiD2w.checked : false
@@ -351,9 +352,21 @@ class UiTab extends React.Component {
               </label>
             </div>
           ) : null}
-
+          <div styleName='group-checkBoxSection'>
+            <label>
+              <input
+                onChange={e => this.handleUIChange(e)}
+                checked={this.state.config.ui.showScrollBar}
+                ref='showScrollBar'
+                type='checkbox'
+              />
+              &nbsp;
+              {i18n.__(
+                'Show the scroll bars in the editor and in the markdown preview (It will be applied after restarting)'
+              )}
+            </label>
+          </div>
           <div styleName='group-header2'>Tags</div>
-
           <div styleName='group-checkBoxSection'>
             <label>
               <input