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
openethereum · Dec 12, 2017 · 1851453 · 1851453
1 parent c731b5e
commit 1851453
Show file tree

Hide file tree

Showing 11 changed files with 200 additions and 167 deletions.
diff --git a/js/package-lock.json b/js/package-lock.json
diff --git 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
@@ -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
@@ -75,6 +75,7 @@ class Application extends Component {
 
     return (
       <div className={ styles.application }>
+        <img src={ parityLogo } className={ styles.logo } />
         {
           blockNumber
             ? <Status upgradeStore={ this.upgradeStore } />
@@ -107,32 +108,31 @@ class Application extends Component {
   }
 
   renderApp () {
-    const { children } = this.props;
-
     return [
       <Extension key='extension' />,
       <FirstRun key='firstrun' />,
       <Snackbar key='snackbar' />,
       <UpgradeParity key='upgrade' upgradeStore={ this.upgradeStore } />,
       <Errors key='errors' />,
-      <div key='content' className={ styles.content }>
-        { children }
-      </div>
+      this.renderContent()
     ];
   }
 
   renderMinimized () {
-    const { children } = this.props;
-
     return [
       <Errors key='errors' />,
+      this.renderContent()
+    ];
+  }
+
+  renderContent () {
+    const { children } = this.props;
+
+    return (
       <div key='content' className={ styles.content }>
-        <div className={ styles.logo }>
-          <img src={ parityLogo } />
-        </div>
-        { children }
+        {children}
       </div>
-    ];
+    );
   }
 }
 

diff --git 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
@@ -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
@@ -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;
+  }
 
-  .content {
-    background: white;
-    box-sizing: content-box;
-    min-height: 100px;
+  .pin.pinned {
+    display: block;
+    transform: rotate(45deg);
+  }
 
-    .title {
-      min-height: 1em;
-      padding-left: 72px;
+  &:hover {
+    .pin {
+      display: block;
     }
+  }
 
-    .description {
-      color: #333;
-      min-height: 1em;
-      padding-left: 72px;
-      padding-top: 0.25em;
-      opacity: 0.66;
-    }
+  .content {
+    display: block;
+    padding-top: 1em;
 
-    .image {
-      border-radius: 8px;
-      position: absolute;
+    .title {
+      margin-top: 0.8em;
     }
 
-    .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;
-      }
+    .image {
+      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
@@ -16,49 +16,56 @@
 
 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';
 
 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;
     }
 
     return (
       <div className={ [styles.card, className].join(' ') }>
-        <Container
-          className={ styles.content }
-          link={ `/${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>
+        <Button
+          size='mini'
+          icon='pin'
+          circular
+          className={ [styles.pin, pinned && styles.pinned].join(' ') }
+          onClick={ this.handlePin }
+        />
+        <div className={ styles.content }>
+          <Link to={ app.url === 'web' ? '/web' : `/${app.id}` } >
+            <DappIcon
+              app={ app }
+              className={ styles.image }
+            />
+            <Header
+              as='h5'
+              textAlign='center'
+              className={ styles.title }
+            >
+              {app.name}
+            </Header>
+          </Link>
+        </div>
       </div>
     );
   }