From ed282560fbe1c3b8d6859ba6083a030330ed6333 Mon Sep 17 00:00:00 2001 From: Stefan Ivic Date: Sat, 28 Jan 2017 02:16:41 +0100 Subject: [PATCH] [UI] Make scrollbar look the same on all platforms (#1442) * [UI] Make scrollbar look the same on all platforms Linux suffers from the same issue as other platforms where the scrollbar is that ugly electron style. This commit will fix this and make it look the same on all platforms and cut down code. * linter : Use const instead of let * naming : make the constant easy to understand The previous code used a variable to define code specific to the os. Since we combined the code for all platforms it is not required anymore, so I changed the name to be more understandable to the person reading the code. * [UI] Make scrollbar look the same on all platforms Linux suffers from the same issue as other platforms where the scrollbar is that ugly electron style. This commit will fix this and make it look the same on all platforms and cut down code. * linter : Use const instead of let * naming : make the constant easy to understand The previous code used a variable to define code specific to the os. Since we combined the code for all platforms it is not required anymore, so I changed the name to be more understandable to the person reading the code. --- lib/components/term.js | 21 +++++---------------- 1 file changed, 5 insertions(+), 16 deletions(-) diff --git a/lib/components/term.js b/lib/components/term.js index f0b9b6b9..e4add848 100644 --- a/lib/components/term.js +++ b/lib/components/term.js @@ -232,9 +232,8 @@ export default class Term extends Component { font-size: ${this.props.fontSize}px; } `; - let osSpecificCss = ''; - if (process.platform === 'win32') { - osSpecificCss = `::-webkit-scrollbar { + const scrollBarCss = ` + ::-webkit-scrollbar { width: 5px; } ::-webkit-scrollbar-thumb { @@ -244,18 +243,8 @@ export default class Term extends Component { } ::-webkit-scrollbar-thumb:window-inactive { background: ${this.props.borderColor}; - }`; - } else if (process.platform === 'darwin') { - osSpecificCss = `::-webkit-scrollbar { - width: 9px; - background: transparent; - } - ::-webkit-scrollbar-thumb { - -webkit-border-radius: 10px; - border-radius: 10px; - -webkit-box-shadow: inset 0 0 0 1px ${this.props.borderColor}; - }`; - } + } + `; return URL.createObjectURL(new Blob([` .cursor-node[focus="false"] { border-width: 1px !important; @@ -265,7 +254,7 @@ export default class Term extends Component { border-bottom-width: 2px; } ${hyperCaret} - ${osSpecificCss} + ${scrollBarCss} ${css} `], {type: 'text/css'})); }