Merge pull request #375 from MetaMask/compactLayout

Compact layout

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 ## Current Master
 
+- Implement new account design.
 - Added a network indicator mark in dropdown menu
 - Added network name next to network indicator
 - Add copy transaction hash button to completed transaction list items.

ui/app/account-detail.js

@@ -44,116 +44,138 @@ AccountDetailScreen.prototype.render = function () {
 
   return (
 
-    h('.account-detail-section.flex-column.flex-grow', [
+    h('.account-detail-section', [
 
       // identicon, label, balance, etc
-      h('.account-data-subsection.flex-column.flex-grow', {
+      h('.account-data-subsection', {
         style: {
           margin: '0 20px',
         },
       }, [
 
         // header - identicon + nav
-        h('.flex-row.flex-center', {
+        h('div', {
           style: {
-            marginTop: 28,
+            marginTop: '15px',
+            display: 'flex',
+            justifyContent: 'flex-start',
+            alignItems: 'flex-start',
           },
         }, [
 
-          // large identicon
+          // large identicon and addresses
-          h('.identicon-wrapper.flex-column.flex-center.select-none', [
+          h('.identicon-wrapper.select-none', [
             h(Identicon, {
               diameter: 62,
               address: selected,
             }),
           ]),
-        ]),
+          h('flex-column', {
-
-        h('.flex-center', {
-          style: {
-            height: '62px',
-            paddingTop: '8px',
-          },
-        }, [
-          h(EditableLabel, {
-            textValue: identity ? identity.name : '',
-            state: {
-              isEditingLabel: false,
-            },
-            saveText: (text) => {
-              props.dispatch(actions.saveAccountLabel(selected, text))
-            },
-          }, [
-
-            // What is shown when not editing + edit text:
-            h('label.editing-label', [h('.edit-text', 'edit')]),
-            h('h2.font-medium.color-forest', {name: 'edit'}, identity && identity.name),
-          ]),
-        ]),
-
-        // address and getter actions
-        h('.flex-row', {
-          style: {
-            marginBottom: 16,
-          },
-        }, [
-
-          h('div', {
             style: {
-              overflow: 'hidden',
+              lineHeight: '10px',
-              textOverflow: 'ellipsis',
+              marginLeft: '15px',
-              paddingTop: '3px',
             },
-          }, ethUtil.toChecksumAddress(selected)),
-
-          h(CopyButton, {
-            value: ethUtil.toChecksumAddress(selected),
-          }),
-
-          h(Tooltip, {
-            title: 'Export Private Key',
           }, [
-            h('div', {
+            h(EditableLabel, {
-              style: {
+              textValue: identity ? identity.name : '',
-                margin: '5px',
+              state: {
+                isEditingLabel: false,
+              },
+              saveText: (text) => {
+                props.dispatch(actions.saveAccountLabel(selected, text))
               },
             }, [
-              h('img.cursor-pointer.color-orange', {
+
-                src: 'images/key-32.png',
+              // What is shown when not editing + edit text:
-                onClick: () => this.requestAccountExport(selected),
+              h('label.editing-label', [h('.edit-text', 'edit')]),
+              h('h2.font-medium.color-forest', {name: 'edit'}, identity && identity.name),
+            ]),
+            h('.flex-row', {
+              style: {
+                width: '15em',
+                justifyContent: 'space-between',
+                alignItems: 'baseline',
+              },
+            }, [
+
+              // address
+
+              h('div', {
                 style: {
-                  margin: '0px 5px',
+                  overflow: 'hidden',
-                  width: '20px',
+                  textOverflow: 'ellipsis',
-                  height: '20px',
+                  paddingTop: '3px',
-                  position: 'relative',
+                  width: '5em',
-                  top: '3px',
+                  fontSize: '13px',
-                  right: '4px',
+                  fontFamily: 'Montserrat Thin',
+                  textRendering: 'geometricPrecision',
+                  marginTop: '10px',
+                  marginBottom: '15px',
+                  color: '#AEAEAE',
+                },
+              }, ethUtil.toChecksumAddress(selected)),
+
+              // copy and export
+
+              h('.flex-row', {
+                style: {
+                  justifyContent: 'flex-end',
+                },
+              }, [
+                h(CopyButton, {
+                  value: ethUtil.toChecksumAddress(selected),
+                }),
+
+                h(Tooltip, {
+                  title: 'Export Private Key',
+                }, [
+                  h('div', {
+                    style: {
+                      margin: '5px',
+                    },
+                  }, [
+                    h('img.cursor-pointer.color-orange', {
+                      src: 'images/key-32.png',
+                      onClick: () => this.requestAccountExport(selected),
+                      style: {
+                        margin: '0px 5px',
+                        width: '20px',
+                        height: '20px',
+                      },
+                    }),
+                  ]),
+                ]),
+              ]),
+            ]),
+
+            // account ballence
+
+            h('.flex-row', {
+              style: {
+                justifyContent: 'space-between',
+                alignItems: 'flex-start',
+              },
+            }, [
+
+              h(EtherBalance, {
+                value: account && account.balance,
+                style: {
+                  lineHeight: '7px',
                 },
               }),
+
+              h('button', {
+                onClick: () => props.dispatch(actions.showSendPage()),
+                style: {
+                  marginBottom: '20px',
+                  marginRight: '8px',
+                },
+              }, 'SEND'),
+
             ]),
+
           ]),
-
         ]),
-
-        // balance + send
-        h('.flex-row.flex-space-between', [
-
-          h(EtherBalance, {
-            value: account && account.balance,
-            style: {
-              lineHeight: '50px',
-            },
-          }),
-
-          h('button', {
-            onClick: () => props.dispatch(actions.showSendPage()),
-            style: {
-              margin: 10,
-            },
-          }, 'SEND'),
-
-        ]),
-
       ]),
 
       // subview (tx history, pk export confirm)
@@ -214,4 +236,3 @@ AccountDetailScreen.prototype.transactionList = function () {
 AccountDetailScreen.prototype.requestAccountExport = function () {
   this.props.dispatch(actions.requestExportAccount())
 }
-

ui/app/components/eth-balance.js

@@ -24,8 +24,34 @@ EthBalanceComponent.prototype.render = function () {
         style: {
           display: 'inline',
         },
-      }, value),
+      }, this.renderBalance(value)),
     ])
 
   )
 }
+EthBalanceComponent.prototype.renderBalance = function (value) {
+
+  if (value === 'None') return value
+
+  var balance = value.split(' ')[0]
+  var label = value.split(' ')[1]
+
+  return (
+    h('.flex-column', {
+      style: {
+        alignItems: 'flex-end',
+        lineHeight: '13px',
+        fontFamily: 'Montserrat Thin',
+        textRendering: 'geometricPrecision',
+      },
+    }, [
+      h('div', balance),
+      h('div', {
+        style: {
+          color: ' #AEAEAE',
+          fontSize: '12px',
+        },
+      }, label),
+    ])
+  )
+}

ui/app/components/transaction-list.js

@@ -35,6 +35,8 @@ TransactionList.prototype.render = function () {
         style: {
           background: '#EBEBEB',
           color: '#AEAEAE',
+          paddingTop: '4px',
+          paddingBottom: '4px',
         },
       }, [
         'Transactions',
@@ -43,7 +45,7 @@ TransactionList.prototype.render = function () {
       h('.tx-list', {
         style: {
           overflowY: 'auto',
-          height: '204px',
+          height: '305px',
           padding: '0 20px',
           textAlign: 'center',
         },
@@ -67,4 +69,3 @@ TransactionList.prototype.render = function () {
     ])
   )
 }
-

ui/app/css/fonts.css

@@ -7,7 +7,7 @@
     src: url('/fonts/Montserrat/Montserrat-Regular.ttf') format('truetype');
   font-weight: normal;
   font-style: normal;
-  font-size: 'small',
+  font-size: 'small';
 
 }
 
@@ -18,3 +18,10 @@
   font-weight: normal;
   font-style: normal;
 }
+
+@font-face {
+  font-family: 'Montserrat Thin';
+    src: url('/fonts/Montserrat/Montserrat-Regular.woff') format('woff');
+    src: url('/fonts/Montserrat/Montserrat-Regular.ttf') format('truetype');
+  text-rendering: geometricPrecision;
+}

ui/app/css/index.css

@@ -153,6 +153,7 @@ textarea.twelve-word-phrase {
   top: 8px;
   width: 5.2em;
   line-height: 9px;
+  text-rendering: geometricPrecision;
 }
 
 .check {
@@ -248,7 +249,7 @@ app sections
 
 .sizing-input{
   font-size: 1em;
-  height: 31px;
+  height: 30px;
 }
 .editable-label{
   display: flex;
@@ -387,19 +388,19 @@ input.large-input {
 
 }
 .name-label{
-  margin-bottom: 14px;
+
 }
 .edit-text {
   height: 100%;
   visibility: hidden;
 }
 .editing-label {
-  cursor: text;
+  display: flex;
-  width: 100%;
+  justify-content: flex-start;
-  position: relative;
+  margin-left: 50px;
-  top: 7px;
+  margin-bottom: 2px;
-  text-align: right;
+  font-size: 11px;
-  font-size: small;
+  text-rendering: geometricPrecision;
   color: #F7861C;
 }
 .name-label:hover .edit-text {