aclindsa/moneygo
1
0
Fork 0
mirror of https://github.com/aclindsa/moneygo.git synced 2024-10-30 07:40:05 -04:00
Code Issues Releases Wiki Activity

Properly resize/scroll account selection tree

Browse Source
This commit is contained in:
Aaron Lindsay 2015-07-07 20:18:09 -04:00
parent 9cea031b46
commit 73536302bf
3 changed files with 40 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
static/accounts.js
View File

@ -362,7 +362,8 @@ const AccountTreeNode = React.createClass({
const AccountTree = React.createClass({ const AccountTree = React.createClass({
getInitialState: function() { getInitialState: function() {
return {selectedAccount: null}; return {selectedAccount: null,
height: 0};
}, },
handleSelect: function(account) { handleSelect: function(account) {
this.setState({selectedAccount: account}); this.setState({selectedAccount: account});
@ -370,6 +371,15 @@ const AccountTree = React.createClass({
this.props.onSelect(account); this.props.onSelect(account);
} }
}, },
resize: function() {
var div = React.findDOMNode(this);
this.setState({height: div.parentElement.clientHeight - 73});
},
componentDidMount: function() {
this.resize();
var self = this;
$(window).resize(function() {self.resize();});
},
render: function() { render: function() {
var accounts = this.props.accounts; var accounts = this.props.accounts;
@ -382,8 +392,10 @@ const AccountTree = React.createClass({
onSelect={this.handleSelect}/>)); onSelect={this.handleSelect}/>));
} }
var style = {height: this.state.height + "px"};
return ( return (
<div className="accounttree-root"> <div className="accounttree-root" style={style} >
{children} {children}
</div> </div>
); );
@ -443,8 +455,8 @@ const AccountsTab = React.createClass({
var disabled = (this.state.selectedAccount == null) ? "disabled" : ""; var disabled = (this.state.selectedAccount == null) ? "disabled" : "";
return ( return (
<Grid fluid><Row> <Grid fluid className="fullheight"><Row className="fullheight">
<Col xs={2}> <Col xs={2} className="fullheight account-column">
<AddEditAccountModal <AddEditAccountModal
show={this.state.creatingNewAccount} show={this.state.creatingNewAccount}
initialParentAccount={this.state.selectedAccount} initialParentAccount={this.state.selectedAccount}
@ -471,7 +483,7 @@ const AccountsTab = React.createClass({
<AccountTree <AccountTree
accounts={accounts} accounts={accounts}
onSelect={this.handleAccountSelected}/> onSelect={this.handleAccountSelected}/>
<ButtonGroup className="pull-right"> <ButtonGroup className="account-buttongroup">
<Button onClick={this.handleNewAccount} bsStyle="success"> <Button onClick={this.handleNewAccount} bsStyle="success">
<Glyphicon glyph='plus-sign' /></Button> <Glyphicon glyph='plus-sign' /></Button>
<Button onClick={this.handleEditAccount} <Button onClick={this.handleEditAccount}
@ -481,7 +493,7 @@ const AccountsTab = React.createClass({
bsStyle="danger" disabled={disabled}> bsStyle="danger" disabled={disabled}>
<Glyphicon glyph='trash' /></Button> <Glyphicon glyph='trash' /></Button>
</ButtonGroup> </ButtonGroup>
</Col><Col xs={10}> </Col><Col xs={10} className="fullheight transactions-column">
blah blah
</Col> </Col>
</Row></Grid> </Row></Grid>

21
static/stylesheet.css
View File

@ -54,3 +54,24 @@ div.accounttree-root div {
.accounttree-name { .accounttree-name {
padding: 3px; padding: 3px;
} }
.accounttree-root {
display: block;
width: 100%;
height: 100%-100px;
overflow: auto;
}
.account-column {
padding: 15px 15px 43px 15px;
border-right: 1px solid #DDD;
border-left: 1px solid #DDD;
}
.account-buttongroup {
position: absolute;
right: 15px;
bottom: 15px;
}
.transactions-column {
padding: 15px;
border-right: 1px solid #DDD;
}

2
static/ui.js
View File

@ -553,7 +553,7 @@ const MoneyGoApp = React.createClass({
} else { } else {
if (this.state.user.isUser()) if (this.state.user.isUser())
mainContent = mainContent =
<TabbedArea defaultActiveKey='1' className="flex-container"> <TabbedArea defaultActiveKey='1' className="">
<TabPane tab="Accounts" eventKey='1' className="fullheight"> <TabPane tab="Accounts" eventKey='1' className="fullheight">
<AccountsTab <AccountsTab
className="fullheight" className="fullheight"