diff --git a/js/src/views/Application/application.js b/js/src/views/Application/application.js index 256ff02123e..25bb25909da 100644 --- a/js/src/views/Application/application.js +++ b/js/src/views/Application/application.js @@ -54,7 +54,7 @@ class Application extends Component { upgradeStore = new UpgradeStore(this.context.api); render () { - const [root] = (window.location.hash || '').replace('#/', '').split('/'); + const [root, hash = ''] = (window.location.hash || '').replace('#/', '').split('/'); const isMinimized = root === 'app' || root === 'web'; if (inFrame) { @@ -67,7 +67,7 @@ class Application extends Component {
{ isMinimized ? this.renderMinimized() : this.renderApp() } - +
); } diff --git a/js/src/views/ParityBar/parityBar.js b/js/src/views/ParityBar/parityBar.js index dfd20eeb734..54f0ff0e396 100644 --- a/js/src/views/ParityBar/parityBar.js +++ b/js/src/views/ParityBar/parityBar.js @@ -19,6 +19,7 @@ import ReactDOM from 'react-dom'; import { Link } from 'react-router'; import { connect } from 'react-redux'; import { throttle } from 'lodash'; +import store from 'store'; import { CancelIcon, FingerprintIcon } from '~/ui/Icons'; import { Badge, Button, ContainerTitle, ParityBackground } from '~/ui'; @@ -27,21 +28,32 @@ import { Embedded as Signer } from '../Signer'; import imagesEthcoreBlock from '../../../assets/images/parity-logo-white-no-text.svg'; import styles from './parityBar.css'; +const LS_STORE_KEY = '_parity::parityBar'; +const DEFAULT_POSITION = { right: '1em', bottom: 0 }; + class ParityBar extends Component { measures = null; moving = false; static propTypes = { + dapp: PropTypes.bool, + hash: PropTypes.string, pending: PropTypes.array, - dapp: PropTypes.bool + root: PropTypes.string }; state = { moving: false, opened: false, - position: { right: '1em', bottom: 0 } + position: DEFAULT_POSITION }; + getAppId (props = this.props) { + const { hash = '-1' } = props; + + return hash; + } + constructor (props) { super(props); @@ -52,10 +64,20 @@ class ParityBar extends Component { ); } + componentWillMount () { + // Load the saved position of the Parity Bar + this.loadPosition(); + } + componentWillReceiveProps (nextProps) { const count = this.props.pending.length; const newCount = nextProps.pending.length; + // Reload the Bar position when changing dapps + if (nextProps.dapp && nextProps.hash !== this.props.hash) { + this.loadPosition(nextProps); + } + if (count === newCount) { return; } @@ -96,13 +118,17 @@ class ParityBar extends Component { ...position }; + // Open the Signer at one of the four corners + // of the screen if (opened) { + // Set at top or bottom of the screen if (position.top !== undefined) { parityBgStyle.top = 0; } else { parityBgStyle.bottom = 0; } + // Set at left or right of the screen if (position.left !== undefined) { parityBgStyle.left = '1em'; } else { @@ -385,6 +411,7 @@ class ParityBar extends Component { this.moving = false; this.setState({ moving: false, position }); + this.savePosition(position); } toggleDisplay = () => { @@ -394,6 +421,35 @@ class ParityBar extends Component { opened: !opened }); } + + get config () { + let config; + + try { + config = JSON.parse(store.get(LS_STORE_KEY)); + } catch (error) { + config = {}; + } + + return config; + } + + loadPosition (props = this.props) { + const { config } = this; + const appId = this.getAppId(props); + + const position = config[appId] || { ...DEFAULT_POSITION }; + this.setState({ position }); + } + + savePosition (position) { + const { config } = this; + const appId = this.getAppId(); + + config[appId] = position; + + store.set(LS_STORE_KEY, JSON.stringify(config)); + } } function mapStateToProps (state) {