embarklabs
/
embark
mirror of https://github.com/embarklabs/embark.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Refactor the toggle to show it on the file tree

This commit is contained in:
Andre Medeiros 2018-10-24 13:57:57 -04:00
parent 69482bda42
commit 690788899e
4 changed files with 43 additions and 43 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 PropTypes from 'prop-types';
import {Treebeard, decorators} from 'react-treebeard';
@ -138,7 +140,7 @@ class FileExplorer extends React.Component {
const cursor = this.state.cursor;
const showHidden = this.props.showHiddenFiles;
// 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 => {
if (!showHidden && node.isHidden) return;
let updatedNode = {...node};
@ -150,11 +152,11 @@ class FileExplorer extends React.Component {
updatedNode.children = children;
}
}
// if this is the selected node, set it as active
if (this.nodeEquals(node, cursor)) {
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
if (node.children) updatedNode.toggled = cursor.toggled;
}
@ -178,7 +180,12 @@ class FileExplorer extends React.Component {
onToggle={this.onToggle.bind(this)}
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>
);
}
}

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

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

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

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

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

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