Signer layouts to flexbox (#3600)

* Use variables for signer form widths

* Simplify signer layouts with flex

* Fix styling issues with Signer

js/src/views/ParityBar/parityBar.css

@@ -14,6 +14,7 @@
 /* You should have received a copy of the GNU General Public License
 /* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 */
+
 .bar, .expanded {
   position: fixed;
   bottom: 0;
@@ -42,8 +43,7 @@
 
 .expanded {
   right: 16px;
-  width: 964px;
+  max-height: 300px;
-  height: 300px;
   border-radius: 4px 4px 0 0;
   overflow-y: auto;
   display: flex;

js/src/views/Signer/_layout.css

@@ -0,0 +1,24 @@
+/* Copyright 2015, 2016 Ethcore (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/>.
+*/
+
+$pendingHeight: 190px;
+$finishedHeight: 120px;
+
+$embedWidth: 920px;
+$statusWidth: 260px;
+
+$accountPadding: 75px;

js/src/views/Signer/components/SignRequest/SignRequest.css

@@ -14,31 +14,35 @@
 /* You should have received a copy of the GNU General Public License
 /* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 */
+
+@import '../../_layout.css';
+
 .container {
-  position: relative;
+  display: flex;
-  padding: 25px 0 15px;
+  padding: 1.5em 0 1em;
 }
 
 .actions, .signDetails {
-  display: inline-block;
   vertical-align: middle;
-  min-height: 120px;
+  min-height: $pendingHeight;
 }
 
 .signDetails {
-  border-right: 1px solid #eee;
+  flex: 1;
-  margin-right: 2rem;
-  /* TODO [todr] mess - just to align with transaction */
-  width:  430px;
 }
 
 .address, .info {
+  box-sizing: border-box;
   display: inline-block;
+  width: 50%;
+}
+
+.address {
+  padding-right: $accountPadding;
 }
 
 .info {
   padding: 0 30px;
-  width: 250px;
   color: #E53935;
   vertical-align: top;
 }
@@ -63,7 +67,7 @@
 
 .actions {
   display: inline-block;
-  min-height: 120px;
+  min-height: $finishedHeight;
 }
 
 .signDetails img {

js/src/views/Signer/components/TransactionFinished/TransactionFinished.css

@@ -15,31 +15,26 @@
 /* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 */
 
+@import '../../_layout.css';
+
 .container {
-  padding: 25px 0 15px;
+  display: flex;
-}
+  padding: 1.5em 0 1em;
 
-.mainContainer {
+  & > * {
-  position: relative;
+    vertical-align: middle;
-}
+    min-height: $finishedHeight;
-
+  }
-.mainContainer > * {
-  vertical-align: middle;
-  min-height: 120px;
 }
 
 .statusContainer {
-  width: 220px;
+  box-sizing: border-box;
-  padding: 0 40px 0 40px;
+  float: right;
-  /*border-left: 1px solid #aaa;*/
+  padding: 0 1em;
-  position: absolute;
+  flex: 0 0 $statusWidth;
-  top: 0;
-  right: 0;
-  box-sizing: content-box;
 }
 
 .transactionDetails {
-  padding-right: 321px;
   width: 100%;
   box-sizing: border-box;
 }

js/src/views/Signer/components/TransactionFinished/TransactionFinished.js

@@ -63,22 +63,20 @@ export default class TransactionFinished extends Component {
 
     return (
       <div className={ `${styles.container} ${className || ''}` }>
-        <div className={ styles.mainContainer }>
+        <TransactionMainDetails
-          <TransactionMainDetails
+          { ...this.props }
-            { ...this.props }
+          { ...this.state }
-            { ...this.state }
+          fromBalance={ fromBalance }
-            fromBalance={ fromBalance }
+          toBalance={ toBalance }
-            toBalance={ toBalance }
+          className={ styles.transactionDetails }
-            className={ styles.transactionDetails }
+        >
-          >
+          <TransactionSecondaryDetails
-            <TransactionSecondaryDetails
+            id={ id }
-              id={ id }
+            date={ date }
-              date={ date }
+          />
-            />
+        </TransactionMainDetails>
-          </TransactionMainDetails>
+        <div className={ styles.statusContainer }>
-          <div className={ styles.statusContainer }>
+          { this.renderStatus() }
-            { this.renderStatus() }
-          </div>
         </div>
       </div>
     );

js/src/views/Signer/components/TransactionMainDetails/TransactionMainDetails.css

@@ -14,7 +14,11 @@
 /* You should have received a copy of the GNU General Public License
 /* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 */
+
+@import '../../_layout.css';
+
 .transaction {
+  flex: 1;
 }
 
 .transaction > * {
@@ -30,11 +34,11 @@
 }
 
 .from .account {
-  padding-right: 75px;
+  padding-right: $accountPadding;
 }
 
 .to .account {
-  padding-left: 75px;
+  padding-left: $accountPadding;
 }
 
 .from img, .to img {

js/src/views/Signer/components/TransactionMainDetails/TransactionMainDetails.js

@@ -33,7 +33,6 @@ export default class TransactionMainDetails extends Component {
     isTest: PropTypes.bool.isRequired,
     to: PropTypes.string, // undefined if it's a contract
     toBalance: PropTypes.object, // eth BigNumber - undefined if it's a contract or until it's fetched
-    className: PropTypes.string,
     children: PropTypes.node
   };
 
@@ -60,23 +59,15 @@ export default class TransactionMainDetails extends Component {
   }
 
   render () {
-    const { className, children } = this.props;
+    const { to } = this.props;
 
-    return (
+    return to
-      <div className={ className }>
+      ? this.renderTransfer()
-        { this.renderTransfer() }
+      : this.renderContract();
-        { this.renderContract() }
-        { children }
-      </div>
-    );
   }
 
   renderTransfer () {
-    const { from, fromBalance, to, toBalance, isTest } = this.props;
+    const { children, from, fromBalance, to, toBalance, isTest } = this.props;
-
-    if (!to) {
-      return;
-    }
 
     return (
       <div className={ styles.transaction }>
@@ -101,16 +92,13 @@ export default class TransactionMainDetails extends Component {
               isTest={ isTest } />
           </div>
         </div>
+        { children }
       </div>
     );
   }
 
   renderContract () {
-    const { from, fromBalance, to, isTest } = this.props;
+    const { children, from, fromBalance, isTest } = this.props;
-
-    if (to) {
-      return;
-    }
 
     return (
       <div className={ styles.transaction }>
@@ -134,6 +122,7 @@ export default class TransactionMainDetails extends Component {
             Contract
           </div>
         </div>
+        { children }
       </div>
     );
   }

js/src/views/Signer/components/TransactionPending/TransactionPending.css

@@ -14,33 +14,14 @@
 /* You should have received a copy of the GNU General Public License
 /* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 */
+
+@import '../../_layout.css';
+
 .container {
-  padding: 25px 0 15px;
+  display: flex;
-}
+  padding: 1.5em 0 1em;
 
-.transactionDetails {
+  & > * {
-  padding-right: 321px;
+    vertical-align: middle;
-  width: 100%;
+  }
-  box-sizing: border-box;
-}
-
-.mainContainer {
-  position: relative;
-}
-
-.mainContainer:after {
-  clear: both;
-}
-
-.mainContainer > * {
-  vertical-align: middle;
-  min-height: 190px;
-}
-
-.inputs {
-  margin-right: 30px;
-  margin-left: 30px;
-  width: 180px;
-  position: relative;
-  top: -15px; /* due to material ui weird styling */
 }

js/src/views/Signer/components/TransactionPending/TransactionPending.js

@@ -70,29 +70,27 @@ export default class TransactionPending extends Component {
 
     return (
       <div className={ `${styles.container} ${className || ''}` }>
-        <div className={ styles.mainContainer }>
+        <TransactionMainDetails
-          <TransactionMainDetails
+          { ...this.props }
-            { ...this.props }
+          { ...this.state }
-            { ...this.state }
+          fromBalance={ fromBalance }
-            fromBalance={ fromBalance }
+          toBalance={ toBalance }
-            toBalance={ toBalance }
+          className={ styles.transactionDetails }
-            className={ styles.transactionDetails }
+          totalValue={ totalValue }>
-            totalValue={ totalValue }>
+          <TransactionSecondaryDetails
-            <TransactionSecondaryDetails
+            id={ id }
-              id={ id }
+            date={ date }
-              date={ date }
+            data={ data }
-              data={ data }
+            gasPriceEthmDisplay={ gasPriceEthmDisplay }
-              gasPriceEthmDisplay={ gasPriceEthmDisplay }
+            gasToDisplay={ gasToDisplay }
-              gasToDisplay={ gasToDisplay }
-            />
-          </TransactionMainDetails>
-          <TransactionPendingForm
-            address={ from }
-            isSending={ this.props.isSending }
-            onConfirm={ this.onConfirm }
-            onReject={ this.onReject }
           />
-        </div>
+        </TransactionMainDetails>
+        <TransactionPendingForm
+          address={ from }
+          isSending={ this.props.isSending }
+          onConfirm={ this.onConfirm }
+          onReject={ this.onReject }
+        />
       </div>
     );
   }

js/src/views/Signer/components/TransactionPendingForm/TransactionPendingForm.css

@@ -14,14 +14,13 @@
 /* You should have received a copy of the GNU General Public License
 /* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 */
+
+@import '../../_layout.css';
+
 .container {
-  width: 220px;
+  box-sizing: border-box;
-  padding: 20px 40px 0 40px;
+  padding: 1em 1em 0 1em;
-  /*border-left: 1px solid #aaa;*/
+  flex: 0 0 $statusWidth;
-  position: absolute;
-  top: 0;
-  right: 0;
-  box-sizing: content-box;
 }
 
 .rejectToggle {

js/src/views/Signer/components/TransactionPendingForm/TransactionPendingFormConfirm/TransactionPendingFormConfirm.css

@@ -15,7 +15,7 @@
 /* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 */
 .confirmForm {
-  margin-top: -45px;
+  margin-top: -2em;
 }
 
 .confirmButton {

js/src/views/Signer/components/TransactionPendingForm/TransactionPendingFormReject/TransactionPendingFormReject.css

@@ -14,6 +14,7 @@
 /* You should have received a copy of the GNU General Public License
 /* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 */
+
 /* the rejection button itself, once .reject has been pressed */
 .rejectButton {
   display: block !important;

js/src/views/Signer/components/TransactionSecondaryDetails/TransactionSecondaryDetails.css

@@ -1,3 +1,24 @@
+/* Copyright 2015, 2016 Ethcore (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/>.
+*/
+
+.container {
+  display: block;
+}
+
 .iconsContainer {
   display: block;
   text-align: center;
@@ -67,4 +88,3 @@
 .expandedContainer:empty {
   padding: 0;
 }
-

js/src/views/Signer/components/TransactionSecondaryDetails/TransactionSecondaryDetails.js

@@ -27,7 +27,6 @@ import styles from './TransactionSecondaryDetails.css';
 import * as tUtil from '../util/transaction';
 
 export default class TransactionSecondaryDetails extends Component {
-
   static propTypes = {
     id: PropTypes.object.isRequired,
     date: PropTypes.instanceOf(Date),
@@ -45,7 +44,7 @@ export default class TransactionSecondaryDetails extends Component {
     const className = this.props.className || '';
 
     return (
-      <div className={ className }>
+      <div className={ `${styles.container} ${className}` }>
         <div className={ styles.iconsContainer }>
           { this.renderGasPrice() }
           { this.renderData() }

js/src/views/Signer/containers/Embedded/embedded.css

@@ -14,8 +14,13 @@
 /* You should have received a copy of the GNU General Public License
 /* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 */
+
+@import '../../_layout.css';
+
 .signer {
-  width: 916px;
+  box-sizing: border-box;
+  padding: 0;
+  width: $embedWidth;
 }
 
 .pending {

js/src/views/Signer/containers/RequestsPage/RequestsPage.css

@@ -14,6 +14,7 @@
 /* You should have received a copy of the GNU General Public License
 /* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 */
+
 .request {
 }