ui - redesign - unlock menu

feature/default_network_editable
kumavis 9 years ago
parent d6a8b0b90a
commit 49e08f9013
  1. 89
      ui/app/app.js
  2. 229
      ui/app/css/index.css
  3. 4
      ui/app/css/lib.css
  4. 4
      ui/app/first-time/init-menu.js
  5. 18
      ui/app/unlock.js

@ -50,15 +50,6 @@ App.prototype.render = function() {
var state = this.props var state = this.props
var view = state.currentView.name var view = state.currentView.name
var transForward = state.transForward var transForward = state.transForward
var shouldHaveFooter = true
switch (view) {
case 'restoreVault':
shouldHaveFooter = false;
case 'createVault':
shouldHaveFooter = false;
case 'createVaultComplete':
shouldHaveFooter = false;
}
return ( return (
@ -67,34 +58,12 @@ App.prototype.render = function() {
// Windows was showing a vertical scroll bar: // Windows was showing a vertical scroll bar:
overflow: 'hidden', overflow: 'hidden',
} }
}, }, [
[
h(LoadingIndicator), h(LoadingIndicator),
// app bar // app bar
h('.app-header.flex-row.flex-space-between', { this.renderAppBar(),
style: {
alignItems: 'center',
}
}, [
// mini logo
h('img', {
height: 24,
width: 24,
src: '/images/icon-128.png',
}),
// metamask name
h('h1', 'MetaMask'),
// hamburger
h('i.fa.fa-bars.cursor-pointer.color-orange', {
onClick: (event) => state.dispatch(actions.showConfigPage()),
}),
]),
// panel content // panel content
h('.app-primary.flex-grow' + (transForward ? '.from-right' : '.from-left'), { h('.app-primary.flex-grow' + (transForward ? '.from-right' : '.from-left'), {
@ -153,16 +122,38 @@ App.prototype.render = function() {
) )
} }
App.prototype.toggleMetamaskActive = function(){ App.prototype.renderAppBar = function(){
if (!this.props.isUnlocked) { var state = this.props
// currently inactive: redirect to password box
var passwordBox = document.querySelector('input[type=password]') return (
if (!passwordBox) return
passwordBox.focus() h('.app-header.flex-row.flex-space-between', {
} else { style: {
// currently active: deactivate alignItems: 'center',
this.props.dispatch(actions.lockMetamask(false)) visibility: state.isUnlocked ? 'visibile' : 'none',
} background: state.isUnlocked ? 'white' : 'none',
height: '36px',
},
}, state.isUnlocked && [
// mini logo
h('img', {
height: 24,
width: 24,
src: '/images/icon-128.png',
}),
// metamask name
h('h1', 'MetaMask'),
// hamburger
h('i.fa.fa-bars.cursor-pointer.color-orange', {
onClick: (event) => state.dispatch(actions.showConfigPage()),
}),
])
)
} }
App.prototype.renderPrimary = function(state){ App.prototype.renderPrimary = function(state){
@ -231,6 +222,18 @@ App.prototype.renderPrimary = function(state){
} }
} }
App.prototype.toggleMetamaskActive = function(){
if (!this.props.isUnlocked) {
// currently inactive: redirect to password box
var passwordBox = document.querySelector('input[type=password]')
if (!passwordBox) return
passwordBox.focus()
} else {
// currently active: deactivate
this.props.dispatch(actions.lockMetamask(false))
}
}
App.prototype.hasPendingTxs = function() { App.prototype.hasPendingTxs = function() {
var state = this.props var state = this.props
var unconfTxs = state.unconfTxs var unconfTxs = state.unconfTxs

@ -18,6 +18,11 @@ html, body {
color: #4D4D4D; color: #4D4D4D;
font-weight: 300; font-weight: 300;
line-height: 1.4em; line-height: 1.4em;
background: #F7F7F7;
}
input:focus {
outline: none;
} }
#app-content { #app-content {
@ -47,17 +52,7 @@ button:active {
transform: scale(0.95); transform: scale(0.95);
} }
button.primary { /*input, textarea {
margin: 10px;
padding: 6px;
border: none;
border-radius: 3px;
background: #F7861C;
font-weight: 500;
color: white;
}
input, textarea {
width: 300px; width: 300px;
padding: 6px; padding: 6px;
border-radius: 6px; border-radius: 6px;
@ -65,7 +60,7 @@ input, textarea {
outline: none; outline: none;
border: 1px solid #F5A623; border: 1px solid #F5A623;
background: #FAF6F0; background: #FAF6F0;
} }*/
a { a {
text-decoration: none; text-decoration: none;
@ -84,6 +79,17 @@ app
color: #909090; color: #909090;
} }
button.primary {
margin: 10px;
padding: 8px 12px;
background: #F7861C;
box-shadow: 0px 3px 6px rgba(247, 134, 28, 0.36);
color: white;
font-size: 1.1em;
font-family: 'Transat Standard';
text-transform: uppercase;
}
button.btn-thin { button.btn-thin {
border: 1px solid; border: 1px solid;
border-color: #4D4D4D; border-color: #4D4D4D;
@ -115,7 +121,7 @@ h2.page-subtitle {
} }
.app-primary { .app-primary {
background: #F7F7F7;
} }
.app-footer { .app-footer {
@ -217,23 +223,41 @@ app sections
margin: -2px 8px 0px -8px; margin: -2px 8px 0px -8px;
} }
.unlock-screen label { .unlock-screen #metamask-mascot-container {
color: #F3C83E; margin-top: 24px;
font-weight: 500; }
.unlock-screen h1 {
margin-top: -28px;
margin-bottom: 42px;
} }
.unlock-screen input[type=password] { .unlock-screen input[type=password] {
width: 60%; width: 260px;
height: 22px; height: 36px;
padding: 2px; margin-bottom: 24px;
border-radius: 4px; padding: 8px;
border: 2px solid #F3C83E;
background: #FAF6F0;
} }
.unlock-screen input[type=password]:focus { /* Webkit */
outline: none; .password-box::-webkit-input-placeholder {
border: 3px solid #F3C83E; text-align: center;
font-size: 1.2em;
}
/* Firefox 18- */
.password-box:-moz-placeholder {
text-align: center;
font-size: 1.2em;
}
/* Firefox 19+ */
.password-box::-moz-placeholder {
text-align: center;
font-size: 1.2em;
}
/* IE */
.password-box:-ms-input-placeholder {
text-align: center;
font-size: 1.2em;
} }
/* accounts */ /* accounts */
@ -251,7 +275,6 @@ app sections
} }
.accounts-list-option:hover { .accounts-list-option:hover {
background: pink;
transform: scale(1.1); transform: scale(1.1);
} }
@ -346,157 +369,3 @@ app sections
background: #FAF6F0; background: #FAF6F0;
} }
/*
react toggle
*/
/* overrides */
.react-toggle-track-check {
display: none;
}
.react-toggle-track-x {
display: none;
}
/* modified original */
.react-toggle {
display: inline-block;
position: relative;
cursor: pointer;
background-color: transparent;
border: 0;
padding: 0;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-tap-highlight-color: transparent;
}
.react-toggle-screenreader-only {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
.react-toggle--disabled {
opacity: 0.5;
-webkit-transition: opacity 0.25s;
transition: opacity 0.25s;
}
.react-toggle-track {
width: 50px;
height: 24px;
padding: 0;
border-radius: 30px;
background-color: #4D4D4D;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
transition: all 0.2s ease;
}
.react-toggle:hover:not(.react-toggle--disabled) .react-toggle-track {
background-color: #000000;
}
.react-toggle--checked .react-toggle-track {
background-color: rgb(255, 174, 41);
}
.react-toggle.react-toggle--checked:hover:not(.react-toggle--disabled) .react-toggle-track {
background-color: rgb(243, 151, 0);
}
.react-toggle-track-check {
position: absolute;
width: 14px;
height: 10px;
top: 0px;
bottom: 0px;
margin-top: auto;
margin-bottom: auto;
line-height: 0;
left: 8px;
opacity: 0;
-webkit-transition: opacity 0.25s ease;
-moz-transition: opacity 0.25s ease;
transition: opacity 0.25s ease;
}
.react-toggle--checked .react-toggle-track-check {
opacity: 1;
-webkit-transition: opacity 0.25s ease;
-moz-transition: opacity 0.25s ease;
transition: opacity 0.25s ease;
}
.react-toggle-track-x {
position: absolute;
width: 10px;
height: 10px;
top: 0px;
bottom: 0px;
margin-top: auto;
margin-bottom: auto;
line-height: 0;
right: 10px;
opacity: 1;
-webkit-transition: opacity 0.25s ease;
-moz-transition: opacity 0.25s ease;
transition: opacity 0.25s ease;
}
.react-toggle--checked .react-toggle-track-x {
opacity: 0;
}
.react-toggle-thumb {
transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1) 0ms;
position: absolute;
top: 1px;
left: 1px;
width: 22px;
height: 22px;
border: 1px solid #4D4D4D;
border-radius: 50%;
background-color: #FAFAFA;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all 0.25s ease;
-moz-transition: all 0.25s ease;
transition: all 0.25s ease;
}
.react-toggle--checked .react-toggle-thumb {
left: 27px;
border-color: #828282;
}
/*
.react-toggle--focus .react-toggle-thumb {
-webkit-box-shadow: 0px 0px 3px 2px #0099E0;
-moz-box-shadow: 0px 0px 3px 2px #0099E0;
box-shadow: 0px 0px 2px 3px #0099E0;
}
.react-toggle:active .react-toggle-thumb {
-webkit-box-shadow: 0px 0px 5px 5px #0099E0;
-moz-box-shadow: 0px 0px 5px 5px #0099E0;
box-shadow: 0px 0px 5px 5px #0099E0;
}

@ -5,7 +5,7 @@
} }
.color-forest { .color-forest {
color: #08525D; color: #0A5448;
} }
/* lib */ /* lib */
@ -175,4 +175,4 @@ hr.horizontal-line {
border-top: 1px solid #ccc; border-top: 1px solid #ccc;
margin: 1em 0; margin: 1em 0;
padding: 0; padding: 0;
} }

