m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-10-22 19:26:13 +02:00
Code

move footer buttons to scrollable area (#9228)

Browse Source 
Co-authored-by: Patryk Łucka <patryk.lucka@consensys.net>
This commit is contained in:
Patryk Łucka 2020-08-18 16:10:56 +02:00 committed by Mark Stacey
parent 5c88d8d250
commit 2986a6764c
3 changed files with 66 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
ui/app/components/app/confirm-page-container/confirm-page-container-content/confirm-page-container-content.component.js
View File

@ -4,6 +4,8 @@ import classnames from 'classnames'
import { Tabs, Tab } from '../../../ui/tabs'
import { ConfirmPageContainerSummary, ConfirmPageContainerWarning } from '.'
import ErrorMessage from '../../../ui/error-message'
import { PageContainerFooter } from '../../../ui/page-container'
export default class ConfirmPageContainerContent extends Component {
static propTypes = {
@ -22,6 +24,15 @@ export default class ConfirmPageContainerContent extends Component {
title: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
titleComponent: PropTypes.node,
warning: PropTypes.string,
// Footer
onCancelAll: PropTypes.func,
onCancel: PropTypes.func,
cancelText: PropTypes.string,
onSubmit: PropTypes.func,
submitText: PropTypes.string,
disabled: PropTypes.bool,
unapprovedTxCount: PropTypes.number,
rejectNText: PropTypes.string,
}
renderContent () {
@ -66,6 +77,14 @@ export default class ConfirmPageContainerContent extends Component {
detailsComponent,
dataComponent,
warning,
onCancelAll,
onCancel,
cancelText,
onSubmit,
submitText,
disabled,
unapprovedTxCount,
rejectNText,
} = this.props
return (
@ -104,6 +123,21 @@ export default class ConfirmPageContainerContent extends Component {
</div>
)
}
<PageContainerFooter
onCancel={onCancel}
cancelText={cancelText}
onSubmit={onSubmit}
submitText={submitText}
submitButtonType="confirm"
disabled={disabled}
>
{unapprovedTxCount > 1 && (
<a onClick={onCancelAll}>
{rejectNText}
</a>
)}
</PageContainerFooter>
</div>
)
}

6
ui/app/components/app/confirm-page-container/confirm-page-container-content/index.scss
View File

@ -5,6 +5,8 @@
overflow-y: auto;
height: 100%;
flex: 1;
display: flex;
flex-direction: column;
&__error-container {
padding: 0 16px 16px 16px;
@ -72,4 +74,8 @@
text-transform: uppercase;
margin: 0 8px;
}
.page-container__footer {
margin-top: auto;
}
}

40
ui/app/components/app/confirm-page-container/confirm-page-container.component.js
View File

@ -157,23 +157,35 @@ export default class ConfirmPageContainer extends Component {
nonce={nonce}
assetImage={assetImage}
warning={warning}
onCancelAll={onCancelAll}
onCancel={onCancel}
cancelText={this.context.t('reject')}
onSubmit={onSubmit}
submitText={this.context.t('confirm')}
disabled={disabled}
unapprovedTxCount={unapprovedTxCount}
rejectNText={this.context.t('rejectTxsN', [unapprovedTxCount])}
/>
)
}
<PageContainerFooter
onCancel={() => onCancel()}
cancelText={this.context.t('reject')}
onSubmit={() => onSubmit()}
submitText={this.context.t('confirm')}
submitButtonType="confirm"
disabled={disabled}
>
{unapprovedTxCount > 1 && (
<a onClick={() => onCancelAll()}>
{this.context.t('rejectTxsN', [unapprovedTxCount])}
</a>
)}
</PageContainerFooter>
{
contentComponent && (
<PageContainerFooter
onCancel={onCancel}
cancelText={this.context.t('reject')}
onSubmit={onSubmit}
submitText={this.context.t('confirm')}
submitButtonType="confirm"
disabled={disabled}
>
{unapprovedTxCount > 1 && (
<a onClick={onCancelAll}>
{this.context.t('rejectTxsN', [unapprovedTxCount])}
</a>
)}
</PageContainerFooter>
)
}
</div>
)
}