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) {