Merge pull request #1009 from embark-framework/features/icons-for-explorer

Add icons for the contract page
This commit is contained in:
Iuri Matias 2018-10-30 20:46:23 +01:00 committed by GitHub
commit 4ee0f38278
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 10 additions and 9 deletions

View File

@ -1,5 +1,6 @@
import PropTypes from "prop-types"; import PropTypes from "prop-types";
import React from 'react'; import React from 'react';
import FontAwesomeIcon from "react-fontawesome";
import { TabContent, TabPane, Nav, NavItem, NavLink, Card, CardBody, CardTitle } from 'reactstrap'; import { TabContent, TabPane, Nav, NavItem, NavLink, Card, CardBody, CardTitle } from 'reactstrap';
import classnames from 'classnames'; import classnames from 'classnames';
@ -37,7 +38,7 @@ class ContractLayout extends React.Component {
className={classnames({ active: this.state.activeTab === '1' })} className={classnames({ active: this.state.activeTab === '1' })}
onClick={() => { this.toggle('1'); }} onClick={() => { this.toggle('1'); }}
> >
Overview <FontAwesomeIcon className="mr-2" name="bolt" />Interact
</NavLink> </NavLink>
</NavItem> </NavItem>
<NavItem> <NavItem>
@ -45,7 +46,7 @@ class ContractLayout extends React.Component {
className={classnames({ active: this.state.activeTab === '2' })} className={classnames({ active: this.state.activeTab === '2' })}
onClick={() => { this.toggle('2'); }} onClick={() => { this.toggle('2'); }}
> >
Detail <FontAwesomeIcon className="mr-2" name="info-circle" />Details
</NavLink> </NavLink>
</NavItem> </NavItem>
<NavItem> <NavItem>
@ -53,7 +54,7 @@ class ContractLayout extends React.Component {
className={classnames({ active: this.state.activeTab === '3' })} className={classnames({ active: this.state.activeTab === '3' })}
onClick={() => { this.toggle('3'); }} onClick={() => { this.toggle('3'); }}
> >
Transactions <FontAwesomeIcon className="mr-2" name="list-alt" />Transactions
</NavLink> </NavLink>
</NavItem> </NavItem>
<NavItem> <NavItem>
@ -61,7 +62,7 @@ class ContractLayout extends React.Component {
className={classnames({ active: this.state.activeTab === '4' })} className={classnames({ active: this.state.activeTab === '4' })}
onClick={() => { this.toggle('4'); }} onClick={() => { this.toggle('4'); }}
> >
Debugger <FontAwesomeIcon className="mr-2" name="bug" />Debugger
</NavLink> </NavLink>
</NavItem> </NavItem>
</Nav> </Nav>

View File

@ -36,16 +36,16 @@ class TextEditorToolbar extends Component {
{this.props.isContract && {this.props.isContract &&
<React.Fragment> <React.Fragment>
<NavLink className={classnames('btn', { active: this.isActiveTab(TextEditorToolbarTabs.Overview)})} onClick={() => this.props.openAsideTab(TextEditorToolbarTabs.Overview)}> <NavLink className={classnames('btn', { active: this.isActiveTab(TextEditorToolbarTabs.Overview)})} onClick={() => this.props.openAsideTab(TextEditorToolbarTabs.Overview)}>
<FontAwesomeIcon className="mr-2" name="bolt" /> Interact <FontAwesomeIcon className="mr-2" name="bolt" />Interact
</NavLink> </NavLink>
<NavLink className={classnames('btn', { active: this.isActiveTab(TextEditorToolbarTabs.Detail)})} href="#" onClick={() => this.props.openAsideTab(TextEditorToolbarTabs.Detail)}> <NavLink className={classnames('btn', { active: this.isActiveTab(TextEditorToolbarTabs.Detail)})} href="#" onClick={() => this.props.openAsideTab(TextEditorToolbarTabs.Detail)}>
<FontAwesomeIcon className="mr-2" name="info-circle" /> Details <FontAwesomeIcon className="mr-2" name="info-circle" />Details
</NavLink> </NavLink>
<NavLink className={classnames('btn', { active: this.isActiveTab(TextEditorToolbarTabs.Transactions)})} href="#" onClick={() => this.props.openAsideTab(TextEditorToolbarTabs.Transactions)}> <NavLink className={classnames('btn', { active: this.isActiveTab(TextEditorToolbarTabs.Transactions)})} href="#" onClick={() => this.props.openAsideTab(TextEditorToolbarTabs.Transactions)}>
<FontAwesomeIcon className="mr-2" name="list-alt" /> Transactions <FontAwesomeIcon className="mr-2" name="list-alt" />Transactions
</NavLink> </NavLink>
<NavLink className={classnames('btn', { active: this.isActiveTab(TextEditorToolbarTabs.Debugger)})} href="#" onClick={() => this.props.openAsideTab(TextEditorToolbarTabs.Debugger)}> <NavLink className={classnames('btn', { active: this.isActiveTab(TextEditorToolbarTabs.Debugger)})} href="#" onClick={() => this.props.openAsideTab(TextEditorToolbarTabs.Debugger)}>
<FontAwesomeIcon className="mr-2" name="bug" /> Debugger <FontAwesomeIcon className="mr-2" name="bug" />Debugger
</NavLink> </NavLink>
</React.Fragment> </React.Fragment>
} }

View File

@ -21,7 +21,7 @@ class TextEditorAsideContainer extends Component {
case 'debugger': case 'debugger':
return ( return (
<React.Fragment> <React.Fragment>
<h2>{contract.className} - Details</h2> <h2>{contract.className} - Debugger</h2>
<ContractDebuggerContainer key={index} contract={contract}/> <ContractDebuggerContainer key={index} contract={contract}/>
</React.Fragment> </React.Fragment>
); );