Michel2/pybricks-code
1
0
Fork 0
mirror of https://github.com/pybricks/pybricks-code.git synced 2026-09-12 01:23:52 +00:00
Code Issues Releases Activity

terminal resizing

Browse Source
This commit is contained in:
David Lechner
2020-05-04 22:08:44 -05:00
parent fce6b25e0b
commit a44e97f4a3
10 changed files with 93 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/ActionButton.tsx
+1 -1
View File
@@ -31,7 +31,7 @@ class ActionButton<T = undefined> extends React.Component<ActionButtonProps<T>>
}
>
<Button
variant="primary"
variant="light"
onClick={(): void => this.props.onAction(this.props.context)}
disabled={this.props.enabled === false}
style={
src/components/App.tsx
+28 -6
View File
@@ -1,4 +1,5 @@
import React from 'react';
import { Col, Row } from 'react-bootstrap';
import Container from 'react-bootstrap/Container';
import Editor from './Editor';
import StatusBar from './Statusbar';
@@ -7,12 +8,33 @@ import Toolbar from './Toolbar';
function App(): JSX.Element {
return (
<Container fluid>
<Toolbar />
<Editor />
<Terminal />
<StatusBar />
</Container>
<div
className="position-fixed"
style={{ width: '100%', height: 'calc(100% - 0px)' }}
>
<Container>
<Row>
<Col>
<Toolbar />
</Col>
</Row>
<Row>
<Col className="py-2">
<Editor />
</Col>
</Row>
<Row>
<Col style={{ height: '25vh' }} className="py-2">
<Terminal />
</Col>
</Row>
<Row className="mt-2">
<Col>
<StatusBar />
</Col>
</Row>
</Container>
</div>
);
}
src/components/Editor.tsx
+22 -32
View File
@@ -1,7 +1,5 @@
import React, { ReactElement } from 'react';
import AceEditor from 'react-ace';
import Col from 'react-bootstrap/Col';
import Row from 'react-bootstrap/Row';
import { ReactReduxContext } from 'react-redux';
import { setEditSession } from '../actions/editor';
@@ -13,36 +11,28 @@ import 'ace-builds/src-min-noconflict/ext-language_tools';
class Editor extends React.Component {
render(): JSX.Element {
return (
<Row className="px-2 py-4 bg-primary">
<Col>
<ReactReduxContext.Consumer>
{({ store }): ReactElement => (
<AceEditor
mode="python"
theme="xcode"
fontSize="16pt"
width="100"
focus={true}
placeholder="Write your program here..."
defaultValue={
localStorage.getItem('program') || undefined
}
editorProps={{ $blockScrolling: true }}
setOptions={{
enableBasicAutocompletion: true,
enableLiveAutocompletion: true,
}}
onFocus={(_, e): void => {
store.dispatch(setEditSession(e?.session));
}}
onChange={(v): void =>
localStorage.setItem('program', v)
}
/>
)}
</ReactReduxContext.Consumer>
</Col>
</Row>
<ReactReduxContext.Consumer>
{({ store }): ReactElement => (
<AceEditor
mode="python"
theme="xcode"
fontSize="16pt"
width="100"
focus={true}
placeholder="Write your program here..."
defaultValue={localStorage.getItem('program') || undefined}
editorProps={{ $blockScrolling: true }}
setOptions={{
enableBasicAutocompletion: true,
enableLiveAutocompletion: true,
}}
onFocus={(_, e): void => {
store.dispatch(setEditSession(e?.session));
}}
onChange={(v): void => localStorage.setItem('program', v)}
/>
)}
</ReactReduxContext.Consumer>
);
}
}
src/components/OpenFileButton.tsx
+1 -1
View File
@@ -79,7 +79,7 @@ class OpenFileButton extends React.Component<OpenFileButtonProps> {
>
<Button
{...getRootProps()}
variant="primary"
variant="light"
disabled={this.props.enabled === false}
style={
this.props.enabled === false
src/components/Statusbar.tsx
+3 -7
View File
@@ -1,7 +1,5 @@
import React from 'react';
import Col from 'react-bootstrap/Col';
import ProgressBar from 'react-bootstrap/ProgressBar';
import Row from 'react-bootstrap/Row';
import { BLEConnectionState } from '../reducers/ble';
interface StatusBarState {
@@ -25,11 +23,9 @@ class StatusBar extends React.Component<{}, StatusBarState> {
render(): JSX.Element {
return (
<Row className="bg-info p-2">
<Col className="col-2">
<ProgressBar></ProgressBar>
</Col>
</Row>
<div className="bg-info p-2">
<ProgressBar className="w-25"></ProgressBar>
</div>
);
}
}
src/components/Terminal.tsx
+13 -8
View File
@@ -1,10 +1,10 @@
import React from 'react';
import Col from 'react-bootstrap/Col';
import Row from 'react-bootstrap/Row';
import { connect } from 'react-redux';
import ResizeObserver from 'react-resize-observer';
import { Dispatch } from 'redux';
import { Subscription } from 'rxjs';
import { Terminal as XTerm } from 'xterm';
import { FitAddon } from 'xterm-addon-fit';
import { receiveData } from '../actions/terminal';
import { terminalOutput } from '../epics/terminal';
@@ -18,6 +18,7 @@ type TerminalProps = DispatchProps;
class Terminal extends React.Component<TerminalProps> {
private xterm: XTerm;
private fitAddon: FitAddon;
private terminalRef: React.RefObject<HTMLDivElement>;
private subscription?: Subscription;
@@ -27,7 +28,6 @@ class Terminal extends React.Component<TerminalProps> {
cursorBlink: true,
cursorStyle: 'underline',
fontSize: 18,
rows: 8,
theme: {
background: 'white',
foreground: 'black',
@@ -36,6 +36,8 @@ class Terminal extends React.Component<TerminalProps> {
selection: 'rgba(181,213,255,0.5)', // this should match AceEditor theme
},
});
this.fitAddon = new FitAddon();
this.xterm.loadAddon(this.fitAddon);
this.xterm.onData((d) => this.props.onData(d));
this.terminalRef = React.createRef();
}
@@ -46,6 +48,7 @@ class Terminal extends React.Component<TerminalProps> {
return;
}
this.xterm.open(this.terminalRef.current);
this.fitAddon.fit();
this.subscription = terminalOutput.subscribe((v) => this.xterm.write(v));
}
@@ -56,11 +59,13 @@ class Terminal extends React.Component<TerminalProps> {
render(): JSX.Element {
return (
<Row className="px-2 py-4 bg-secondary">
<Col>
<div id="terminal" ref={this.terminalRef}></div>
</Col>
</Row>
<div
id="terminal"
ref={this.terminalRef}
style={{ height: 'inherit', width: 'inherit' }}
>
<ResizeObserver onResize={(): void => this.fitAddon.fit()} />
</div>
);
}
}
src/components/Toolbar.tsx
+11 -17
View File
@@ -1,8 +1,6 @@
import React from 'react';
import ButtonGroup from 'react-bootstrap/ButtonGroup';
import ButtonToolbar from 'react-bootstrap/ButtonToolbar';
import Col from 'react-bootstrap/Col';
import Row from 'react-bootstrap/Row';
import BluetoothButton from './BluetoothButton';
import FlashButton from './FlashButton';
import ReplButton from './ReplButton';
@@ -12,21 +10,17 @@ import StopButton from './StopButton';
class Toolbar extends React.Component {
render(): JSX.Element {
return (
<Row>
<Col>
<ButtonToolbar className="m-2">
<ButtonGroup className="mr-2" size="lg">
<BluetoothButton id="bluetooth" />
<RunButton id="run" />
<StopButton id="stop" />
</ButtonGroup>
<ButtonGroup className="mr-2" size="lg">
<ReplButton id="repl" />
<FlashButton id="flash" />
</ButtonGroup>
</ButtonToolbar>
</Col>
</Row>
<ButtonToolbar className="m-2">
<ButtonGroup className="mr-2" size="lg">
<BluetoothButton id="bluetooth" />
<RunButton id="run" />
<StopButton id="stop" />
</ButtonGroup>
<ButtonGroup className="mr-2" size="lg">
<ReplButton id="repl" />
<FlashButton id="flash" />
</ButtonGroup>
</ButtonToolbar>
);
}
}
src/index.scss
+1 -15
View File
@@ -1,19 +1,5 @@
// Override default variables before the import
// $body-bg: #000;
$body-bg: #0088ce;
// Import Bootstrap and its default variables
@import '~bootswatch/dist/lumen/variables';
@import '~bootstrap/scss/bootstrap';
@import '~bootswatch/dist/lumen/bootswatch';
// TODO: this can be removed if bootswatch package is updated with this fix
.toast {
.close {
color: $black;
&:not(:disabled):not(.disabled):hover,
&:not(:disabled):not(.disabled):focus {
color: $black;
}
}
}