1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00

Merge pull request #3468 from danjm/i3033-responsive-newui-onboarding

Make new-ui create password screen responsive.
This commit is contained in:
kumavis 2018-03-13 10:53:21 -07:00 committed by GitHub
commit 6a17a0cdf1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 232 additions and 13 deletions

View File

@ -2,6 +2,7 @@ import EventEmitter from 'events'
import React, { Component } from 'react' import React, { Component } from 'react'
import PropTypes from 'prop-types' import PropTypes from 'prop-types'
import {connect} from 'react-redux' import {connect} from 'react-redux'
import classnames from 'classnames'
import {createNewVaultAndKeychain} from '../../../../ui/app/actions' import {createNewVaultAndKeychain} from '../../../../ui/app/actions'
import LoadingScreen from './loading-screen' import LoadingScreen from './loading-screen'
import Breadcrumbs from './breadcrumbs' import Breadcrumbs from './breadcrumbs'
@ -14,6 +15,7 @@ class CreatePasswordScreen extends Component {
goToImportWithSeedPhrase: PropTypes.func.isRequired, goToImportWithSeedPhrase: PropTypes.func.isRequired,
goToImportAccount: PropTypes.func.isRequired, goToImportAccount: PropTypes.func.isRequired,
next: PropTypes.func.isRequired, next: PropTypes.func.isRequired,
isMascara: PropTypes.bool.isRequired,
} }
state = { state = {
@ -53,14 +55,17 @@ class CreatePasswordScreen extends Component {
} }
render () { render () {
const { isLoading, goToImportWithSeedPhrase } = this.props const { isLoading, goToImportWithSeedPhrase, isMascara } = this.props
return isLoading return isLoading
? <LoadingScreen loadingMessage="Creating your new account" /> ? <LoadingScreen loadingMessage="Creating your new account" />
: ( : (
<div> <div className={classnames({ 'first-view-main-wrapper': !isMascara })}>
<div className="first-view-main"> <div className={classnames({
<div className="mascara-info"> 'first-view-main': !isMascara,
'first-view-main__mascara': isMascara,
})}>
{isMascara && <div className="mascara-info first-view-phone-invisible">
<Mascot <Mascot
animationEventEmitter={this.animationEventEmitter} animationEventEmitter={this.animationEventEmitter}
width="225" width="225"
@ -72,7 +77,7 @@ class CreatePasswordScreen extends Component {
<div className="info"> <div className="info">
It allows you to hold ether & tokens, and interact with decentralized applications. It allows you to hold ether & tokens, and interact with decentralized applications.
</div> </div>
</div> </div>}
<div className="create-password"> <div className="create-password">
<div className="create-password__title"> <div className="create-password__title">
Create Password Create Password
@ -127,7 +132,7 @@ class CreatePasswordScreen extends Component {
} }
export default connect( export default connect(
({ appState: { isLoading } }) => ({ isLoading }), ({ appState: { isLoading }, metamask: { isMascara } }) => ({ isLoading, isMascara }),
dispatch => ({ dispatch => ({
createAccount: password => dispatch(createNewVaultAndKeychain(password)), createAccount: password => dispatch(createNewVaultAndKeychain(password)),
}) })

View File

@ -17,19 +17,48 @@
font-family: Roboto; font-family: Roboto;
} }
.alpha-warning { .alpha-warning,
.alpha-warning-welcome-screen {
background: #f7861c; background: #f7861c;
color: #fff; color: #fff;
line-height: 2em; line-height: 2em;
padding-left: 10vw; padding-left: 10vw;
} }
.first-view-main { .alpha-warning-welcome-screen {
padding-left: 0;
text-align: center;
}
.first-view-main-wrapper {
display: flex;
width: 100%;
padding-left: 10vw;
}
.first-view-main,
.first-view-main__mascara {
display: flex; display: flex;
flex-direction: row-reverse; flex-direction: row-reverse;
justify-content: center;
}
.first-view-main__mascara {
justify-content: space-between; justify-content: space-between;
} }
@media screen and (max-width: 575px) {
.first-view-main-wrapper {
padding: 0;
}
}
@media screen and (min-width: 1281px) {
.first-view-main {
width: 62vw;
}
}
.mascara-info { .mascara-info {
display: flex; display: flex;
flex-flow: column; flex-flow: column;
@ -90,6 +119,45 @@
width: initial !important; width: initial !important;
} }
.alpha-warning,
.alpha-warning-welcome-screen {
line-height: 1em;
padding: 8px 12px;
}
.first-view-main {
height: 100%;
flex-direction: column;
align-items: center;
justify-content: space-evenly;
margin-top: 12px;
}
.first-view-main .create-password {
margin-top: 0px;
}
.mascara-info {
margin-top: 0px;
width: 100%;
align-items: center;
}
.mascara-info .info {
text-align: center;
font-size: 16px;
margin: 0 10px;
padding-left: 0px;
}
.mascara-info :first-child {
align-self: center;
}
.first-view-phone-invisible {
display: none;
}
.first-time-flow__input { .first-time-flow__input {
width: initial !important; width: initial !important;
font-size: 14px !important; font-size: 14px !important;

View File

@ -75,6 +75,8 @@ var actions = {
resetAccount, resetAccount,
showNewVaultSeed: showNewVaultSeed, showNewVaultSeed: showNewVaultSeed,
showInfoPage: showInfoPage, showInfoPage: showInfoPage,
CLOSE_WELCOME_SCREEN: 'CLOSE_WELCOME_SCREEN',
closeWelcomeScreen,
// seed recovery actions // seed recovery actions
REVEAL_SEED_CONFIRMATION: 'REVEAL_SEED_CONFIRMATION', REVEAL_SEED_CONFIRMATION: 'REVEAL_SEED_CONFIRMATION',
revealSeedConfirmation: revealSeedConfirmation, revealSeedConfirmation: revealSeedConfirmation,
@ -947,6 +949,12 @@ function showNewVaultSeed (seed) {
} }
} }
function closeWelcomeScreen () {
return {
type: actions.CLOSE_WELCOME_SCREEN,
}
}
function backToUnlockView () { function backToUnlockView () {
return { return {
type: actions.BACK_TO_UNLOCK_VIEW, type: actions.BACK_TO_UNLOCK_VIEW,

View File

@ -12,6 +12,8 @@ const MascaraBuyEtherScreen = require('../../mascara/src/app/first-time/buy-ethe
const OldUIInitializeMenuScreen = require('./first-time/init-menu') const OldUIInitializeMenuScreen = require('./first-time/init-menu')
const InitializeMenuScreen = MascaraFirstTime const InitializeMenuScreen = MascaraFirstTime
const NewKeyChainScreen = require('./new-keychain') const NewKeyChainScreen = require('./new-keychain')
const WelcomeScreen = require('./welcome-screen').default
// accounts // accounts
const MainContainer = require('./main-container') const MainContainer = require('./main-container')
const SendTransactionScreen2 = require('./components/send/send-v2-container') const SendTransactionScreen2 = require('./components/send/send-v2-container')
@ -91,6 +93,7 @@ function mapStateToProps (state) {
betaUI: state.metamask.featureFlags.betaUI, betaUI: state.metamask.featureFlags.betaUI,
isRevealingSeedWords: state.metamask.isRevealingSeedWords, isRevealingSeedWords: state.metamask.isRevealingSeedWords,
Qr: state.appState.Qr, Qr: state.appState.Qr,
welcomeScreenSeen: state.metamask.welcomeScreenSeen,
// state needed to get account dropdown temporarily rendering from app bar // state needed to get account dropdown temporarily rendering from app bar
identities, identities,
@ -244,6 +247,7 @@ App.prototype.renderAppBar = function () {
isInitialized, isInitialized,
betaUI, betaUI,
isPopup, isPopup,
welcomeScreenSeen,
} = this.props } = this.props
if (window.METAMASK_UI_TYPE === 'notification') { if (window.METAMASK_UI_TYPE === 'notification') {
@ -269,7 +273,7 @@ App.prototype.renderAppBar = function () {
style: {}, style: {},
}, [ }, [
h('.app-header.flex-row.flex-space-between', { (isInitialized || welcomeScreenSeen || isPopup || !betaUI) && h('.app-header.flex-row.flex-space-between', {
className: classnames({ className: classnames({
'app-header--initialized': !isOnboarding, 'app-header--initialized': !isOnboarding,
}), }),
@ -294,7 +298,7 @@ App.prototype.renderAppBar = function () {
]), ]),
]), ]),
h('div.header__right-actions', [ betaUI && isInitialized && h('div.header__right-actions', [
h('div.network-component-wrapper', { h('div.network-component-wrapper', {
style: {}, style: {},
}, [ }, [
@ -324,8 +328,12 @@ App.prototype.renderAppBar = function () {
]), ]),
]), ]),
!isInitialized && !isPopup && betaUI && h('h2.alpha-warning', !isInitialized && !isPopup && betaUI && h('h2', {
'Please be aware that this version is still under development'), className: classnames({
'alpha-warning': welcomeScreenSeen,
'alpha-warning-welcome-screen': !welcomeScreenSeen,
}),
}, 'Please be aware that this version is still under development'),
]) ])
) )
@ -369,11 +377,18 @@ App.prototype.renderPrimary = function () {
isOnboarding, isOnboarding,
betaUI, betaUI,
isRevealingSeedWords, isRevealingSeedWords,
welcomeScreenSeen,
Qr, Qr,
isInitialized,
isUnlocked,
} = props } = props
const isMascaraOnboarding = isMascara && isOnboarding const isMascaraOnboarding = isMascara && isOnboarding
const isBetaUIOnboarding = betaUI && isOnboarding && !props.isPopup && !isRevealingSeedWords const isBetaUIOnboarding = betaUI && isOnboarding && !props.isPopup && !isRevealingSeedWords
if (!welcomeScreenSeen && betaUI && !isInitialized && !isUnlocked) {
return h(WelcomeScreen)
}
if (isMascaraOnboarding || isBetaUIOnboarding) { if (isMascaraOnboarding || isBetaUIOnboarding) {
return h(MascaraFirstTime) return h(MascaraFirstTime)
} }

View File

@ -55,3 +55,6 @@
@import './new-account.scss'; @import './new-account.scss';
@import './tooltip.scss'; @import './tooltip.scss';
@import './welcome-screen.scss';

View File

@ -292,7 +292,6 @@ $wallet-view-bg: $alabaster;
padding-right: 6px; padding-right: 6px;
} }
// first time // first time
.first-view-main { .first-view-main {
display: flex; display: flex;

View File

@ -0,0 +1,59 @@
.welcome-screen {
display: flex;
flex-flow: column;
justify-content: center;
align-items: center;
font-family: Roboto;
font-weight: 400;
width: 100%;
flex: 1 0 auto;
padding: 70px 0;
background: $white;
@media screen and (max-width: 575px) {
padding: 0;
}
&__info {
display: flex;
flex-flow: column;
width: 100%;
height: 100%;
align-items: center;
&__header {
font-size: 1.65em;
margin-bottom: 14px;
@media screen and (max-width: 575px) {
font-size: 1.5em;
}
}
&__copy {
font-size: 1em;
width: 400px;
max-width: 90vw;
text-align: center;
@media screen and (max-width: 575px) {
font-size: 0.9em;
}
}
}
&__button {
height: 54px;
width: 198px;
box-shadow: 0 2px 4px 0 rgba(0,0,0,0.14);
color: #FFFFFF;
font-size: 20px;
font-weight: 500;
line-height: 26px;
text-align: center;
text-transform: uppercase;
margin: 35px 0 14px;
transition: 200ms ease-in-out;
background-color: rgba(247, 134, 28, 0.9);
}
}

View File

@ -44,6 +44,7 @@ function reduceMetamask (state, action) {
featureFlags: {}, featureFlags: {},
networkEndpointType: OLD_UI_NETWORK_TYPE, networkEndpointType: OLD_UI_NETWORK_TYPE,
isRevealingSeedWords: false, isRevealingSeedWords: false,
welcomeScreenSeen: false,
}, state.metamask) }, state.metamask)
switch (action.type) { switch (action.type) {
@ -347,6 +348,11 @@ function reduceMetamask (state, action) {
networkEndpointType: action.value, networkEndpointType: action.value,
}) })
case actions.CLOSE_WELCOME_SCREEN:
return extend(metamaskState, {
welcomeScreenSeen: true,
})
default: default:
return metamaskState return metamaskState

