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';

117
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'
hint={
<FormattedMessage <FormattedMessage
id='settings.parity.modes.hint' id='settings.parity.modes.hint'
defaultMessage='the syncing mode for the Parity node' defaultMessage='Choose the syncing mode for the Parity node'
/> />
} <Menu
label={ vertical
<FormattedMessage className='parityModeSelect'
id='settings.parity.modes.label'
defaultMessage='mode of operation'
/>
}
onChange={ this.onChangeMode }
value={ mode } value={ mode }
> >
<Dropdown item text={ mode }>
<Dropdown.Menu>
{ {
this.renderItem('active', ( this.renderItem('active', this.onChangeMode, (
<FormattedMessage <FormattedMessage
id='settings.parity.modes.mode_active' id='settings.parity.modes.mode_active'
defaultMessage='Parity continuously syncs the chain' defaultMessage='Continuously sync'
/> />
)) ))
} }
{ {
this.renderItem('passive', ( this.renderItem('passive', this.onChangeMode, (
<FormattedMessage <FormattedMessage
id='settings.parity.modes.mode_passive' id='settings.parity.modes.mode_passive'
defaultMessage='Parity syncs initially, then sleeps and wakes regularly to resync' defaultMessage='Sync on intervals'
/> />
)) ))
} }
{ {
this.renderItem('dark', ( this.renderItem('dark', this.onChangeMode, (
<FormattedMessage <FormattedMessage
id='settings.parity.modes.mode_dark' id='settings.parity.modes.mode_dark'
defaultMessage='Parity syncs only when the RPC is active' defaultMessage='Sync when RPC is active'
/> />
)) ))
} }
{ {
this.renderItem('offline', ( this.renderItem('offline', this.onChangeMode, (
<FormattedMessage <FormattedMessage
id='settings.parity.modes.mode_offline' id='settings.parity.modes.mode_offline'
defaultMessage="Parity doesn't sync" defaultMessage='No Syncing'
/> />
)) ))
} }
</Select> </Dropdown.Menu>
</Dropdown>
</Menu>
</div>
); );
} }
@ -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'
hint={
<FormattedMessage <FormattedMessage
id='settings.parity.chains.hint' id='settings.parity.chains.hint'
defaultMessage='the chain for the Parity node to sync to' defaultMessage='Choose the chain for the Parity node to sync to'
/> />
} <Menu
label={ vertical
<FormattedMessage className='parityChainSelect'
id='settings.parity.chains.label'
defaultMessage='chain/network to sync'
/>
}
onChange={ this.onChangeChain }
value={ chain } value={ chain }
> >
<Dropdown item text={ chain }>
<Dropdown.Menu>
{ {
this.renderItem('foundation', ( this.renderItem('foundation', this.onChangeChain, (
<FormattedMessage <FormattedMessage
id='settings.parity.chains.chain_foundation' id='settings.parity.chains.chain_foundation'
defaultMessage='Parity syncs to the Ethereum network launched by the Ethereum Foundation' defaultMessage='Ethereum Foundation'
/> />
)) ))
} }
{ {
this.renderItem('kovan', ( this.renderItem('kovan', this.onChangeChain, (
<FormattedMessage <FormattedMessage
id='settings.parity.chains.chain_kovan' id='settings.parity.chains.chain_kovan'
defaultMessage='Parity syncs to the Kovan test network' defaultMessage='Kovan test network'
/> />
)) ))
} }
{ {
this.renderItem('olympic', ( this.renderItem('olympic', this.onChangeChain, (
<FormattedMessage <FormattedMessage
id='settings.parity.chains.chain_olympic' id='settings.parity.chains.chain_olympic'
defaultMessage='Parity syncs to the Olympic test network' defaultMessage='Olympic test network'
/> />
)) ))
} }
{ {
this.renderItem('morden', ( this.renderItem('morden', this.onChangeChain, (
<FormattedMessage <FormattedMessage
id='settings.parity.chains.cmorden_kovan' id='settings.parity.chains.cmorden_kovan'
defaultMessage='Parity syncs to Morden (Classic) test network' defaultMessage='Morden (Classic) test network'
/> />
)) ))
} }
{ {
this.renderItem('ropsten', ( this.renderItem('ropsten', this.onChangeChain, (
<FormattedMessage <FormattedMessage
id='settings.parity.chains.chain_ropsten' id='settings.parity.chains.chain_ropsten'
defaultMessage='Parity syncs to the Ropsten test network' defaultMessage='Ropsten test network'
/> />
)) ))
} }
{ {
this.renderItem('classic', ( this.renderItem('classic', this.onChangeChain, (
<FormattedMessage <FormattedMessage
id='settings.parity.chains.chain_classic' id='settings.parity.chains.chain_classic'
defaultMessage='Parity syncs to the Ethereum Classic network' defaultMessage='Ethereum Classic network'
/> />
)) ))
} }
{ {
this.renderItem('expanse', ( this.renderItem('expanse', this.onChangeChain, (
<FormattedMessage <FormattedMessage
id='settings.parity.chains.chain_expanse' id='settings.parity.chains.chain_expanse'
defaultMessage='Parity syncs to the Expanse network' defaultMessage='Expanse network'
/> />
)) ))
} }
{ {
this.renderItem('dev', ( this.renderItem('dev', this.onChangeChain, (
<FormattedMessage <FormattedMessage
id='settings.parity.chains.chain_dev' id='settings.parity.chains.chain_dev'
defaultMessage='Parity uses a local development chain' defaultMessage='Local development chain'
/> />
)) ))
} }
</Select> </Dropdown.Menu>
</Dropdown>
</Menu>
</div>
); );
} }
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;
}

36
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 }
title={
<FormattedMessage id='settings.label' />
}
>
<Tabs className={ styles.tabs } value={ hash }>
{ this.renderTab(hash, 'views', <VisibleIcon />) } { this.renderTab(hash, 'views', <VisibleIcon />) }
{ this.renderTab(hash, 'background', <BackgroundIcon />) } { this.renderTab(hash, 'background', <BackgroundIcon />) }
{ proxy } { proxy }
{ this.renderTab(hash, 'parity', <img src={ imagesEthcoreBlock } className={ styles.imageIcon } />) } { this.renderTab(hash, 'parity', <img src={ imagesEthcoreBlock } className={ styles.imageIcon } />) }
</Tabs> </Menu>
</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}`);
}; };
} }
} }