m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
Code

Implement widescreen layout for tx list

Browse Source
This commit is contained in:
sdtsui 2017-08-10 20:52:22 -07:00
parent f9432c5982
commit e31c298288
4 changed files with 72 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
ui/app/components/tx-list.js
View File

@ -21,7 +21,7 @@ function TxList () {
Component.call(this)
}
const contentDivider = h('div', {
const contentDivider = h('div.tx-list-content-divider', {
style: {
marginLeft: '1.3em',
marginRight: '1.3em',
@ -38,13 +38,10 @@ TxList.prototype.render = function () {
return h('div.flex-column.tx-list-container', {}, [
h('div.flex-row.tx-list', {
style: {
margin: '1.8em 0.9em 0.8em 0.9em',
},
h('div.flex-row.tx-list-header', {
style: {},
}, [
// tx-view-tab.js
h('div.flex-row', {
}, [
@ -53,6 +50,7 @@ TxList.prototype.render = function () {
}, 'TRANSACTIONS'),
]),
]),
contentDivider,
@ -61,41 +59,41 @@ TxList.prototype.render = function () {
contentDivider,
// this.renderTransactionListItem(),
this.renderTransactionListItem(),
// contentDivider,
contentDivider,
// this.renderTransactionListItem(),
this.renderTransactionListItem(),
// contentDivider,
contentDivider,
// this.renderTransactionListItem(),
this.renderTransactionListItem(),
// contentDivider,
contentDivider,
// this.renderTransactionListItem(),
this.renderTransactionListItem(),
// contentDivider,
contentDivider,
// this.renderTransactionListItem(),
this.renderTransactionListItem(),
// contentDivider,
contentDivider,
// this.renderTransactionListItem(),
this.renderTransactionListItem(),
// contentDivider,
contentDivider,
// this.renderTransactionListItem(),
this.renderTransactionListItem(),
// contentDivider,
contentDivider,
// this.renderTransactionListItem(),
this.renderTransactionListItem(),
// contentDivider,
contentDivider,
// this.renderTransactionListItem(),
this.renderTransactionListItem(),
// contentDivider,
contentDivider,
])
}
@ -106,7 +104,7 @@ TxList.prototype.renderTransactionListItem = function () {
dateString: 'Jul 01, 2017',
address: '0x82df11beb942beeed58d466fcb0f0791365c7684',
transactionStatus: 'Confirmed',
transactionAmount: '3'
transactionAmount: '+ 3 ETH'
}
const { address, transactionStatus, transactionAmount, dateString } = props
@ -132,14 +130,14 @@ TxList.prototype.renderTransactionListItem = function () {
}, [
h(Identicon, {
address,
diameter: 18,
diameter: 24,
})
]),
h('div.tx-list-account-wrapper', {
style: {}
}, [
h('span', {}, [
h('span.tx-list-account', {}, [
'0x82df11be...7684', //address
]),
]),
@ -156,12 +154,12 @@ TxList.prototype.renderTransactionListItem = function () {
style: {}
}, [
h('span', {}, [
h('span.tx-list-value', {}, [
transactionAmount,
]),
h('span', {}, [
'300 USD',
h('span.tx-list-fiat-value', {}, [
'+ $300 USD',
]),
]),

1
ui/app/css/itcss/components/index.scss
View File

@ -6,4 +6,5 @@
@import './modal.scss';
@import './newui-sections.scss';
@import './hero-balance.scss';
@import './transaction-list.scss';
@import './sections.scss';

51
ui/app/css/itcss/components/transaction-list.scss
View File

@ -1,44 +1,77 @@
.tx-list-header {
margin: 1.8em 1.3em 1.8em 1.3em;
}
.tx-list-content-divider {
margin: 0.1em 1.3em 0.1em 1.3em;
height: 1px;
background: rgb(231, 231, 231);
flex: 0 0 1px;
}
.tx-list-container {
height: 87.5%;
overflow-y: scroll;
}
.tx-list-item-wrapper {
flex: 0 0 70px;
align-items: stretch;
justify-content: 'flex-start',
margin: '0.6em 1.3em 0.6em 1.3em',
overflow: 'scroll',
justify-content: flex-start;
margin: 0em 1.3em 0em 1.3em;
}
.tx-list-date-wrapper {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 'auto';
margin-top: '0.3em';
flex-basis: auto;
margin-top: 6px;
}
.tx-list-content-wrapper {
alignItems: 'stretch';
align-items: stretch;
margin-bottom: 8px;
}
.tx-list-date {
color: $dusty-gray;
font-size: 8px;
font-size: 14px;
}
.tx-list-identicon-wrapper {
align-self: center;
flex: 1 1 auto;
margin-left: 3px;
}
.tx-list-account-wrapper {
flex: 3 3 auto;
font-size: 12px;
align-self: center;
}
.tx-list-account {
font-size: 16px;
}
.tx-list-status-wrapper {
align-self: center;
flex: 5 5 auto;
}
.tx-list-status {
color: $dusty-gray;
font-size: 12px;
font-size: 16px;
}
.tx-list-details-wrapper {
align-self: center;
flex: 2 2 auto;
}
.tx-list-value {
font-size: 16px;
}
.tx-list-fiat-value {
font-size: 12px;
}

2
ui/app/css/itcss/settings/variables.scss
View File

@ -12,7 +12,7 @@ $alabaster: #F7F7F7;
$shark: #22232C;
$wild-sand: #F6F6F6;
$white: #FFFFFF;
$dusty-gray: #9B9B9B
$dusty-gray: #9B9B9B;
// Z Indicies - Planned
$dropdown-z: 30;