UI 2 styling (#5518)

* [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

2
Cargo.lock generated
View File

@ -1777,7 +1777,7 @@ dependencies = [
[[package]]
name = "parity-ui-precompiled"
version = "1.4.0"
source = "git+https://github.com/paritytech/js-precompiled.git#4d50e7bfc3712287e37da1d45fe983f2a6e69ca7"
source = "git+https://github.com/paritytech/js-precompiled.git#76c40dc32016e1189fd3b35d9cf7b8f53c648162"
dependencies = [
"parity-dapps-glue 1.7.0 (registry+https://github.com/rust-lang/crates.io-index)",
]

View File

@ -1,6 +1,6 @@
{
"name": "parity.js",
"version": "1.7.60",
"version": "1.7.61",
"main": "release/index.js",
"jsnext:main": "src/index.js",
"author": "Parity Team <admin@parity.io>",

View File

@ -16,7 +16,7 @@
import React, { Component, PropTypes } from 'react';
import { AccountsIcon, DoneIcon, FileIcon, FileUploadIcon, KeyboardIcon, KeyIcon, MembershipIcon, PhoneLock } from '~/ui/Icons';
import { AccountsIcon, DoneIcon, FileIcon, FileUploadIcon, KeyboardIcon, KeyIcon, MembershipIcon, QrIcon } from '~/ui/Icons';
import { STAGE_INFO } from '../store';
@ -49,7 +49,7 @@ export default class TypeIcon extends Component {
return <MembershipIcon className={ className } />;
case 'fromQr':
return <PhoneLock className={ className } />;
return <QrIcon className={ className } />;
case 'fromRaw':
return <KeyIcon className={ className } />;

View File

@ -14,24 +14,14 @@
// 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;
export default function Container ({ children, onCloseFirstRun, showFirstRun, upgradeStore }) {
return (
<div className={ styles.container }>
<FirstRun
@ -44,5 +34,11 @@ export default class Container extends Component {
{ children }
</div>
);
}
}
Container.propTypes = {
children: PropTypes.node.isRequired,
onCloseFirstRun: PropTypes.func,
showFirstRun: PropTypes.bool,
upgradeStore: PropTypes.object.isRequired
};

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;
export default function DappContainer ({ children }) {
return (
<div className={ styles.container }>
<Errors />
{ children }
</div>
);
}
}
DappContainer.propTypes = {
children: PropTypes.node.isRequired
};

View File

@ -14,13 +14,12 @@
// 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 () {
export default function FrameError () {
return (
<div className={ styles.error }>
<FormattedMessage
@ -29,5 +28,4 @@ export default class FrameError extends Component {
/>
</div>
);
}
}

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

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

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

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

View File

@ -14,34 +14,25 @@
// 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;
function Status ({ clientVersion, isTest, netChain, netPeers, upgradeStore }) {
return (
<div className={ styles.status }>
<div className={ styles.version }>
{ clientVersion }
</div>
<div className={ styles.upgrade }>
{ this.renderConsensus() }
{ this.renderUpgradeButton() }
<Consensus upgradeStore={ upgradeStore } />
<Upgrade upgradeStore={ upgradeStore } />
</div>
<div className={ styles.netinfo }>
<BlockStatus />
@ -54,87 +45,16 @@ class Status extends Component {
</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>
);
}
}
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;

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 (

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 {

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

View File

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

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 } />

View File

@ -27,17 +27,6 @@
}
.toolbuttons {
padding: 0.5em 0;
overflow: hidden;
button {
margin: 10px 0 10px 16px !important;
&:not([disabled]) {
color: white !important;
svg {
fill: white !important;
}
}
}
}

View File

@ -20,6 +20,10 @@ import { nodeOrStringProptype } from '~/util/proptypes';
import styles from './dappLink.css';
export function topNavigate (to) {
window.parent.location.hash = to;
}
export default class DappLink extends Component {
static propTypes = {
children: nodeOrStringProptype().isRequired,
@ -41,6 +45,6 @@ export default class DappLink extends Component {
}
onClick = () => {
window.parent.location.hash = this.props.to;
topNavigate(this.props.to);
}
}

View File

@ -17,66 +17,62 @@
import React from 'react';
import { Icon } from 'semantic-ui-react';
export const AccountsIcon = () => <Icon name='id card outline' />;
export const AddIcon = () => <Icon name='plus' />;
export const AddressIcon = () => <Icon name='address book outline' />;
export const AppsIcon = () => <Icon name='grid layout' />;
export const AttachFileIcon = () => <Icon name='attach' />;
export const BackgroundIcon = () => <Icon name='image' />;
export const CancelIcon = () => <Icon name='cancel' />;
export const DoneIcon = () => <Icon name='check' />;
export const CheckIcon = () => <Icon name='check' />;
export const CloseIcon = () => <Icon name='close' />;
export const CompareIcon = () => <Icon name='exchange' />;
export const ComputerIcon = () => <Icon name='desktop' />;
export const ContractIcon = () => <Icon name='code' />;
export const CopyIcon = () => <Icon name='copy' />;
export const DashboardIcon = () => <Icon name='cubes' />;
export const DoneIcon = CheckIcon;
export const DeleteIcon = () => <Icon name='trash' />;
export const DevelopIcon = () => <Icon name='connectdevelop' />;
export const DialIcon = () => <Icon name='text telephone' />;
export const EditIcon = () => <Icon name='edit' />;
export const ErrorIcon = () => <Icon name='exclamation circle' />;
export const EthernetIcon = () => <Icon name='wifi' />;
export const FileIcon = () => <Icon name='file outline' />;
export const FileDownloadIcon = () => <Icon name='download' />;
export const FileUploadIcon = () => <Icon name='upload' />;
export const FingerprintIcon = () => <Icon name='privacy' />;
export const GasIcon = () => <Icon name='settings' />;
export const GotoIcon = () => <Icon name='arrow circle right' />;
export const InfoIcon = () => <Icon name='info circle' />;
export const KeyIcon = () => <Icon name='key' />;
export const KeyboardIcon = () => <Icon name='keyboard' />;
export const LinkIcon = () => <Icon name='linkify' />;
export const ListIcon = () => <Icon name='list ul' />;
export const LockedIcon = () => <Icon name='unlock alternate' />;
export const MembershipIcon = () => <Icon name='openid' />;
export const MoveIcon = () => <Icon name='move' />;
export const NextIcon = () => <Icon name='chevron right' />;
export const PauseIcon = () => <Icon name='pause' />;
export const PlayIcon = () => <Icon name='play' />;
export const PrevIcon = () => <Icon name='chevron left' />;
export const PrintIcon = () => <Icon name='print' />;
export const QrIcon = () => <Icon name='qrcode' />;
export const RefreshIcon = () => <Icon name='refresh' />;
export const RemoveIcon = () => <Icon name='remove' />;
export const ReorderIcon = MoveIcon;
export const ReplayIcon = () => <Icon name='step forward' />;
export const SaveIcon = () => <Icon name='save' />;
export const SearchIcon = () => <Icon name='search' />;
export const SendIcon = () => <Icon name='send' />;
export const SettingsIcon = () => <Icon name='settings' />;
export const SnoozeIcon = () => <Icon name='alarm' />;
export const SortIcon = () => <Icon name='filter' />;
export const StarIcon = () => <Icon name='star' />;
export const StatusIcon = () => <Icon name='signal' />;
export const UnlockedIcon = () => <Icon name='unlock' />;
export const UpdateIcon = () => <Icon name='plug' />;
export const UpdateWaitIcon = () => <Icon name='wait' />;
export const VisibleIcon = () => <Icon name='eye' />;
export AccountsIcon from 'material-ui/svg-icons/action/account-balance-wallet';
export AddressesIcon from 'material-ui/svg-icons/communication/contacts';
export AppsIcon from 'material-ui/svg-icons/navigation/apps';
export AttachFileIcon from 'material-ui/svg-icons/editor/attach-file';
export BackgroundIcon from 'material-ui/svg-icons/image/blur-on';
export CheckIcon from 'material-ui/svg-icons/navigation/check';
export CloseIcon from 'material-ui/svg-icons/navigation/close';
export CompareIcon from 'material-ui/svg-icons/action/compare-arrows';
export ComputerIcon from 'material-ui/svg-icons/hardware/desktop-mac';
export ContactsIcon from 'material-ui/svg-icons/image/grid-on';
export ContractIcon from 'material-ui/svg-icons/action/code';
export CopyIcon from 'material-ui/svg-icons/content/content-copy';
export DashboardIcon from 'material-ui/svg-icons/action/dashboard';
export DevelopIcon from 'material-ui/svg-icons/action/description';
export DialIcon from 'material-ui/svg-icons/communication/dialpad';
export ErrorIcon from 'material-ui/svg-icons/alert/error';
export Ethernet from 'material-ui/svg-icons/action/settings-ethernet';
export FileIcon from 'material-ui/svg-icons/editor/insert-drive-file';
export FingerprintIcon from 'material-ui/svg-icons/action/fingerprint';
export GasIcon from 'material-ui/svg-icons/maps/local-gas-station';
export InfoIcon from 'material-ui/svg-icons/action/info-outline';
export KeyIcon from 'material-ui/svg-icons/communication/vpn-key';
export KeyboardIcon from 'material-ui/svg-icons/hardware/keyboard';
export LinkIcon from 'material-ui/svg-icons/content/link';
export ListIcon from 'material-ui/svg-icons/action/view-list';
export MembershipIcon from 'material-ui/svg-icons/action/card-membership';
export MoveIcon from 'material-ui/svg-icons/action/open-with';
export NextIcon from 'material-ui/svg-icons/navigation/arrow-forward';
export PauseIcon from 'material-ui/svg-icons/av/pause';
export PhoneLock from 'material-ui/svg-icons/communication/phonelink-lock';
export PlayIcon from 'material-ui/svg-icons/av/play-arrow';
export PrevIcon from 'material-ui/svg-icons/navigation/arrow-back';
export PrintIcon from 'material-ui/svg-icons/action/print';
export RefreshIcon from 'material-ui/svg-icons/action/autorenew';
export RemoveIcon from 'material-ui/svg-icons/content/remove';
export ReorderIcon from 'material-ui/svg-icons/action/reorder';
export ReplayIcon from 'material-ui/svg-icons/av/replay';
export SaveIcon from 'material-ui/svg-icons/content/save';
export SettingsIcon from 'material-ui/svg-icons/action/settings';
export SnoozeIcon from 'material-ui/svg-icons/av/snooze';
export SortIcon from 'material-ui/svg-icons/content/sort';
export StarCircleIcon from 'material-ui/svg-icons/action/stars';
export StarIcon from 'material-ui/svg-icons/toggle/star';
export StarOutlineIcon from 'material-ui/svg-icons/toggle/star-border';
export StatusIcon from 'material-ui/svg-icons/action/track-changes';
export SubdirectoryIcon from 'material-ui/svg-icons/navigation/subdirectory-arrow-left';
export UnlockedIcon from 'material-ui/svg-icons/action/lock-open';
export UpdateIcon from 'material-ui/svg-icons/action/system-update-alt';
export UpdateWaitIcon from 'material-ui/svg-icons/action/update';
export VerifyIcon from 'material-ui/svg-icons/action/verified-user';
export VpnIcon from 'material-ui/svg-icons/notification/vpn-lock';
export const VerifyIcon = () => <Icon name='user circle outline' />;
export const VpnIcon = () => DashboardIcon;

View File

@ -117,15 +117,14 @@ $backgroundOverlay: rgba(255, 255, 255, 0.95);
}
.closeIcon {
font-size: 4em;
font-size: 3em;
position: absolute;
right: 1rem;
top: 0.5rem;
z-index: 100;
&, * {
height: 48px !important;
width: 48px !important;
i {
font-size: inherit;
}
&:hover {

View File

@ -139,10 +139,12 @@ export default class Portal extends Component {
}
return (
<CloseIcon
<div
className={ styles.closeIcon }
onClick={ this.handleClose }
/>
>
<CloseIcon />
</div>
);
}

View File

@ -21,7 +21,7 @@ import { Tab, Tabs } from 'material-ui';
import imagesEthcoreBlock from '~/../assets/images/parity-logo-white-no-text.svg';
import { Actionbar, Page } from '~/ui';
import { BackgroundIcon, Ethernet, VisibleIcon } from '~/ui/Icons';
import { BackgroundIcon, EthernetIcon, VisibleIcon } from '~/ui/Icons';
import styles from './settings.css';
@ -41,7 +41,7 @@ export default class Settings extends Component {
let proxy = null;
if (!isProxied) {
proxy = this.renderTab(hash, 'proxy', <Ethernet />);
proxy = this.renderTab(hash, 'proxy', <EthernetIcon />);
}
return (

View File

@ -18,7 +18,7 @@ import { observer } from 'mobx-react';
import React, { Component, PropTypes } from 'react';
import { Button, DappUrlInput } from '~/ui';
import { CloseIcon, RefreshIcon, SubdirectoryIcon } from '~/ui/Icons';
import { CloseIcon, RefreshIcon, GotoIcon } from '~/ui/Icons';
@observer
export default class AddressBar extends Component {
@ -50,7 +50,7 @@ export default class AddressBar extends Component {
<Button
disabled={ isPristine }
onClick={ this.onGotoUrl }
icon={ <SubdirectoryIcon /> }
icon={ <GotoIcon /> }
/>
</div>
);