grassrootseconomics/openethereum
5
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

mui-be-gone (#5539)

Browse Source 
* mui-be-gone

* Revert ~/dapp mui removal
This commit is contained in:
Craig O'Connor 2017-05-03 06:16:20 -04:00 committed by Jaco Greeff
parent 1c2580b4a6
commit 5323fb5e08
4 changed files with 164 additions and 169 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
js/src/dapps/registry/Lookup/lookup.js
View File

@ -18,11 +18,11 @@ import React, { Component, PropTypes } from 'react';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { bindActionCreators } from 'redux'; import { bindActionCreators } from 'redux';
import { Card, CardHeader, CardText } from 'material-ui/Card'; import { Card, CardHeader, CardText } from 'material-ui/Card';
import RaisedButton from 'material-ui/RaisedButton';
import SearchIcon from 'material-ui/svg-icons/action/search';
import TextField from 'material-ui/TextField'; import TextField from 'material-ui/TextField';
import DropDownMenu from 'material-ui/DropDownMenu'; import DropDownMenu from 'material-ui/DropDownMenu';
import MenuItem from 'material-ui/MenuItem'; import MenuItem from 'material-ui/MenuItem';
import RaisedButton from 'material-ui/RaisedButton';
import SearchIcon from 'material-ui/svg-icons/action/search';
import keycode from 'keycode'; import keycode from 'keycode';
import { nullableProptype } from '~/util/proptypes'; import { nullableProptype } from '~/util/proptypes';

281
js/src/views/Settings/Node/parity.js
View File

@ -14,7 +14,7 @@
// You should have received a copy of the GNU General Public License // You should have received a copy of the GNU General Public License
// along with Parity. If not, see <http://www.gnu.org/licenses/>. // along with Parity. If not, see <http://www.gnu.org/licenses/>.
import { MenuItem } from 'material-ui'; import { Dropdown, Menu } from 'semantic-ui-react';
import { observer } from 'mobx-react'; import { observer } from 'mobx-react';
import React, { Component, PropTypes } from 'react'; import React, { Component, PropTypes } from 'react';
import { FormattedMessage } from 'react-intl'; import { FormattedMessage } from 'react-intl';
@ -67,15 +67,16 @@ export default class Parity extends Component {
); );
} }
renderItem (name, label) { renderItem (name, func, label) {
return ( return (
<MenuItem <Dropdown.Item
key={ name } key={ name }
label={ label } contenet={ label }
value={ name } name={ name }
onClick={ func }
> >
{ label } { label }
</MenuItem> </Dropdown.Item>
); );
} }
@ -131,56 +132,54 @@ export default class Parity extends Component {
const { mode } = this.store; const { mode } = this.store;
return ( return (
<Select <div className={ layout.option }>
id='parityModeSelect' <FormattedMessage
hint={ id='settings.parity.modes.hint'
<FormattedMessage defaultMessage='Choose the syncing mode for the Parity node'
id='settings.parity.modes.hint' />
defaultMessage='the syncing mode for the Parity node' <Menu
/> vertical
} className='parityModeSelect'
label={ value={ mode }
<FormattedMessage >
id='settings.parity.modes.label' <Dropdown item text={ mode }>
defaultMessage='mode of operation' <Dropdown.Menu>
/> {
} this.renderItem('active', this.onChangeMode, (
onChange={ this.onChangeMode } <FormattedMessage
value={ mode } id='settings.parity.modes.mode_active'
> defaultMessage='Continuously sync'
{ />
this.renderItem('active', ( ))
<FormattedMessage }
id='settings.parity.modes.mode_active' {
defaultMessage='Parity continuously syncs the chain' this.renderItem('passive', this.onChangeMode, (
/> <FormattedMessage
)) id='settings.parity.modes.mode_passive'
} defaultMessage='Sync on intervals'
{ />
this.renderItem('passive', ( ))
<FormattedMessage }
id='settings.parity.modes.mode_passive' {
defaultMessage='Parity syncs initially, then sleeps and wakes regularly to resync' this.renderItem('dark', this.onChangeMode, (
/> <FormattedMessage
)) id='settings.parity.modes.mode_dark'
} defaultMessage='Sync when RPC is active'
{ />
this.renderItem('dark', ( ))
<FormattedMessage }
id='settings.parity.modes.mode_dark' {
defaultMessage='Parity syncs only when the RPC is active' this.renderItem('offline', this.onChangeMode, (
/> <FormattedMessage
)) id='settings.parity.modes.mode_offline'
} defaultMessage='No Syncing'
{ />
this.renderItem('offline', ( ))
<FormattedMessage }
id='settings.parity.modes.mode_offline' </Dropdown.Menu>
defaultMessage="Parity doesn't sync" </Dropdown>
/> </Menu>
)) </div>
}
</Select>
); );
} }
@ -188,96 +187,94 @@ export default class Parity extends Component {
const { chain } = this.store; const { chain } = this.store;
return ( return (
<Select <div className={ layout.option }>
id='parityChainSelect' <FormattedMessage
hint={ id='settings.parity.chains.hint'
<FormattedMessage defaultMessage='Choose the chain for the Parity node to sync to'
id='settings.parity.chains.hint' />
defaultMessage='the chain for the Parity node to sync to' <Menu
/> vertical
} className='parityChainSelect'
label={ value={ chain }
<FormattedMessage >
id='settings.parity.chains.label' <Dropdown item text={ chain }>
defaultMessage='chain/network to sync' <Dropdown.Menu>
/> {
} this.renderItem('foundation', this.onChangeChain, (
onChange={ this.onChangeChain } <FormattedMessage
value={ chain } id='settings.parity.chains.chain_foundation'
> defaultMessage='Ethereum Foundation'
{ />
this.renderItem('foundation', ( ))
<FormattedMessage }
id='settings.parity.chains.chain_foundation' {
defaultMessage='Parity syncs to the Ethereum network launched by the Ethereum Foundation' this.renderItem('kovan', this.onChangeChain, (
/> <FormattedMessage
)) id='settings.parity.chains.chain_kovan'
} defaultMessage='Kovan test network'
{ />
this.renderItem('kovan', ( ))
<FormattedMessage }
id='settings.parity.chains.chain_kovan' {
defaultMessage='Parity syncs to the Kovan test network' this.renderItem('olympic', this.onChangeChain, (
/> <FormattedMessage
)) id='settings.parity.chains.chain_olympic'
} defaultMessage='Olympic test network'
{ />
this.renderItem('olympic', ( ))
<FormattedMessage }
id='settings.parity.chains.chain_olympic' {
defaultMessage='Parity syncs to the Olympic test network' this.renderItem('morden', this.onChangeChain, (
/> <FormattedMessage
)) id='settings.parity.chains.cmorden_kovan'
} defaultMessage='Morden (Classic) test network'
{ />
this.renderItem('morden', ( ))
<FormattedMessage }
id='settings.parity.chains.cmorden_kovan' {
defaultMessage='Parity syncs to Morden (Classic) test network' this.renderItem('ropsten', this.onChangeChain, (
/> <FormattedMessage
)) id='settings.parity.chains.chain_ropsten'
} defaultMessage='Ropsten test network'
{ />
this.renderItem('ropsten', ( ))
<FormattedMessage }
id='settings.parity.chains.chain_ropsten' {
defaultMessage='Parity syncs to the Ropsten test network' this.renderItem('classic', this.onChangeChain, (
/> <FormattedMessage
)) id='settings.parity.chains.chain_classic'
} defaultMessage='Ethereum Classic network'
{ />
this.renderItem('classic', ( ))
<FormattedMessage }
id='settings.parity.chains.chain_classic' {
defaultMessage='Parity syncs to the Ethereum Classic network' this.renderItem('expanse', this.onChangeChain, (
/> <FormattedMessage
)) id='settings.parity.chains.chain_expanse'
} defaultMessage='Expanse network'
{ />
this.renderItem('expanse', ( ))
<FormattedMessage }
id='settings.parity.chains.chain_expanse' {
defaultMessage='Parity syncs to the Expanse network' this.renderItem('dev', this.onChangeChain, (
/> <FormattedMessage
)) id='settings.parity.chains.chain_dev'
} defaultMessage='Local development chain'
{ />
this.renderItem('dev', ( ))
<FormattedMessage }
id='settings.parity.chains.chain_dev' </Dropdown.Menu>
defaultMessage='Parity uses a local development chain' </Dropdown>
/> </Menu>
)) </div>
}
</Select>
); );
} }
onChangeMode = (event, index, mode) => { onChangeMode = (e, mode) => {
this.store.changeMode(mode || event.target.value); this.store.changeMode(mode.name);
} }
onChangeChain = (event, index, chain) => { onChangeChain = (e, chain) => {
this.store.changeChain(chain || event.target.value); this.store.changeChain(chain.name);
} }
} }

