diff --git a/js/package-lock.json b/js/package-lock.json index b4465053f..c53dc82f2 100644 --- a/js/package-lock.json +++ b/js/package-lock.json @@ -1209,9 +1209,9 @@ } }, "@parity/ui": { - "version": "3.0.7", - "resolved": "https://registry.npmjs.org/@parity/ui/-/ui-3.0.7.tgz", - "integrity": "sha512-FkVb6DWja56uaNN+dG/hNH3c1P4hlA8Sg/e65b4hKyZe3PQP7Gko34wJ0IaP5FEeAWQC/yg0SgrQvc8CqPjeSg==", + "version": "3.0.9", + "resolved": "https://registry.npmjs.org/@parity/ui/-/ui-3.0.9.tgz", + "integrity": "sha512-i0a93GdxzJBOQHqsQt4fGCnl+ItKIjkj9fCP5RnyIjg43yCVHHzuw+MCyegw6cn21mirer9YUF0MW3B8jcCw6A==", "requires": { "@parity/api": "2.1.5", "@parity/etherscan": "2.1.3", diff --git a/js/package.json b/js/package.json index 799c2a469..c35bdb05e 100644 --- a/js/package.json +++ b/js/package.json @@ -148,7 +148,7 @@ "@parity/plugin-signer-hardware": "paritytech/plugin-signer-hardware", "@parity/plugin-signer-qr": "paritytech/plugin-signer-qr", "@parity/shared": "~2.2.1", - "@parity/ui": "~3.0.7", + "@parity/ui": "^3.0.9", "keythereum": "1.0.2", "lodash.flatten": "4.4.0", "lodash.omitby": "4.6.0", diff --git a/js/src/Dapps/DappCard/dappCard.css b/js/src/Dapps/DappCard/dappCard.css new file mode 100644 index 000000000..fda8672de --- /dev/null +++ b/js/src/Dapps/DappCard/dappCard.css @@ -0,0 +1,63 @@ +/* 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 . +*/ + +.card { + padding: 0.25em; + + .content { + background: white; + box-sizing: content-box; + min-height: 100px; + + .title { + min-height: 1em; + padding-left: 72px; + } + + .description { + color: #333; + min-height: 1em; + padding-left: 72px; + padding-top: 0.25em; + opacity: 0.66; + } + + .image { + border-radius: 8px; + position: absolute; + } + + .vouching { + padding: 0.5em; + margin: 0.5em 1em; + background: transparent; + position: relative; + white-space: nowrap; + + img { + position: relative; + display: inline-block; + margin: 0.25em 0.25em 0.25em 0; + } + + div { + right: auto; + left: 0; + } + } + } +} diff --git a/js/src/Dapps/DappCard/dappCard.js b/js/src/Dapps/DappCard/dappCard.js new file mode 100644 index 000000000..d30ecb0d5 --- /dev/null +++ b/js/src/Dapps/DappCard/dappCard.js @@ -0,0 +1,69 @@ +// 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 React, { Component } from 'react'; +import PropTypes from 'prop-types'; + +import Container from '@parity/ui/lib/Container'; +import DappIcon from '@parity/ui/lib/DappIcon'; +import DappVouchFor from '@parity/ui/lib/DappVouchFor'; + +import styles from './dappCard.css'; + +export default class DappCard extends Component { + static propTypes = { + app: PropTypes.object.isRequired, + availability: PropTypes.string.isRequired, + className: PropTypes.string + }; + + render () { + const { app, availability, className } = this.props; + + if (app.onlyPersonal && availability !== 'personal') { + return null; + } + + return ( +
+ + +
+ { app.name } +
+
+ { app.description } +
+ + +
+ ); + } +} diff --git a/js/src/Dapps/DappCard/index.js b/js/src/Dapps/DappCard/index.js new file mode 100644 index 000000000..eed38ca78 --- /dev/null +++ b/js/src/Dapps/DappCard/index.js @@ -0,0 +1,17 @@ +// 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 . + +export default from './dappCard'; diff --git a/js/src/Dapps/dapps.css b/js/src/Dapps/dapps.css index 8371fa0d0..52b8ad408 100644 --- a/js/src/Dapps/dapps.css +++ b/js/src/Dapps/dapps.css @@ -16,13 +16,41 @@ */ .overlay { + background: rgba(40, 40, 40, 0.85); color: white; line-height: 1.5em; - margin: 0 auto; text-align: left; - max-width: 980px; + padding: 4em 2em; + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + text-align: center; + z-index: 100; - & > div:first-child { - padding-bottom: 1em; + div { + max-width: 640px; + margin: 1em auto; + text-align: left; + } + + .accept { + label { + color: white; + } + } +} + +.dapps { + display: flex; + flex-direction: row; + flex-wrap: wrap; + margin: 1.5em 0; + + .dapp { + flex: 0 0 25%; + max-width: 25%; + min-width: 25%; } } diff --git a/js/src/Dapps/dapps.js b/js/src/Dapps/dapps.js index 1b96f4f1d..bcba01c87 100644 --- a/js/src/Dapps/dapps.js +++ b/js/src/Dapps/dapps.js @@ -14,20 +14,19 @@ // You should have received a copy of the GNU General Public License // along with Parity. If not, see . -import omitBy from 'lodash.omitby'; import { observer } from 'mobx-react'; import React, { Component } from 'react'; import { FormattedMessage } from 'react-intl'; import { connect } from 'react-redux'; import PropTypes from 'prop-types'; -import DappCard from '@parity/ui/lib/DappCard'; import Checkbox from '@parity/ui/lib/Form/Checkbox'; import Page from '@parity/ui/lib/Page'; -import SectionList from '@parity/ui/lib/SectionList'; import DappsStore from '@parity/shared/lib/mobx/dappsStore'; +import DappCard from './DappCard'; + import styles from './dapps.css'; @observer @@ -37,7 +36,6 @@ class Dapps extends Component { }; static propTypes = { - accounts: PropTypes.object.isRequired, availability: PropTypes.string.isRequired }; @@ -48,100 +46,63 @@ class Dapps extends Component { } render () { - let externalOverlay = null; + const { availability } = this.props; + const applications = [].concat(this.store.visibleLocal, this.store.visibleViews, this.store.visibleBuiltin, this.store.visibleNetwork); - if (this.store.externalOverlayVisible) { - externalOverlay = ( -
-
- -
-
- - } - checked={ false } - onClick={ this.onClickAcceptExternal } - /> -
+ return ( + +
+ { + applications.map((app, index) => ( + + )) + }
- ); - } - - return ( - + { + this.store.externalOverlayVisible + ? ( +
+
+ +
+
+ + } + checked={ false } + onClick={ this.onClickAcceptExternal } + /> +
+
+ ) + : null } - > - { this.renderList(this.store.visibleLocal) } - { this.renderList(this.store.visibleViews) } - { this.renderList(this.store.visibleBuiltin) } - { this.renderList(this.store.visibleNetwork, externalOverlay) } ); } - renderList (items, overlay) { - return ( - - ); - } - - renderApp = (app) => { - if (app.onlyPersonal && this.props.availability !== 'personal') { - return null; - } - - return ( - - ); - } - onClickAcceptExternal = () => { this.store.closeExternalOverlay(); } - - openPermissionsModal = () => { - const { accounts } = this.props; - - this.permissionStore.openModal(accounts); - } } function mapStateToProps (state) { - const { accounts } = state.personal; const { availability = 'unknown' } = state.nodeStatus.nodeKind || {}; - /** - * Do not show the Wallet Accounts in the Dapps - * Permissions Modal. This will come in v1.6, but - * for now it would break dApps using Web3... - */ - const _accounts = omitBy(accounts, (account) => account.wallet); - return { - accounts: _accounts, availability }; }