status-im
/
embark-area-51
mirror of https://github.com/status-im/embark-area-51.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Merge pull request #155 from status-im/restyle-code-editor-top-bar 

Restyle code editor top bar
This commit is contained in:
Iuri Matias 2018-10-24 14:17:01 -04:00 committed by GitHub
parent 7175bc506c 5fd69b60fa
commit 9a0c562568
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 43 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
embark-ui/src/components/FileExplorer.js
View File

@ -1,3 +1,5 @@
import {AppSwitch} from '@coreui/react';
import {Label} from 'reactstrap';
import React from 'react'; import React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import {Treebeard, decorators} from 'react-treebeard'; import {Treebeard, decorators} from 'react-treebeard';
@ -138,7 +140,7 @@ class FileExplorer extends React.Component {
const cursor = this.state.cursor; const cursor = this.state.cursor;
const showHidden = this.props.showHiddenFiles; const showHidden = this.props.showHiddenFiles;
// we need a foreach to build an array instead of a // we need a foreach to build an array instead of a
// filter to prevent mutating the original object (in props) // filter to prevent mutating the original object (in props)
nodes.forEach(node => { nodes.forEach(node => {
if (!showHidden && node.isHidden) return; if (!showHidden && node.isHidden) return;
let updatedNode = {...node}; let updatedNode = {...node};
@ -150,11 +152,11 @@ class FileExplorer extends React.Component {
updatedNode.children = children; updatedNode.children = children;
} }
} }
// if this is the selected node, set it as active // if this is the selected node, set it as active
if (this.nodeEquals(node, cursor)) { if (this.nodeEquals(node, cursor)) {
updatedNode.active = cursor.active; updatedNode.active = cursor.active;
// if this node is the selected node and is a folder, set // if this node is the selected node and is a folder, set
// it as toggled (expanded) according to the selected node // it as toggled (expanded) according to the selected node
if (node.children) updatedNode.toggled = cursor.toggled; if (node.children) updatedNode.toggled = cursor.toggled;
} }
@ -178,7 +180,12 @@ class FileExplorer extends React.Component {
onToggle={this.onToggle.bind(this)} onToggle={this.onToggle.bind(this)}
style={style} style={style}
/> />
</div>
<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>
</div>
); );
} }
} }

60
embark-ui/src/components/TextEditorToolbar.js
View File

