2
0
mirror of https://github.com/status-im/embark-area-51.git synced 2025-01-12 15:04:29 +00:00

fix dark-theme layout

This commit is contained in:
Jonathan Rainville 2018-10-24 15:20:31 -04:00
parent 90fafd0158
commit c50390fb01
3 changed files with 13 additions and 12 deletions

@ -181,9 +181,9 @@ class FileExplorer extends React.Component {
style={style}
/>
<Label className="mb-0 pt-1">
<AppSwitch color='success' variant='pill' size='sm' onChange={this.props.toggleShowHiddenFiles}/>
<span className="ml-1 align-top">Show hidden files</span>
<Label className="mb-0 pt-2 pr-2 pb-1 border-top text-right">
<span className="mr-2 align-top">Show hidden files</span>
<AppSwitch color="success" variant="pill" size="sm" onChange={this.props.toggleShowHiddenFiles}/>
</Label>
</div>
);
@ -194,6 +194,7 @@ FileExplorer.propTypes = {
files: PropTypes.array,
fetchFile: PropTypes.func,
showHiddenFiles: PropTypes.bool,
toggleShowHiddenFiles: PropTypes.func
};
export default FileExplorer;

@ -4,7 +4,7 @@ import {Button, Nav, NavLink} from 'reactstrap';
import FontAwesomeIcon from 'react-fontawesome';
const TextEditorToolbar = (props) => (
<ol className="breadcrumb">
<ol className="breadcrumb mb-0">
<li className="breadcrumb-item">
{props.currentFile.name}
</li>

@ -13,8 +13,8 @@ import './EditorContainer.css';
class EditorContainer extends React.Component {
constructor(props) {
super(props)
this.state = {currentAsideTab: '', showHiddenFiles: false, currentFile: this.props.currentFile}
super(props);
this.state = {currentAsideTab: '', showHiddenFiles: false, currentFile: this.props.currentFile};
}
componentDidMount() {
@ -43,17 +43,17 @@ class EditorContainer extends React.Component {
openAsideTab(newTab) {
if (newTab === this.state.currentAsideTab) {
return this.setState({currentAsideTab: ''})
return this.setState({currentAsideTab: ''});
}
this.setState({currentAsideTab: newTab})
this.setState({currentAsideTab: newTab});
}
textEditorMdSize() {
return this.state.currentAsideTab.length ? 5 : 10
return this.state.currentAsideTab.length ? 5 : 10;
}
textEditorXsSize() {
return this.state.currentAsideTab.length ? 2 : 8
return this.state.currentAsideTab.length ? 2 : 8;
}
render() {
@ -64,11 +64,11 @@ class EditorContainer extends React.Component {
isContract={this.isContract()}
currentFile={this.props.currentFile} />
</Col>
<Col xs={4} md={2}>
<Col xs={4} md={2} className="border-right">
<FileExplorerContainer showHiddenFiles={this.state.showHiddenFiles} toggleShowHiddenFiles={() => this.toggleShowHiddenFiles()} />
</Col>
<Col xs={this.textEditorXsSize()} md={this.textEditorMdSize()}>
<TextEditorContainer currentFile={this.props.currentFile} onFileContentChange={(newContent)=> this.onFileContentChange(newContent)} />
<TextEditorContainer currentFile={this.props.currentFile} onFileContentChange={(newContent) => this.onFileContentChange(newContent)} />
</Col>
{this.state.currentAsideTab && <Col xs={6} md={5}>
<TextEditorAsideContainer currentAsideTab={this.state.currentAsideTab} currentFile={this.props.currentFile} />