mirror of
https://github.com/aclindsa/moneygo.git
synced 2024-10-30 07:40:05 -04:00
Properly resize/scroll account selection tree
This commit is contained in:
parent
9cea031b46
commit
73536302bf
@ -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>
|
||||||
|
@ -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;
|
||||||
|
}
|
||||||
|
@ -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"
|
||||||
|
Loading…
Reference in New Issue
Block a user