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

Standardize appearance of network settings

Browse Source
This commit is contained in:
Erik Marks 2020-10-27 14:55:09 -07:00
parent aabecad34f
commit 5530914776
5 changed files with 76 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
ui/app/pages/settings/networks-tab/index.scss
View File

@ -2,12 +2,15 @@
&__content {
margin-top: 24px;
display: flex;
flex-direction: row;
height: 100%;
max-width: 739px;
justify-content: space-between;
@media screen and (max-width: 575px) {
margin-top: 0;
flex-direction: column;
overflow-x: hidden;
}
}
@ -78,20 +81,21 @@
&__network-form-row {
@media screen and (max-width: 575px) {
display: flex;
flex-direction: column;
width: 93%;
}
&--warning {
background-color: #fefae8;
border: 1px solid #ffd33d;
width: 93%;
border-radius: 5px;
box-sizing: border-box;
padding: 12px;
margin: 12px 0;
font-size: 12px;
@media screen and (max-width: 575px) {
width: 93%;
}
}
}
@ -121,7 +125,6 @@
@media screen and (max-width: 575px) {
max-width: 100vw;
width: 100vw;
overflow-y: scroll;
}
}
@ -130,7 +133,7 @@
@media screen and (max-width: 575px) {
display: flex;
padding-top: 19px;
padding-top: 23px;
padding-bottom: 23px;
justify-content: center;
align-items: center;

24
ui/app/pages/settings/networks-tab/network-form/network-form.component.js
View File

@ -30,6 +30,7 @@ export default class NetworkForm extends PureComponent {
blockExplorerUrl: PropTypes.string,
rpcPrefs: PropTypes.object,
rpcUrls: PropTypes.array,
isFullScreen: PropTypes.bool,
}
state = {
@ -136,11 +137,12 @@ export default class NetworkForm extends PureComponent {
onCancel = () => {
const {
isFullScreen,
networksTabIsInAddMode,
onClear,
} = this.props
if (networksTabIsInAddMode) {
if (networksTabIsInAddMode || !isFullScreen) {
onClear()
} else {
this.resetForm()
@ -327,6 +329,7 @@ export default class NetworkForm extends PureComponent {
viewOnly,
isCurrentRpcTarget,
networksTabIsInAddMode,
isFullScreen,
} = this.props
const {
networkName,
@ -337,6 +340,8 @@ export default class NetworkForm extends PureComponent {
errors,
} = this.state
const deletable = !networksTabIsInAddMode && !isCurrentRpcTarget && !viewOnly
const isSubmitDisabled = (
viewOnly ||
this.stateIsUnchanged() ||
@ -344,7 +349,18 @@ export default class NetworkForm extends PureComponent {
!chainId ||
Object.values(errors).some((x) => x)
)
const deletable = !networksTabIsInAddMode && !isCurrentRpcTarget && !viewOnly
// The secondary button is either the form cancel button, or a "back"
// button. It is never disabled in the popup, and sometimes disabled in
// the fullscreen UI.
const secondaryButtonDisabled = (
isFullScreen && (viewOnly || this.stateIsUnchanged())
)
const secondaryButtonMessageKey = (
!isFullScreen && viewOnly
? 'back'
: 'cancel'
)
return (
<div className="networks-tab__network-form">
@ -397,9 +413,9 @@ export default class NetworkForm extends PureComponent {
<Button
type="default"
onClick={this.onCancel}
disabled={viewOnly || this.stateIsUnchanged()}
disabled={secondaryButtonDisabled}
>
{ t('cancel') }
{t(secondaryButtonMessageKey)}
</Button>
<Button
type="secondary"

73
ui/app/pages/settings/networks-tab/networks-tab.component.js
View File

@ -2,7 +2,10 @@ import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'
import classnames from 'classnames'
import { SETTINGS_ROUTE } from '../../../helpers/constants/routes'
import { ENVIRONMENT_TYPE_POPUP } from '../../../../../app/scripts/lib/enums'
import {
ENVIRONMENT_TYPE_FULLSCREEN,
ENVIRONMENT_TYPE_POPUP,
} from '../../../../../app/scripts/lib/enums'
import { getEnvironmentType } from '../../../../../app/scripts/lib/util'
import Button from '../../../components/ui/button'
import LockIcon from '../../../components/ui/lock-icon'
@ -32,8 +35,13 @@ export default class NetworksTab extends PureComponent {
networkDefaultedToProvider: PropTypes.bool,
}
UNSAFE_componentWillMount () {
this.props.setSelectedSettingsRpcUrl(null)
state = {
isFullScreen: getEnvironmentType() === ENVIRONMENT_TYPE_FULLSCREEN,
isPopup: getEnvironmentType() === ENVIRONMENT_TYPE_POPUP,
}
componentWillUnmount () {
this.props.setSelectedSettingsRpcUrl('')
}
isCurrentPath (pathname) {
@ -56,7 +64,7 @@ export default class NetworksTab extends PureComponent {
onClick={(networkIsSelected && !networkDefaultedToProvider) || networksTabIsInAddMode
? () => {
setNetworksTabAddMode(false)
setSelectedSettingsRpcUrl(null)
setSelectedSettingsRpcUrl('')
}
: () => this.props.history.push(SETTINGS_ROUTE)
}
@ -67,7 +75,7 @@ export default class NetworksTab extends PureComponent {
type="secondary"
onClick={(event) => {
event.preventDefault()
setSelectedSettingsRpcUrl(null)
setSelectedSettingsRpcUrl('')
setNetworksTabAddMode(true)
}}
>
@ -167,7 +175,7 @@ export default class NetworksTab extends PureComponent {
)
}
renderNetworksTabContent () {
renderNetworksTabContent (isPopup) {
const { t } = this.context
const {
setRpcTarget,
@ -190,12 +198,12 @@ export default class NetworksTab extends PureComponent {
providerUrl,
networksToRender,
} = this.props
const { isFullScreen } = this.state
const envIsPopup = getEnvironmentType() === ENVIRONMENT_TYPE_POPUP
const shouldRenderNetworkForm = networksTabIsInAddMode || !envIsPopup || (envIsPopup && !networkDefaultedToProvider)
const shouldRenderNetworkForm = networksTabIsInAddMode || !isPopup || (isPopup && !networkDefaultedToProvider)
return (
<div className="networks-tab__content">
<>
{ this.renderNetworksList() }
{
shouldRenderNetworkForm
@ -210,7 +218,7 @@ export default class NetworksTab extends PureComponent {
ticker={ticker}
onClear={() => {
setNetworksTabAddMode(false)
setSelectedSettingsRpcUrl(null)
setSelectedSettingsRpcUrl('')
}}
showConfirmDeleteNetworkModal={showConfirmDeleteNetworkModal}
viewOnly={viewOnly}
@ -218,39 +226,42 @@ export default class NetworksTab extends PureComponent {
networksTabIsInAddMode={networksTabIsInAddMode}
rpcPrefs={rpcPrefs}
blockExplorerUrl={blockExplorerUrl}
cancelText={t('cancel')}
isFullScreen={isFullScreen}
/>
)
: null
}
</div>
</>
)
}
render () {
const { setNetworksTabAddMode, setSelectedSettingsRpcUrl, networkIsSelected, networksTabIsInAddMode } = this.props
const { isFullScreen, isPopup } = this.state
return (
<div className="networks-tab__body">
{this.renderSubHeader()}
{this.renderNetworksTabContent()}
{!networkIsSelected && !networksTabIsInAddMode
? (
<div className="networks-tab__add-network-button-wrapper">
<Button
type="primary"
onClick={(event) => {
event.preventDefault()
setSelectedSettingsRpcUrl(null)
setNetworksTabAddMode(true)
}}
>
{ this.context.t('addNetwork') }
</Button>
</div>
)
: null
}
{isFullScreen && this.renderSubHeader()}
<div className="networks-tab__content">
{this.renderNetworksTabContent(isPopup)}
{!networkIsSelected && !networksTabIsInAddMode
? (
<div className="networks-tab__add-network-button-wrapper">
<Button
type="primary"
onClick={(event) => {
event.preventDefault()
setSelectedSettingsRpcUrl('')
setNetworksTabAddMode(true)
}}
>
{ this.context.t('addNetwork') }
</Button>
</div>
)
: null
}
</div>
</div>
)
}

2
ui/app/pages/settings/settings.component.js
View File

@ -57,7 +57,7 @@ class SettingsPage extends PureComponent {
>
<div className="settings-page__header">
{
currentPath !== SETTINGS_ROUTE && currentPath !== NETWORKS_ROUTE && (
currentPath !== SETTINGS_ROUTE && (
<div
className="settings-page__back-button"
onClick={() => history.push(backRoute)}

10
ui/app/pages/settings/settings.container.js
View File

@ -8,12 +8,9 @@ import { getEnvironmentType } from '../../../../app/scripts/lib/util'
import { getMostRecentOverviewPage } from '../../ducks/history/history'
import {
ADVANCED_ROUTE,
SECURITY_ROUTE,
GENERAL_ROUTE,
ALERTS_ROUTE,
ABOUT_US_ROUTE,
SETTINGS_ROUTE,
ADVANCED_ROUTE,
ALERTS_ROUTE,
CONTACT_LIST_ROUTE,
CONTACT_ADD_ROUTE,
CONTACT_EDIT_ROUTE,
@ -21,6 +18,9 @@ import {
CONTACT_MY_ACCOUNTS_ROUTE,
CONTACT_MY_ACCOUNTS_EDIT_ROUTE,
CONTACT_MY_ACCOUNTS_VIEW_ROUTE,
GENERAL_ROUTE,
SECURITY_ROUTE,
SETTINGS_ROUTE,
} from '../../helpers/constants/routes'
import Settings from './settings.component'