diff --git a/embark-ui/src/components/TextEditorToolbar.js b/embark-ui/src/components/TextEditorToolbar.js
index 6f7ca69a0..d89bfacad 100644
--- a/embark-ui/src/components/TextEditorToolbar.js
+++ b/embark-ui/src/components/TextEditorToolbar.js
@@ -4,12 +4,12 @@ import {Button, Nav, NavLink} from 'reactstrap';
import classnames from 'classnames';
import FontAwesomeIcon from 'react-fontawesome';
-const TextEditorToolbarTabs = {
- Overview: 'overview',
- Detail: 'detail',
- Transactions: 'transactions',
- Debugger: 'debugger',
- Browser: 'browser'
+export const TextEditorToolbarTabs = {
+ Interact: { label: 'Interact', icon: 'bolt' },
+ Ietails: { label: 'Details', icon: 'info-cicle' },
+ Debugger: { label: 'Debugger', icon: 'bug' },
+ Transactions: { label: 'Transactions', icon: 'list-alt' },
+ Browser: { label: 'Browser', icon: 'eye' }
};
class TextEditorToolbar extends Component {
@@ -18,6 +18,18 @@ class TextEditorToolbar extends Component {
return this.props.activeTab === tab;
}
+ isBrowserTab(tab) {
+ return tab === TextEditorToolbarTabs.Browser;
+ }
+
+ renderTab(tab) {
+ return (
+ this.props.openAsideTab(tab)}>
+ {tab.label}
+
+ );
+ }
+
render() {
return (
@@ -33,27 +45,9 @@ class TextEditorToolbar extends Component {
-
-
);
@@ -66,7 +60,7 @@ TextEditorToolbar.propTypes = {
remove: PropTypes.func,
toggleShowHiddenFiles: PropTypes.func,
openAsideTab: PropTypes.func,
- activeTab: PropTypes.string
+ activeTab: PropTypes.object
};
export default TextEditorToolbar;
diff --git a/embark-ui/src/containers/EditorContainer.js b/embark-ui/src/containers/EditorContainer.js
index 284aba3b3..24dc0cff0 100644
--- a/embark-ui/src/containers/EditorContainer.js
+++ b/embark-ui/src/containers/EditorContainer.js
@@ -15,7 +15,7 @@ import './EditorContainer.css';
class EditorContainer extends React.Component {
constructor(props) {
super(props);
- this.state = {currentAsideTab: '', showHiddenFiles: false, currentFile: this.props.currentFile};
+ this.state = {currentAsideTab: {}, showHiddenFiles: false, currentFile: this.props.currentFile};
}
componentDidMount() {
@@ -43,19 +43,19 @@ class EditorContainer extends React.Component {
}
openAsideTab(newTab) {
- if (newTab === this.state.currentAsideTab) {
- return this.setState({currentAsideTab: ''});
+ if (newTab.label === this.state.currentAsideTab.label) {
+ return this.setState({currentAsideTab: {}});
}
this.setState({currentAsideTab: newTab});
}
textEditorMdSize() {
- return this.state.currentAsideTab.length ? 7 : 10;
+ return this.state.currentAsideTab.label ? 7 : 10;
}
render() {
return (
-
+
this.openAsideTab(newTab)}
isContract={this.isContract()}
diff --git a/embark-ui/src/containers/TextEditorAsideContainer.js b/embark-ui/src/containers/TextEditorAsideContainer.js
index f7ae52cdc..47f5f95da 100644
--- a/embark-ui/src/containers/TextEditorAsideContainer.js
+++ b/embark-ui/src/containers/TextEditorAsideContainer.js
@@ -10,6 +10,7 @@ import ContractDetail from '../components/ContractDetail';
import ContractTransactionsContainer from './ContractTransactionsContainer';
import ContractOverviewContainer from '../containers/ContractOverviewContainer';
import ContractDebuggerContainer from '../containers/ContractDebuggerContainer';
+import { TextEditorToolbarTabs } from '../components/TextEditorToolbar';
class TextEditorAsideContainer extends Component {
componentDidMount() {
@@ -18,28 +19,28 @@ class TextEditorAsideContainer extends Component {
renderContent(contract, index) {
switch (this.props.currentAsideTab) {
- case 'debugger':
+ case TextEditorToolbarTabs.Debugger:
return (
{contract.className} - Debugger
);
- case 'detail':
+ case TextEditorToolbarTabs.Details:
return (
{contract.className} - Details
);
- case 'transactions':
+ case TextEditorToolbarTabs.Transactions:
return (
{contract.className} - Transactions
);
- case 'overview':
+ case TextEditorToolbarTabs.Interact:
return (
{contract.className} - Interact
@@ -52,7 +53,7 @@ class TextEditorAsideContainer extends Component {
}
render() {
- if (this.props.currentAsideTab === 'browser') {
+ if (this.props.currentAsideTab === TextEditorToolbarTabs.Browser) {
return ;
}
return this.props.contracts.map((contract, index) => {
@@ -75,7 +76,7 @@ function mapStateToProps(state, props) {
TextEditorAsideContainer.propTypes = {
currentFile: PropTypes.object,
- currentAsideTab: PropTypes.string,
+ currentAsideTab: PropTypes.object,
contract: PropTypes.array,
fetchContracts: PropTypes.func,
contracts: PropTypes.array
diff --git a/embark-ui/src/containers/TextEditorToolbarContainer.js b/embark-ui/src/containers/TextEditorToolbarContainer.js
index 0c229c21e..bd028a130 100644
--- a/embark-ui/src/containers/TextEditorToolbarContainer.js
+++ b/embark-ui/src/containers/TextEditorToolbarContainer.js
@@ -34,7 +34,7 @@ TextEditorToolbarContainer.propTypes = {
removeFile: PropTypes.func,
toggleShowHiddenFiles: PropTypes.func,
openAsideTab: PropTypes.func,
- activeTab: PropTypes.string
+ activeTab: PropTypes.object
};
export default connect(