mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-23 01:39:44 +01:00
ui - redesign - unlock menu
This commit is contained in:
parent
d6a8b0b90a
commit
49e08f9013
@ -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 */
|
||||||
|
@ -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…
Reference in New Issue
Block a user