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

make term configurable

Browse source
This commit is contained in:
Guillermo Rauch 2016-07-07 08:53:23 -07:00
parent 043c9c86da
commit 80fc25c6a4
2 changed files with 31 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
app/hyperterm.js
View file

@ -84,6 +84,7 @@ export default class HyperTerm extends Component {
ref='termWrapper'>{ ref='termWrapper'>{
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;
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%' }} ref='term'>
<Term <Term
key={uid} key={uid}
@ -91,6 +92,10 @@ export default class HyperTerm extends Component {
cols={this.state.cols} cols={this.state.cols}
rows={this.state.rows} rows={this.state.rows}
fontSize={this.state.fontSize} fontSize={this.state.fontSize}
cursorColor={config.cursorColor}
fontFamily={config.fontFamily}
backgroundColor={config.backgroundColor}
colors={config.colors}
url={this.state.urls[uid]} url={this.state.urls[uid]}
onResize={this.onResize} onResize={this.onResize}
onTitle={this.setTitle.bind(this, uid)} onTitle={this.setTitle.bind(this, uid)}

52
app/term.js
View file

@ -53,37 +53,21 @@ const fishRegex = /fish: Unknown command '((https?:\/\/)|(\/\/))?([^']+)'/;
export default class Term extends Component { export default class Term extends Component {
componentDidMount () { componentDidMount () {
const { props } = this;
this.term = new hterm.Terminal(); this.term = new hterm.Terminal();
// the first term that's created has unknown size // the first term that's created has unknown size
// subsequent new tabs have size // subsequent new tabs have size
if (this.props.cols) { if (props.cols) {
this.term.realizeSize_(this.props.cols, this.props.rows); this.term.realizeSize_(props.cols, props.rows);
} }
this.term.prefs_.set('font-family', "Menlo, 'DejaVu Sans Mono', 'Lucida Console', monospace"); this.term.prefs_.set('font-family', props.fontFamily);
this.term.prefs_.set('font-size', this.props.fontSize); this.term.prefs_.set('font-size', props.fontSize);
this.term.prefs_.set('cursor-color', '#F81CE5'); this.term.prefs_.set('cursor-color', props.cursorColor);
this.term.prefs_.set('enable-clipboard-notice', false); this.term.prefs_.set('enable-clipboard-notice', false);
this.term.prefs_.set('background-color', '#000'); this.term.prefs_.set('background-color', props.backgroundColor);
this.term.prefs_.set('color-palette-overrides', { this.term.prefs_.set('color-palette-overrides', props.colors);
'0': '#000000',
'1': '#ff0000',
'2': '#33ff00',
'3': '#ffff00',
'4': '#0066ff',
'5': '#cc00ff',
'6': '#00ffff',
'7': '#d0d0d0',
'8': '#808080',
'9': '#ff0000',
'10': '#33ff00',
'11': '#ffff00',
'12': '#0066ff',
'13': '#cc00ff',
'14': '#00ffff',
'15': '#ffffff'
});
this.term.prefs_.set('user-css', URL.createObjectURL(new Blob([` this.term.prefs_.set('user-css', URL.createObjectURL(new Blob([`
.cursor-node[focus="false"] { .cursor-node[focus="false"] {
@ -94,10 +78,10 @@ export default class Term extends Component {
this.term.onTerminalReady = () => { this.term.onTerminalReady = () => {
const io = this.term.io.push(); const io = this.term.io.push();
io.onVTKeystroke = io.sendString = (str) => { io.onVTKeystroke = io.sendString = (str) => {
this.props.onData(str); props.onData(str);
}; };
io.onTerminalResize = (cols, rows) => { io.onTerminalResize = (cols, rows) => {
this.props.onResize({ cols, rows }); props.onResize({ cols, rows });
}; };
}; };
this.term.decorate(this.refs.term); this.term.decorate(this.refs.term);
@ -112,6 +96,22 @@ export default class Term extends Component {
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);
} }
if (this.props.backgroundColor !== nextProps.backgroundColor) {
this.term.prefs_.set('background-color', nextProps.backgroundColor);
}
if (this.props.fontFamily !== nextProps.fontFamily) {
this.term.prefs_.set('font-family', nextProps.fontFamily);
}
if (this.props.cursorColor !== nextProps.cursorColor) {
this.term.prefs_.set('cursor-color', nextProps.cursorColor);
}
if (this.props.colors.toString() !== nextProps.colors.toString()) {
this.term.prefs_.set('color-palette-overrides', nextProps.colors);
}
} }
shouldComponentUpdate (nextProps) { shouldComponentUpdate (nextProps) {