grassrootseconomics/openethereum
5
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Signer layouts to flexbox (#3600)

Browse Source 
* Use variables for signer form widths

* Simplify signer layouts with flex

* Fix styling issues with Signer
This commit is contained in:
Jaco Greeff 2016-11-25 17:20:16 +01:00 committed by GitHub
parent 7610336596
commit e95ef0160f
16 changed files with 145 additions and 127 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
js/src/views/ParityBar/parityBar.css
View File

@ -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;
height: 300px;
max-height: 300px;
border-radius: 4px 4px 0 0;
overflow-y: auto;
display: flex;

24
js/src/views/Signer/_layout.css Normal file
View File

@ -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;

24
js/src/views/Signer/components/SignRequest/SignRequest.css
View File

@ -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;
padding: 25px 0 15px;
display: flex;
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;
margin-right: 2rem;
/* TODO [todr] mess - just to align with transaction */
width: 430px;
flex: 1;
}
.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 {

29
js/src/views/Signer/components/TransactionFinished/TransactionFinished.css
View File

@ -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;
}
.mainContainer > * {
vertical-align: middle;
min-height: 120px;
& > * {
vertical-align: middle;
min-height: $finishedHeight;
}
}
.statusContainer {
width: 220px;
padding: 0 40px 0 40px;
/*border-left: 1px solid #aaa;*/
position: absolute;
top: 0;
right: 0;
box-sizing: content-box;
box-sizing: border-box;
float: right;
padding: 0 1em;
flex: 0 0 $statusWidth;
}
.transactionDetails {
padding-right: 321px;
width: 100%;
box-sizing: border-box;
}

30
js/src/views/Signer/components/TransactionFinished/TransactionFinished.js
View File

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

8
js/src/views/Signer/components/TransactionMainDetails/TransactionMainDetails.css
View File

@ -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 {

27
js/src/views/Signer/components/TransactionMainDetails/TransactionMainDetails.js
View File

@ -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 (
<div className={ className }>
{ this.renderTransfer() }
{ this.renderContract() }
{ children }
</div>
);
return to
? this.renderTransfer()
: this.renderContract();
}
renderTransfer () {
const { from, fromBalance, to, toBalance, isTest } = this.props;
if (!to) {
return;
}
const { children, from, fromBalance, to, toBalance, isTest } = this.props;
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;
if (to) {
return;
}
const { children, from, fromBalance, isTest } = this.props;
return (
<div className={ styles.transaction }>
@ -134,6 +122,7 @@ export default class TransactionMainDetails extends Component {
Contract
</div>
</div>
{ children }
</div>
);
}

35
js/src/views/Signer/components/TransactionPending/TransactionPending.css
View File

@ -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;
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 */
& > * {
vertical-align: middle;
}
}

42
js/src/views/Signer/components/TransactionPending/TransactionPending.js
View File

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

13
js/src/views/Signer/components/TransactionPendingForm/TransactionPendingForm.css
View File

@ -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;
padding: 20px 40px 0 40px;
/*border-left: 1px solid #aaa;*/
position: absolute;
top: 0;
right: 0;
box-sizing: content-box;
box-sizing: border-box;
padding: 1em 1em 0 1em;
flex: 0 0 $statusWidth;
}
.rejectToggle {

2
js/src/views/Signer/components/TransactionPendingForm/TransactionPendingFormConfirm/TransactionPendingFormConfirm.css
View File

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

1
js/src/views/Signer/components/TransactionPendingForm/TransactionPendingFormReject/TransactionPendingFormReject.css
View File

@ -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;

22
js/src/views/Signer/components/TransactionSecondaryDetails/TransactionSecondaryDetails.css
View File

@ -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;
}

3
js/src/views/Signer/components/TransactionSecondaryDetails/TransactionSecondaryDetails.js
View File

@ -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() }

7
js/src/views/Signer/containers/Embedded/embedded.css
View File

@ -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 {

1
js/src/views/Signer/containers/RequestsPage/RequestsPage.css
View File

@ -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 {
}