status-im
/
liquid-funding
mirror of https://github.com/status-im/liquid-funding.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

dynamically adjust width of FundsManagement

This commit is contained in:
Barry Gitarts 2018-12-15 14:09:31 -05:00
parent 31b218e003
commit 249457385b
3 changed files with 40 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
app/components/FundsManagement.jsx Normal file
View File

@ -0,0 +1,20 @@
import React from 'react'
import { FundingContext } from '../context'
import PledgesTable from './PledgesTable'
import FunderProfilesTable from './FunderProfilesTable'
const FundsManagement = ({ open }) => {
const maxWidth = open ? `${window.visualViewport.width - 35}px` : '100vw'
return (
<FundingContext.Consumer>
{({ allPledges, transferPledgeAmounts, fundProfiles, cancelFundProfile }) =>
<div style={{ maxWidth }}>
{!!allPledges.length && <PledgesTable data={allPledges} transferPledgeAmounts={transferPledgeAmounts} fundProfiles={fundProfiles} />}
{!!fundProfiles.length && <FunderProfilesTable data={fundProfiles} cancelFundProfile={cancelFundProfile}/>}
</div>
}
</FundingContext.Consumer>
)
}
export default FundsManagement

23
app/components/MainCointainer.jsx
View File

@ -17,8 +17,9 @@ import ListItem from '@material-ui/core/ListItem';
import ListItemIcon from '@material-ui/core/ListItemIcon';
import ListItemText from '@material-ui/core/ListItemText';
import InboxIcon from '@material-ui/icons/MoveToInbox';
import FundsManagement from './FundsManagement'
const drawerWidth = 240;
const drawerWidth = 240
const styles = theme => ({
root: {
@ -38,6 +39,9 @@ const styles = theme => ({
duration: theme.transitions.duration.enteringScreen,
}),
},
childrenShift: {
width: `calc(100% - ${drawerWidth}px)`
},
menuButton: {
marginLeft: 12,
marginRight: 20,
@ -135,25 +139,25 @@ class PersistentDrawerLeft extends React.Component {
<List>
<ListItem button>
<ListItemIcon><InboxIcon /></ListItemIcon>
<ListItemText primary='Dashboard' />
<ListItemText primary="Dashboard" />
</ListItem>
</List>
<List>
<ListItem button>
<ListItemIcon><InboxIcon /></ListItemIcon>
<ListItemText primary='Insights' />
<ListItemText primary="Funds Management" />
</ListItem>
</List>
<List>
<ListItem button>
<ListItemIcon><InboxIcon /></ListItemIcon>
<ListItemText primary='Funding Entry' />
<ListItemText primary="Insights" />
</ListItem>
</List>
<List>
<ListItem button>
<ListItemIcon><InboxIcon /></ListItemIcon>
<ListItemText primary='Contract Admin' />
<ListItemText primary="Contract Admin" />
</ListItem>
</List>
<Divider />
@ -164,7 +168,12 @@ class PersistentDrawerLeft extends React.Component {
})}
>
<div className={classes.drawerHeader} />
{this.props.children}
<div className={classNames(classes.appBar, {
[classes.childrenShift]: open,
})}>
<FundsManagement open={open} />
{this.props.children}
</div>
</main>
</div>
);
@ -176,4 +185,4 @@ PersistentDrawerLeft.propTypes = {
theme: PropTypes.object.isRequired,
};
export default withStyles(styles, { withTheme: true })(PersistentDrawerLeft);
export default withStyles(styles, { withTheme: true })(PersistentDrawerLeft)

12
app/dapp.js
View File

@ -5,7 +5,6 @@ import LPVault from 'Embark/contracts/LPVault';
import LiquidPledgingMock from 'Embark/contracts/LiquidPledgingMock';
import web3 from "Embark/web3";
import Divider from '@material-ui/core/Divider';
import Button from '@material-ui/core/Button';
import AddFunder from './components/AddFunder';
import CreateFunding from './components/CreateFunding';
import FunderProfilesTable from './components/FunderProfilesTable'
@ -15,7 +14,6 @@ import { getAllLPEvents, getAllVaultEvents, getProfileEvents, formatFundProfileE
import { getAllPledges, appendToExistingPledges, transferBetweenPledges } from './utils/pledges';
import { FundingContext } from './context'
import { cancelProfile } from './utils/fundProfiles'
import SetMockedTime from './components/SetMockedTime'
import TransfersGraph from './components/TransfersGraph'
import MainCointainer from './components/MainCointainer'
import ContractAdmin from './components/ContractAdmin'
@ -90,16 +88,14 @@ class App extends React.Component {
render() {
const { account, needsInit, lpAllowance, fundProfiles, allPledges, authorizedPayments, transfers, allVaultEvents } = this.state
const { appendFundProfile, appendPledges, transferPledgeAmounts, cancelFundProfile } = this
const fundingContext = { account, transferPledgeAmounts, authorizedPayments, needsInit, initVaultAndLP, standardTokenApproval, }
const fundingContext = { allPledges, account, transferPledgeAmounts, authorizedPayments, cancelFundProfile, fundProfiles, needsInit, initVaultAndLP, standardTokenApproval }
return (
<FundingContext.Provider value={fundingContext}>
<Router>
<MainCointainer>
<div style={{ display: 'flex', flexDirection: 'column', width: '95vw' }}>
{transfers && <TransfersGraph transfers={transfers} vaultEvents={allVaultEvents} />}
{!!allPledges.length && <PledgesTable data={allPledges} transferPledgeAmounts={transferPledgeAmounts} fundProfiles={fundProfiles} />}
{!!fundProfiles.length && <FunderProfilesTable data={fundProfiles} cancelFundProfile={cancelFundProfile}/>}
</div>
{false &&transfers && <TransfersGraph transfers={transfers} vaultEvents={allVaultEvents} />}
{false && !!allPledges.length && <PledgesTable data={allPledges} transferPledgeAmounts={transferPledgeAmounts} fundProfiles={fundProfiles} />}
{false && !!fundProfiles.length && <FunderProfilesTable data={fundProfiles} cancelFundProfile={cancelFundProfile}/>}
<AddFunder appendFundProfile={appendFundProfile} />
<Divider variant="middle" />
<CreateFunding refreshTable={appendPledges} />