github/weave-scope
1
0
Fork 0
mirror of https://github.com/weaveworks/scope.git synced 2026-03-06 03:31:00 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #1648 from weaveworks/1402-fixes-terminal-line-wrapping

Browse Source 
Fixes terminal wrapping by syncing docker/term.js terminal widths.
This commit is contained in:
Simon
2016-07-11 10:49:56 +02:00
committed by GitHub
parent 8763c11d8b 4b41c8bb23
commit 2ea04aa159
1 changed files with 9 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
client/app/scripts/components/terminal.js
View File

@@ -229,10 +229,10 @@ class Terminal extends React.Component {
handleResize() { handleResize() {
const innerNode = ReactDOM.findDOMNode(this.innerFlex); const innerNode = ReactDOM.findDOMNode(this.innerFlex);
const width = innerNode.clientWidth - (2 * 8);
const height = innerNode.clientHeight - (2 * 8); const height = innerNode.clientHeight - (2 * 8);
const cols = Math.floor(width / this.state.pixelPerCol); const cols = DEFAULT_COLS;
const rows = Math.floor(height / this.state.pixelPerRow); const rows = Math.floor(height / this.state.pixelPerRow);
this.setState({cols, rows}); this.setState({cols, rows});
} }
@@ -304,8 +304,12 @@ class Terminal extends React.Component {
} }
render() { render() {
const innerFlexStyle = {
opacity: this.state.connected ? 1 : 0.8,
overflow: 'hidden',
};
const innerStyle = { const innerStyle = {
opacity: this.state.connected ? 1 : 0.8 width: (this.state.cols + 2) * this.state.pixelPerCol
}; };
const innerClassName = classNames('terminal-inner hideable', { const innerClassName = classNames('terminal-inner hideable', {
'terminal-inactive': !this.state.connected 'terminal-inactive': !this.state.connected
@@ -315,8 +319,8 @@ class Terminal extends React.Component {
<div className="terminal-wrapper"> <div className="terminal-wrapper">
{this.isEmbedded() && this.getTerminalHeader()} {this.isEmbedded() && this.getTerminalHeader()}
<div ref={(ref) => this.innerFlex = ref} <div ref={(ref) => this.innerFlex = ref}
className={innerClassName} style={innerStyle} > className={innerClassName} style={innerFlexStyle} >
<div ref={(ref) => this.inner = ref} /> <div style={innerStyle} ref={(ref) => this.inner = ref} />
</div> </div>
{this.getTerminalStatusBar()} {this.getTerminalStatusBar()}
</div> </div>