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

Update ParityBar (container in Status)

This commit is contained in:
Jaco Greeff 2017-09-20 11:24:19 +02:00
parent 206abaebb9
commit abb94c8bf3
7 changed files with 364 additions and 179 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

385
js/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

5
js/src/Application/application.js
View File

@ -101,7 +101,10 @@ class Application extends Component {
: null
}
<Requests />
<ParityBar dapp={ isMinimized } />
<ParityBar
alwaysHidden
dapp={ isMinimized }
/>
{
blockNumber
? <Status upgradeStore={ this.upgradeStore } />

13
js/src/ParityBar/accountStore.js
View File

@ -16,6 +16,8 @@
import { action, observable, transaction } from 'mobx';
let instance;
export default class AccountStore {
@observable accounts = [];
@observable defaultAccount = null;
@ -24,7 +26,8 @@ export default class AccountStore {
constructor (api) {
this._api = api;
this.subscribeDefaultAccount()
this
.subscribeDefaultAccount()
.then(() => this.loadAccounts());
}
@ -118,4 +121,12 @@ export default class AccountStore {
return Promise.all([ promiseDefaultAccount, promiseEthAccounts, promiseAccountsInfo ]);
}
static get (api) {
if (!instance) {
instance = new AccountStore(api);
}
return instance;
}
}

65
js/src/ParityBar/parityBar.js
View File

@ -31,20 +31,17 @@ import IdentityIcon from '@parity/ui/IdentityIcon';
import GradientBg from '@parity/ui/GradientBg';
import SelectionList from '@parity/ui/SectionList';
import SignerPending from '@parity/ui/SignerPending';
import { CancelIcon, FingerprintIcon } from '@parity/ui/Icons';
import imagesEthcoreBlock from '@parity/shared/assets/images/parity-logo-white-no-text.svg';
import { CancelIcon } from '@parity/ui/Icons';
import DappsStore from '@parity/shared/mobx/dappsStore';
import Signer from '../Signer/Embedded';
import AccountStore from './accountStore';
import Store, { DISPLAY_ACCOUNTS, DISPLAY_SIGNER } from './store';
import styles from './parityBar.css';
const LS_STORE_KEY = '_parity::parityBar';
const DEFAULT_POSITION = { right: '1em', bottom: '2.5em' };
const DISPLAY_ACCOUNTS = 'accounts';
const DISPLAY_SIGNER = 'signer';
@observer
class ParityBar extends Component {
@ -57,15 +54,14 @@ class ParityBar extends Component {
};
static propTypes = {
alwaysHidden: PropTypes.bool,
dapp: PropTypes.bool,
externalLink: PropTypes.string,
pending: PropTypes.array
};
state = {
displayType: DISPLAY_SIGNER,
moving: false,
opened: false,
position: DEFAULT_POSITION
};
@ -82,20 +78,20 @@ class ParityBar extends Component {
componentWillMount () {
const { api } = this.context;
this.accountStore = new AccountStore(api);
this.accountStore = AccountStore.get(this.context.api);
this.store = Store.get();
// Hook to the dapp loaded event to position the
// Parity Bar accordingly
const dappsStore = DappsStore.get(api);
dappsStore
.on('loaded', (app) => {
this.app = app;
dappsStore.on('loaded', (app) => {
this.app = app;
if (this.props.dapp) {
this.loadPosition();
}
});
if (this.props.dapp) {
this.loadPosition();
}
});
if (this.props.dapp) {
this.loadPosition();
@ -128,7 +124,8 @@ class ParityBar extends Component {
}
setOpened (opened, displayType = DISPLAY_SIGNER) {
this.setState({ displayType, opened });
this.store.setOpen(opened, displayType);
this.dispatchOpenEvent(opened);
}
@ -151,18 +148,18 @@ class ParityBar extends Component {
}
render () {
const { moving, opened, position } = this.state;
const { moving, position } = this.state;
const containerClassNames = opened
const containerClassNames = this.store.isOpen
? [ styles.overlay ]
: [ styles.bar ];
if (!opened && moving) {
if (!this.store.isOpen && moving) {
containerClassNames.push(styles.moving);
}
const parityBgClassNames = [
opened
this.store.isOpen
? styles.expanded
: styles.corner,
styles.parityBg
@ -178,7 +175,7 @@ class ParityBar extends Component {
// Open the Signer at one of the four corners
// of the screen
if (opened) {
if (this.store.isOpen) {
// Set at top or bottom of the screen
if (position.top !== undefined) {
parityBgStyle.top = 0;
@ -209,7 +206,7 @@ class ParityBar extends Component {
style={ parityBgStyle }
>
{
opened
this.store.isOpen
? this.renderExpanded()
: this.renderBar()
}
@ -219,9 +216,9 @@ class ParityBar extends Component {
}
renderBar () {
const { dapp } = this.props;
const { alwaysHidden, dapp } = this.props;
if (!dapp) {
if (alwaysHidden || !dapp) {
return null;
}
@ -242,12 +239,6 @@ class ParityBar extends Component {
this.renderLink(
<Button
className={ styles.parityButton }
icon={
<img
className={ styles.parityIcon }
src={ imagesEthcoreBlock }
/>
}
label={
this.renderLabel(
<FormattedMessage
@ -261,7 +252,6 @@ class ParityBar extends Component {
}
<Button
className={ styles.button }
icon={ <FingerprintIcon /> }
label={ this.renderSignerLabel() }
onClick={ this.toggleSignerDisplay }
/>
@ -313,7 +303,6 @@ class ParityBar extends Component {
renderExpanded () {
const { externalLink } = this.props;
const { displayType } = this.state;
return (
<div className={ styles.container }>
@ -321,7 +310,7 @@ class ParityBar extends Component {
<div className={ styles.title }>
<ContainerTitle
title={
displayType === DISPLAY_ACCOUNTS
this.store.displayType === DISPLAY_ACCOUNTS
? (
<FormattedMessage
id='parityBar.title.accounts'
@ -352,7 +341,7 @@ class ParityBar extends Component {
</GradientBg>
<div className={ styles.content }>
{
displayType === DISPLAY_ACCOUNTS
this.store.displayType === DISPLAY_ACCOUNTS
? (
<SelectionList
className={ styles.accountsSection }
@ -589,15 +578,11 @@ class ParityBar extends Component {
}
toggleAccountsDisplay = () => {
const { opened } = this.state;
this.setOpened(!opened, DISPLAY_ACCOUNTS);
this.setOpened(!this.store.isOpen, DISPLAY_ACCOUNTS);
}
toggleSignerDisplay = () => {
const { opened } = this.state;
this.setOpened(!opened, DISPLAY_SIGNER);
this.setOpened(!this.store.isOpen, DISPLAY_SIGNER);
}
get config () {

52
js/src/ParityBar/store.js Normal file
View File

@ -0,0 +1,52 @@
// 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 { action, observable } from 'mobx';
let instance;
export const DISPLAY_ACCOUNTS = 'accounts';
export const DISPLAY_SIGNER = 'signer';
export default class Store {
@observable isOpen = false;
@observable displayType = DISPLAY_SIGNER;
@action setOpen = (isOpen, displayType) => {
this.isOpen = isOpen;
this.displayType = displayType;
}
@action toggleOpen = (displayType) => {
this.setOpen(!this.isOpen, displayType);
}
@action toggleOpenAccounts = () => {
this.toggleOpen(DISPLAY_ACCOUNTS);
}
@action toggleOpenSigner = () => {
this.toggleOpen(DISPLAY_SIGNER);
}
static get () {
if (!instance) {
instance = new Store();
}
return instance;
}
}

5
js/src/Status/status.css
View File

@ -46,3 +46,8 @@ $textColor: #ccc;
margin-left: 1em;
}
}
.defaultAccount,
.signerPending {
cursor: pointer;
}

18
js/src/Status/status.js
View File

@ -22,20 +22,26 @@ import { FormattedMessage } from 'react-intl';
import BlockNumber from '@parity/ui/BlockNumber';
import ClientVersion from '@parity/ui/ClientVersion';
import GradientBg from '@parity/ui/GradientBg';
import IdentityIcon from '@parity/ui/IdentityIcon';
import NetChain from '@parity/ui/NetChain';
import NetPeers from '@parity/ui/NetPeers';
import SignerPending from '@parity/ui/SignerPending';
import StatusIndicator from '@parity/ui/StatusIndicator';
import Consensus from './Consensus';
import AccountStore from '../ParityBar/accountStore';
import ParityBarStore from '../ParityBar/store';
import PluginStore from './pluginStore';
import Upgrade from './Upgrade';
import styles from './status.css';
const pluginStore = PluginStore.get();
const parityBarStore = ParityBarStore.get();
function Status ({ className = '', upgradeStore }, { api }) {
const accountStore = AccountStore.get(api);
return (
<GradientBg className={ [styles.status, className].join(' ') }>
<ClientVersion className={ styles.version } />
@ -49,7 +55,17 @@ function Status ({ className = '', upgradeStore }, { api }) {
<Component key={ index } />
))
}
<SignerPending />
<SignerPending
className={ styles.signerPending }
onClick={ parityBarStore.toggleOpenSigner }
/>
<IdentityIcon
address={ accountStore.defaultAccount }
button
center
className={ styles.defaultAccount }
onClick={ parityBarStore.toggleOpenAccounts }
/>
<StatusIndicator id='application.status.health' />
<BlockNumber
className={ styles.blockNumber }