quine-global/hyper
1
0
Fork 0
mirror of https://github.com/quine-global/hyper.git synced 2026-01-15 21:28:40 -09:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

[Win] Improve design of the scrollbars (#982)

Browse source 
* [Win] Improve the design of the scrollbars

* Fix code style

* Apply `borderColor` as the `backgroundColor` for the scroll bars
This commit is contained in:
Stefan Ivic 2016-11-19 18:51:01 +01:00 committed by Matheus Fernandes
parent a5b457ed13
commit b988befea4
2 changed files with 22 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
lib/components/term-group.js
View file

@ -71,7 +71,8 @@ class TermGroup_ extends Component {
onResize: this.bind(this.props.onResize, null, uid), onResize: this.bind(this.props.onResize, null, uid),
onTitle: this.bind(this.props.onTitle, null, uid), onTitle: this.bind(this.props.onTitle, null, uid),
onData: this.bind(this.props.onData, null, uid), onData: this.bind(this.props.onData, null, uid),
onURLAbort: this.bind(this.props.onURLAbort, null, uid) onURLAbort: this.bind(this.props.onURLAbort, null, uid),
borderColor: this.props.borderColor
}); });
// This will create a new ref_ function for every render, // This will create a new ref_ function for every render,

25
lib/components/term.js
View file

@ -204,7 +204,7 @@ export default class Term extends Component {
} }
getStylesheet(css) { getStylesheet(css) {
const blob = new Blob([` const hyperCaret = `
.hyper-caret { .hyper-caret {
outline: none; outline: none;
display: inline-block; display: inline-block;
@ -213,12 +213,28 @@ export default class Term extends Component {
font-family: ${this.props.fontFamily}; font-family: ${this.props.fontFamily};
font-size: ${this.props.fontSize}px; font-size: ${this.props.fontSize}px;
} }
`;
const osSpecificCss = process.platform === 'win32' ?
`::-webkit-scrollbar {
width: 5px;
}
::-webkit-scrollbar-thumb {
-webkit-border-radius: 10px;
border-radius: 10px;
background: ${this.props.borderColor};
}
::-webkit-scrollbar-thumb:window-inactive {
background: ${this.props.borderColor};
}` : ''
;
return URL.createObjectURL(new Blob([`
.cursor-node[focus="false"] { .cursor-node[focus="false"] {
border-width: 1px !important; border-width: 1px !important;
} }
${hyperCaret}
${osSpecificCss}
${css} ${css}
`], {type: 'text/css'}); `], {type: 'text/css'}));
return URL.createObjectURL(blob);
} }
validateColor(color, alternative = 'rgb(255,255,255)') { validateColor(color, alternative = 'rgb(255,255,255)') {
@ -381,5 +397,4 @@ export default class Term extends Component {
} }
}; };
} }
} }