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

Fixes terminal wrapping by syncing docker/term.js terminal widths.

Browse Source 
Impl. by locking the term.js width to 80 which is what the docker one
is. We need to implement resizing on both the BE and FE to avoid weird
wrapping issues.
This commit is contained in:
Simon Howe
2016-07-06 15:06:02 +02:00
parent d79a412116
commit 4b41c8bb23
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() {
const innerNode = ReactDOM.findDOMNode(this.innerFlex);
const width = innerNode.clientWidth - (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);
this.setState({cols, rows});
}
@@ -304,8 +304,12 @@ class Terminal extends React.Component {
}
render() {
const innerFlexStyle = {
opacity: this.state.connected ? 1 : 0.8,
overflow: 'hidden',
};
const innerStyle = {
opacity: this.state.connected ? 1 : 0.8
width: (this.state.cols + 2) * this.state.pixelPerCol
};
const innerClassName = classNames('terminal-inner hideable', {
'terminal-inactive': !this.state.connected
@@ -315,8 +319,8 @@ class Terminal extends React.Component {
<div className="terminal-wrapper">
{this.isEmbedded() && this.getTerminalHeader()}
<div ref={(ref) => this.innerFlex = ref}
className={innerClassName} style={innerStyle} >
<div ref={(ref) => this.inner = ref} />
className={innerClassName} style={innerFlexStyle} >
<div style={innerStyle} ref={(ref) => this.inner = ref} />
</div>
{this.getTerminalStatusBar()}
</div>