56
ui/app/welcome-screen.js Normal file
View File

@ -0,0 +1,56 @@
import EventEmitter from 'events'
import h from 'react-hyperscript'
import { Component } from 'react'
import PropTypes from 'prop-types'
import {connect} from 'react-redux'
import {closeWelcomeScreen} from './actions'
import Mascot from './components/mascot'
class WelcomeScreen extends Component {
static propTypes = {
closeWelcomeScreen: PropTypes.func.isRequired,
}
constructor(props) {
super(props)
this.animationEventEmitter = new EventEmitter()
}
initiateAccountCreation = () => {
this.props.closeWelcomeScreen()
}
render () {
return h('div.welcome-screen', [
h('div.welcome-screen__info', [
h(Mascot, {
animationEventEmitter: this.animationEventEmitter,
width: '225',
height: '225',
}),
h('div.welcome-screen__info__header', 'Welcome to MetaMask Beta'),
h('div.welcome-screen__info__copy', 'MetaMask is a secure identity vault for Ethereum.'),
h('div.welcome-screen__info__copy', `It allows you to hold ether & tokens,
and serves as your bridge to decentralized applications.`),
h('button.welcome-screen__button', {
onClick: this.initiateAccountCreation,
}, 'Continue'),
]),
])
}
}
export default connect(
null,
dispatch => ({
closeWelcomeScreen: () => dispatch(closeWelcomeScreen()),
})
)(WelcomeScreen)