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

Ui 2 shell updates (#5541)

Browse Source 
* Stateless components

* Adjust borders

* Stateless for status

* Externalise link colors

* css lint

* stateless

* Create ui/IconCache, replacing redux

* Update Signer buttons

* Requests background

* Adjust request styling

* Stateless components

* ParityBar background alignment

* Shell updates

* Remove Tooltip
This commit is contained in:
Jaco Greeff 2017-05-03 10:46:09 +02:00 committed by GitHub
parent a1502738f1
commit 1c2580b4a6
41 changed files with 82 additions and 914 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
js/src/redux/providers/requestsActions.js
View File

@ -19,7 +19,7 @@ import BigNumber from 'bignumber.js';
import { outTransaction } from '@parity/api/format/output';
import { trackRequest as trackRequestUtil, parseTransactionReceipt } from '~/util/tx';
import SavedRequests from '~/shell/Application/Requests/savedRequests';
import SavedRequests from '~/shell/Requests/savedRequests';
const savedRequests = new SavedRequests();

2
js/src/redux/reducers.js
View File

@ -27,13 +27,11 @@ import certificationsReducer from './providers/certifications/reducer';
import registryReducer from './providers/registry/reducer';
import errorReducer from '~/ui/Errors/reducers';
import tooltipReducer from '~/ui/Tooltips/reducers';
export default function () {
return combineReducers({
api: apiReducer,
errors: errorReducer,
tooltip: tooltipReducer,
routing: routerReducer,
settings: settingsReducer,

46
js/src/shell/Application/Container/container.js
View File

@ -1,46 +0,0 @@
// 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 React, { PropTypes } from 'react';
import { Errors, Tooltips } from '~/ui';
import FirstRun from '../../FirstRun';
import UpgradeParity from '../../UpgradeParity';
import styles from '../application.css';
export default function Container ({ children, onCloseFirstRun, showFirstRun, upgradeStore }) {
return (
<div className={ styles.container }>
<FirstRun
onClose={ onCloseFirstRun }
visible={ showFirstRun }
/>
<Tooltips />
<UpgradeParity upgradeStore={ upgradeStore } />
<Errors />
{ children }
</div>
);
}
Container.propTypes = {
children: PropTypes.node.isRequired,
onCloseFirstRun: PropTypes.func,
showFirstRun: PropTypes.bool,
upgradeStore: PropTypes.object.isRequired
};

17
js/src/shell/Application/Container/index.js
View File

@ -1,17 +0,0 @@
// 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/>.
export default from './container';

34
js/src/shell/Application/DappContainer/dappContainer.js
View File

@ -1,34 +0,0 @@
// 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 React, { PropTypes } from 'react';
import { Errors } from '~/ui';
import styles from '../application.css';
export default function DappContainer ({ children }) {
return (
<div className={ styles.container }>
<Errors />
{ children }
</div>
);
}
DappContainer.propTypes = {
children: PropTypes.node.isRequired
};

17
js/src/shell/Application/DappContainer/index.js
View File

@ -1,17 +0,0 @@
// 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/>.
export default from './dappContainer';

21
js/src/shell/Application/FrameError/frameError.css
View File

@ -1,21 +0,0 @@
/* 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/>.
*/
.error {
padding: 2em;
background: red;
color: white;
}

31
js/src/shell/Application/FrameError/frameError.js
View File

@ -1,31 +0,0 @@
// 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 React from 'react';
import { FormattedMessage } from 'react-intl';
import styles from './frameError.css';
export default function FrameError () {
return (
<div className={ styles.error }>
<FormattedMessage
id='application.frame.error'
defaultMessage='ERROR: This application cannot and should not be loaded in an embedded iFrame'
/>
</div>
);
}

17
js/src/shell/Application/FrameError/index.js
View File

@ -1,17 +0,0 @@
// 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/>.
export default from './frameError';

6
js/src/shell/Application/application.css
View File

@ -24,3 +24,9 @@
.content {
padding-bottom: 1.25em;
}
.error {
padding: 2em;
background: red;
color: white;
}

61
js/src/shell/Application/application.js
View File

@ -16,21 +16,22 @@
import { observer } from 'mobx-react';
import React, { Component, PropTypes } from 'react';
import { FormattedMessage } from 'react-intl';
import { connect } from 'react-redux';
import { Errors } from '~/ui';
import Connection from '../Connection';
import Extension from '../Extension';
import FirstRun from '../FirstRun';
import ParityBar from '../ParityBar';
import Requests from '../Requests';
import Snackbar from '../Snackbar';
import Status from '../Status';
import UpgradeParity from '../UpgradeParity';
import UpgradeStore from '../UpgradeParity/store';
import Snackbar from './Snackbar';
import Container from './Container';
import DappContainer from './DappContainer';
import Extension from './Extension';
import FrameError from './FrameError';
import Requests from './Requests';
import Status from './Status';
import Store from './store';
import styles from './application.css';
const inFrame = window.parent !== window && window.parent.frames.length !== 0;
@ -55,17 +56,14 @@ class Application extends Component {
const [root] = (window.location.hash || '').replace('#/', '').split('/');
const isMinimized = root !== '';
if (process.env.NODE_ENV !== 'production' && root === 'playground') {
return (
<div>
{ this.props.children }
</div>
);
}
if (inFrame) {
return (
<FrameError />
<div className={ styles.error }>
<FormattedMessage
id='application.frame.error'
defaultMessage='ERROR: This application cannot and should not be loaded in an embedded iFrame'
/>
</div>
);
}
@ -87,22 +85,24 @@ class Application extends Component {
const { blockNumber, children } = this.props;
return (
<Container
upgradeStore={ this.upgradeStore }
onCloseFirstRun={ this.store.closeFirstrun }
showFirstRun={ this.store.firstrunVisible }
>
<div className={ styles.content }>
{ children }
</div>
<div className={ styles.container }>
<Extension />
<FirstRun
onClose={ this.store.closeFirstrun }
visible={ this.store.firstrunVisible }
/>
<Snackbar />
<UpgradeParity upgradeStore={ this.upgradeStore } />
<Errors />
{
blockNumber
? <Status upgradeStore={ this.upgradeStore } />
: null
}
<Extension />
<Snackbar />
</Container>
<div className={ styles.content }>
{ children }
</div>
</div>
);
}
@ -110,9 +110,10 @@ class Application extends Component {
const { children } = this.props;
return (
<DappContainer>
<div className={ styles.container }>
<Errors />
{ children }
</DappContainer>
</div>
);
}
}

19
js/src/shell/Application/Extension/extension.css → js/src/shell/Extension/extension.css
View File

@ -15,32 +15,27 @@
/* along with Parity. If not, see <http://www.gnu.org/licenses/>.
*/
$backgroundColor: #f80;
$buttonColor: rgba(0, 0, 0, 0.5);
$textColor: white;
.body {
background: #f80;
background: $backgroundColor;
color: white;
opacity: 1;
max-width: 500px;
opacity: 1;
padding: 1em 4em 1em 2em;
position: fixed;
right: 1.5em;
top: 1.5em;
z-index: 1000;
.button {
background: rgba(0, 0, 0, 0.5);
color: white !important;
svg {
fill: white !important;
}
}
.buttonrow {
text-align: right;
}
p {
color: white;
color: $textColor;
}
.close {

0
js/src/shell/Application/Extension/extension.js → js/src/shell/Extension/extension.js
View File

0
js/src/shell/Application/Extension/index.js → js/src/shell/Extension/index.js
View File

0
js/src/shell/Application/Extension/store.js → js/src/shell/Extension/store.js
View File

0
js/src/shell/Application/Requests/index.js → js/src/shell/Requests/index.js
View File

0
js/src/shell/Application/Requests/requests.css → js/src/shell/Requests/requests.css
View File

0
js/src/shell/Application/Requests/requests.js → js/src/shell/Requests/requests.js
View File

0
js/src/shell/Application/Requests/savedRequests.js → js/src/shell/Requests/savedRequests.js
View File

0
js/src/shell/Application/Requests/savedRequests.spec.js → js/src/shell/Requests/savedRequests.spec.js
View File

0
js/src/shell/Application/Snackbar/index.js → js/src/shell/Snackbar/index.js
View File

47
js/src/shell/Application/Snackbar/snackbar.js → js/src/shell/Snackbar/snackbar.js
View File

@ -14,7 +14,7 @@
// 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, PropTypes } from 'react';
import React, { PropTypes } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
@ -23,41 +23,32 @@ import { darkBlack, grey800 } from 'material-ui/styles/colors';
import { closeSnackbar } from '~/redux/providers/snackbarActions';
const bodyStyle = {
const BODY_STYLE = {
backgroundColor: darkBlack,
borderStyle: 'solid',
borderColor: grey800,
borderWidth: '1px 1px 0 1px'
};
class Snackbar extends Component {
static propTypes = {
closeSnackbar: PropTypes.func.isRequired,
open: PropTypes.bool,
cooldown: PropTypes.number,
message: PropTypes.any
};
render () {
const { open, message, cooldown } = this.props;
return (
<SnackbarMUI
open={ open }
message={ message }
autoHideDuration={ cooldown }
bodyStyle={ bodyStyle }
onRequestClose={ this.handleClose }
/>
);
}
handleClose = () => {
this.props.closeSnackbar();
}
function Snackbar ({ closeSnackbar, cooldown, message, open }) {
return (
<SnackbarMUI
autoHideDuration={ cooldown }
bodyStyle={ BODY_STYLE }
message={ message }
open={ open }
onRequestClose={ closeSnackbar }
/>
);
}
Snackbar.propTypes = {
closeSnackbar: PropTypes.func.isRequired,
cooldown: PropTypes.number,
message: PropTypes.any,
open: PropTypes.bool
};
function mapStateToProps (state) {
const { open, message, cooldown } = state.snackbar;

0
js/src/shell/Application/Status/Consensus/consensus.js → js/src/shell/Status/Consensus/consensus.js
View File

0
js/src/shell/Application/Status/Consensus/index.js → js/src/shell/Status/Consensus/index.js
View File

0
js/src/shell/Application/Status/Upgrade/index.js → js/src/shell/Status/Upgrade/index.js
View File

0
js/src/shell/Application/Status/Upgrade/upgrade.js → js/src/shell/Status/Upgrade/upgrade.js
View File

0
js/src/shell/Application/Status/index.js → js/src/shell/Status/index.js
View File

18
js/src/shell/Application/Status/status.css → js/src/shell/Status/status.css
View File

@ -15,26 +15,28 @@
/* along with Parity. If not, see <http://www.gnu.org/licenses/>.
*/
$backgroundColor: rgba(0, 0, 0, 0.8);
$textColor: #ccc;
$networkLiveColor: rgb(0, 136, 0);
$networkTestColor: rgb(136, 0, 0);
.status {
align-items: center;
background-color: rgba(0, 0, 0, 0.8);
background-color: $backgroundColor;
bottom: 0;
color: #ccc;
color: $textColor;
display: flex;
font-size: 0.75em;
left: 0;
padding: .4em .5em;
padding: 0.4em 0.5em;
position: fixed;
right: 0;
z-index: 1000;
}
.netinfo {
color: #ddd;
flex-grow: 1;
text-align: right;
vertical-align: middle;
text-align: right;
div {
display: inline-block;
@ -49,11 +51,11 @@
text-transform: uppercase;
&.live {
background: rgb(0, 136, 0);
background: $networkLiveColor;
}
&.test {
background: rgb(136, 0, 0);
background: $networkTestColor;
}
}

5
js/src/shell/Application/Status/status.js → js/src/shell/Status/status.js
View File

@ -25,10 +25,13 @@ import Upgrade from './Upgrade';
import styles from './status.css';
function Status ({ clientVersion, isTest, netChain, netPeers, upgradeStore }) {
const [ clientName, , versionString, , ] = (clientVersion || '').split('/');
const [ versionNumber, versionType, , versionDate ] = (versionString || '').split('-');
return (
<div className={ styles.status }>
<div className={ styles.version }>
{ clientVersion }
{ clientName } { versionNumber }-{ versionDate } { versionType }
</div>
<div className={ styles.upgrade }>
<Consensus upgradeStore={ upgradeStore } />

17
js/src/ui/Tooltips/Tooltip/index.js
View File

@ -1,17 +0,0 @@
// 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/>.
export default from './tooltip';

147
js/src/ui/Tooltips/Tooltip/tooltip.js
View File

@ -1,147 +0,0 @@
// 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 React, { Component, PropTypes } from 'react';
import { FormattedMessage } from 'react-intl';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { FlatButton } from 'material-ui';
import { CancelIcon, DoneIcon, NextIcon } from '~/ui/Icons';
import { nodeOrStringProptype } from '~/util/proptypes';
import { newTooltip, nextTooltip, closeTooltips } from '../actions';
import styles from '../tooltips.css';
let tooltipId = 0;
class Tooltip extends Component {
static propTypes = {
className: PropTypes.string,
currentId: PropTypes.number,
maxId: PropTypes.number,
onNewTooltip: PropTypes.func,
onNextTooltip: PropTypes.func,
onCloseTooltips: PropTypes.func,
right: PropTypes.bool,
text: nodeOrStringProptype(),
title: nodeOrStringProptype()
}
state = {
id: tooltipId
}
componentWillMount () {
const { onNewTooltip } = this.props;
onNewTooltip(tooltipId);
tooltipId++;
}
render () {
const { id } = this.state;
const { className, currentId, maxId, right, onCloseTooltips, onNextTooltip, text, title } = this.props;
if (id !== currentId) {
return null;
}
const buttons = id !== maxId
? [
<FlatButton
icon={ <CancelIcon /> }
key='skipButton'
label={
<FormattedMessage
id='ui.tooltips.button.skip'
defaultMessage='Skip'
/>
}
onTouchTap={ onCloseTooltips }
/>,
<FlatButton
icon={ <NextIcon /> }
key='nextButton'
label={
<FormattedMessage
id='ui.tooltips.button.next'
defaultMessage='Next'
/>
}
onTouchTap={ onNextTooltip }
/>
] : (
<FlatButton
icon={ <DoneIcon /> }
label={
<FormattedMessage
id='ui.tooltips.button.done'
defaultMessage='Done'
/>
}
onTouchTap={ onCloseTooltips }
/>
);
return (
<div
className={
[
styles.box,
right
? styles.arrowRight
: styles.arrowLeft,
className
].join(' ')
}
>
<div className={ styles.title }>
{ title }
</div>
<div className={ styles.text }>
{ text }
</div>
<div className={ styles.buttons }>
{ buttons }
</div>
</div>
);
}
}
function mapStateToProps (state) {
const { currentId, maxId } = state.tooltip;
return {
currentId,
maxId
};
}
function mapDispatchToProps (dispatch) {
return bindActionCreators({
onNewTooltip: newTooltip,
onNextTooltip: nextTooltip,
onCloseTooltips: closeTooltips
}, dispatch);
}
export default connect(
mapStateToProps,
mapDispatchToProps
)(Tooltip);

68
js/src/ui/Tooltips/Tooltip/tooltip.spec.js
View File

@ -1,68 +0,0 @@
// 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 React from 'react';
import { shallow } from 'enzyme';
import sinon from 'sinon';
import Tooltip from './';
let component;
let store;
function createRedux (currentId = 0) {
store = {
dispatch: sinon.stub(),
subscribe: sinon.stub(),
getState: () => {
return {
tooltip: {
currentId,
maxId: 2
}
};
}
};
return store;
}
function render () {
component = shallow(
<Tooltip />,
{
context: {
store: createRedux()
}
}
).find('Tooltip').shallow();
return component;
}
describe('ui/Tooltips/Tooltip', () => {
beforeEach(() => {
render();
});
it('renders defaults', () => {
expect(component.get(0)).to.be.ok;
});
it('renders null when id !== currentId', () => {
expect(render(1).get(0)).to.be.null;
});
});

34
js/src/ui/Tooltips/actions.js
View File

@ -1,34 +0,0 @@
// 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/>.
export function newTooltip (newId) {
return {
type: 'newTooltip',
newId
};
}
export function nextTooltip () {
return {
type: 'nextTooltip'
};
}
export function closeTooltips () {
return {
type: 'closeTooltips'
};
}

20
js/src/ui/Tooltips/index.js
View File

@ -1,20 +0,0 @@
// 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/>.
export default from './tooltips';
export Tooltip from './Tooltip';
export tooltipReducer from './reducers';

71
js/src/ui/Tooltips/reducers.js
View File

@ -1,71 +0,0 @@
// 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 store from 'store';
const LS_KEY = 'tooltips';
let currentId = -1;
let maxId = 0;
function closeTooltips (state, action) {
store.set(LS_KEY, '{"state":"off"}');
currentId = -1;
return Object.assign({}, state, {
currentId
});
}
function newTooltip (state, action) {
const { newId } = action;
maxId = Math.max(newId, maxId);
return Object.assign({}, state, {
currentId,
maxId
});
}
function nextTooltip (state, action) {
const hideTips = store.get(LS_KEY);
currentId = hideTips
? -1
: currentId + 1;
return Object.assign({}, state, {
currentId
});
}
export default function tooltipReducer (state = {}, action) {
switch (action.type) {
case 'newTooltip':
return newTooltip(state, action);
case 'nextTooltip':
return nextTooltip(state, action);
case 'closeTooltips':
return closeTooltips(state, action);
default:
return state;
}
}

103
js/src/ui/Tooltips/tooltips.css
View File

@ -1,103 +0,0 @@
/* 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/>.
*/
.container {
height: 100%;
width: 100%;
}
.overlay {
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: rgba(0, 0, 0, 0.25);
z-index: 499;
}
.box {
position: absolute;
background: #663600; /* rgba(48, 48, 48, 0.95); #88b7d5; */
border: 4px solid #f80; /* #c2e1f5; */
max-width: 450px;
border-radius: 0.5em;
z-index: 500;
opacity: 1;
line-height: 1.618em;
white-space: normal;
opacity: 0.95;
}
.box:after, .box:before {
bottom: 100%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.box:after {
border-color: rgba(136, 183, 213, 0);
border-bottom-color: #663600; /* rgba(48, 48, 48, 0.95); #88b7d5; */
border-width: 20px;
}
.box:before {
border-color: rgba(194, 225, 245, 0);
border-bottom-color: #f80; /* #c2e1f5; */
border-width: 26px;
}
.arrowLeft:after, .arrowLeft:before {
left: 15%;
}
.arrowLeft:after {
margin-left: -20px;
}
.arrowLeft:before {
margin-left: -26px;
}
.arrowRight:after, .arrowRight:before {
right: 15%;
}
.arrowRight:after {
margin-right: -20px;
}
.arrowRight:before {
margin-right: -26px;
}
.title {
text-transform: uppercase;
}
.text {
padding: 1em;
}
.buttons {
margin: 0;
padding: 0 0.5em 0.5em 0;
text-align: right;
}

88
js/src/ui/Tooltips/tooltips.js
View File

@ -1,88 +0,0 @@
// 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 React, { Component, PropTypes } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { nextTooltip } from './actions';
import styles from './tooltips.css';
class Tooltips extends Component {
static contextTypes = {
router: PropTypes.object.isRequired
};
static propTypes = {
currentId: PropTypes.number,
onNextTooltip: PropTypes.func
}
componentDidMount () {
const { onNextTooltip } = this.props;
onNextTooltip();
this.redirect();
}
componentWillReceiveProps (nextProps) {
if (nextProps.currentId !== this.props.currentId) {
this.redirect(nextProps);
}
}
redirect (props = this.props) {
const { currentId } = props;
if (currentId !== undefined && currentId !== -1) {
const viewLink = '/accounts/';
this.context.router.push(viewLink);
}
}
render () {
const { currentId } = this.props;
if (currentId === -1) {
return null;
}
return (
<div className={ styles.overlay } />
);
}
}
function mapStateToProps (state) {
const { currentId } = state.tooltip;
return {
currentId
};
}
function mapDispatchToProps (dispatch) {
return bindActionCreators({
onNextTooltip: nextTooltip
}, dispatch);
}
export default connect(
mapStateToProps,
mapDispatchToProps
)(Tooltips);

76
js/src/ui/Tooltips/tooltips.spec.js
View File

@ -1,76 +0,0 @@
// 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 { shallow } from 'enzyme';
import React from 'react';
import sinon from 'sinon';
import Tooltips from './';
let component;
let router;
let store;
function createRedux () {
store = {
dispatch: sinon.stub(),
subscribe: sinon.stub(),
getState: () => {
return {
tooltip: {
currentId: 1
}
};
}
};
return store;
}
function createRouter () {
router = {
push: sinon.stub()
};
return router;
}
function render () {
component = shallow(
<Tooltips />,
{
context: {
store: createRedux()
}
}
).find('Tooltips').shallow({
context: {
router: createRouter()
}
});
return component;
}
describe('ui/Tooltips', () => {
beforeEach(() => {
render();
});
it('renders defaults', () => {
expect(component.get(0)).to.be.ok;
});
});

1
js/src/ui/index.js
View File

@ -58,7 +58,6 @@ export ShortenedHash from './ShortenedHash';
export SignerIcon from './SignerIcon';
export Tags from './Tags';
export Title from './Title';
export Tooltips, { Tooltip } from './Tooltips';
export TxHash from './TxHash';
export TxList from './TxList';
export VaultCard from './VaultCard';

25
js/src/views/Accounts/accounts.js
View File

@ -23,7 +23,7 @@ import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import HardwareStore from '~/mobx/hardwareStore';
import { Actionbar, ActionbarSearch, ActionbarSort, Button, Page, Tooltip } from '~/ui';
import { Actionbar, ActionbarSearch, ActionbarSort, Button, Page } from '~/ui';
import { AddIcon, FileDownloadIcon } from '~/ui/Icons';
import { setVisibleAccounts } from '~/redux/providers/personalActions';
@ -102,16 +102,6 @@ class Accounts extends Component {
{ this.renderActionbar() }
<Page>
<Tooltip
className={ styles.accountTooltip }
text={
<FormattedMessage
id='accounts.tooltip.overview'
defaultMessage='your accounts are visible for easy access, allowing you to edit the meta information, make transfers, view transactions and fund the account'
/>
}
/>
{ this.renderExternalAccounts() }
{ this.renderWallets() }
{ this.renderAccounts() }
@ -295,18 +285,7 @@ class Accounts extends Component {
/>
}
buttons={ buttons }
>
<Tooltip
className={ styles.toolbarTooltip }
right
text={
<FormattedMessage
id='accounts.tooltip.actions'
defaultMessage='actions relating to the current view are available on the toolbar for quick access, be it for performing actions or creating a new item'
/>
}
/>
</Actionbar>
/>
);
}

3
js/src/views/Home/home.js
View File

@ -22,8 +22,9 @@ import HistoryStore from '~/mobx/historyStore';
import { Page } from '~/ui';
import WebStore from '~/views/Web/store';
// FIXME: Don't really want to import from ~/shell
import DappsStore from '~/shell/Dapps/dappsStore';
import ExtensionStore from '~/shell/Application/Extension/store';
import ExtensionStore from '~/shell/Extension/store';
import Accounts from './Accounts';
import Dapps from './Dapps';