iss 496 - ensure tables retain correct height (bitshares#569)

* ensure tables retain correct height * Decrease interval time * Don't call onChangeTab when clicking on currently active tab
murilob · Oct 15, 2017 · 6671920 · 6671920
1 parent 5b8e718
commit 6671920
Show file tree

Hide file tree

Showing 4 changed files with 56 additions and 3 deletions.
diff --git a/app/assets/stylesheets/layout/_page_layout.scss b/app/assets/stylesheets/layout/_page_layout.scss
@@ -84,4 +84,19 @@ div.bordered-header {
 
 .table-cell{
   display: table-cell;
-}
+}
+
+.grid-content.app-tables {
+  box-sizing: border-box;
+  padding-bottom: 1.5rem;
+  min-height: 100%;
+  position: relative;
+}
+
+.grid-content.app-tables > .content-block, .grid-content.app-tables > .content-block > .generic-bordered-box, .grid-content.app-tables > .content-block > .generic-bordered-box > .overview-tabs {
+  height: 100%;
+}
+
+.grid-content.app-tables > .content-block {
+  margin-bottom: 0 !important;
+}
diff --git a/app/components/Account/AccountOverview.jsx b/app/components/Account/AccountOverview.jsx
@@ -32,6 +32,7 @@ import AccountOrders from "./AccountOrders";
 import cnames from "classnames";
 import TranslateWithLinks from "../Utility/TranslateWithLinks";
 import { checkMarginStatus } from "common/accountHelper";
+import tableHeightHelper from "lib/common/tableHeightHelper";
 
 class AccountOverview extends React.Component {
 
@@ -59,6 +60,9 @@ class AccountOverview extends React.Component {
                 // "OPEN.DASH"
             ]
         };
+
+        this.tableHeightMountInterval = tableHeightHelper.tableHeightMountInterval.bind(this);
+        this.adjustHeightOnChangeTab = tableHeightHelper.adjustHeightOnChangeTab.bind(this);
     }
 
     componentWillMount() {
@@ -79,6 +83,18 @@ class AccountOverview extends React.Component {
         if (np.account !== this.props.account) this._checkMarginStatus(np);
     }
 
+    componentDidMount(){
+        this.tableHeightMountIntervalInstance = this.tableHeightMountInterval();
+    }
+
+    componentWillUnmount(){
+        clearInterval(this.tableHeightMountIntervalInstance);
+    }
+
+    // adjustHeightOnChangeTab(){
+    //     this.adjustHeightOnChangeTab();
+    // }
+
     shouldComponentUpdate(nextProps, nextState) {
         return (
             !utils.are_equal_shallow(nextProps.balanceAssets, this.props.balanceAssets) ||
@@ -494,10 +510,10 @@ class AccountOverview extends React.Component {
         const hiddenSubText = <span style={{visibility: "hidden"}}>H</span>;
 
         return (
-            <div className="grid-content">
+            <div className="grid-content app-tables" ref="appTables">
                 <div className="content-block small-12">
                     <div className="generic-bordered-box">
-                        <Tabs defaultActiveTab={1} segmented={false} setting="overviewTab" className="overview-tabs" tabsClass="account-overview no-padding bordered-header content-block">
+                        <Tabs defaultActiveTab={1} segmented={false} setting="overviewTab" className="overview-tabs" tabsClass="account-overview no-padding bordered-header content-block" onChangeTab={this.adjustHeightOnChangeTab.bind(this)}>
 
                             <Tab disabled className="total-value" title={<span>{counterpart.translate("account.eq_value")}&nbsp;<AssetName name={preferredUnit} noTip /></span>} subText={totalValue}>
 

diff --git a/app/components/Utility/Tabs.jsx b/app/components/Utility/Tabs.jsx
@@ -84,13 +84,16 @@ class Tabs extends React.Component {
     }
 
     _changeTab(value) {
+        if (value === this.state.activeTab) return;
         // Persist current tab if desired
         if (this.props.setting) {
             SettingsActions.changeViewSetting({
                 [this.props.setting]: value
             });
         }
         this.setState({activeTab: value});
+
+        if(this.props.onChangeTab) this.props.onChangeTab(value);
     }
 
     render() {

diff --git a/app/lib/common/tableHeightHelper.js b/app/lib/common/tableHeightHelper.js
@@ -0,0 +1,19 @@
+export default {
+    tableHeightMountInterval(){
+        let interval = setInterval(function(){
+            let appTables = this.refs.appTables;
+
+            if(!appTables) return;
+
+            if(parseInt(appTables.style.height) !== appTables.clientHeight){
+                appTables.style.height = `${appTables.clientHeight}px`;
+            }
+        }.bind(this), 10);
+
+        return interval;
+    },
+    adjustHeightOnChangeTab(){
+        let appTables = this.refs.appTables;
+        if (appTables) this.refs.appTables.style.height = "auto";
+    }
+};