@ -46,12 +46,12 @@ InitializeMenuScreen.prototype.renderMenu = function() {
h('.initialize-screen.flex-column.flex-center.flex-grow', [ h('.initialize-screen.flex-column.flex-center.flex-grow', [
h('h2.page-subtitle', 'Welcome!'),
h(Mascot, { h(Mascot, {
animationEventEmitter: this.animationEventEmitter, animationEventEmitter: this.animationEventEmitter,
}), }),
h('h2.page-subtitle', 'MetaMask'),
h('button.btn-thin', { h('button.btn-thin', {
onClick: this.showCreateVault.bind(this), onClick: this.showCreateVault.bind(this),
}, 'Create New Vault'), }, 'Create New Vault'),

@ -29,19 +29,25 @@ UnlockScreen.prototype.render = function() {
h('.unlock-screen.flex-column.flex-center.flex-grow', [ h('.unlock-screen.flex-column.flex-center.flex-grow', [
h('h2.page-subtitle', 'Welcome!'),
h(Mascot, { h(Mascot, {
animationEventEmitter: this.animationEventEmitter, animationEventEmitter: this.animationEventEmitter,
}), }),
h('label', { h('h1', {
htmlFor: 'password-box', style: {
}, 'Enter Password:'), fontSize: '1.4em',
textTransform: 'uppercase',
color: '#7F8082',
},
}, 'MetaMask'),
h('input', { h('input.password-box', {
type: 'password', type: 'password',
id: 'password-box', id: 'password-box',
placeholder: 'enter password',
style: {
},
onKeyPress: this.onKeyPress.bind(this), onKeyPress: this.onKeyPress.bind(this),
onInput: this.inputChanged.bind(this), onInput: this.inputChanged.bind(this),
}), }),

Loading…
Cancel
Save