quine-global/hyper
1
0
Fork 0
mirror of https://github.com/quine-global/hyper.git synced 2026-01-12 20:18:41 -09:00
Code Issues Projects Releases Packages Wiki Activity Actions

implement custom CSS from config

Browse source
This commit is contained in:
Guillermo Rauch 2016-07-08 14:27:41 -07:00
parent 1aa537b025
commit 1e5e3576cd
2 changed files with 19 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
app/hyperterm.js
View file

@ -74,7 +74,7 @@ export default class HyperTerm extends Component {
} }
render () { render () {
const { backgroundColor, borderColor } = this.props.config; const { backgroundColor, borderColor, css } = this.props.config;
return <div onClick={ this.focusActive }> return <div onClick={ this.focusActive }>
<div style={{ borderColor }} className={ classes('main', { mac: this.state.mac }) }> <div style={{ borderColor }} className={ classes('main', { mac: this.state.mac }) }>
<header style={{ backgroundColor }} onMouseDown={this.onHeaderMouseDown}> <header style={{ backgroundColor }} onMouseDown={this.onHeaderMouseDown}>
@ -98,12 +98,13 @@ export default class HyperTerm extends Component {
this.state.sessions.map((uid, i) => { this.state.sessions.map((uid, i) => {
const active = i === this.state.active; const active = i === this.state.active;
const { config } = this.props; const { config } = this.props;
return <div key={`d${uid}`} className={classes('term', { active })} style={{ width: '100%', height: '100%' }} ref='term'> return <div key={`d${uid}`} className={classes('term', { active })} style={{ width: '100%', height: '100%' }}>
<Term <Term
key={uid} key={uid}
ref={`term-${uid}`} ref={`term-${uid}`}
cols={this.state.cols} cols={this.state.cols}
rows={this.state.rows} rows={this.state.rows}
customCSS={config.termCSS}
fontSize={this.state.fontSize} fontSize={this.state.fontSize}
cursorColor={config.cursorColor} cursorColor={config.cursorColor}
fontFamily={config.fontFamily} fontFamily={config.fontFamily}
@ -130,6 +131,7 @@ export default class HyperTerm extends Component {
<a href='' onClick={this.quitAndInstall}>Restart</a> <a href='' onClick={this.quitAndInstall}>Restart</a>
to apply <span className='close' onClick={this.dismissUpdate}>[x]</span> to apply <span className='close' onClick={this.dismissUpdate}>[x]</span>
</div> </div>
<style dangerouslySetInnerHTML={{ __html: Array.from(css || '').join('\n') }} />
</div>; </div>;
} }

21
app/term.js
View file

@ -22,12 +22,7 @@ export default class Term extends Component {
this.term.prefs_.set('background-color', props.backgroundColor); this.term.prefs_.set('background-color', props.backgroundColor);
this.term.prefs_.set('color-palette-overrides', props.colors); this.term.prefs_.set('color-palette-overrides', props.colors);
this.term.prefs_.set('user-css', URL.createObjectURL(new Blob([` this.term.prefs_.set('user-css', this.getStylesheet(props.customCSS));
.cursor-node[focus="false"] {
border-width: 1px !important;
}
${Array.from(props.customCSS || '').join('\n')}
`]), { type: 'text/css' }));
this.term.onTerminalReady = () => { this.term.onTerminalReady = () => {
const io = this.term.io.push(); const io = this.term.io.push();
@ -46,6 +41,16 @@ export default class Term extends Component {
return this.term.document_; return this.term.document_;
} }
getStylesheet (css) {
const blob = new Blob([`
.cursor-node[focus="false"] {
border-width: 1px !important;
}
${Array.from(css || '').join('\n')}
`]);
return URL.createObjectURL(blob, { type: 'text/css' });
}
componentWillReceiveProps (nextProps) { componentWillReceiveProps (nextProps) {
if (this.props.fontSize !== nextProps.fontSize) { if (this.props.fontSize !== nextProps.fontSize) {
this.term.prefs_.set('font-size', nextProps.fontSize); this.term.prefs_.set('font-size', nextProps.fontSize);
@ -66,6 +71,10 @@ export default class Term extends Component {
if (this.props.colors.toString() !== nextProps.colors.toString()) { if (this.props.colors.toString() !== nextProps.colors.toString()) {
this.term.prefs_.set('color-palette-overrides', nextProps.colors); this.term.prefs_.set('color-palette-overrides', nextProps.colors);
} }
if (this.props.customCSS.toString() !== nextProps.customCSS.toString()) {
this.term.prefs_.set('user-css', this.getStylesheet(nextProps.customCSS));
}
} }
shouldComponentUpdate (nextProps) { shouldComponentUpdate (nextProps) {