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 spinner and dropdown arrow to network indicator on custom network loading.

Browse Source
This commit is contained in:
Dan Miller 2018-12-05 02:45:45 -03:30
parent 970bdebb86
commit 47501a6f7a
2 changed files with 47 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
ui/app/components/dropdowns/components/network-dropdown-icon.js
View File

@ -16,16 +16,32 @@ NetworkDropdownIcon.prototype.render = function () {
isSelected,
innerBorder = 'none',
diameter = '12',
loading,
} = this.props
return h(`.menu-icon-circle${isSelected ? '--active' : ''}`, {},
h('div', {
return loading
? h('span.pointer.network-indicator', {
style: {
background: backgroundColor,
border: innerBorder,
height: `${diameter}px`,
width: `${diameter}px`,
display: 'flex',
alignItems: 'center',
flexDirection: 'row',
},
})
)
}, [
h('img', {
style: {
width: '27px',
},
src: 'images/loading.svg',
}),
])
: h(`.menu-icon-circle${isSelected ? '--active' : ''}`, {},
h('div', {
style: {
background: backgroundColor,
border: innerBorder,
height: `${diameter}px`,
width: `${diameter}px`,
},
})
)
}

42
ui/app/components/network.js
View File

@ -32,24 +32,7 @@ Network.prototype.render = function () {
}
let iconName, hoverText
if (networkNumber === 'loading') {
return h('span.pointer.network-indicator', {
style: {
display: 'flex',
alignItems: 'center',
flexDirection: 'row',
},
onClick: (event) => this.props.onClick(event),
}, [
h('img', {
title: context.t('attemptingConnect'),
style: {
width: '27px',
},
src: 'images/loading.svg',
}),
])
} else if (providerName === 'mainnet') {
if (providerName === 'mainnet') {
hoverText = context.t('mainnet')
iconName = 'ethereum-network'
} else if (providerName === 'ropsten') {
@ -92,6 +75,7 @@ Network.prototype.render = function () {
h(NetworkDropdownIcon, {
backgroundColor: '#038789', // $blue-lagoon
nonSelectBackgroundColor: '#15afb2',
loading: networkNumber === 'loading',
}),
h('.network-name', context.t('mainnet')),
h('i.fa.fa-chevron-down.fa-lg.network-caret'),
@ -101,6 +85,7 @@ Network.prototype.render = function () {
h(NetworkDropdownIcon, {
backgroundColor: '#e91550', // $crimson
nonSelectBackgroundColor: '#ec2c50',
loading: networkNumber === 'loading',
}),
h('.network-name', context.t('ropsten')),
h('i.fa.fa-chevron-down.fa-lg.network-caret'),
@ -110,6 +95,7 @@ Network.prototype.render = function () {
h(NetworkDropdownIcon, {
backgroundColor: '#690496', // $purple
nonSelectBackgroundColor: '#b039f3',
loading: networkNumber === 'loading',
}),
h('.network-name', context.t('kovan')),
h('i.fa.fa-chevron-down.fa-lg.network-caret'),
@ -119,13 +105,31 @@ Network.prototype.render = function () {
h(NetworkDropdownIcon, {
backgroundColor: '#ebb33f', // $tulip-tree
nonSelectBackgroundColor: '#ecb23e',
loading: networkNumber === 'loading',
}),
h('.network-name', context.t('rinkeby')),
h('i.fa.fa-chevron-down.fa-lg.network-caret'),
])
default:
return h('.network-indicator', [
h('i.fa.fa-question-circle.fa-lg', {
networkNumber === 'loading'
? h('span.pointer.network-indicator', {
style: {
display: 'flex',
alignItems: 'center',
flexDirection: 'row',
},
onClick: (event) => this.props.onClick(event),
}, [
h('img', {
title: context.t('attemptingConnect'),
style: {
width: '27px',
},
src: 'images/loading.svg',
}),
])
: h('i.fa.fa-question-circle.fa-lg', {
style: {
margin: '10px',
color: 'rgb(125, 128, 130)',