QT/superset2
1
0
Fork 0
mirror of https://github.com/apache/superset.git synced 2026-04-21 09:04:38 +00:00
Code Issues Packages Projects Releases Wiki Activity

[SqlLab] Fix a few UI issues (#4401)

Browse Source 
1. tab alignment css
2. if tabs are more than 1 row, need to calculate content area height
3. clean up height calculation.
This commit is contained in:
Grace Guo
2018-02-13 10:18:09 -08:00
committed by GitHub
parent 4a6adb2f27
commit db24cef03b
6 changed files with 26 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
superset/assets/javascripts/SqlLab/components/App.jsx
View File

@@ -34,16 +34,17 @@ class App extends React.PureComponent {
}
getHeight() {
const warningEl = $('#navbar-warning');
const navTabsEl = $('.nav-tabs');
const tabsEl = $('.nav-tabs');
const searchHeaderEl = $('#search-header');
const alertEl = $('#sqllab-alerts');
const headerNavEl = $('header .navbar');
const navHeight = headerNavEl.outerHeight() + parseInt(headerNavEl.css('marginBottom'), 10);
const searchHeaderHeight = searchHeaderEl.outerHeight() + parseInt(searchHeaderEl.css('marginBottom'), 10);
const headerHeight = navTabsEl.outerHeight() ? navTabsEl.outerHeight() : searchHeaderHeight;
const headerEl = $('header .navbar');
const headerHeight = headerEl.outerHeight() + parseInt(headerEl.css('marginBottom'), 10);
const searchHeaderHeight = searchHeaderEl.length > 0 ?
searchHeaderEl.outerHeight() + parseInt(searchHeaderEl.css('marginBottom'), 10) : 0;
const tabsHeight = tabsEl.length > 0 ? tabsEl.outerHeight() : searchHeaderHeight;
const warningHeight = warningEl.length > 0 ? warningEl.outerHeight() : 0;
const alertHeight = alertEl.length > 0 ? alertEl.outerHeight() : 0;
return `${window.innerHeight - navHeight - headerHeight - warningHeight - alertHeight}px`;
return `${window.innerHeight - headerHeight - tabsHeight - warningHeight - alertHeight}px`;
}
handleResize() {
this.setState({ contentHeight: this.getHeight() });
@@ -64,7 +65,7 @@ class App extends React.PureComponent {
content = (
<div>
<QueryAutoRefresh />
<TabbedSqlEditors editorHeight={this.state.contentHeight} />
<TabbedSqlEditors getHeight={this.getHeight} />
</div>
);
}