mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-23 01:39:44 +01:00
Add dynamic list item styles
This commit is contained in:
parent
79e595754f
commit
d0b0526765
@ -37,7 +37,7 @@
|
|||||||
"identicon.js": "^1.2.1",
|
"identicon.js": "^1.2.1",
|
||||||
"inject-css": "^0.1.1",
|
"inject-css": "^0.1.1",
|
||||||
"jazzicon": "^1.1.3",
|
"jazzicon": "^1.1.3",
|
||||||
"menu-droppo": "^1.0.2",
|
"menu-droppo": "^1.0.3",
|
||||||
"metamask-logo": "^1.1.5",
|
"metamask-logo": "^1.1.5",
|
||||||
"multiplex": "^6.7.0",
|
"multiplex": "^6.7.0",
|
||||||
"once": "^1.3.3",
|
"once": "^1.3.3",
|
||||||
@ -53,7 +53,7 @@
|
|||||||
"redux": "^3.0.5",
|
"redux": "^3.0.5",
|
||||||
"redux-logger": "^2.3.1",
|
"redux-logger": "^2.3.1",
|
||||||
"redux-thunk": "^1.0.2",
|
"redux-thunk": "^1.0.2",
|
||||||
"sandwich-expando": "^1.0.4",
|
"sandwich-expando": "^1.0.5",
|
||||||
"textarea-caret": "^3.0.1",
|
"textarea-caret": "^3.0.1",
|
||||||
"three.js": "^0.73.2",
|
"three.js": "^0.73.2",
|
||||||
"through2": "^2.0.1",
|
"through2": "^2.0.1",
|
||||||
|
@ -4,6 +4,8 @@ var actions = {
|
|||||||
// menu state
|
// menu state
|
||||||
TOGGLE_MENU: 'TOGGLE_MENU',
|
TOGGLE_MENU: 'TOGGLE_MENU',
|
||||||
toggleMenu: toggleMenu,
|
toggleMenu: toggleMenu,
|
||||||
|
SET_MENU_STATE: 'SET_MENU_STATE',
|
||||||
|
closeMenu: closeMenu,
|
||||||
// remote state
|
// remote state
|
||||||
UPDATE_METAMASK_STATE: 'UPDATE_METAMASK_STATE',
|
UPDATE_METAMASK_STATE: 'UPDATE_METAMASK_STATE',
|
||||||
updateMetamaskState: updateMetamaskState,
|
updateMetamaskState: updateMetamaskState,
|
||||||
@ -116,6 +118,13 @@ function toggleMenu() {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function closeMenu() {
|
||||||
|
return {
|
||||||
|
type: this.SET_MENU_STATE,
|
||||||
|
value: false,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
// async actions
|
// async actions
|
||||||
|
|
||||||
function tryUnlockMetamask(password) {
|
function tryUnlockMetamask(password) {
|
||||||
|
@ -26,6 +26,7 @@ const LoadingIndicator = require('./loading')
|
|||||||
const txHelper = require('../lib/tx-helper')
|
const txHelper = require('../lib/tx-helper')
|
||||||
const SandwichExpando = require('sandwich-expando')
|
const SandwichExpando = require('sandwich-expando')
|
||||||
const MenuDroppo = require('menu-droppo')
|
const MenuDroppo = require('menu-droppo')
|
||||||
|
const DropMenuItem = require('./components/drop-menu-item')
|
||||||
|
|
||||||
module.exports = connect(mapStateToProps)(App)
|
module.exports = connect(mapStateToProps)(App)
|
||||||
|
|
||||||
@ -130,37 +131,85 @@ App.prototype.renderAppBar = function(){
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
|
|
||||||
h('.app-header.flex-row.flex-space-between', {
|
h('div', [
|
||||||
style: {
|
|
||||||
alignItems: 'center',
|
|
||||||
visibility: state.isUnlocked ? 'visibile' : 'none',
|
|
||||||
background: state.isUnlocked ? 'white' : 'none',
|
|
||||||
height: '36px',
|
|
||||||
},
|
|
||||||
}, state.isUnlocked && [
|
|
||||||
|
|
||||||
// mini logo
|
h('.app-header.flex-row.flex-space-between', {
|
||||||
h('img', {
|
style: {
|
||||||
height: 24,
|
alignItems: 'center',
|
||||||
width: 24,
|
visibility: state.isUnlocked ? 'visibile' : 'none',
|
||||||
src: '/images/icon-128.png',
|
background: state.isUnlocked ? 'white' : 'none',
|
||||||
}),
|
height: '36px',
|
||||||
|
},
|
||||||
|
}, state.isUnlocked && [
|
||||||
|
|
||||||
// metamask namlterChangese
|
// mini logo
|
||||||
h('h1', 'MetaMask'),
|
h('img', {
|
||||||
|
height: 24,
|
||||||
|
width: 24,
|
||||||
|
src: '/images/icon-128.png',
|
||||||
|
}),
|
||||||
|
|
||||||
// hamburger
|
// metamask namlterChangese
|
||||||
h(SandwichExpando, {
|
h('h1', 'MetaMask'),
|
||||||
width: 16,
|
|
||||||
barHeight: 2,
|
// hamburger
|
||||||
padding: 0,
|
h(SandwichExpando, {
|
||||||
|
width: 16,
|
||||||
|
barHeight: 2,
|
||||||
|
padding: 0,
|
||||||
|
isOpen: state.menuOpen,
|
||||||
|
color: 'rgb(247,146,30)',
|
||||||
|
onClick: (event) => {
|
||||||
|
event.preventDefault()
|
||||||
|
event.stopPropagation()
|
||||||
|
this.props.dispatch(actions.toggleMenu())
|
||||||
|
},
|
||||||
|
}),
|
||||||
|
]),
|
||||||
|
|
||||||
|
h(MenuDroppo, {
|
||||||
|
style: {
|
||||||
|
right: '0px',
|
||||||
|
},
|
||||||
|
innerStyle: {
|
||||||
|
background: 'white',
|
||||||
|
|
||||||
|
// This shadow is hidden by the surrounding bounding box.
|
||||||
|
// Maybe worth revealing in the future:
|
||||||
|
boxShadow: '1px 1px 2px rgba(0,0,0,0.1)',
|
||||||
|
float: 'right',
|
||||||
|
},
|
||||||
isOpen: state.menuOpen,
|
isOpen: state.menuOpen,
|
||||||
color: 'rgb(247,146,30)',
|
onClickOutside: (event) => {
|
||||||
onClick: () => this.props.dispatch(actions.toggleMenu()),
|
this.props.dispatch(actions.closeMenu())
|
||||||
}),
|
},
|
||||||
|
}, [ // DROP MENU ITEMS
|
||||||
|
h('menu', [
|
||||||
|
h('style', '.drop-menu-item:hover { background:rgb(235, 235, 235); }'),
|
||||||
|
|
||||||
|
h(DropMenuItem, {
|
||||||
|
closeMenu:() => this.props.dispatch(actions.closeMenu()),
|
||||||
|
action:() => this.props.dispatch(actions.showConfigPage()),
|
||||||
|
icon: null,
|
||||||
|
label: 'Settings'
|
||||||
|
}),
|
||||||
|
|
||||||
|
h(DropMenuItem, {
|
||||||
|
closeMenu:() => this.props.dispatch(actions.closeMenu()),
|
||||||
|
action:() => this.props.dispatch(actions.lockMetamask()),
|
||||||
|
icon: null,
|
||||||
|
label: 'Lock Account'
|
||||||
|
}),
|
||||||
|
|
||||||
|
h(DropMenuItem, {
|
||||||
|
closeMenu:() => this.props.dispatch(actions.closeMenu()),
|
||||||
|
action:() => this.props.dispatch(actions.showInfoPage()),
|
||||||
|
icon: null,
|
||||||
|
label: 'Help'
|
||||||
|
}),
|
||||||
|
]),
|
||||||
|
]),
|
||||||
])
|
])
|
||||||
|
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
31
ui/app/components/drop-menu-item.js
Normal file
31
ui/app/components/drop-menu-item.js
Normal file
@ -0,0 +1,31 @@
|
|||||||
|
const Component = require('react').Component
|
||||||
|
const h = require('react-hyperscript')
|
||||||
|
const inherits = require('util').inherits
|
||||||
|
|
||||||
|
module.exports = DropMenuItem
|
||||||
|
|
||||||
|
|
||||||
|
inherits(DropMenuItem, Component)
|
||||||
|
function DropMenuItem() {
|
||||||
|
Component.call(this)
|
||||||
|
}
|
||||||
|
|
||||||
|
DropMenuItem.prototype.render = function() {
|
||||||
|
|
||||||
|
return h('li.drop-menu-item', {
|
||||||
|
onClick:() => {
|
||||||
|
this.props.closeMenu()
|
||||||
|
this.props.action()
|
||||||
|
},
|
||||||
|
style: {
|
||||||
|
listStyle: 'none',
|
||||||
|
padding: '6px 10px 6px 17px',
|
||||||
|
fontFamily: 'Transat Medium',
|
||||||
|
color: 'rgb(125, 128, 130)',
|
||||||
|
cursor: 'pointer',
|
||||||
|
},
|
||||||
|
}, [
|
||||||
|
this.props.icon,
|
||||||
|
this.props.label,
|
||||||
|
])
|
||||||
|
}
|
@ -40,6 +40,11 @@ function reduceApp(state, action) {
|
|||||||
menuOpen: !appState.menuOpen,
|
menuOpen: !appState.menuOpen,
|
||||||
})
|
})
|
||||||
|
|
||||||
|
case actions.SET_MENU_STATE:
|
||||||
|
return extend(appState, {
|
||||||
|
menuOpen: action.value,
|
||||||
|
})
|
||||||
|
|
||||||
// intialize
|
// intialize
|
||||||
|
|
||||||
case actions.SHOW_CREATE_VAULT:
|
case actions.SHOW_CREATE_VAULT:
|
||||||
|
Loading…
Reference in New Issue
Block a user