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

UI for readonly from component. From dropdown opening and closing. Mockdata.

This commit is contained in:
Dan 2017-10-06 02:04:00 -02:30 committed by Chi Kei Chan
parent db1258f3de
commit 80463072b5
4 changed files with 226 additions and 1 deletions

View File

@ -0,0 +1,94 @@
const Component = require('react').Component
const h = require('react-hyperscript')
const inherits = require('util').inherits
const Identicon = require('../identicon')
module.exports = FromDropdown
inherits(FromDropdown, Component)
function FromDropdown () {
Component.call(this)
}
FromDropdown.prototype.renderSingleIdentity = function (
account,
handleClick,
inList = false,
selectedIdentity = {}
) {
const { identity, balancesToRender } = account
const { name, address } = identity
const { primary, secondary } = balancesToRender
const iconType = inList ? 'check' : 'caret-down'
const showIcon = !inList || address === selectedIdentity.address
return h('div.send-v2__from-dropdown__account', {
onClick: () => handleClick(identity),
}, [
h('div.send-v2__from-dropdown__top-row', {}, [
h(
Identicon,
{
address,
diameter: 18,
className: 'send-v2__from-dropdown__identicon',
},
),
h('div.send-v2__from-dropdown__account-name', {}, name),
showIcon && h(`i.fa.fa-${iconType}.fa-lg.send-v2__from-dropdown__${iconType}`),
]),
h('div.send-v2__from-dropdown__account-primary-balance', {}, primary),
h('div.send-v2__from-dropdown__account-secondary-balance', {}, secondary),
])
}
FromDropdown.prototype.renderDropdown = function (identities, selectedIdentity, closeDropdown) {
return h('div', {}, [
h('div.send-v2__from-dropdown__close-area', {
onClick: closeDropdown,
}),
h('div.send-v2__from-dropdown__list', {}, [
...identities.map(identity => this.renderSingleIdentity(
identity,
() => console.log('Select identity'),
true,
selectedIdentity
))
]),
])
}
FromDropdown.prototype.render = function () {
const {
identities,
selectedIdentity,
setFromField,
openDropdown,
closeDropdown,
dropdownOpen,
} = this.props
return h('div.send-v2__from-dropdown', {}, [
this.renderSingleIdentity(selectedIdentity, openDropdown),
dropdownOpen && this.renderDropdown(identities, selectedIdentity.identity, closeDropdown),
])
}

View File

@ -495,6 +495,100 @@
width: 287px;
}
&__form {
display: flex;
flex-direction: column;
margin-top: 13px;
width: 100%;
}
&__form-row {
margin: 14.5px 18px 0px;
display: flex;
position: relative;
justify-content: space-between;
}
&__form-label {
color: $scorpion;
font-family: Roboto;
font-size: 16px;
line-height: 22px;
margin-top: 16px;
}
&__from-dropdown {
height: 73px;
width: 240px;
border: 1px solid $alto;
border-radius: 4px;
background-color: $white;
font-family: Roboto;
line-height: 16px;
font-size: 12px;
color: $tundora;
&__top-row {
display: flex;
margin-top: 10px;
margin-left: 8px;
position: relative;
}
&__account-name {
font-size: 16px;
margin-left: 8px;
}
&__caret-down,
&__check {
position: absolute;
right: 12px;
top: 1px;
}
&__caret-down {
color: $alto;
}
&__check {
color: $caribbean-green;
}
&__account-primary-balance {
margin-left: 34px;
margin-top: 4px;
}
&__account-secondary-balance {
margin-left: 34px;
color: $dusty-gray;
}
&__close-area {
position: fixed;
top: 0;
left: 0;
z-index: 1000;
width: 100%;
height: 100%;
}
&__list {
z-index: 1050;
position: absolute;
height: 220px;
width: 240px;
border: 1px solid $geyser;
border-radius: 4px;
background-color: $white;
box-shadow: 0 3px 6px 0 rgba(0 ,0 ,0 ,.11);
margin-top: 11px;
margin-left: -1px;
overflow-y: scroll;
}
}
&__footer {
height: 92px;
width: 100%;

View File

@ -42,6 +42,7 @@ $tulip-tree: #ebb33f;
$malibu-blue: #7ac9fd;
$athens-grey: #e9edf0;
$jaffa: #f28930;
$geyser: #d2d8dd;
/*
Z-Indicies

View File

@ -3,11 +3,24 @@ const PersistentForm = require('../lib/persistent-form')
const h = require('react-hyperscript')
const connect = require('react-redux').connect
const Identicon = require('./components/identicon')
const FromDropdown = require('./components/send/from-dropdown')
module.exports = connect(mapStateToProps)(SendTransactionScreen)
function mapStateToProps (state) {
return {}
const mockIdentities = Array.from(new Array(5))
.map((v, i) => ({
identity: {
name: `Test Account Name ${i}`,
address: `0x02f567704cc6569127e18e3d00d2c85bcbfa6f0${i}`,
},
balancesToRender: {
primary: `100${i}.000001 ETH`,
secondary: `$30${i},000.00 USD`,
}
}))
return { identities: mockIdentities }
}
inherits(SendTransactionScreen, PersistentForm)
@ -25,10 +38,14 @@ function SendTransactionScreen () {
txData: null,
memo: '',
},
dropdownOpen: false,
}
}
SendTransactionScreen.prototype.render = function () {
const { identities } = this.props
const { dropdownOpen } = this.state
return (
h('div.send-v2__container', [
@ -50,6 +67,25 @@ SendTransactionScreen.prototype.render = function () {
h('div.send-v2__copy', 'Sending to a different crytpocurrency that is not Ethereum may result in permanent loss.'),
h('div.send-v2__form', {}, [
h('div.send-v2__form-row', [
h('div.send-v2__form-label', 'From:'),
h(FromDropdown, {
dropdownOpen,
identities,
selectedIdentity: identities[0],
setFromField: () => console.log('Set From Field'),
openDropdown: () => this.setState({ dropdownOpen: true }),
closeDropdown: () => this.setState({ dropdownOpen: false }),
}),
])
]),
// Buttons underneath card
h('div.send-v2__footer', [
h('button.send-v2__cancel-btn', {}, 'Cancel'),