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, isSelected,
innerBorder = 'none', innerBorder = 'none',
diameter = '12', diameter = '12',
loading,
} = this.props } = this.props
return h(`.menu-icon-circle${isSelected ? '--active' : ''}`, {}, return loading
h('div', { ? h('span.pointer.network-indicator', {
style: { style: {
background: backgroundColor, display: 'flex',
border: innerBorder, alignItems: 'center',
height: `${diameter}px`, flexDirection: 'row',
width: `${diameter}px`,
}, },
}) }, [
) 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 let iconName, hoverText
if (networkNumber === 'loading') { if (providerName === 'mainnet') {
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') {
hoverText = context.t('mainnet') hoverText = context.t('mainnet')
iconName = 'ethereum-network' iconName = 'ethereum-network'
} else if (providerName === 'ropsten') { } else if (providerName === 'ropsten') {
@ -92,6 +75,7 @@ Network.prototype.render = function () {
h(NetworkDropdownIcon, { h(NetworkDropdownIcon, {
backgroundColor: '#038789', // $blue-lagoon backgroundColor: '#038789', // $blue-lagoon
nonSelectBackgroundColor: '#15afb2', nonSelectBackgroundColor: '#15afb2',
loading: networkNumber === 'loading',
}), }),
h('.network-name', context.t('mainnet')), h('.network-name', context.t('mainnet')),
h('i.fa.fa-chevron-down.fa-lg.network-caret'), h('i.fa.fa-chevron-down.fa-lg.network-caret'),
@ -101,6 +85,7 @@ Network.prototype.render = function () {
h(NetworkDropdownIcon, { h(NetworkDropdownIcon, {
backgroundColor: '#e91550', // $crimson backgroundColor: '#e91550', // $crimson
nonSelectBackgroundColor: '#ec2c50', nonSelectBackgroundColor: '#ec2c50',
loading: networkNumber === 'loading',
}), }),
h('.network-name', context.t('ropsten')), h('.network-name', context.t('ropsten')),
h('i.fa.fa-chevron-down.fa-lg.network-caret'), h('i.fa.fa-chevron-down.fa-lg.network-caret'),
@ -110,6 +95,7 @@ Network.prototype.render = function () {
h(NetworkDropdownIcon, { h(NetworkDropdownIcon, {
backgroundColor: '#690496', // $purple backgroundColor: '#690496', // $purple
nonSelectBackgroundColor: '#b039f3', nonSelectBackgroundColor: '#b039f3',
loading: networkNumber === 'loading',
}), }),
h('.network-name', context.t('kovan')), h('.network-name', context.t('kovan')),
h('i.fa.fa-chevron-down.fa-lg.network-caret'), h('i.fa.fa-chevron-down.fa-lg.network-caret'),
@ -119,13 +105,31 @@ Network.prototype.render = function () {
h(NetworkDropdownIcon, { h(NetworkDropdownIcon, {
backgroundColor: '#ebb33f', // $tulip-tree backgroundColor: '#ebb33f', // $tulip-tree
nonSelectBackgroundColor: '#ecb23e', nonSelectBackgroundColor: '#ecb23e',
loading: networkNumber === 'loading',
}), }),
h('.network-name', context.t('rinkeby')), h('.network-name', context.t('rinkeby')),
h('i.fa.fa-chevron-down.fa-lg.network-caret'), h('i.fa.fa-chevron-down.fa-lg.network-caret'),
]) ])
default: default:
return h('.network-indicator', [ 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: { style: {
margin: '10px', margin: '10px',
color: 'rgb(125, 128, 130)', color: 'rgb(125, 128, 130)',