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

UI 2 styling (#5518)

Browse Source 
* [ci skip] js-precompiled 20170426-110849

* export topNavigate function

* Stateless components in shell

* Connection icon fill

* Parity overlay only in dapps

* Additional buttons

* Adjust toolbar styles

* Adjust ParityBar button styling

* Complete icon conversion
This commit is contained in:
Jaco Greeff
2017-04-27 13:28:02 +02:00
committed by GitHub
parent c9d41beb28
commit d16cfc736d
23 changed files with 311 additions and 259 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
js/src/shell/Application/Container/container.js
View File

@@ -14,35 +14,31 @@
// You should have received a copy of the GNU General Public License
// along with Parity. If not, see <http://www.gnu.org/licenses/>.
import React, { Component, PropTypes } from 'react';
import React, { PropTypes } from 'react';
import { FirstRun, UpgradeParity } from '~/modals';
import { Errors, Tooltips } from '~/ui';
import styles from '../application.css';
export default class Container extends Component {
static propTypes = {
children: PropTypes.node.isRequired,
onCloseFirstRun: PropTypes.func,
showFirstRun: PropTypes.bool,
upgradeStore: PropTypes.object.isRequired
};
render () {
const { children, onCloseFirstRun, showFirstRun, upgradeStore } = this.props;
return (
<div className={ styles.container }>
<FirstRun
onClose={ onCloseFirstRun }
visible={ showFirstRun }
/>
<Tooltips />
<UpgradeParity upgradeStore={ upgradeStore } />
<Errors />
{ children }
</div>
);
}
export default function Container ({ children, onCloseFirstRun, showFirstRun, upgradeStore }) {
return (
<div className={ styles.container }>
<FirstRun
onClose={ onCloseFirstRun }
visible={ showFirstRun }
/>
<Tooltips />
<UpgradeParity upgradeStore={ upgradeStore } />
<Errors />
{ children }
</div>
);
}
Container.propTypes = {
children: PropTypes.node.isRequired,
onCloseFirstRun: PropTypes.func,
showFirstRun: PropTypes.bool,
upgradeStore: PropTypes.object.isRequired
};

28
js/src/shell/Application/DappContainer/dappContainer.js
View File

@@ -14,25 +14,21 @@
// You should have received a copy of the GNU General Public License
// along with Parity. If not, see <http://www.gnu.org/licenses/>.
import React, { Component, PropTypes } from 'react';
import React, { PropTypes } from 'react';
import { Errors } from '~/ui';
import styles from '../application.css';
export default class DappContainer extends Component {
static propTypes = {
children: PropTypes.node.isRequired
};
render () {
const { children } = this.props;
return (
<div className={ styles.container }>
<Errors />
{ children }
</div>
);
}
export default function DappContainer ({ children }) {
return (
<div className={ styles.container }>
<Errors />
{ children }
</div>
);
}
DappContainer.propTypes = {
children: PropTypes.node.isRequired
};

22
js/src/shell/Application/FrameError/frameError.js
View File

@@ -14,20 +14,18 @@
// You should have received a copy of the GNU General Public License
// along with Parity. If not, see <http://www.gnu.org/licenses/>.
import React, { Component } from 'react';
import React from 'react';
import { FormattedMessage } from 'react-intl';
import styles from './frameError.css';
export default class FrameError extends Component {
render () {
return (
<div className={ styles.error }>
<FormattedMessage
id='application.frame.error'
defaultMessage='ERROR: This application cannot and should not be loaded in an embedded iFrame'
/>
</div>
);
}
export default function FrameError () {
return (
<div className={ styles.error }>
<FormattedMessage
id='application.frame.error'
defaultMessage='ERROR: This application cannot and should not be loaded in an embedded iFrame'
/>
</div>
);
}

76
js/src/shell/Application/Status/Consensus/consensus.js Normal file
View File

@@ -0,0 +1,76 @@
// Copyright 2015-2017 Parity Technologies (UK) Ltd.
// This file is part of Parity.
// Parity is free software: you can redistribute it and/or modify
// it under the terms of the GNU General Public License as published by
// the Free Software Foundation, either version 3 of the License, or
// (at your option) any later version.
// Parity is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
// GNU General Public License for more details.
// You should have received a copy of the GNU General Public License
// along with Parity. If not, see <http://www.gnu.org/licenses/>.
import React, { PropTypes } from 'react';
import { FormattedMessage } from 'react-intl';
export default function Consensus ({ upgradeStore }) {
if (!upgradeStore || !upgradeStore.consensusCapability) {
return null;
}
if (upgradeStore.consensusCapability === 'capable') {
return (
<div>
<FormattedMessage
id='application.status.consensus.capable'
defaultMessage='Capable'
/>
</div>
);
}
if (upgradeStore.consensusCapability.capableUntil) {
return (
<div>
<FormattedMessage
id='application.status.consensus.capableUntil'
defaultMessage='Capable until #{blockNumber}'
values={ {
blockNumber: upgradeStore.consensusCapability.capableUntil
} }
/>
</div>
);
}
if (upgradeStore.consensusCapability.incapableSince) {
return (
<div>
<FormattedMessage
id='application.status.consensus.incapableSince'
defaultMessage='Incapable since #{blockNumber}'
values={ {
blockNumber: upgradeStore.consensusCapability.incapableSince
} }
/>
</div>
);
}
return (
<div>
<FormattedMessage
id='application.status.consensus.unknown'
defaultMessage='Unknown capability'
/>
</div>
);
}
Consensus.propTypes = {
upgradeStore: PropTypes.object.isRequired
};

17
js/src/shell/Application/Status/Consensus/index.js Normal file
View File

@@ -0,0 +1,17 @@
// Copyright 2015-2017 Parity Technologies (UK) Ltd.
// This file is part of Parity.
// Parity is free software: you can redistribute it and/or modify
// it under the terms of the GNU General Public License as published by
// the Free Software Foundation, either version 3 of the License, or
// (at your option) any later version.
// Parity is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
// GNU General Public License for more details.
// You should have received a copy of the GNU General Public License
// along with Parity. If not, see <http://www.gnu.org/licenses/>.
export default from './consensus';

17
js/src/shell/Application/Status/Upgrade/index.js Normal file
View File

@@ -0,0 +1,17 @@
// Copyright 2015-2017 Parity Technologies (UK) Ltd.
// This file is part of Parity.
// Parity is free software: you can redistribute it and/or modify
// it under the terms of the GNU General Public License as published by
// the Free Software Foundation, either version 3 of the License, or
// (at your option) any later version.
// Parity is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
// GNU General Public License for more details.
// You should have received a copy of the GNU General Public License
// along with Parity. If not, see <http://www.gnu.org/licenses/>.
export default from './upgrade';

42
js/src/shell/Application/Status/Upgrade/upgrade.js Normal file
View File

@@ -0,0 +1,42 @@
// Copyright 2015-2017 Parity Technologies (UK) Ltd.
// This file is part of Parity.
// Parity is free software: you can redistribute it and/or modify
// it under the terms of the GNU General Public License as published by
// the Free Software Foundation, either version 3 of the License, or
// (at your option) any later version.
// Parity is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
// GNU General Public License for more details.
// You should have received a copy of the GNU General Public License
// along with Parity. If not, see <http://www.gnu.org/licenses/>.
import React, { PropTypes } from 'react';
import { FormattedMessage } from 'react-intl';
export default function Upgrade ({ upgradeStore }) {
if (!upgradeStore.available) {
return null;
}
return (
<div>
<a
href='javascript:void(0)'
onClick={ upgradeStore.openModal }
>
<FormattedMessage
id='application.status.upgrade'
defaultMessage='Upgrade'
/>
</a>
</div>
);
}
Upgrade.propTypes = {
upgradeStore: PropTypes.object.isRequired
};

140
js/src/shell/Application/Status/status.js
View File

@@ -14,127 +14,47 @@
// You should have received a copy of the GNU General Public License
// along with Parity. If not, see <http://www.gnu.org/licenses/>.
import React, { Component, PropTypes } from 'react';
import { FormattedMessage } from 'react-intl';
import React, { PropTypes } from 'react';
import { connect } from 'react-redux';
import { BlockStatus } from '~/ui';
import Consensus from './Consensus';
import Upgrade from './Upgrade';
import styles from './status.css';
class Status extends Component {
static propTypes = {
clientVersion: PropTypes.string,
isTest: PropTypes.bool,
netChain: PropTypes.string,
netPeers: PropTypes.object,
upgradeStore: PropTypes.object.isRequired
}
render () {
const { clientVersion, isTest, netChain, netPeers } = this.props;
return (
<div className={ styles.status }>
<div className={ styles.version }>
{ clientVersion }
function Status ({ clientVersion, isTest, netChain, netPeers, upgradeStore }) {
return (
<div className={ styles.status }>
<div className={ styles.version }>
{ clientVersion }
</div>
<div className={ styles.upgrade }>
<Consensus upgradeStore={ upgradeStore } />
<Upgrade upgradeStore={ upgradeStore } />
</div>
<div className={ styles.netinfo }>
<BlockStatus />
<div className={ `${styles.network} ${styles[isTest ? 'test' : 'live']}` }>
{ netChain }
</div>
<div className={ styles.upgrade }>
{ this.renderConsensus() }
{ this.renderUpgradeButton() }
</div>
<div className={ styles.netinfo }>
<BlockStatus />
<div className={ `${styles.network} ${styles[isTest ? 'test' : 'live']}` }>
{ netChain }
</div>
<div className={ styles.peers }>
{ netPeers.active.toFormat() }/{ netPeers.connected.toFormat() }/{ netPeers.max.toFormat() } peers
</div>
<div className={ styles.peers }>
{ netPeers.active.toFormat() }/{ netPeers.connected.toFormat() }/{ netPeers.max.toFormat() } peers
</div>
</div>
);
}
renderConsensus () {
const { upgradeStore } = this.props;
if (!upgradeStore || !upgradeStore.consensusCapability) {
return null;
}
if (upgradeStore.consensusCapability === 'capable') {
return (
<div>
<FormattedMessage
id='application.status.consensus.capable'
defaultMessage='Capable'
/>
</div>
);
}
if (upgradeStore.consensusCapability.capableUntil) {
return (
<div>
<FormattedMessage
id='application.status.consensus.capableUntil'
defaultMessage='Capable until #{blockNumber}'
values={ {
blockNumber: upgradeStore.consensusCapability.capableUntil
} }
/>
</div>
);
}
if (upgradeStore.consensusCapability.incapableSince) {
return (
<div>
<FormattedMessage
id='application.status.consensus.incapableSince'
defaultMessage='Incapable since #{blockNumber}'
values={ {
blockNumber: upgradeStore.consensusCapability.incapableSince
} }
/>
</div>
);
}
return (
<div>
<FormattedMessage
id='application.status.consensus.unknown'
defaultMessage='Unknown capability'
/>
</div>
);
}
renderUpgradeButton () {
const { upgradeStore } = this.props;
if (!upgradeStore.available) {
return null;
}
return (
<div>
<a
href='javascript:void(0)'
onClick={ upgradeStore.openModal }
>
<FormattedMessage
id='application.status.upgrade'
defaultMessage='Upgrade'
/>
</a>
</div>
);
}
</div>
);
}
Status.propTypes = {
clientVersion: PropTypes.string,
isTest: PropTypes.bool,
netChain: PropTypes.string,
netPeers: PropTypes.object,
upgradeStore: PropTypes.object.isRequired
};
function mapStateToProps (state) {
const { clientVersion, netPeers, netChain, isTest } = state.nodeStatus;

2
js/src/shell/Application/application.js
View File

@@ -54,7 +54,7 @@ class Application extends Component {
render () {
const [root] = (window.location.hash || '').replace('#/', '').split('/');
const isMinimized = root === 'app' || root === 'web';
const isMinimized = root !== '';
if (process.env.NODE_ENV !== 'production' && root === 'playground') {
return (

10
js/src/shell/Connection/connection.css
View File

@@ -77,14 +77,12 @@
.iconName {
}
.icon .svg {
width: 6em !important;
height: 6em !important;
.icon i {
font-size: 6em;
}
.iconSmall .svg {
width: 3em !important;
height: 3em !important;
.iconSmall i {
font-size: 3em;
}
.console {

14
js/src/shell/ParityBar/parityBar.css
View File

@@ -172,8 +172,9 @@ $modalZ: 10001;
}
.label {
position: relative;
display: inline-block;
padding: 5px;
position: relative;
vertical-align: top;
}
@@ -202,11 +203,14 @@ $modalZ: 10001;
.header,
.corner {
button {
color: white !important;
}
background-color: transparent !important;
margin: 0 !important;
padding: 0 0.5em !important;
svg {
fill: white !important;
i {
font-size: 24px !important;
height: 24px !important;
}
}
}

2
js/src/shell/ParityBar/parityBar.js
View File

@@ -285,7 +285,7 @@ class ParityBar extends Component {
if (!externalLink) {
return (
<Link to='/apps'>
<Link to='/'>
{ button }
</Link>
);

4
js/src/shell/index.js
View File

@@ -39,8 +39,6 @@ import Application from './Application';
import Dapp from './Dapp';
import Dapps from './Dapps';
import styles from '~/reset.css';
import '~/environment';
import '~/../assets/fonts/Roboto/font.css';
@@ -90,7 +88,7 @@ function onEnterDapp ({ params }) {
ReactDOM.render(
<ContextProvider api={ api } muiTheme={ muiTheme } store={ store }>
<Router className={ styles.reset } history={ hashHistory }>
<Router history={ hashHistory }>
<Route path='/' component={ Application }>
<Redirect from='/auth' to='/' />
<Route path='/:id' component={ Dapp } onEnter={ onEnterDapp } />