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

View File

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

View File

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

View File

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