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

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

@ -6,4 +6,5 @@
@import './modal.scss'; @import './modal.scss';
@import './newui-sections.scss'; @import './newui-sections.scss';
@import './hero-balance.scss'; @import './hero-balance.scss';
@import './transaction-list.scss';
@import './sections.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 { .tx-list-item-wrapper {
flex: 0 0 70px;
align-items: stretch; align-items: stretch;
justify-content: 'flex-start', justify-content: flex-start;
margin: '0.6em 1.3em 0.6em 1.3em', margin: 0em 1.3em 0em 1.3em;
overflow: 'scroll',
} }
.tx-list-date-wrapper { .tx-list-date-wrapper {
flex-grow: 1; flex-grow: 1;
flex-shrink: 1; flex-shrink: 1;
flex-basis: 'auto'; flex-basis: auto;
margin-top: '0.3em'; margin-top: 6px;
} }
.tx-list-content-wrapper { .tx-list-content-wrapper {
alignItems: 'stretch'; align-items: stretch;
margin-bottom: 8px;
} }
.tx-list-date { .tx-list-date {
color: $dusty-gray; color: $dusty-gray;
font-size: 8px; font-size: 14px;
} }
.tx-list-identicon-wrapper { .tx-list-identicon-wrapper {
align-self: center;
flex: 1 1 auto; flex: 1 1 auto;
margin-left: 3px;
} }
.tx-list-account-wrapper { .tx-list-account-wrapper {
flex: 3 3 auto; flex: 3 3 auto;
font-size: 12px; align-self: center;
}
.tx-list-account {
font-size: 16px;
} }
.tx-list-status-wrapper { .tx-list-status-wrapper {
align-self: center;
flex: 5 5 auto; flex: 5 5 auto;
} }
.tx-list-status { .tx-list-status {
color: $dusty-gray; color: $dusty-gray;
font-size: 12px; font-size: 16px;
} }
.tx-list-details-wrapper { .tx-list-details-wrapper {
align-self: center;
flex: 2 2 auto; 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; $shark: #22232C;
$wild-sand: #F6F6F6; $wild-sand: #F6F6F6;
$white: #FFFFFF; $white: #FFFFFF;
$dusty-gray: #9B9B9B $dusty-gray: #9B9B9B;
// Z Indicies - Planned // Z Indicies - Planned
$dropdown-z: 30; $dropdown-z: 30;