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

Add transition effect to TransactionListItemDetails expander

Browse Source
This commit is contained in:
Alexander Tseung 2018-09-17 19:35:47 -07:00
parent 95e1eff4ca
commit 2779936317
2 changed files with 29 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
ui/app/components/transaction-list-item/index.scss
View File

@ -6,6 +6,7 @@
justify-content: center;
align-items: center;
flex-direction: column;
background: $white;
&__grid {
cursor: pointer;
@ -117,4 +118,14 @@
background: #f3f4f7;
width: 100%;
}
&__expander {
max-height: 0px;
width: 100%;
&--show {
max-height: 1000px;
transition: max-height 300ms ease-out;
}
}
}

31
ui/app/components/transaction-list-item/transaction-list-item.component.js
View File

@ -1,5 +1,6 @@
import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'
import classnames from 'classnames'
import Identicon from '../identicon'
import TransactionStatus from '../transaction-status'
import TransactionAction from '../transaction-action'
@ -176,19 +177,23 @@ export default class TransactionListItem extends PureComponent {
{ this.renderPrimaryCurrency() }
{ this.renderSecondaryCurrency() }
</div>
{
showTransactionDetails && (
<div className="transaction-list-item__details-container">
<TransactionListItemDetails
transaction={transaction}
onRetry={this.handleRetry}
showRetry={showRetry && methodData.done}
onCancel={this.handleCancel}
showCancel={showCancel}
/>
</div>
)
}
<div className={classnames('transaction-list-item__expander', {
'transaction-list-item__expander--show': showTransactionDetails,
})}>
{
showTransactionDetails && (
<div className="transaction-list-item__details-container">
<TransactionListItemDetails
transaction={transaction}
onRetry={this.handleRetry}
showRetry={showRetry && methodData.done}
onCancel={this.handleCancel}
showCancel={showCancel}
/>
</div>
)
}
</div>
</div>
)
}