Apply UI PRs after master merge (#2690)

This commit is contained in:
Jaco Greeff 2016-10-18 16:44:09 +02:00 committed by Gav Wood
parent 4d48054cee
commit 3c0b02ffe6
14 changed files with 132 additions and 60 deletions

View File

@ -37,7 +37,7 @@ import ContractInstances from './contracts';
import { initStore } from './redux';
import { ContextProvider, muiTheme } from './ui';
import { Accounts, Account, Addresses, Address, Application, Contract, Contracts, Dapp, Dapps, Settings, SettingsBackground, SettingsViews, Signer, Status } from './views';
import { Accounts, Account, Addresses, Address, Application, Contract, Contracts, Dapp, Dapps, Settings, SettingsBackground, SettingsProxy, SettingsViews, Signer, Status } from './views';
import './environment';
@ -79,6 +79,7 @@ ReactDOM.render(
<Route path='contract/:address' component={ Contract } />
<Route path='settings' component={ Settings }>
<Route path='background' component={ SettingsBackground } />
<Route path='proxy' component={ SettingsProxy } />
<Route path='views' component={ SettingsViews } />
</Route>
<Route path='signer' component={ Signer } />

View File

@ -35,13 +35,11 @@
.content {
transform: translate(0px, 0px) !important;
transition: none !important;
}
.content>div {
background: rgba(0, 0, 0, 0.5) !important;
}
.content div {
transition: none !important;
}

View File

@ -88,8 +88,9 @@
}
.console {
font-family: 'Roboto Mono';
font-family: 'Roboto Mono', monospace;
background: rgba(0, 0, 0, 0.25);
font-size: 16px;
padding: 0 0.25em;
}

View File

@ -57,8 +57,8 @@ class Background extends Component {
<ContainerTitle title='Background Pattern' />
<div className={ layout.layout }>
<div className={ layout.overview }>
<p><strong>The background pattern you can see right now is unique to your Parity installation. It will change every time you create a new Signer token.</strong> This is so that decentralized applications cannot pretend to be trustworthy.</p>
<p>Pick a pattern you like and memorize it. This Pattern will always be shown from now on, unless you clear your browser's cache or use a new Signer token.</p>
<div>The background pattern you can see right now is unique to your Parity installation. It will change every time you create a new Signer token. This is so that decentralized applications cannot pretend to be trustworthy.</div>
<div>Pick a pattern you like and memorize it. This Pattern will always be shown from now on, unless you clear your browser cache or use a new Signer token.</div>
</div>
<div className={ layout.details }>
<div className={ styles.bgcontainer }>

View File

@ -0,0 +1,17 @@
// Copyright 2015, 2016 Ethcore (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 './proxy';

View File

@ -0,0 +1,24 @@
/* Copyright 2015, 2016 Ethcore (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/>.
*/
.details {
line-height: 1.5em;
}
.details div+div {
padding-top: 1.25em;
}

View File

@ -0,0 +1,46 @@
// Copyright 2015, 2016 Ethcore (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, { Component } from 'react';
import { Container, ContainerTitle } from '../../../ui';
import layout from '../layout.css';
import styles from './proxy.css';
export default class Proxy extends Component {
render () {
const proxyurl = 'http://127.0.0.1:8080/proxy/proxy.pac';
return (
<Container>
<ContainerTitle title='Proxy' />
<div className={ layout.layout }>
<div className={ layout.overview }>
<div>The proxy setup allows you to access Parity and all associated decentralized applications via memororable addresses.</div>
</div>
<div className={ layout.details }>
<div className={ styles.details }>
<div>Instead of accessing Parity via the IP address and port, you will be able to access it via the .parity subdomain, by visiting <span className={ layout.console }>http://home.parity/</span>. To setup subdomain-based routing, you need to add the relevant proxy entries to your browser,</div>
<div className={ layout.center }><a href={ proxyurl } target='_blank'>{ proxyurl }</a></div>
<div>To learn how to configure the proxy, instructions are provided for <a href='https://blogs.msdn.microsoft.com/ieinternals/2013/10/11/understanding-web-proxy-configuration/' target='_blank'>Windows</a>, <a href='https://support.apple.com/kb/PH18553?locale=en_US' target='_blank'>Max OS X</a> or <a href='http://xmodulo.com/how-to-set-up-proxy-auto-config-on-ubuntu-desktop.html' target='_blank'>Ubuntu</a>.</div>
</div>
</div>
</div>
</Container>
);
}
}

View File

@ -17,12 +17,14 @@
import settingsReducer from './reducers';
import { toggleView, updateBackground } from './actions';
import SettingsBackground from './Background';
import SettingsProxy from './Proxy';
import SettingsViews, { defaultViews } from './Views';
export default from './settings';
export {
SettingsBackground,
SettingsProxy,
SettingsViews,
defaultViews,
settingsReducer,

View File

@ -41,6 +41,10 @@
opacity: 0.5;
}
.overview div {
line-height: 1.5em;
}
.overview>div+div {
padding-top: 1.25em;
}
@ -52,3 +56,14 @@
width: calc(100% / 12 * 8);
padding-left: 3em;
}
.console {
font-family: 'Roboto Mono', monospace;
background: rgba(255, 255, 255, 0.1);
font-size: 16px;
padding: 0 0.25em;
}
.center {
text-align: center;
}

View File

@ -34,6 +34,7 @@
.tabactive {
padding: 16px 2em !important;
line-height: 24px !important;
width: auto !important;
}
.tabactive {

View File

@ -18,6 +18,7 @@
import React, { Component, PropTypes } from 'react';
import { Tab, Tabs } from 'material-ui';
import ActionSettingsEthernet from 'material-ui/svg-icons/action/settings-ethernet';
import ImageBlurOn from 'material-ui/svg-icons/image/blur-on';
import ImageRemoveRedEye from 'material-ui/svg-icons/image/remove-red-eye';
@ -51,6 +52,20 @@ export default class Settings extends Component {
renderTabs () {
const hash = (window.location.hash || '').split('?')[0].split('/')[2];
const isProxied = window.location.hostname.indexOf('.parity') !== -1;
let proxy = null;
if (!isProxied) {
proxy = (
<Tab
className={ hash === 'proxy' ? styles.tabactive : styles.tab }
value='proxy'
key='proxy'
icon={ <ActionSettingsEthernet /> }
label={ <div className={ styles.menu }>proxy</div> }
onActive={ this.onActivate('proxy') } />
);
}
return (
<Tabs className={ styles.tabs } value={ hash }>
@ -68,6 +83,7 @@ export default class Settings extends Component {
icon={ <ImageBlurOn /> }
label={ <div className={ styles.menu }>background</div> }
onActive={ this.onActivate('background') } />
{ proxy }
</Tabs>
);
}

View File

@ -18,35 +18,16 @@ import React, { Component, PropTypes } from 'react';
import RaisedButton from 'material-ui/RaisedButton';
import { REJECT_COUNTER_TIME } from '../../constants/constants';
import styles from './TransactionPendingFormReject.css';
export default class TransactionPendingFormReject extends Component {
static propTypes = {
onReject: PropTypes.func.isRequired,
className: PropTypes.string,
rejectCounterTime: PropTypes.number
className: PropTypes.string
};
static defaultProps = {
rejectCounterTime: REJECT_COUNTER_TIME
};
state = {
rejectCounter: this.props.rejectCounterTime
}
componentWillMount () {
this.onInitCounter();
}
componentWillUnmount () {
this.onResetCounter();
}
render () {
const { rejectCounter } = this.state;
const { onReject } = this.props;
return (
@ -58,36 +39,10 @@ export default class TransactionPendingFormReject extends Component {
<RaisedButton
onClick={ onReject }
className={ styles.rejectButton }
disabled={ rejectCounter > 0 }
fullWidth
label={ `Reject Transaction ${this.renderCounter()}` }
label={ 'Reject Transaction' }
/>
</div>
);
}
renderCounter () {
const { rejectCounter } = this.state;
if (!rejectCounter) {
return '';
}
return `(${rejectCounter})`;
}
onInitCounter () {
this.rejectInterval = setInterval(() => {
let { rejectCounter } = this.state;
if (rejectCounter === 0) {
return clearInterval(this.rejectInterval);
}
this.setState({ rejectCounter: rejectCounter - 1 });
}, 1000);
}
onResetCounter () {
clearInterval(this.rejectInterval);
this.setState({
rejectCounter: this.props.rejectCounterTime
});
}
}

View File

@ -14,11 +14,6 @@
// You should have received a copy of the GNU General Public License
// along with Parity. If not, see <http://www.gnu.org/licenses/>.
// after user clicks 'reject' for the first time,
// a second reject button is rendered and disabled
// for a few seconds to avoid accidential double clicks
export const REJECT_COUNTER_TIME = 3;
// links to chain explorers
export const BASE_LINK_ACCOUNT_MORDEN = 'https://testnet.etherscan.io/address/';
export const BASE_LINK_ACCOUNT_HOMESTEAD = 'https://etherscan.io/address/';

View File

@ -24,7 +24,7 @@ import Contracts from './Contracts';
import Dapp from './Dapp';
import Dapps from './Dapps';
import ParityBar from './ParityBar';
import Settings, { SettingsBackground, SettingsViews } from './Settings';
import Settings, { SettingsBackground, SettingsProxy, SettingsViews } from './Settings';
import Signer from './Signer';
import Status from './Status';
@ -41,6 +41,7 @@ export {
ParityBar,
Settings,
SettingsBackground,
SettingsProxy,
SettingsViews,
Signer,
Status