mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-22 17:33:23 +01:00
ui - redesign - unlock menu
This commit is contained in:
kumavis
parent
d6a8b0b90a
commit
49e08f9013
@ -50,15 +50,6 @@ App.prototype.render = function() {
|
||||
var state = this.props
|
||||
var view = state.currentView.name
|
||||
var transForward = state.transForward
|
||||
var shouldHaveFooter = true
|
||||
switch (view) {
|
||||
case 'restoreVault':
|
||||
shouldHaveFooter = false;
|
||||
case 'createVault':
|
||||
shouldHaveFooter = false;
|
||||
case 'createVaultComplete':
|
||||
shouldHaveFooter = false;
|
||||
}
|
||||
|
||||
return (
|
||||
|
||||
@ -67,34 +58,12 @@ App.prototype.render = function() {
|
||||
// Windows was showing a vertical scroll bar:
|
||||
overflow: 'hidden',
|
||||
}
|
||||
},
|
||||
[
|
||||
}, [
|
||||
|
||||
h(LoadingIndicator),
|
||||
|
||||
// app bar
|
||||
h('.app-header.flex-row.flex-space-between', {
|
||||
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()),
|
||||
}),
|
||||
|
||||
]),
|
||||
this.renderAppBar(),
|
||||
|
||||
// panel content
|
||||
h('.app-primary.flex-grow' + (transForward ? '.from-right' : '.from-left'), {
|
||||
@ -153,16 +122,38 @@ App.prototype.render = function() {
|
||||
)
|
||||
}
|
||||
|
||||
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.renderAppBar = function(){
|
||||
var state = this.props
|
||||
|
||||
return (
|
||||
|
||||
h('.app-header.flex-row.flex-space-between', {
|
||||
style: {
|
||||
alignItems: 'center',
|
||||
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){
|
||||
@ -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() {
|
||||
var state = this.props
|
||||
var unconfTxs = state.unconfTxs
|
||||
|
||||
@ -18,6 +18,11 @@ html, body {
|
||||
color: #4D4D4D;
|
||||
font-weight: 300;
|
||||
line-height: 1.4em;
|
||||
background: #F7F7F7;
|
||||
}
|
||||
|
||||
input:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
#app-content {
|
||||
@ -47,17 +52,7 @@ button:active {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
button.primary {
|
||||
margin: 10px;
|
||||
padding: 6px;
|
||||
border: none;
|
||||
border-radius: 3px;
|
||||
background: #F7861C;
|
||||
font-weight: 500;
|
||||
color: white;
|
||||
}
|
||||
|
||||
input, textarea {
|
||||
/*input, textarea {
|
||||
width: 300px;
|
||||
padding: 6px;
|
||||
border-radius: 6px;
|
||||
@ -65,7 +60,7 @@ input, textarea {
|
||||
outline: none;
|
||||
border: 1px solid #F5A623;
|
||||
background: #FAF6F0;
|
||||
}
|
||||
}*/
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
@ -84,6 +79,17 @@ app
|
||||
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 {
|
||||
border: 1px solid;
|
||||
border-color: #4D4D4D;
|
||||
@ -115,7 +121,7 @@ h2.page-subtitle {
|
||||
}
|
||||
|
||||
.app-primary {
|
||||
background: #F7F7F7;
|
||||
|
||||
}
|
||||
|
||||
.app-footer {
|
||||
@ -217,23 +223,41 @@ app sections
|
||||
margin: -2px 8px 0px -8px;
|
||||
}
|
||||
|
||||
.unlock-screen label {
|
||||
color: #F3C83E;
|
||||
font-weight: 500;
|
||||
.unlock-screen #metamask-mascot-container {
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
.unlock-screen h1 {
|
||||
margin-top: -28px;
|
||||
margin-bottom: 42px;
|
||||
}
|
||||
|
||||
.unlock-screen input[type=password] {
|
||||
width: 60%;
|
||||
height: 22px;
|
||||
padding: 2px;
|
||||
border-radius: 4px;
|
||||
border: 2px solid #F3C83E;
|
||||
background: #FAF6F0;
|
||||
width: 260px;
|
||||
height: 36px;
|
||||
margin-bottom: 24px;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.unlock-screen input[type=password]:focus {
|
||||
outline: none;
|
||||
border: 3px solid #F3C83E;
|
||||
/* Webkit */
|
||||
.password-box::-webkit-input-placeholder {
|
||||
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 */
|
||||
@ -251,7 +275,6 @@ app sections
|
||||
}
|
||||
|
||||
.accounts-list-option:hover {
|
||||
background: pink;
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
@ -346,157 +369,3 @@ app sections
|
||||
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: #08525D;
|
||||
color: #0A5448;
|
||||
}
|
||||
|
||||
/* lib */
|
||||
|
||||
@ -46,12 +46,12 @@ InitializeMenuScreen.prototype.renderMenu = function() {
|
||||
|
||||
h('.initialize-screen.flex-column.flex-center.flex-grow', [
|
||||
|
||||
h('h2.page-subtitle', 'Welcome!'),
|
||||
|
||||
h(Mascot, {
|
||||
animationEventEmitter: this.animationEventEmitter,
|
||||
}),
|
||||
|
||||
h('h2.page-subtitle', 'MetaMask'),
|
||||
|
||||
h('button.btn-thin', {
|
||||
onClick: this.showCreateVault.bind(this),
|
||||
}, 'Create New Vault'),
|
||||
|
||||
@ -29,19 +29,25 @@ UnlockScreen.prototype.render = function() {
|
||||
|
||||
h('.unlock-screen.flex-column.flex-center.flex-grow', [
|
||||
|
||||
h('h2.page-subtitle', 'Welcome!'),
|
||||
|
||||
h(Mascot, {
|
||||
animationEventEmitter: this.animationEventEmitter,
|
||||
}),
|
||||
|
||||
h('label', {
|
||||
htmlFor: 'password-box',
|
||||
}, 'Enter Password:'),
|
||||
h('h1', {
|
||||
style: {
|
||||
fontSize: '1.4em',
|
||||
textTransform: 'uppercase',
|
||||
color: '#7F8082',
|
||||
},
|
||||
}, 'MetaMask'),
|
||||
|
||||
h('input', {
|
||||
h('input.password-box', {
|
||||
type: 'password',
|
||||
id: 'password-box',
|
||||
placeholder: 'enter password',
|
||||
style: {
|
||||
|
||||
},
|
||||
onKeyPress: this.onKeyPress.bind(this),
|
||||
onInput: this.inputChanged.bind(this),
|
||||
}),
|
||||
|
||||
Loading…
Reference in New Issue
Block a user