arno/trezor-wallet
1
0
Fork 0
mirror of https://github.com/trezor/trezor-wallet synced 2025-02-02 11:21:11 +00:00
Code Issues Releases Wiki Activity

Make initial layout responsive

Browse Source
This commit is contained in:
Vladimir Volek 2018-10-30 15:51:01 +01:00 committed by Szymon Lesisz
parent 5aaadade36
commit d682833aa3
2 changed files with 75 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/components/inputs/Input/index.js
View File

@ -79,6 +79,7 @@ const Overlay = styled.div`
${props => props.isPartiallyHidden && css` ${props => props.isPartiallyHidden && css`
bottom: 0; bottom: 0;
border: 1px solid ${colors.DIVIDER}; border: 1px solid ${colors.DIVIDER};
border-radius: 2px;
position: absolute; position: absolute;
width: 100%; width: 100%;
height: 100%; height: 100%;

135
src/views/Wallet/views/Account/Receive/index.js
View File

@ -2,6 +2,7 @@
import React from 'react'; import React from 'react';
import { QRCode } from 'react-qr-svg'; import { QRCode } from 'react-qr-svg';
import styled, { css } from 'styled-components'; import styled, { css } from 'styled-components';
import media from 'styled-media-query';
import { H2 } from 'components/Heading'; import { H2 } from 'components/Heading';
import Button from 'components/Button'; import Button from 'components/Button';
@ -25,11 +26,9 @@ const Label = styled.div`
`; `;
const AddressWrapper = styled.div` const AddressWrapper = styled.div`
position: relative;
display: flex; display: flex;
margin-top: 20px;
flex-wrap: wrap; flex-wrap: wrap;
flex-direction: ${props => (props.isShowingQrCode ? 'column' : 'row')}; flex-direction: row;
`; `;
const StyledQRCode = styled(QRCode)` const StyledQRCode = styled(QRCode)`
@ -78,15 +77,19 @@ const AddressInfoText = styled.div`
`; `;
const ShowAddressButton = styled(Button)` const ShowAddressButton = styled(Button)`
padding-top: 0; min-width: 195px;
padding-bottom: 0; padding: 0;
padding-left: 10px;
display: flex; display: flex;
height: 40px;
align-items: center; align-items: center;
justify-content: center;
border-top-left-radius: 0; border-top-left-radius: 0;
border-bottom-left-radius: 0; border-bottom-left-radius: 0;
${media.lessThan('795px')`
margin-top: 10px;
`}
`; `;
const ShowAddressIcon = styled(Icon)` const ShowAddressIcon = styled(Icon)`
@ -105,6 +108,20 @@ const EyeButton = styled(Button)`
right: 10px; right: 10px;
`; `;
const Row = styled.div`
display: flex;
width: 100%;
${media.lessThan('795px')`
flex-direction: column;
`}
`;
const QrWrapper = styled.div`
display: flex;
flex-direction: column;
`;
const AccountReceive = (props: Props) => { const AccountReceive = (props: Props) => {
const device = props.wallet.selectedDevice; const device = props.wallet.selectedDevice;
const { const {
@ -132,57 +149,58 @@ const AccountReceive = (props: Props) => {
<Content> <Content>
<React.Fragment> <React.Fragment>
<H2>Receive Ethereum or tokens</H2> <H2>Receive Ethereum or tokens</H2>
<AddressWrapper <AddressWrapper isShowingQrCode={addressVerified || addressUnverified}>
isShowingQrCode={addressVerified || addressUnverified}
>
{isAddressVerifying && (
<AddressInfoText>Confirm address on Trezor</AddressInfoText>
)}
<Label>Address</Label> <Label>Address</Label>
<Input <Row>
type="text" <Input
value={address} type="text"
isPartiallyHidden={isAddressHidden} value={address}
isVerifying={isAddressVerifying} isPartiallyHidden={isAddressHidden}
icon={((addressVerified || addressUnverified) && !isAddressVerifying) && ( trezorAction={(
<Tooltip <React.Fragment>
placement="bottom" <ArrowUp />
content={( <AddressInfoText>
<VerifyAddressTooltip <Icon
isConnected={device.connected} icon={ICONS.T1}
isAvailable={device.available} color={colors.WHITE}
addressUnverified={addressUnverified} />
/>
)}
>
<EyeButton
isTransparent
onClick={() => props.showAddress(account.addressPath)}
>
<Icon
icon={addressUnverified ? ICONS.EYE_CROSSED : ICONS.EYE}
color={addressUnverified ? colors.ERROR_PRIMARY : colors.TEXT_PRIMARY}
/>
</EyeButton>
</Tooltip>
)}
/>
{isAddressVerifying && (
<React.Fragment>
<ArrowUp />
<AddressInfoText>
<Icon
icon={ICONS.T1}
color={colors.WHITE}
/>
Check address on your Trezor Check address on your Trezor
</AddressInfoText> </AddressInfoText>
</React.Fragment> </React.Fragment>
)} )}
icon={((addressVerified || addressUnverified) && !isAddressVerifying) && (
<Tooltip
placement="bottom"
content={(
<VerifyAddressTooltip
isConnected={device.connected}
isAvailable={device.available}
addressUnverified={addressUnverified}
/>
)}
>
<EyeButton
isTransparent
onClick={() => props.showAddress(account.addressPath)}
>
<Icon
icon={addressUnverified ? ICONS.EYE_CROSSED : ICONS.EYE}
color={addressUnverified ? colors.ERROR_PRIMARY : colors.TEXT_PRIMARY}
/>
</EyeButton>
</Tooltip>
)}
/>
{!(addressVerified || addressUnverified) && (
<ShowAddressButton onClick={() => props.showAddress(account.addressPath)} isDisabled={device.connected && !discovery.completed}>
<ShowAddressIcon icon={ICONS.EYE} color={colors.WHITE} />Show full address
</ShowAddressButton>
)}
</Row>
{(addressVerified || addressUnverified) && ( {(addressVerified || addressUnverified) && (
<React.Fragment> <QrWrapper>
<Label>QR code</Label> <Label>QR code</Label>
<StyledQRCode <StyledQRCode
bgColor="#FFFFFF" bgColor="#FFFFFF"
@ -191,12 +209,7 @@ const AccountReceive = (props: Props) => {
style={{ width: 150 }} style={{ width: 150 }}
value={account.address} value={account.address}
/> />
</React.Fragment> </QrWrapper>
)}
{!(addressVerified || addressUnverified) && (
<ShowAddressButton onClick={() => props.showAddress(account.addressPath)} isDisabled={device.connected && !discovery.completed}>
<ShowAddressIcon icon={ICONS.EYE} color={colors.WHITE} />Show full address
</ShowAddressButton>
)} )}
</AddressWrapper> </AddressWrapper>
</React.Fragment> </React.Fragment>