From 1851453f00272600bf9de8f5dd078145f5be0000 Mon Sep 17 00:00:00 2001 From: Amaury Martiny Date: Tue, 12 Dec 2017 17:35:21 +0100 Subject: [PATCH] New Homepage (#7266) * Purify dappCard style * Add support for pinning apps * Add a section to show pinned apps * Cleaner code * Bump dependency versions * Small tweaks * Avoid double scrollbars * Small style updates * Bump parity/shared version --- js/package-lock.json | 32 +++++------ js/package.json | 4 +- js/src/Application/application.css | 27 +++------ js/src/Application/application.js | 26 ++++----- js/src/Connection/connection.css | 2 +- js/src/Connection/connection.js | 2 +- js/src/Dapps/DappCard/dappCard.css | 66 ++++++++++------------ js/src/Dapps/DappCard/dappCard.js | 55 ++++++++++-------- js/src/Dapps/dapps.css | 14 +++-- js/src/Dapps/dapps.js | 90 +++++++++++++++++------------- js/src/shellMiddleware.js | 51 +++++++++++------ 11 files changed, 201 insertions(+), 168 deletions(-) diff --git a/js/package-lock.json b/js/package-lock.json index a4a76bd29..61ab84053 100644 --- a/js/package-lock.json +++ b/js/package-lock.json @@ -15,9 +15,9 @@ } }, "@parity/api": { - "version": "2.1.5", - "resolved": "https://registry.npmjs.org/@parity/api/-/api-2.1.5.tgz", - "integrity": "sha512-HkvMIhIwDMEIyTmXqEjWn1C2qes0qJO270bQldRfCZf0XiOGXG726EzV3FUpUbVONCVQ9riDviAl3fw6D+N6nA==", + "version": "2.1.6", + "resolved": "https://registry.npmjs.org/@parity/api/-/api-2.1.6.tgz", + "integrity": "sha512-4HuUJLGkZEAHSy5918ofepKXWvAE89VsoUN7q1Px9ASN8xLR3MWPMuNxOJZjKTqVDZWpXs8q3g7GIOVdi90BXA==", "requires": { "@parity/abi": "2.1.2", "@parity/jsonrpc": "2.1.4", @@ -52,8 +52,8 @@ "version": "github:js-dist-paritytech/dapp-dapp-methods#7245089a8e83274372cde3c9406ae155e2083f84", "dev": true, "requires": { - "@parity/api": "2.1.5", - "@parity/shared": "2.2.12", + "@parity/api": "2.1.6", + "@parity/shared": "2.2.14", "@parity/ui": "2.2.15", "lodash": "4.17.4", "mobx": "3.3.2", @@ -74,9 +74,9 @@ "integrity": "sha512-6bICFA1c1GBz4d7vratkoqovBezJNjc8VCwnZtpPTcyLeMshAhatPV4dGgJo/eHtlOCkKAeaAKatWZhEtXt/5g==", "dev": true, "requires": { - "@parity/api": "2.1.5", + "@parity/api": "2.1.6", "@parity/etherscan": "2.1.3", - "@parity/shared": "2.2.12", + "@parity/shared": "2.2.14", "bignumber.js": "3.0.1", "brace": "0.9.0", "date-difference": "1.0.0", @@ -556,7 +556,7 @@ "version": "github:js-dist-paritytech/dapp-dapp-visible#84f40feb42f1707d7f463213a990600dc11978f7", "dev": true, "requires": { - "@parity/api": "2.1.5", + "@parity/api": "2.1.6", "@parity/ui": "2.2.15", "mobx": "3.3.2", "mobx-react": "4.3.5", @@ -576,9 +576,9 @@ "integrity": "sha512-6bICFA1c1GBz4d7vratkoqovBezJNjc8VCwnZtpPTcyLeMshAhatPV4dGgJo/eHtlOCkKAeaAKatWZhEtXt/5g==", "dev": true, "requires": { - "@parity/api": "2.1.5", + "@parity/api": "2.1.6", "@parity/etherscan": "2.1.3", - "@parity/shared": "2.2.12", + "@parity/shared": "2.2.14", "bignumber.js": "3.0.1", "brace": "0.9.0", "date-difference": "1.0.0", @@ -1103,7 +1103,7 @@ "resolved": "https://registry.npmjs.org/@parity/etherscan/-/etherscan-2.1.3.tgz", "integrity": "sha512-GtQMaE8t7PDOcz/K4Ud+Z6EELB47+qG5V6R7iTJ4DcueXVgiMAXK5OiNeKF3Qjd1/M4FIJdFm5NTSdC7bR38+Q==", "requires": { - "@parity/api": "2.1.5", + "@parity/api": "2.1.6", "bignumber.js": "3.0.1", "es6-promise": "4.1.1", "node-fetch": "1.7.3", @@ -1140,9 +1140,9 @@ "version": "github:paritytech/plugin-signer-qr#c16423de5b8a8f68ebd5f1e78e084fa959329a9f" }, "@parity/shared": { - "version": "2.2.12", - "resolved": "https://registry.npmjs.org/@parity/shared/-/shared-2.2.12.tgz", - "integrity": "sha512-2ANbEOkWoqOf5ytE0K5pq7ZeqS7PVuiIwrhyxDgn8dQhpFiDLHro7pQirIEDZ8LzZK6g6V+HU38sagn6dYSRIQ==", + "version": "2.2.14", + "resolved": "https://registry.npmjs.org/@parity/shared/-/shared-2.2.14.tgz", + "integrity": "sha512-YM7ZqWNyquX0+j89NPPxFBCUPgaqIVrqQ4Iqml50kz9uC/Ev07A/OB/+yYmAJ+3io6LWvDc/U5K3CpaMltTLtg==", "requires": { "@parity/ledger": "2.1.2", "eventemitter3": "2.0.3", @@ -1202,9 +1202,9 @@ "resolved": "https://registry.npmjs.org/@parity/ui/-/ui-3.0.16.tgz", "integrity": "sha512-yGQ8k2/oNxu0GyJ6eQS1AUk1O1XR//oXfaHPEBa0VuJIB7gY9lPrkG7CSNpazOrTCfhdCHgpjGe3WR5lbv0HiQ==", "requires": { - "@parity/api": "2.1.5", + "@parity/api": "2.1.6", "@parity/etherscan": "2.1.3", - "@parity/shared": "2.2.12", + "@parity/shared": "2.2.14", "babel-runtime": "6.26.0", "bignumber.js": "4.1.0", "brace": "0.11.0", diff --git a/js/package.json b/js/package.json index 3ea88bb11..1df635e91 100644 --- a/js/package.json +++ b/js/package.json @@ -140,12 +140,12 @@ "yargs": "6.6.0" }, "dependencies": { - "@parity/api": "^2.1.1", + "@parity/api": "^2.1.6", "@parity/plugin-signer-account": "paritytech/plugin-signer-account", "@parity/plugin-signer-default": "paritytech/plugin-signer-default", "@parity/plugin-signer-hardware": "paritytech/plugin-signer-hardware", "@parity/plugin-signer-qr": "paritytech/plugin-signer-qr", - "@parity/shared": "^2.2.12", + "@parity/shared": "2.2.14", "@parity/ui": "^3.0.16", "keythereum": "1.0.2", "lodash.flatten": "4.4.0", diff --git a/js/src/Application/application.css b/js/src/Application/application.css index 1c0f94718..2022da923 100644 --- a/js/src/Application/application.css +++ b/js/src/Application/application.css @@ -20,37 +20,28 @@ display: flex; flex-direction: column; height: 100vh; - overflow: hidden; width: 100%; .logo { - top: 0; - right: 0; - left: 0; - bottom: 0; - opacity: 0.2; position: absolute; - padding: 2em; - text-align: center; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); z-index: 0; - - img { - display: inline-block; - margin: 0 auto; - } + opacity: 0.2; } .content { box-sizing: border-box; display: flex; flex-grow: 1; - overflow: hidden; position: relative; - > div:not(.logo) { - display: flex; - flex-grow: 1; - overflow-y: scroll; + /* Show scrollbar for Homepage only, dapps' scrollbar are handled inside + * their iframe. + */ + & > div { + overflow-y: auto; } } diff --git a/js/src/Application/application.js b/js/src/Application/application.js index 17bac38e0..3060032b6 100644 --- a/js/src/Application/application.js +++ b/js/src/Application/application.js @@ -75,6 +75,7 @@ class Application extends Component { return (
+ { blockNumber ? @@ -107,33 +108,32 @@ class Application extends Component { } renderApp () { - const { children } = this.props; - return [ , , , , , -
- { children } -
+ this.renderContent() ]; } renderMinimized () { - const { children } = this.props; - return [ , -
-
- -
- { children } -
+ this.renderContent() ]; } + + renderContent () { + const { children } = this.props; + + return ( +
+ {children} +
+ ); + } } function mapStateToProps (state) { diff --git a/js/src/Connection/connection.css b/js/src/Connection/connection.css index 782912108..62aea01c6 100644 --- a/js/src/Connection/connection.css +++ b/js/src/Connection/connection.css @@ -72,7 +72,7 @@ .icons { margin-top: 2em; - margin-bottom: 0px; + margin-bottom: 0; } .icon, diff --git a/js/src/Connection/connection.js b/js/src/Connection/connection.js index ff1f24d16..0817f25ce 100644 --- a/js/src/Connection/connection.js +++ b/js/src/Connection/connection.js @@ -21,7 +21,7 @@ import PropTypes from 'prop-types'; import GradientBg from '@parity/ui/lib/GradientBg'; import Input from '@parity/ui/lib/Form/Input'; -import { CompareIcon, ComputerIcon, DashboardIcon, VpnIcon, KeyIcon } from '@parity/ui/lib/Icons'; +import { CompareIcon, ComputerIcon, DashboardIcon, KeyIcon } from '@parity/ui/lib/Icons'; import styles from './connection.css'; diff --git a/js/src/Dapps/DappCard/dappCard.css b/js/src/Dapps/DappCard/dappCard.css index fda8672de..692a46a05 100644 --- a/js/src/Dapps/DappCard/dappCard.css +++ b/js/src/Dapps/DappCard/dappCard.css @@ -16,48 +16,44 @@ */ .card { - padding: 0.25em; + position: relative; + margin-top: 3em; + + .pin { + display: none; + position: absolute; + top: 0; + right: 1.6em; + z-index: 1; + } + + .pin.pinned { + display: block; + transform: rotate(45deg); + } + + &:hover { + .pin { + display: block; + } + } .content { - background: white; - box-sizing: content-box; - min-height: 100px; + display: block; + padding-top: 1em; .title { - min-height: 1em; - padding-left: 72px; - } - - .description { - color: #333; - min-height: 1em; - padding-left: 72px; - padding-top: 0.25em; - opacity: 0.66; + margin-top: 0.8em; } .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; - } + box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.15); + border-radius: 10px; + display: block; + width: 2em; + height: 2em; + margin-left: auto; + margin-right: auto; } } } diff --git a/js/src/Dapps/DappCard/dappCard.js b/js/src/Dapps/DappCard/dappCard.js index db10e33ff..a0fd8f3a8 100644 --- a/js/src/Dapps/DappCard/dappCard.js +++ b/js/src/Dapps/DappCard/dappCard.js @@ -16,10 +16,11 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; +import { Link } from 'react-router'; -import Container from '@parity/ui/lib/Container'; import DappIcon from '@parity/ui/lib/DappIcon'; -import DappVouchFor from '@parity/ui/lib/DappVouchFor'; +import Header from 'semantic-ui-react/dist/commonjs/elements/Header'; +import Button from 'semantic-ui-react/dist/commonjs/elements/Button'; import styles from './dappCard.css'; @@ -27,11 +28,15 @@ export default class DappCard extends Component { static propTypes = { app: PropTypes.object.isRequired, availability: PropTypes.string.isRequired, - className: PropTypes.string + className: PropTypes.string, + onPin: PropTypes.func, + pinned: PropTypes.bool }; + handlePin = () => this.props.onPin(this.props.app.id) + render () { - const { app, availability, className } = this.props; + const { app, availability, className, pinned } = this.props; if (app.onlyPersonal && availability !== 'personal') { return null; @@ -39,26 +44,28 @@ export default class DappCard extends Component { return (
- - -
- { app.name } -
-
- { app.description } -
- - +
); } diff --git a/js/src/Dapps/dapps.css b/js/src/Dapps/dapps.css index 02cfced8f..6a4cc181d 100644 --- a/js/src/Dapps/dapps.css +++ b/js/src/Dapps/dapps.css @@ -41,15 +41,21 @@ } } +.sectionTitle { + padding: 2em 0 0 4em !important; + margin-bottom: 0 !important; +} + .dapps { + padding: 0 1.5em; display: flex; flex-direction: row; flex-wrap: wrap; - margin: 1.5em 0; + justify-content: center; .dapp { - flex: 0 0 25%; - max-width: 25%; - min-width: 25%; + width: 12em; + margin-left: 2em; + margin-right: 2em; } } diff --git a/js/src/Dapps/dapps.js b/js/src/Dapps/dapps.js index dd1109e36..f73947a6b 100644 --- a/js/src/Dapps/dapps.js +++ b/js/src/Dapps/dapps.js @@ -45,48 +45,62 @@ class Dapps extends Component { this.store.loadAllApps(); } - render () { - const { availability } = this.props; - const applications = [].concat(this.store.visibleLocal, this.store.visibleViews, this.store.visibleBuiltin, this.store.visibleNetwork); + handlePin = (appId) => { + if (this.store.displayApps[appId].pinned) { + this.store.unpinApp(appId); + } else { + this.store.pinApp(appId); + } + } + renderSection = (apps) => ( + apps && apps.length > 0 && +
+ { + apps.map((app, index) => ( + + )) + } +
+ ) + + render () { return ( - + + {this.renderSection(this.store.pinnedApps)} + {this.renderSection(this.store.visibleUnpinned)} { - applications.map((app, index) => ( - - )) - } - { - this.store.externalOverlayVisible - ? ( -
-
- -
-
- - } - checked={ false } - onClick={ this.onClickAcceptExternal } - /> -
+ this.store.externalOverlayVisible && + ( +
+
+
- ) - : null +
+ + } + checked={ false } + onClick={ this.onClickAcceptExternal } + /> +
+
+ ) } ); diff --git a/js/src/shellMiddleware.js b/js/src/shellMiddleware.js index 4a78c5696..be719be20 100644 --- a/js/src/shellMiddleware.js +++ b/js/src/shellMiddleware.js @@ -17,46 +17,49 @@ import * as mobx from 'mobx'; import flatten from 'lodash.flatten'; -import VisibleStore from '@parity/shared/lib/mobx/dappsStore'; - +import DappsStore from '@parity/shared/lib/mobx/dappsStore'; import RequestStore from './DappRequests/store'; import methodGroups from './DappRequests/methodGroups'; export default function execute (appId, method, params, callback) { - const visibleStore = VisibleStore.get(); + const dappsStore = DappsStore.get(); const requestStore = RequestStore.get(); switch (method) { - case 'shell_getApps': + case 'shell_getApps': { const [displayAll] = params; callback( null, displayAll - ? visibleStore.allApps.slice().map(mobx.toJS) - : visibleStore.visibleApps.slice().map(mobx.toJS) + ? dappsStore.allApps.slice().map(mobx.toJS) + : dappsStore.visibleApps.slice().map(mobx.toJS) ); return true; + } - case 'shell_getFilteredMethods': + case 'shell_getFilteredMethods': { callback( null, flatten(Object.keys(methodGroups).map(key => methodGroups[key].methods)) ); return true; + } - case 'shell_getMethodGroups': + case 'shell_getMethodGroups': { callback( null, methodGroups ); return true; + } - case 'shell_getMethodPermissions': + case 'shell_getMethodPermissions': { callback(null, mobx.toJS(requestStore.permissions)); return true; + } - case 'shell_loadApp': + case 'shell_loadApp': { const [loadId, loadParams] = params; const loadUrl = `/${loadId}/${loadParams || ''}`; @@ -64,27 +67,43 @@ export default function execute (appId, method, params, callback) { callback(null, true); return true; + } - case 'shell_requestNewToken': + case 'shell_requestNewToken': { callback(null, requestStore.createToken(appId)); return true; + } - case 'shell_setAppVisibility': - const [changeId, visibility] = params; + case 'shell_setAppVisibility': { + const [appId, visibility] = params; callback( null, visibility - ? visibleStore.showApp(changeId) - : visibleStore.hideApp(changeId) + ? dappsStore.showApp(appId) + : dappsStore.hideApp(appId) ); return true; + } - case 'shell_setMethodPermissions': + case 'shell_setAppPinned': { + const [appId, pinned] = params; + + callback( + null, + pinned + ? dappsStore.pinApp(appId) + : dappsStore.unpinApp(appId) + ); + return true; + } + + case 'shell_setMethodPermissions': { const [permissions] = params; callback(null, requestStore.setPermissions(permissions)); return true; + } default: return false;