mirror of
https://github.com/quine-global/hyper.git
synced 2026-01-17 22:18:41 -09:00
[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.
This commit is contained in:
parent
df0a3c60ed
commit
ed282560fb
1 changed files with 5 additions and 16 deletions
|
|
@ -232,9 +232,8 @@ export default class Term extends Component {
|
||||||
font-size: ${this.props.fontSize}px;
|
font-size: ${this.props.fontSize}px;
|
||||||
}
|
}
|
||||||
`;
|
`;
|
||||||
let osSpecificCss = '';
|
const scrollBarCss = `
|
||||||
if (process.platform === 'win32') {
|
::-webkit-scrollbar {
|
||||||
osSpecificCss = `::-webkit-scrollbar {
|
|
||||||
width: 5px;
|
width: 5px;
|
||||||
}
|
}
|
||||||
::-webkit-scrollbar-thumb {
|
::-webkit-scrollbar-thumb {
|
||||||
|
|
@ -244,18 +243,8 @@ export default class Term extends Component {
|
||||||
}
|
}
|
||||||
::-webkit-scrollbar-thumb:window-inactive {
|
::-webkit-scrollbar-thumb:window-inactive {
|
||||||
background: ${this.props.borderColor};
|
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([`
|
return URL.createObjectURL(new Blob([`
|
||||||
.cursor-node[focus="false"] {
|
.cursor-node[focus="false"] {
|
||||||
border-width: 1px !important;
|
border-width: 1px !important;
|
||||||
|
|
@ -265,7 +254,7 @@ export default class Term extends Component {
|
||||||
border-bottom-width: 2px;
|
border-bottom-width: 2px;
|
||||||
}
|
}
|
||||||
${hyperCaret}
|
${hyperCaret}
|
||||||
${osSpecificCss}
|
${scrollBarCss}
|
||||||
${css}
|
${css}
|
||||||
`], {type: 'text/css'}));
|
`], {type: 'text/css'}));
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue