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:
parent
90fafd0158
commit
c50390fb01
embark-ui/src
@ -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} />
|
||||
|
Loading…
x
Reference in New Issue
Block a user