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 { &__content {
margin-top: 24px; margin-top: 24px;
display: flex; display: flex;
flex-direction: row;
height: 100%; height: 100%;
max-width: 739px; max-width: 739px;
justify-content: space-between; justify-content: space-between;
@media screen and (max-width: 575px) { @media screen and (max-width: 575px) {
margin-top: 0; margin-top: 0;
flex-direction: column;
overflow-x: hidden;
} }
} }
@ -78,20 +81,21 @@
&__network-form-row { &__network-form-row {
@media screen and (max-width: 575px) { @media screen and (max-width: 575px) {
display: flex;
flex-direction: column;
width: 93%; width: 93%;
} }
&--warning { &--warning {
background-color: #fefae8; background-color: #fefae8;
border: 1px solid #ffd33d; border: 1px solid #ffd33d;
width: 93%;
border-radius: 5px; border-radius: 5px;
box-sizing: border-box; box-sizing: border-box;
padding: 12px; padding: 12px;
margin: 12px 0; margin: 12px 0;
font-size: 12px; font-size: 12px;
@media screen and (max-width: 575px) {
width: 93%;
}
} }
} }
@ -121,7 +125,6 @@
@media screen and (max-width: 575px) { @media screen and (max-width: 575px) {
max-width: 100vw; max-width: 100vw;
width: 100vw; width: 100vw;
overflow-y: scroll;
} }
} }
@ -130,7 +133,7 @@
@media screen and (max-width: 575px) { @media screen and (max-width: 575px) {
display: flex; display: flex;
padding-top: 19px; padding-top: 23px;
padding-bottom: 23px; padding-bottom: 23px;
justify-content: center; justify-content: center;
align-items: 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, blockExplorerUrl: PropTypes.string,
rpcPrefs: PropTypes.object, rpcPrefs: PropTypes.object,
rpcUrls: PropTypes.array, rpcUrls: PropTypes.array,
isFullScreen: PropTypes.bool,
} }
state = { state = {
@ -136,11 +137,12 @@ export default class NetworkForm extends PureComponent {
onCancel = () => { onCancel = () => {
const { const {
isFullScreen,
networksTabIsInAddMode, networksTabIsInAddMode,
onClear, onClear,
} = this.props } = this.props
if (networksTabIsInAddMode) { if (networksTabIsInAddMode || !isFullScreen) {
onClear() onClear()
} else { } else {
this.resetForm() this.resetForm()
@ -327,6 +329,7 @@ export default class NetworkForm extends PureComponent {
viewOnly, viewOnly,
isCurrentRpcTarget, isCurrentRpcTarget,
networksTabIsInAddMode, networksTabIsInAddMode,
isFullScreen,
} = this.props } = this.props
const { const {
networkName, networkName,
@ -337,6 +340,8 @@ export default class NetworkForm extends PureComponent {
errors, errors,
} = this.state } = this.state
const deletable = !networksTabIsInAddMode && !isCurrentRpcTarget && !viewOnly
const isSubmitDisabled = ( const isSubmitDisabled = (
viewOnly || viewOnly ||
this.stateIsUnchanged() || this.stateIsUnchanged() ||
@ -344,7 +349,18 @@ export default class NetworkForm extends PureComponent {
!chainId || !chainId ||
Object.values(errors).some((x) => x) 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 ( return (
<div className="networks-tab__network-form"> <div className="networks-tab__network-form">
@ -397,9 +413,9 @@ export default class NetworkForm extends PureComponent {
<Button <Button
type="default" type="default"
onClick={this.onCancel} onClick={this.onCancel}
disabled={viewOnly || this.stateIsUnchanged()} disabled={secondaryButtonDisabled}
> >
{ t('cancel') } {t(secondaryButtonMessageKey)}
</Button> </Button>
<Button <Button
type="secondary" 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 PropTypes from 'prop-types'
import classnames from 'classnames' import classnames from 'classnames'
import { SETTINGS_ROUTE } from '../../../helpers/constants/routes' 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 { getEnvironmentType } from '../../../../../app/scripts/lib/util'
import Button from '../../../components/ui/button' import Button from '../../../components/ui/button'
import LockIcon from '../../../components/ui/lock-icon' import LockIcon from '../../../components/ui/lock-icon'
@ -32,8 +35,13 @@ export default class NetworksTab extends PureComponent {
networkDefaultedToProvider: PropTypes.bool, networkDefaultedToProvider: PropTypes.bool,
} }
UNSAFE_componentWillMount () { state = {
this.props.setSelectedSettingsRpcUrl(null) isFullScreen: getEnvironmentType() === ENVIRONMENT_TYPE_FULLSCREEN,
isPopup: getEnvironmentType() === ENVIRONMENT_TYPE_POPUP,
}
componentWillUnmount () {
this.props.setSelectedSettingsRpcUrl('')
} }
isCurrentPath (pathname) { isCurrentPath (pathname) {
@ -56,7 +64,7 @@ export default class NetworksTab extends PureComponent {
onClick={(networkIsSelected && !networkDefaultedToProvider) || networksTabIsInAddMode onClick={(networkIsSelected && !networkDefaultedToProvider) || networksTabIsInAddMode
? () => { ? () => {
setNetworksTabAddMode(false) setNetworksTabAddMode(false)
setSelectedSettingsRpcUrl(null) setSelectedSettingsRpcUrl('')
} }
: () => this.props.history.push(SETTINGS_ROUTE) : () => this.props.history.push(SETTINGS_ROUTE)
} }
@ -67,7 +75,7 @@ export default class NetworksTab extends PureComponent {
type="secondary" type="secondary"
onClick={(event) => { onClick={(event) => {
event.preventDefault() event.preventDefault()
setSelectedSettingsRpcUrl(null) setSelectedSettingsRpcUrl('')
setNetworksTabAddMode(true) setNetworksTabAddMode(true)
}} }}
> >
@ -167,7 +175,7 @@ export default class NetworksTab extends PureComponent {
) )
} }
renderNetworksTabContent () { renderNetworksTabContent (isPopup) {
const { t } = this.context const { t } = this.context
const { const {
setRpcTarget, setRpcTarget,
@ -190,12 +198,12 @@ export default class NetworksTab extends PureComponent {
providerUrl, providerUrl,
networksToRender, networksToRender,
} = this.props } = this.props
const { isFullScreen } = this.state
const envIsPopup = getEnvironmentType() === ENVIRONMENT_TYPE_POPUP const shouldRenderNetworkForm = networksTabIsInAddMode || !isPopup || (isPopup && !networkDefaultedToProvider)
const shouldRenderNetworkForm = networksTabIsInAddMode || !envIsPopup || (envIsPopup && !networkDefaultedToProvider)
return ( return (
<div className="networks-tab__content"> <>
{ this.renderNetworksList() } { this.renderNetworksList() }
{ {
shouldRenderNetworkForm shouldRenderNetworkForm
@ -210,7 +218,7 @@ export default class NetworksTab extends PureComponent {
ticker={ticker} ticker={ticker}
onClear={() => { onClear={() => {
setNetworksTabAddMode(false) setNetworksTabAddMode(false)
setSelectedSettingsRpcUrl(null) setSelectedSettingsRpcUrl('')
}} }}
showConfirmDeleteNetworkModal={showConfirmDeleteNetworkModal} showConfirmDeleteNetworkModal={showConfirmDeleteNetworkModal}
viewOnly={viewOnly} viewOnly={viewOnly}
@ -218,39 +226,42 @@ export default class NetworksTab extends PureComponent {
networksTabIsInAddMode={networksTabIsInAddMode} networksTabIsInAddMode={networksTabIsInAddMode}
rpcPrefs={rpcPrefs} rpcPrefs={rpcPrefs}
blockExplorerUrl={blockExplorerUrl} blockExplorerUrl={blockExplorerUrl}
cancelText={t('cancel')} isFullScreen={isFullScreen}
/> />
) )
: null : null
} }
</div> </>
) )
} }
render () { render () {
const { setNetworksTabAddMode, setSelectedSettingsRpcUrl, networkIsSelected, networksTabIsInAddMode } = this.props const { setNetworksTabAddMode, setSelectedSettingsRpcUrl, networkIsSelected, networksTabIsInAddMode } = this.props
const { isFullScreen, isPopup } = this.state
return ( return (
<div className="networks-tab__body"> <div className="networks-tab__body">
{this.renderSubHeader()} {isFullScreen && this.renderSubHeader()}
{this.renderNetworksTabContent()} <div className="networks-tab__content">
{!networkIsSelected && !networksTabIsInAddMode {this.renderNetworksTabContent(isPopup)}
? ( {!networkIsSelected && !networksTabIsInAddMode
<div className="networks-tab__add-network-button-wrapper"> ? (
<Button <div className="networks-tab__add-network-button-wrapper">
type="primary" <Button
onClick={(event) => { type="primary"
event.preventDefault() onClick={(event) => {
setSelectedSettingsRpcUrl(null) event.preventDefault()
setNetworksTabAddMode(true) setSelectedSettingsRpcUrl('')
}} setNetworksTabAddMode(true)
> }}
{ this.context.t('addNetwork') } >
</Button> { this.context.t('addNetwork') }
</div> </Button>
) </div>
: null )
} : null
}
</div>
</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"> <div className="settings-page__header">
{ {
currentPath !== SETTINGS_ROUTE && currentPath !== NETWORKS_ROUTE && ( currentPath !== SETTINGS_ROUTE && (
<div <div
className="settings-page__back-button" className="settings-page__back-button"
onClick={() => history.push(backRoute)} 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 { getMostRecentOverviewPage } from '../../ducks/history/history'
import { import {
ADVANCED_ROUTE,
SECURITY_ROUTE,
GENERAL_ROUTE,
ALERTS_ROUTE,
ABOUT_US_ROUTE, ABOUT_US_ROUTE,
SETTINGS_ROUTE, ADVANCED_ROUTE,
ALERTS_ROUTE,
CONTACT_LIST_ROUTE, CONTACT_LIST_ROUTE,
CONTACT_ADD_ROUTE, CONTACT_ADD_ROUTE,
CONTACT_EDIT_ROUTE, CONTACT_EDIT_ROUTE,
@ -21,6 +18,9 @@ import {
CONTACT_MY_ACCOUNTS_ROUTE, CONTACT_MY_ACCOUNTS_ROUTE,
CONTACT_MY_ACCOUNTS_EDIT_ROUTE, CONTACT_MY_ACCOUNTS_EDIT_ROUTE,
CONTACT_MY_ACCOUNTS_VIEW_ROUTE, CONTACT_MY_ACCOUNTS_VIEW_ROUTE,
GENERAL_ROUTE,
SECURITY_ROUTE,
SETTINGS_ROUTE,
} from '../../helpers/constants/routes' } from '../../helpers/constants/routes'
import Settings from './settings.component' import Settings from './settings.component'