Skip to content

Commit

Permalink
feat(Layout): tx list padding fix
Browse files Browse the repository at this point in the history
  • Loading branch information
Philip London committed Feb 2, 2020
1 parent e0b5788 commit 74452b7
Show file tree
Hide file tree
Showing 2 changed files with 122 additions and 132 deletions.
161 changes: 75 additions & 86 deletions ...ages/blockchain-wallet-v4-frontend/src/scenes/Transactions/TransactionFilters/template.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,28 +2,15 @@ import { ComponentDropdown, Icon, Link, Text } from 'blockchain-info-components'
import { Field, reduxForm } from 'redux-form'
import { FormattedMessage } from 'react-intl'
import { includes } from 'ramda'
import React from 'react'
import styled from 'styled-components'

import { model } from 'data'
import { StickyHeader } from 'components/Layout'
import { TabMenuTransactionStatus, TextBox } from 'components/Form'
import HorizontalMenu from 'components/HorizontalMenu'
import React from 'react'
import styled from 'styled-components'

const { WALLET_TX_SEARCH } = model.form

// TODO: layout - make horizontal menu
const Container = styled.div`
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
position: sticky;
top: -15px;
width: 100%;
padding-bottom: 12px;
background-color: ${props => props.theme.white};
border-bottom: 1px solid ${props => props.theme.grey000};
z-index: 1;
`
const Search = styled.div`
position: relative;
display: flex;
Expand Down Expand Up @@ -74,77 +61,79 @@ const TransactionFilters = ({
onShowEthPrivateKeyLegacy,
isLegacyEthAddr
}) => (
<Container>
<Field
name='status'
statuses={['', 'sent', 'received', 'transferred']}
component={TabMenuTransactionStatus}
/>
<Search>
{includes(coin, PRIVATE_KEY_EXPORT_COINS) && (
<EthPrivateKeysWrapper>
{isLegacyEthAddr ? (
<ComponentDropdown
down
forceSelected
color={'gray-5'}
selectedComponent={<EthPrivateKeys />}
components={[
<ExportEthPrivateKeyText
size='small'
onClick={onShowPrivateKey}
>
<FormattedMessage
id='scenes.transactions.export.ethkey'
defaultMessage='Export Private Key'
/>
</ExportEthPrivateKeyText>,
<ExportEthPrivateKeyText
size='small'
onClick={onShowEthPrivateKeyLegacy}
>
<FormattedMessage
id='scenes.transactions.export.ethkeyarchived'
defaultMessage='Export Archived Private Key'
/>
</ExportEthPrivateKeyText>
]}
/>
) : (
<Link
size={'12px'}
weight={400}
onClick={onShowPrivateKey}
data-e2e='exportPrivateKeyLink'
>
<FormattedMessage
id='scenes.transactions.export.ethkey'
defaultMessage='Export Private Key'
<StickyHeader>
<HorizontalMenu>
<Field
name='status'
statuses={['', 'sent', 'received', 'transferred']}
component={TabMenuTransactionStatus}
/>
<Search>
{includes(coin, PRIVATE_KEY_EXPORT_COINS) && (
<EthPrivateKeysWrapper>
{isLegacyEthAddr ? (
<ComponentDropdown
down
forceSelected
color={'gray-5'}
selectedComponent={<EthPrivateKeys />}
components={[
<ExportEthPrivateKeyText
size='small'
onClick={onShowPrivateKey}
>
<FormattedMessage
id='scenes.transactions.export.ethkey'
defaultMessage='Export Private Key'
/>
</ExportEthPrivateKeyText>,
<ExportEthPrivateKeyText
size='small'
onClick={onShowEthPrivateKeyLegacy}
>
<FormattedMessage
id='scenes.transactions.export.ethkeyarchived'
defaultMessage='Export Archived Private Key'
/>
</ExportEthPrivateKeyText>
]}
/>
</Link>
)}
</EthPrivateKeysWrapper>
)}
{includes(coin, TX_EXPORT_COINS) && (
<ReportingIcon
color='grey400'
cursor
data-e2e='generateTxReport'
name='download'
onClick={handleClickReporting}
size='20px'
) : (
<Link
size={'12px'}
weight={400}
onClick={onShowPrivateKey}
data-e2e='exportPrivateKeyLink'
>
<FormattedMessage
id='scenes.transactions.export.ethkey'
defaultMessage='Export Private Key'
/>
</Link>
)}
</EthPrivateKeysWrapper>
)}
{includes(coin, TX_EXPORT_COINS) && (
<ReportingIcon
color='grey400'
cursor
data-e2e='generateTxReport'
name='download'
onClick={handleClickReporting}
size='20px'
/>
)}
<SearchField
component={TextBox}
data-e2e='transactionsMenuSearchBox'
height='45px'
icon='magnifier'
name='search'
placeholder='Search'
/>
)}
<SearchField
component={TextBox}
data-e2e='transactionsMenuSearchBox'
height='45px'
icon='magnifier'
name='search'
placeholder='Search'
/>
</Search>
</Container>
</Search>
</HorizontalMenu>
</StickyHeader>
)

export default reduxForm({
Expand Down
93 changes: 47 additions & 46 deletions packages/blockchain-wallet-v4-frontend/src/scenes/Transactions/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,22 +10,21 @@ import EmptyTx from 'components/EmptyTx'
import LazyLoadContainer from 'components/LazyLoadContainer'

import { getData } from './selectors'
import { SceneWrapper } from 'components/Layout'
import CoinIntroduction from './CoinIntroduction'
import TransactionFilters from './TransactionFilters'
import TransactionList from './TransactionList'

// TODO: layout - make wrapper generic?
const Wrapper = styled(LazyLoadContainer)`
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
box-sizing: border-box;
padding: 15px 30px;
overflow: auto;
`
// const Wrapper = styled(LazyLoadContainer)`
// width: 100%;
// height: 100%;
// display: flex;
// flex-direction: column;
// justify-content: flex-start;
// align-items: flex-start;
// box-sizing: border-box;
// overflow: auto;
// `
const PageTitle = styled.div`
display: flex;
flex-direction: row;
Expand Down Expand Up @@ -108,41 +107,43 @@ class TransactionsContainer extends React.PureComponent {
<CoinIntroduction coin={coin} />
)
) : (
<Wrapper onLazyLoad={this.handleLoadMore}>
<Header>
<PageTitle>
<Icon size='36px' color={colorCode} name={icons.circleFilled} />
<Text color='grey800' size='32px' weight={600}>
{displayName}
</Text>
</PageTitle>
<StatsContainer>
<BalanceContainer>
<Text color='grey400' weight={500} size='16px'>
Wallet Balance
</Text>
</BalanceContainer>
<ChartContainer>
<Text color='grey400' weight={500} size='16px'>
Current Price
<SceneWrapper>
<LazyLoadContainer onLazyLoad={this.handleLoadMore}>
<Header>
<PageTitle>
<Icon size='36px' color={colorCode} name={icons.circleFilled} />
<Text color='grey800' size='32px' weight={600}>
{displayName}
</Text>
</ChartContainer>
</StatsContainer>
</Header>
<TransactionFilters coin={coin} />
{pages.map((value, index) => (
<TransactionList
buySellPartner={buySellPartner}
coin={coin}
currency={currency}
data={value}
key={index}
onArchive={this.handleArchive}
onLoadMore={this.handleLoadMore}
onRefresh={this.handleRefresh}
/>
))}
</Wrapper>
</PageTitle>
<StatsContainer>
<BalanceContainer>
<Text color='grey400' weight={500} size='16px'>
Wallet Balance
</Text>
</BalanceContainer>
<ChartContainer>
<Text color='grey400' weight={500} size='16px'>
Current Price
</Text>
</ChartContainer>
</StatsContainer>
</Header>
<TransactionFilters coin={coin} />
{pages.map((value, index) => (
<TransactionList
buySellPartner={buySellPartner}
coin={coin}
currency={currency}
data={value}
key={index}
onArchive={this.handleArchive}
onLoadMore={this.handleLoadMore}
onRefresh={this.handleRefresh}
/>
))}
</LazyLoadContainer>
</SceneWrapper>
)
}
}
Expand Down

0 comments on commit 74452b7

Please sign in to comment.