Rework dapps list (#7206)

* Rework dapps list * Update box sizing * Remove non-passed-in prop * PR comments * Re-adjust key
2017-12-06 15:47:32 +01:00 · 2017-12-06 15:47:32 +01:00 · b1517654e1
parent 76b143a758
commit b1517654e1
7 changed files with 228 additions and 90 deletions
--- 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",
--- 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",
--- a/js/src/Dapps/DappCard/dappCard.css
+++ 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 <http://www.gnu.org/licenses/>.
+*/
+
+.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;
+      }
+    }
+  }
+}
--- a/js/src/Dapps/DappCard/dappCard.js
+++ 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 <http://www.gnu.org/licenses/>.
+
+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 (
+      <div className={ [styles.card, className].join(' ') }>
+        <Container
+          className={ styles.content }
+          link={
+            app.url === 'web'
+              ? '/web'
+              : `/${app.id}`
+          }
+        >
+          <DappIcon
+            app={ app }
+            className={ styles.image }
+          />
+          <div className={ styles.title }>
+            { app.name }
+          </div>
+          <div className={ styles.description }>
+            { app.description }
+          </div>
+          <DappVouchFor
+            app={ app }
+            className={ styles.vouching }
+            maxNumber={ 10 }
+          />
+        </Container>
+      </div>
+    );
+  }
+}
--- a/js/src/Dapps/DappCard/index.js
+++ 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 <http://www.gnu.org/licenses/>.
+
+export default from './dappCard';
--- 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%;
  }
 }
--- 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 <http://www.gnu.org/licenses/>.

-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,10 +46,26 @@ 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 = (
+    return (
+      <Page>
+        <div className={ styles.dapps }>
+          {
+            applications.map((app, index) => (
+              <DappCard
+                app={ app }
+                availability={ availability }
+                className={ styles.dapp }
+                key={ `${index}_${app.id}` }
+              />
+            ))
+          }
+        </div>
+        {
+          this.store.externalOverlayVisible
+            ? (
              <div className={ styles.overlay }>
                <div>
                  <FormattedMessage
@ -73,75 +87,22 @@ class Dapps extends Component {
                  />
                </div>
              </div>
-      );
+            )
+            : null
        }
-
-    return (
-      <Page
-        title={
-          <FormattedMessage
-            id='dapps.label'
-            defaultMessage='Decentralized Applications'
-          />
-        }
-      >
-        { this.renderList(this.store.visibleLocal) }
-        { this.renderList(this.store.visibleViews) }
-        { this.renderList(this.store.visibleBuiltin) }
-        { this.renderList(this.store.visibleNetwork, externalOverlay) }
      </Page>
    );
  }

-  renderList (items, overlay) {
-    return (
-      <SectionList
-        items={ items }
-        noStretch
-        overlay={ overlay }
-        renderItem={ this.renderApp }
-      />
-    );
-  }
-
-  renderApp = (app) => {
-    if (app.onlyPersonal && this.props.availability !== 'personal') {
-      return null;
-    }
-
-    return (
-      <DappCard
-        app={ app }
-        key={ app.id }
-        showLink
-      />
-    );
-  }
-
  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
  };
 }