From 5de48c67a080f2681a005e364eefb9ea1d6b1e12 Mon Sep 17 00:00:00 2001 From: Alexander Tseung Date: Tue, 31 Jul 2018 19:37:38 -0700 Subject: Use css grid for TransactionListItem for responsive layout --- ui/app/components/identicon.js | 3 +- ui/app/components/transaction-list-item/index.scss | 81 ++++++++++++++-------- .../transaction-list-item.component.js | 53 +++++++------- .../transaction-list/transaction-list.component.js | 2 +- ui/app/components/transaction-status/index.scss | 4 +- .../transaction-status.component.js | 5 +- ui/app/constants/transactions.js | 4 +- ui/app/util.js | 2 +- 8 files changed, 88 insertions(+), 66 deletions(-) (limited to 'ui') diff --git a/ui/app/components/identicon.js b/ui/app/components/identicon.js index 424048745..80db2b8e9 100644 --- a/ui/app/components/identicon.js +++ b/ui/app/components/identicon.js @@ -47,7 +47,8 @@ IdenticonComponent.prototype.render = function () { }) ) : ( - h('img.balance-icon', { + h('img', { + className: `${className} balance-icon`, src: './images/eth_logo.svg', style: { height: diameter, diff --git a/ui/app/components/transaction-list-item/index.scss b/ui/app/components/transaction-list-item/index.scss index 8a3973f92..b93edebcc 100644 --- a/ui/app/components/transaction-list-item/index.scss +++ b/ui/app/components/transaction-list-item/index.scss @@ -1,41 +1,51 @@ .transaction-list-item { box-sizing: border-box; - height: 74px; - padding: 0 21px; - display: flex; - flex-direction: row; - align-items: center; + min-height: 74px; + padding: 8px 20px; + display: grid; + grid-template-columns: 45px 1fr 1fr 1fr; + grid-template-areas: + "identicon action status primary-amount" + "identicon nonce status secondary-amount"; border-bottom: 1px solid $geyser; cursor: pointer; @media screen and (max-width: $break-small) { - padding: 0 12px; + padding: 8px 20px 12px; + grid-template-columns: 45px 5fr 3fr; + grid-template-areas: + "nonce nonce nonce" + "identicon action primary-amount" + "identicon status secondary-amount"; } - &__identicon-wrapper { - padding-top: 2px; - } - - &__action-block { - padding: 0 8px 0 12px; - width: 180px; + &__identicon { + grid-area: identicon; + grid-row: 1 / span 2; + align-self: center; @media screen and (max-width: $break-small) { - padding: 0 8px; - width: 160px; + grid-row: 2 / span 2; } } &__action { text-transform: capitalize; - padding-bottom: 2px; + padding: 0 8px 2px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; + grid-area: action; + align-self: end; + } + + &__status { + grid-area: status; + grid-row: 1 / span 2; + align-self: center; @media screen and (max-width: $break-small) { - padding-bottom: 0; - font-size: .875rem; + grid-row: 3; } } @@ -45,25 +55,38 @@ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; - } + grid-area: nonce; + align-self: start; - &__transaction-amounts { - flex: 1; + @media screen and (max-width: $break-small) { + padding-bottom: 4px; + } } - &__primary-transaction-amount { - text-align: end; + &__amount { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; - @media screen and (max-width: $break-small) { + &--primary { + text-align: end; + grid-area: primary-amount; + align-self: end; + + @media screen and (max-width: $break-small) { + padding-bottom: 2px; + } + } + + &--secondary { + text-align: end; font-size: .75rem; + color: #5e6064; + grid-area: secondary-amount; + align-self: start; } } - &__secondary-transaction-amount { - text-align: end; - font-size: .75rem; - color: #5e6064; - } &:hover { background: rgba($alto, .2); diff --git a/ui/app/components/transaction-list-item/transaction-list-item.component.js b/ui/app/components/transaction-list-item/transaction-list-item.component.js index e334cd938..8c2a0d04c 100644 --- a/ui/app/components/transaction-list-item/transaction-list-item.component.js +++ b/ui/app/components/transaction-list-item/transaction-list-item.component.js @@ -1,6 +1,5 @@ import React, { PureComponent } from 'react' import PropTypes from 'prop-types' -import Media from 'react-media' import Identicon from '../identicon' import TransactionStatus from '../transaction-status' import TransactionAction from '../transaction-action' @@ -46,35 +45,33 @@ export default class TransactionListItem extends PureComponent { className="transaction-list-item" onClick={this.handleClick} > -
- - { - matches => ( - - ) - } - + + +
+ { `#${nonce} - ${formatDate(transaction.time)}` }
-
- -
- { `#${nonce} - ${formatDate(transaction.time)}` } -
+ +
+ { `-${fiatDisplayValue}` }
- -
-
- { `-${fiatDisplayValue}` } -
-
- { `-${ethTransactionAmount} ETH` } -
+
+ { `-${ethTransactionAmount} ETH` }
) diff --git a/ui/app/components/transaction-list/transaction-list.component.js b/ui/app/components/transaction-list/transaction-list.component.js index 63d171127..48e731d24 100644 --- a/ui/app/components/transaction-list/transaction-list.component.js +++ b/ui/app/components/transaction-list/transaction-list.component.js @@ -27,7 +27,7 @@ export default class TransactionList extends PureComponent { pendingTransactions.length > 0 && (
- { `${t('pending')} (${pendingTransactions.length})` } + { `${t('queue')} (${pendingTransactions.length})` }
{ pendingTransactions.map(transaction => { diff --git a/ui/app/components/transaction-status/index.scss b/ui/app/components/transaction-status/index.scss index 03a378b4e..95d29f6d3 100644 --- a/ui/app/components/transaction-status/index.scss +++ b/ui/app/components/transaction-status/index.scss @@ -11,8 +11,8 @@ align-items: center; @media screen and (max-width: $break-small) { - height: 24px; - width: 74px; + height: 16px; + width: 70px; font-size: .5rem; } diff --git a/ui/app/components/transaction-status/transaction-status.component.js b/ui/app/components/transaction-status/transaction-status.component.js index cf688558f..1b05d61b2 100644 --- a/ui/app/components/transaction-status/transaction-status.component.js +++ b/ui/app/components/transaction-status/transaction-status.component.js @@ -30,13 +30,14 @@ const statusToTextHash = { export default class TransactionStatus extends PureComponent { static propTypes = { status: PropTypes.string, + className: PropTypes.string, } render () { - const { status } = this.props + const { className, status } = this.props return ( -
+
{ statusToTextHash[status] || status }
) diff --git a/ui/app/constants/transactions.js b/ui/app/constants/transactions.js index 8b843ba2b..a9ab1a0d6 100644 --- a/ui/app/constants/transactions.js +++ b/ui/app/constants/transactions.js @@ -11,8 +11,8 @@ export const TOKEN_METHOD_TRANSFER = 'transfer' export const TOKEN_METHOD_APPROVE = 'approve' export const TOKEN_METHOD_TRANSFER_FROM = 'transferfrom' -export const SEND_ETHER_ACTION_KEY = 'sendEther' +export const SEND_ETHER_ACTION_KEY = 'outgoing' export const DEPLOY_CONTRACT_ACTION_KEY = 'contractDeployment' export const APPROVE_ACTION_KEY = 'approve' -export const SEND_TOKEN_ACTION_KEY = 'sendToken' +export const SEND_TOKEN_ACTION_KEY = 'outgoing' export const TRANSFER_FROM_ACTION_KEY = 'transferFrom' diff --git a/ui/app/util.js b/ui/app/util.js index ade4fec8a..d5558c04e 100644 --- a/ui/app/util.js +++ b/ui/app/util.js @@ -9,7 +9,7 @@ const MIN_GAS_PRICE_BN = MIN_GAS_PRICE_GWEI_BN.mul(GWEI_FACTOR) // formatData :: ( date: ) -> String function formatDate (date) { - return vreme.format(new Date(date), 'March 16 2014 14:30') + return vreme.format(new Date(date), 'March 16 2014, at 14:30') } var valueTable = { -- cgit v1.2.3