4
js/src/views/Settings/layout.css
View File

@ -67,3 +67,7 @@
.center { .center {
text-align: center; text-align: center;
} }
.option {
margin-bottom: 1em;
}

44
js/src/views/Settings/settings.js
View File

@ -16,11 +16,12 @@
import React, { Component, PropTypes } from 'react'; import React, { Component, PropTypes } from 'react';
import { FormattedMessage } from 'react-intl'; import { FormattedMessage } from 'react-intl';
import { Tab, Tabs } from 'material-ui'; import { Menu } from 'semantic-ui-react';
// import { Tab, Tabs } from 'material-ui';
import imagesEthcoreBlock from '~/../assets/images/parity-logo-white-no-text.svg'; import imagesEthcoreBlock from '~/../assets/images/parity-logo-white-no-text.svg';
import { Actionbar, Page } from '~/ui'; import { Page } from '~/ui';
import { BackgroundIcon, EthernetIcon, VisibleIcon } from '~/ui/Icons'; import { BackgroundIcon, EthernetIcon, VisibleIcon } from '~/ui/Icons';
import styles from './settings.css'; import styles from './settings.css';
@ -46,19 +47,12 @@ export default class Settings extends Component {
return ( return (
<div> <div>
<Actionbar <Menu className={ styles.tabs } name={ hash }>
className={ styles.bar } { this.renderTab(hash, 'views', <VisibleIcon />) }
title={ { this.renderTab(hash, 'background', <BackgroundIcon />) }
<FormattedMessage id='settings.label' /> { proxy }
} { this.renderTab(hash, 'parity', <img src={ imagesEthcoreBlock } className={ styles.imageIcon } />) }
> </Menu>
<Tabs className={ styles.tabs } value={ hash }>
{ this.renderTab(hash, 'views', <VisibleIcon />) }
{ this.renderTab(hash, 'background', <BackgroundIcon />) }
{ proxy }
{ this.renderTab(hash, 'parity', <img src={ imagesEthcoreBlock } className={ styles.imageIcon } />) }
</Tabs>
</Actionbar>
<Page> <Page>
{ children } { children }
</Page> </Page>
@ -66,32 +60,32 @@ export default class Settings extends Component {
); );
} }
renderTab (hash, section, icon) { renderTab (hash, name, icon) {
return ( return (
<Tab <Menu.Item
className={ className={
hash === section hash === name
? styles.tabactive ? styles.tabactive
: styles.tab : styles.tab
} }
icon={ icon } icon={ icon }
key={ section } key={ name }
label={ content={
<div className={ styles.menu }> <div className={ styles.menu }>
<FormattedMessage id={ `settings.${section}.label` } /> <FormattedMessage id={ `settings.${name}.label` } />
</div> </div>
} }
onActive={ this.onActivate(section) } onClick={ this.onActivate(name) }
value={ section } name={ name }
/> />
); );
} }
onActivate = (section) => { onActivate = (name) => {
const { router } = this.context; const { router } = this.context;
return (event) => { return (event) => {
router.push(`/${section}`); router.push(`/${name}`);
}; };
} }
} }