+
+
+
+ )
+ : (
+
+ )
+ }
+ />
-
-
+
+ }
+ label={
+
+ }
+ onClick={ this.toggleSignerDisplay }
+ />
-
+
+
+ {
+ displayType === DISPLAY_ACCOUNTS
+ ? (
+
+ )
+ : (
+
+ )
+ }
+
+
+ );
+ }
+
+ renderAccount = (account) => {
+ const onMakeDefault = () => {
+ this.toggleAccountsDisplay();
+ this.accountStore.makeDefaultAccount(account.address);
+ };
+
+ return (
+
);
}
@@ -189,17 +384,271 @@ class ParityBar extends Component {
+ value={ pending.length }
+ />
);
}
- return this.renderLabel('Signer', bubble);
+ return this.renderLabel(
+
,
+ bubble
+ );
+ }
+
+ getHorizontal (x) {
+ const { page, button, container } = this.measures;
+
+ const left = x - button.offset.left;
+ const centerX = left + container.width / 2;
+
+ // left part of the screen
+ if (centerX < page.width / 2) {
+ return { left: Math.max(0, left) };
+ }
+
+ const right = page.width - x - button.offset.right;
+
+ return { right: Math.max(0, right) };
}
- toggleDisplay = () => {
+ getVertical (y) {
+ const STICKY_SIZE = 75;
+ const { page, button, container } = this.measures;
+
+ const top = y - button.offset.top;
+ const centerY = top + container.height / 2;
+
+ // top part of the screen
+ if (centerY < page.height / 2) {
+ // Add Sticky edges
+ const stickyTop = top < STICKY_SIZE
+ ? 0
+ : top;
+
+ return { top: Math.max(0, stickyTop) };
+ }
+
+ const bottom = page.height - y - button.offset.bottom;
+ // Add Sticky edges
+ const stickyBottom = bottom < STICKY_SIZE
+ ? 0
+ : bottom;
+
+ return { bottom: Math.max(0, stickyBottom) };
+ }
+
+ getPosition (x, y) {
+ if (!this.moving || !this.measures) {
+ return {};
+ }
+
+ const horizontal = this.getHorizontal(x);
+ const vertical = this.getVertical(y);
+
+ const position = {
+ ...horizontal,
+ ...vertical
+ };
+
+ return position;
+ }
+
+ onMouseDown = (event) => {
+ const containerElt = ReactDOM.findDOMNode(this.refs.container);
+ const dragButtonElt = ReactDOM.findDOMNode(this.refs.dragButton);
+
+ if (!containerElt || !dragButtonElt) {
+ console.warn(containerElt ? 'drag button' : 'container', 'not found...');
+ return;
+ }
+
+ const bodyRect = document.body.getBoundingClientRect();
+ const containerRect = containerElt.getBoundingClientRect();
+ const buttonRect = dragButtonElt.getBoundingClientRect();
+
+ const buttonOffset = {
+ top: (buttonRect.top + buttonRect.height / 2) - containerRect.top,
+ left: (buttonRect.left + buttonRect.width / 2) - containerRect.left
+ };
+
+ buttonOffset.bottom = containerRect.height - buttonOffset.top;
+ buttonOffset.right = containerRect.width - buttonOffset.left;
+
+ const button = {
+ offset: buttonOffset,
+ height: buttonRect.height,
+ width: buttonRect.width
+ };
+
+ const container = {
+ height: containerRect.height,
+ width: containerRect.width
+ };
+
+ const page = {
+ height: bodyRect.height,
+ width: bodyRect.width
+ };
+
+ this.moving = true;
+ this.measures = {
+ button,
+ container,
+ page
+ };
+
+ this.setState({ moving: true });
+ }
+
+ onMouseEnter = (event) => {
+ if (!this.moving) {
+ return;
+ }
+
+ const { buttons } = event;
+
+ // If no left-click, stop move
+ if (buttons !== 1) {
+ this.onMouseUp(event);
+ }
+ }
+
+ onMouseLeave = (event) => {
+ if (!this.moving) {
+ return;
+ }
+
+ event.stopPropagation();
+ event.preventDefault();
+ }
+
+ onMouseMove = (event) => {
+ const { pageX, pageY } = event;
+
+ // this._onMouseMove({ pageX, pageY });
+ this.debouncedMouseMove({ pageX, pageY });
+
+ event.stopPropagation();
+ event.preventDefault();
+ }
+
+ _onMouseMove = (event) => {
+ if (!this.moving) {
+ return;
+ }
+
+ const { pageX, pageY } = event;
+ const position = this.getPosition(pageX, pageY);
+
+ this.setState({ position });
+ }
+
+ onMouseUp = (event) => {
+ if (!this.moving) {
+ return;
+ }
+
+ const { pageX, pageY } = event;
+ const position = this.getPosition(pageX, pageY);
+
+ // Stick to bottom or top
+ if (position.top !== undefined) {
+ position.top = 0;
+ } else {
+ position.bottom = 0;
+ }
+
+ // Stick to bottom or top
+ if (position.left !== undefined) {
+ position.left = '1em';
+ } else {
+ position.right = '1em';
+ }
+
+ this.moving = false;
+ this.setState({ moving: false, position });
+ this.savePosition(position);
+ }
+
+ toggleAccountsDisplay = () => {
const { opened } = this.state;
- this.setOpened(!opened);
+ this.setOpened(!opened, DISPLAY_ACCOUNTS);
+
+ if (!opened) {
+ this.accountStore.loadAccounts();
+ }
+ }
+
+ toggleSignerDisplay = () => {
+ const { opened } = this.state;
+
+ this.setOpened(!opened, DISPLAY_SIGNER);
+ }
+
+ get config () {
+ let config;
+
+ try {
+ config = JSON.parse(store.get(LS_STORE_KEY));
+ } catch (error) {
+ config = {};
+ }
+
+ return config;
+ }
+
+ loadPosition (props = this.props) {
+ const { app, config } = this;
+
+ if (!app) {
+ return this.setState({ position: DEFAULT_POSITION });
+ }
+
+ if (config[app.id]) {
+ return this.setState({ position: config[app.id] });
+ }
+
+ const position = this.stringToPosition(app.position);
+
+ this.setState({ position });
+ }
+
+ savePosition (position) {
+ const { app, config } = this;
+
+ config[app.id] = position;
+
+ store.set(LS_STORE_KEY, JSON.stringify(config));
+ }
+
+ stringToPosition (value) {
+ switch (value) {
+ case 'top-left':
+ return {
+ left: '1em',
+ top: 0
+ };
+
+ case 'top-right':
+ return {
+ right: '1em',
+ top: 0
+ };
+
+ case 'bottom-left':
+ return {
+ bottom: 0,
+ left: '1em'
+ };
+
+ case 'bottom-right':
+ default:
+ return DEFAULT_POSITION;
+ }
}
}
diff --git a/js/src/views/ParityBar/parityBar.spec.js b/js/src/views/ParityBar/parityBar.spec.js
new file mode 100644
index 00000000000..941c47c6508
--- /dev/null
+++ b/js/src/views/ParityBar/parityBar.spec.js
@@ -0,0 +1,167 @@
+// 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
.
+
+import { shallow } from 'enzyme';
+import React from 'react';
+import sinon from 'sinon';
+
+import ParityBar from './';
+
+import { createApi } from './parityBar.test.js';
+
+let api;
+let component;
+let instance;
+let store;
+
+function createRedux (state = {}) {
+ store = {
+ dispatch: sinon.stub(),
+ subscribe: sinon.stub(),
+ getState: () => Object.assign({ signer: { pending: [] } }, state)
+ };
+
+ return store;
+}
+
+function render (props = {}, state = {}) {
+ api = createApi();
+ component = shallow(
+
,
+ {
+ context: {
+ store: createRedux(state)
+ }
+ }
+ ).find('ParityBar').shallow({ context: { api } });
+ instance = component.instance();
+
+ return component;
+}
+
+describe('views/ParityBar', () => {
+ beforeEach(() => {
+ render({ dapp: true });
+ });
+
+ it('renders defaults', () => {
+ expect(component).to.be.ok;
+ });
+
+ it('includes the ParityBackground', () => {
+ expect(component.find('Connect(ParityBackground)')).to.have.length(1);
+ });
+
+ describe('renderBar', () => {
+ let bar;
+
+ beforeEach(() => {
+ bar = shallow(instance.renderBar());
+ });
+
+ it('renders nothing when not overlaying a dapp', () => {
+ render({ dapp: false });
+ expect(instance.renderBar()).to.be.null;
+ });
+
+ it('renders when overlaying a dapp', () => {
+ expect(bar.find('div')).not.to.have.length(0);
+ });
+
+ it('renders the Account selector button', () => {
+ const icon = bar.find('Button').first().props().icon;
+
+ expect(icon.type.displayName).to.equal('Connect(IdentityIcon)');
+ });
+
+ it('renders the Parity button', () => {
+ const label = shallow(bar.find('Button').at(1).props().label);
+
+ expect(label.find('FormattedMessage').props().id).to.equal('parityBar.label.parity');
+ });
+
+ it('renders the Signer button', () => {
+ const label = shallow(bar.find('Button').last().props().label);
+
+ expect(label.find('FormattedMessage').props().id).to.equal('parityBar.label.signer');
+ });
+ });
+
+ describe('renderExpanded', () => {
+ let expanded;
+
+ beforeEach(() => {
+ expanded = shallow(instance.renderExpanded());
+ });
+
+ it('includes the Signer', () => {
+ expect(expanded.find('Connect(Embedded)')).to.have.length(1);
+ });
+ });
+
+ describe('renderLabel', () => {
+ it('renders the label name', () => {
+ expect(shallow(instance.renderLabel('testing', null)).text()).to.equal('testing');
+ });
+
+ it('renders name and bubble', () => {
+ expect(shallow(instance.renderLabel('testing', '(bubble)')).text()).to.equal('testing(bubble)');
+ });
+ });
+
+ describe('renderSignerLabel', () => {
+ let label;
+
+ beforeEach(() => {
+ label = shallow(instance.renderSignerLabel());
+ });
+
+ it('renders the signer label', () => {
+ expect(label.find('FormattedMessage').props().id).to.equal('parityBar.label.signer');
+ });
+
+ it('does not render a badge when no pending requests', () => {
+ expect(label.find('Badge')).to.have.length(0);
+ });
+
+ it('renders a badge when pending requests', () => {
+ render({}, { signer: { pending: ['123', '456'] } });
+ expect(shallow(instance.renderSignerLabel()).find('Badge').props().value).to.equal(2);
+ });
+ });
+
+ describe('opened state', () => {
+ beforeEach(() => {
+ sinon.spy(instance, 'renderBar');
+ sinon.spy(instance, 'renderExpanded');
+ });
+
+ afterEach(() => {
+ instance.renderBar.restore();
+ instance.renderExpanded.restore();
+ });
+
+ it('renders the bar on with opened === false', () => {
+ expect(component.find('Link[to="/apps"]')).to.have.length(1);
+ });
+
+ it('renders expanded with opened === true', () => {
+ expect(instance.renderExpanded).not.to.have.been.called;
+ instance.setState({ opened: true });
+ expect(instance.renderExpanded).to.have.been.called;
+ });
+ });
+});
diff --git a/js/src/views/ParityBar/parityBar.test.js b/js/src/views/ParityBar/parityBar.test.js
new file mode 100644
index 00000000000..2623e407480
--- /dev/null
+++ b/js/src/views/ParityBar/parityBar.test.js
@@ -0,0 +1,55 @@
+// 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
.
+
+import sinon from 'sinon';
+
+const ACCOUNT_DEFAULT = '0x2345678901';
+const ACCOUNT_FIRST = '0x1234567890';
+const ACCOUNT_NEW = '0x0987654321';
+const ACCOUNTS = {
+ [ACCOUNT_FIRST]: { uuid: 123 },
+ [ACCOUNT_DEFAULT]: { uuid: 234 },
+ '0x3456789012': {},
+ [ACCOUNT_NEW]: { uuid: 456 }
+};
+
+function createApi () {
+ const api = {
+ subscribe: (params, callback) => {
+ callback(null, ACCOUNT_DEFAULT);
+
+ return Promise.resolve(1);
+ },
+ parity: {
+ defaultAccount: sinon.stub().resolves(ACCOUNT_DEFAULT),
+ allAccountsInfo: sinon.stub().resolves(ACCOUNTS),
+ getNewDappsWhitelist: sinon.stub().resolves(null),
+ setNewDappsWhitelist: sinon.stub().resolves(true)
+ }
+ };
+
+ sinon.spy(api, 'subscribe');
+
+ return api;
+}
+
+export {
+ ACCOUNT_DEFAULT,
+ ACCOUNT_FIRST,
+ ACCOUNT_NEW,
+ ACCOUNTS,
+ createApi
+};