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

Unify tooltip styles

Browse Source 
Made a local tooltip component for replicating our tooltip styles wherever we use tooltips.

Applied that tooltip to other items that had tooltips.
This commit is contained in:
Dan Finlay 2016-06-29 16:21:38 -07:00
parent 2b5c42d27f
commit 2880f8631c
4 changed files with 59 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
ui/app/account-detail.js
View File

@ -14,6 +14,7 @@ const TransactionList = require('./components/transaction-list')
const ExportAccountView = require('./components/account-export')
const ethUtil = require('ethereumjs-util')
const EditableLabel = require('./components/editable-label')
const Tooltip = require('./components/tooltip')
module.exports = connect(mapStateToProps)(AccountDetailScreen)
@ -109,19 +110,28 @@ AccountDetailScreen.prototype.render = function () {
value: ethUtil.toChecksumAddress(selected),
}),
h('img.cursor-pointer.color-orange', {
src: 'images/key-32.png',
h(Tooltip, {
title: 'Export Private Key',
onClick: () => this.requestAccountExport(selected),
style: {
margin: '0px 5px',
width: '20px',
height: '20px',
position: 'relative',
top: '3px',
right: '4px',
},
}),
}, [
h('div', {
style: {
margin: '5px',
},
}, [
h('img.cursor-pointer.color-orange', {
src: 'images/key-32.png',
onClick: () => this.requestAccountExport(selected),
style: {
margin: '0px 5px',
width: '20px',
height: '20px',
position: 'relative',
top: '3px',
right: '4px',
},
}),
]),
]),
]),

26
ui/app/app.js
View File

@ -26,6 +26,7 @@ const SandwichExpando = require('sandwich-expando')
const MenuDroppo = require('menu-droppo')
const DropMenuItem = require('./components/drop-menu-item')
const NetworkIndicator = require('./components/network')
const Tooltip = require('./components/tooltip')
module.exports = connect(mapStateToProps)(App)
@ -152,18 +153,19 @@ App.prototype.renderAppBar = function () {
}, [
// small accounts nav
h('img.cursor-pointer.color-orange', {
src: 'images/switch_acc.svg',
style: {
width: '23.5px',
marginRight: '8px',
},
title: 'Switch Accounts',
onClick: (event) => {
event.stopPropagation()
this.props.dispatch(actions.showAccountsPage())
},
}),
h(Tooltip, { title: 'Switch Accounts' }, [
h('img.cursor-pointer.color-orange', {
src: 'images/switch_acc.svg',
style: {
width: '23.5px',
marginRight: '8px',
},
onClick: (event) => {
event.stopPropagation()
this.props.dispatch(actions.showAccountsPage())
},
}),
]),
// hamburger
h(SandwichExpando, {

3
ui/app/components/copyButton.js
View File

@ -3,7 +3,7 @@ const h = require('react-hyperscript')
const inherits = require('util').inherits
const copyToClipboard = require('copy-to-clipboard')
const Tooltip = require('react-tooltip-component')
const Tooltip = require('./tooltip')
module.exports = CopyButton
@ -32,7 +32,6 @@ CopyButton.prototype.render = function () {
}, [
h(Tooltip, {
position: 'top',
title: message,
}, [
h('i.fa.fa-clipboard.cursor-pointer.color-orange', {

22
ui/app/components/tooltip.js Normal file
View File

@ -0,0 +1,22 @@
const Component = require('react').Component
const h = require('react-hyperscript')
const inherits = require('util').inherits
const ReactTooltip = require('react-tooltip-component')
module.exports = Tooltip
inherits(Tooltip, Component)
function Tooltip () {
Component.call(this)
}
Tooltip.prototype.render = function () {
const props = this.props
return h(ReactTooltip, {
position: 'left',
title: props.title,
fixed: false,
}, props.children)
}