feat(Layout): make only tx filters sticky

blockchain · Jan 30, 2020 · cc1b957 · cc1b957
1 parent 2de4e71
commit cc1b957
Show file tree

Hide file tree

Showing 5 changed files with 47 additions and 50 deletions.
diff --git a/packages/blockchain-wallet-v4-frontend/src/layouts/Wallet/template.js b/packages/blockchain-wallet-v4-frontend/src/layouts/Wallet/template.js
@@ -1,16 +1,14 @@
 import { replace } from 'ramda'
-import React from 'react'
-import styled from 'styled-components'
-
 import Alerts from 'components/Alerts'
 import ErrorBoundary from 'providers/ErrorBoundaryProvider'
-import ExchangeMenu from 'scenes/Exchange/Menu'
 import ExchangeProfileMenu from 'scenes/Settings/Profile/Menu'
 import Header from './Header'
 import MenuLeft from './MenuLeft'
 import Modals from 'modals'
 import Page from './Page'
+import React from 'react'
 import SettingsAddressesMenu from 'scenes/Settings/Addresses/Menu'
+import styled from 'styled-components'
 import Tooltips from 'components/Tooltips'
 import TrayRight from './TrayRight'
 
@@ -62,11 +60,6 @@ const WalletLayout = props => {
           <MenuLeft location={location} />
           <TrayRight />
           <Content data-e2e={`page${replace(/\//g, '-', location.pathname)}`}>
-            {location.pathname.includes('/swap') && (
-              <ExchangeMenu
-                historySelected={location.pathname.includes('/swap/history')}
-              />
-            )}
             {location.pathname.includes('/settings/addresses') && (
               <SettingsAddressesMenu location={location} />
             )}

diff --git a/packages/blockchain-wallet-v4-frontend/src/scenes/Exchange/Menu/index.js b/packages/blockchain-wallet-v4-frontend/src/scenes/Exchange/Menu/index.js
@@ -10,6 +10,10 @@ import media from 'services/ResponsiveService'
 import React from 'react'
 import styled from 'styled-components'
 
+const Wrapper = styled.div`
+  position: sticky;
+`
+
 const SupportButton = styled(Button)`
   margin-left: auto;
   height: 38px;
@@ -21,7 +25,7 @@ const SupportButton = styled(Button)`
 
 export const Menu = ({ showGetStarted, showHelpModal }) =>
   !showGetStarted ? (
-    <React.Fragment>
+    <Wrapper>
       <Announcements type='service' alertArea='swap' />
       <HorizontalMenu>
         <TabMenu>
@@ -55,7 +59,7 @@ export const Menu = ({ showGetStarted, showHelpModal }) =>
           />
         </SupportButton>
       </HorizontalMenu>
-    </React.Fragment>
+    </Wrapper>
   ) : (
     <div />
   )

diff --git a/packages/blockchain-wallet-v4-frontend/src/scenes/Exchange/index.js b/packages/blockchain-wallet-v4-frontend/src/scenes/Exchange/index.js
@@ -8,12 +8,13 @@ import EmailRequired from 'components/EmailRequired'
 import Exchange from './ExchangeContainer'
 import GetStarted from './GetStarted'
 import media from 'services/ResponsiveService'
+import Menu from './Menu'
 import React from 'react'
 import styled from 'styled-components'
 
 const Wrapper = styled.div`
   width: 100%;
-  height: auto;
+  height: 100%;
   display: flex;
   flex-direction: column;
   min-height: 600px;
@@ -57,16 +58,19 @@ export const ExchangeScene = ({
     Success: userCreated => (
       <Wrapper>
         {userCreated ? (
-          <Container>
-            <Column>
-              <Exchange
-                from={path(['state', 'from'], location)}
-                to={path(['state', 'to'], location)}
-                fix={path(['state', 'fix'], location)}
-                amount={path(['state', 'amount'], location)}
-              />
-            </Column>
-          </Container>
+          <>
+            <Menu />
+            <Container>
+              <Column>
+                <Exchange
+                  from={path(['state', 'from'], location)}
+                  to={path(['state', 'to'], location)}
+                  fix={path(['state', 'fix'], location)}
+                  amount={path(['state', 'amount'], location)}
+                />
+              </Column>
+            </Container>
+          </>
         ) : (
           <GetStarted />
         )}

diff --git a/...ages/blockchain-wallet-v4-frontend/src/scenes/Transactions/TransactionFilters/template.js b/...ages/blockchain-wallet-v4-frontend/src/scenes/Transactions/TransactionFilters/template.js
@@ -16,12 +16,19 @@ import media from 'services/ResponsiveService'
 
 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 Controls = styled.div`
   position: relative;

diff --git a/packages/blockchain-wallet-v4-frontend/src/scenes/Transactions/index.js b/packages/blockchain-wallet-v4-frontend/src/scenes/Transactions/index.js
@@ -14,7 +14,8 @@ import CoinIntroduction from './CoinIntroduction'
 import TransactionFilters from './TransactionFilters'
 import TransactionList from './TransactionList'
 
-const Wrapper = styled.div`
+// TODO: layout - make wrapper generic?
+const Wrapper = styled(LazyLoadContainer)`
   width: 100%;
   height: 100%;
   display: flex;
@@ -23,6 +24,7 @@ const Wrapper = styled.div`
   align-items: flex-start;
   box-sizing: border-box;
   padding: 15px 30px;
+  overflow: auto;
 `
 const PageTitle = styled.div`
   display: flex;
@@ -34,19 +36,8 @@ const PageTitle = styled.div`
     margin-right: 14px;
   }
 `
-const TransactionsWrapper = styled(LazyLoadContainer)`
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-start;
-  align-items: flex-start;
-  box-sizing: border-box;
-  width: 100%;
-`
 const Header = styled.div`
-  position: sticky;
   width: 100%;
-  padding-bottom: 24px;
-  border-bottom: 1px solid ${props => props.theme.grey100};
 `
 const StatsContainer = styled.div`
   display: flex;
@@ -117,7 +108,7 @@ class TransactionsContainer extends React.PureComponent {
         <CoinIntroduction coin={coin} />
       )
     ) : (
-      <Wrapper>
+      <Wrapper onLazyLoad={this.handleLoadMore}>
         <Header>
           <PageTitle>
             <Icon size='36px' color={colorCode} name={icons.circleFilled} />
@@ -137,22 +128,20 @@ class TransactionsContainer extends React.PureComponent {
               </Text>
             </ChartContainer>
           </StatsContainer>
-          <TransactionFilters coin={coin} />
         </Header>
-        <TransactionsWrapper onLazyLoad={this.handleLoadMore}>
-          {pages.map((value, index) => (
-            <TransactionList
-              buySellPartner={buySellPartner}
-              coin={coin}
-              currency={currency}
-              data={value}
-              key={index}
-              onArchive={this.handleArchive}
-              onLoadMore={this.handleLoadMore}
-              onRefresh={this.handleRefresh}
-            />
-          ))}
-        </TransactionsWrapper>
+        <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>
     )
   }