@ -1,55 +1,47 @@
import React from 'react'; import React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import {Row, Label, Col, Button} from 'reactstrap'; import {Row, Label, Col, Button, Nav, NavLink} from 'reactstrap';
import FontAwesomeIcon from 'react-fontawesome'; import FontAwesomeIcon from 'react-fontawesome';
import { AppSwitch } from '@coreui/react' import { AppSwitch } from '@coreui/react'
const TextEditorToolbar = (props) => ( const TextEditorToolbar = (props) => (
<Row> <ol className="breadcrumb">
<Col sm={4} md={2}> <li class="breadcrumb-item">
<Label className="mb-0 pt-1"> {props.currentFile.name}
<AppSwitch color='success' variant='pill' size='sm' onChange={props.toggleShowHiddenFiles}/> </li>
<span className="ml-1 align-top">Show hidden files</span> <li class="breadcrumb-item">
</Label>
</Col>
<Col sm={4} md={6}>
<Button color="success" size="sm" onClick={props.save}> <Button color="success" size="sm" onClick={props.save}>
<FontAwesomeIcon className="mr-2" name="save"/> <FontAwesomeIcon className="mr-2" name="save"/>
Save Save
</Button> </Button>
<span className="mx-2">|</span>
<Button color="danger" size="sm" onClick={props.remove}> <Button color="danger" size="sm" onClick={props.remove}>
<FontAwesomeIcon className="mr-2" name="trash"/> <FontAwesomeIcon className="mr-2" name="trash"/>
Delete Delete
</Button> </Button>
</Col> </li>
<Col sm={4} md={4}> <li className="breadcrumb-menu">
<div className="float-right mr-2"> <Nav className="btn-group">
{props.isContract && {props.isContract &&
<React.Fragment> <React.Fragment>
<Button size="sm" color="primary" onClick={() => props.openAsideTab('overview')}> <NavLink className="btn" href="#" onClick={() => props.openAsideTab('overview')}>
Overview <FontAwesomeIcon className="mr-2" name="info-circle" /> Overview
</Button> </NavLink>
<span className="mx-2">|</span> <NavLink className="btn" href="#" onClick={() => props.openAsideTab('detail')}>
<Button size="sm" color="primary" onClick={() => props.openAsideTab('detail')}> <FontAwesomeIcon className="mr-2" name="file-text-o" /> Details
Detail </NavLink>
</Button> <NavLink className="btn" href="#" onClick={() => props.openAsideTab('logger')}>Logger</NavLink>
<span className="mx-2">|</span> <NavLink className="btn" href="#" onClick={() => props.openAsideTab('debugger')}>
<Button size="sm" color="primary" onClick={() => props.openAsideTab('logger')}> <FontAwesomeIcon className="mr-2" name="bug" /> Debugger
Logger </NavLink>
</Button>
<span className="mx-2">|</span>
<Button size="sm" color="primary" onClick={() => props.openAsideTab('debugger')}>
Debugger
</Button>
</React.Fragment> </React.Fragment>
} }
<Button size="sm" color="primary" onClick={() => props.openAsideTab('browser')}> <NavLink className="btn" href="#" onClick={() => props.openAsideTab('browser')}>
Browser <FontAwesomeIcon className="mr-2" name="compass" /> Browser
</Button> </NavLink>
</div> </Nav>
</Col>
</Row> </li>
</ol>
); );
TextEditorToolbar.propTypes = { TextEditorToolbar.propTypes = {

5
embark-ui/src/containers/EditorContainer.js
View File

@ -60,13 +60,12 @@ class EditorContainer extends React.Component {
return ( return (
<Row noGutters className="h-100 editor--grid"> <Row noGutters className="h-100 editor--grid">
<Col xs={12}> <Col xs={12}>
<TextEditorToolbarContainer toggleShowHiddenFiles={() => this.toggleShowHiddenFiles()} <TextEditorToolbarContainer openAsideTab={(newTab) => this.openAsideTab(newTab)}
openAsideTab={(newTab) => this.openAsideTab(newTab)}
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}>
<FileExplorerContainer showHiddenFiles={this.state.showHiddenFiles} /> <FileExplorerContainer showHiddenFiles={this.state.showHiddenFiles} toggleShowHiddenFiles={() => this.toggleShowHiddenFiles()} />
</Col> </Col>
<Col xs={this.textEditorXsSize()} md={this.textEditorMdSize()}> <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)} />

7
embark-ui/src/containers/FileExplorerContainer.js
View File

@ -14,9 +14,9 @@ class FileExplorerContainer extends Component {
render() { render() {
return ( return (
<DataWrapper shouldRender={this.props.files.length > 0} {...this.props} render={({files, fetchFile, showHiddenFiles}) => ( <DataWrapper shouldRender={this.props.files.length > 0} {...this.props} render={({files, fetchFile, showHiddenFiles, toggleShowHiddenFiles}) => (
<FileExplorer files={files} fetchFile={fetchFile} showHiddenFiles={showHiddenFiles} /> <FileExplorer files={files} fetchFile={fetchFile} showHiddenFiles={showHiddenFiles} toggleShowHiddenFiles={toggleShowHiddenFiles} />
)} /> )} />
); );
} }
} }
@ -30,6 +30,7 @@ FileExplorerContainer.propTypes = {
fetchFiles: PropTypes.func, fetchFiles: PropTypes.func,
fetchFile: PropTypes.func, fetchFile: PropTypes.func,
showHiddenFiles: PropTypes.bool, showHiddenFiles: PropTypes.bool,
toggleShowHiddenFiles: PropTypes.func,
}; };
export default connect( export default connect(