From 73536302bfff6fb31d75a53c516b576c13ed2f8f Mon Sep 17 00:00:00 2001
From: Aaron Lindsay <aaron@aclindsay.com>
Date: Tue, 7 Jul 2015 20:18:09 -0400
Subject: [PATCH] Properly resize/scroll account selection tree

---
 static/accounts.js    | 24 ++++++++++++++++++------
 static/stylesheet.css | 21 +++++++++++++++++++++
 static/ui.js          |  2 +-
 3 files changed, 40 insertions(+), 7 deletions(-)

diff --git a/static/accounts.js b/static/accounts.js
index 7f6f8fd..2dec758 100644
--- a/static/accounts.js
+++ b/static/accounts.js
@@ -362,7 +362,8 @@ const AccountTreeNode = React.createClass({
 
 const AccountTree = React.createClass({
 	getInitialState: function() {
-		return {selectedAccount: null};
+		return {selectedAccount: null,
+			height: 0};
 	},
 	handleSelect: function(account) {
 		this.setState({selectedAccount: account});
@@ -370,6 +371,15 @@ const AccountTree = React.createClass({
 			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() {
 		var accounts = this.props.accounts;
 
@@ -382,8 +392,10 @@ const AccountTree = React.createClass({
 					onSelect={this.handleSelect}/>));
 		}
 
+		var style = {height: this.state.height + "px"};
+
 		return (
-			<div className="accounttree-root">
+			<div className="accounttree-root" style={style} >
 				{children}
 			</div>
 		);
@@ -443,8 +455,8 @@ const AccountsTab = React.createClass({
 		var disabled = (this.state.selectedAccount == null) ? "disabled" : "";
 
 		return (
-			<Grid fluid><Row>
-				<Col xs={2}>
+			<Grid fluid className="fullheight"><Row className="fullheight">
+				<Col xs={2} className="fullheight account-column">
 					<AddEditAccountModal
 						show={this.state.creatingNewAccount}
 						initialParentAccount={this.state.selectedAccount}
@@ -471,7 +483,7 @@ const AccountsTab = React.createClass({
 					<AccountTree
 						accounts={accounts}
 						onSelect={this.handleAccountSelected}/>
-					<ButtonGroup className="pull-right">
+					<ButtonGroup className="account-buttongroup">
 						<Button onClick={this.handleNewAccount} bsStyle="success">
 							<Glyphicon glyph='plus-sign' /></Button>
 						<Button onClick={this.handleEditAccount}
@@ -481,7 +493,7 @@ const AccountsTab = React.createClass({
 								bsStyle="danger" disabled={disabled}>
 							<Glyphicon glyph='trash' /></Button>
 					</ButtonGroup>
-				</Col><Col xs={10}>
+				</Col><Col xs={10} className="fullheight transactions-column">
 					blah
 				</Col>
 			</Row></Grid>
diff --git a/static/stylesheet.css b/static/stylesheet.css
index 366c917..7b7f6f8 100644
--- a/static/stylesheet.css
+++ b/static/stylesheet.css
@@ -54,3 +54,24 @@ div.accounttree-root div {
 .accounttree-name {
 	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;
+}
diff --git a/static/ui.js b/static/ui.js
index 595c2cf..57606b5 100644
--- a/static/ui.js
+++ b/static/ui.js
@@ -553,7 +553,7 @@ const MoneyGoApp = React.createClass({
 		} else {
 			if (this.state.user.isUser())
 				mainContent =
-					<TabbedArea defaultActiveKey='1' className="flex-container">
+					<TabbedArea defaultActiveKey='1' className="">
 						<TabPane tab="Accounts" eventKey='1' className="fullheight">
 						<AccountsTab
 							className="fullheight"