From db24cef03bda8e73f844d497bc5392184b99fe3f Mon Sep 17 00:00:00 2001 From: Grace Guo Date: Tue, 13 Feb 2018 10:18:09 -0800 Subject: [PATCH] [SqlLab] Fix a few UI issues (#4401) 1. tab alignment css 2. if tabs are more than 1 row, need to calculate content area height 3. clean up height calculation. --- .../javascripts/SqlLab/components/App.jsx | 15 +++++++------- .../SqlLab/components/SqlEditor.jsx | 20 +++++++++---------- .../SqlLab/components/TabbedSqlEditors.jsx | 4 ++-- superset/assets/javascripts/SqlLab/main.less | 5 +++++ .../javascripts/sqllab/SqlEditor_spec.jsx | 2 +- .../sqllab/TabbedSqlEditors_spec.jsx | 1 + 6 files changed, 26 insertions(+), 21 deletions(-) diff --git a/superset/assets/javascripts/SqlLab/components/App.jsx b/superset/assets/javascripts/SqlLab/components/App.jsx index 2d45281634..3698a2a258 100644 --- a/superset/assets/javascripts/SqlLab/components/App.jsx +++ b/superset/assets/javascripts/SqlLab/components/App.jsx @@ -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 = (
- +
); } diff --git a/superset/assets/javascripts/SqlLab/components/SqlEditor.jsx b/superset/assets/javascripts/SqlLab/components/SqlEditor.jsx index cbfaf3597f..3eab16c3b9 100644 --- a/superset/assets/javascripts/SqlLab/components/SqlEditor.jsx +++ b/superset/assets/javascripts/SqlLab/components/SqlEditor.jsx @@ -29,7 +29,7 @@ import { t } from '../../locales'; const propTypes = { actions: PropTypes.object.isRequired, - height: PropTypes.string.isRequired, + getHeight: PropTypes.func.isRequired, database: PropTypes.object, latestQuery: PropTypes.object, tables: PropTypes.array.isRequired, @@ -73,9 +73,11 @@ class SqlEditor extends React.PureComponent { } onResize() { const height = this.sqlEditorHeight(); + const editorPaneHeight = this.props.queryEditor.height || 200; + const splitPaneHandlerHeight = 15; this.setState({ - editorPaneHeight: this.props.queryEditor.height, - southPaneHeight: height - this.props.queryEditor.height, + editorPaneHeight, + southPaneHeight: height - editorPaneHeight - splitPaneHandlerHeight, height, }); @@ -122,11 +124,8 @@ class SqlEditor extends React.PureComponent { this.setState({ ctas: event.target.value }); } sqlEditorHeight() { - // quick hack to make the white bg of the tab stretch full height. - const tabNavHeight = 40; - const navBarHeight = 56; - const mysteryVerticalHeight = 50; - return window.innerHeight - tabNavHeight - navBarHeight - mysteryVerticalHeight; + const horizontalScrollbarHeight = 25; + return parseInt(this.props.getHeight(), 10) - horizontalScrollbarHeight; } renderEditorBottomBar() { let ctasControls; @@ -227,8 +226,7 @@ class SqlEditor extends React.PureComponent {
@@ -271,7 +269,7 @@ class SqlEditor extends React.PureComponent { onAltEnter={this.runQuery.bind(this)} sql={this.props.queryEditor.sql} tables={this.props.tables} - height={((this.state.editorPaneHeight || defaultNorthHeight) - 50).toString()} + height={((this.state.editorPaneHeight || defaultNorthHeight) - 50) + 'px'} /> {this.renderEditorBottomBar()}
diff --git a/superset/assets/javascripts/SqlLab/components/TabbedSqlEditors.jsx b/superset/assets/javascripts/SqlLab/components/TabbedSqlEditors.jsx index 4f716d9a71..c890b5bf6e 100644 --- a/superset/assets/javascripts/SqlLab/components/TabbedSqlEditors.jsx +++ b/superset/assets/javascripts/SqlLab/components/TabbedSqlEditors.jsx @@ -19,7 +19,7 @@ const propTypes = { queryEditors: PropTypes.array, tabHistory: PropTypes.array.isRequired, tables: PropTypes.array.isRequired, - editorHeight: PropTypes.string.isRequired, + getHeight: PropTypes.func.isRequired, }; const defaultProps = { queryEditors: [], @@ -193,7 +193,7 @@ class TabbedSqlEditors extends React.PureComponent {
{isSelected && (xt.queryEditorId === qe.id))} queryEditor={qe} editorQueries={this.state.queriesArray} diff --git a/superset/assets/javascripts/SqlLab/main.less b/superset/assets/javascripts/SqlLab/main.less index fd2e7f29a4..5a2b9b7f08 100644 --- a/superset/assets/javascripts/SqlLab/main.less +++ b/superset/assets/javascripts/SqlLab/main.less @@ -298,6 +298,11 @@ a.Link { width: 100%; overflow: scroll; } +.nav-tabs > li.active > a, +.nav-tabs > li.active > a:hover, +.nav-tabs > li.active > a:focus { + padding-bottom: 8px; +} .search-date-filter-container { display: flex; diff --git a/superset/assets/spec/javascripts/sqllab/SqlEditor_spec.jsx b/superset/assets/spec/javascripts/sqllab/SqlEditor_spec.jsx index ab00ee6272..739120f9be 100644 --- a/superset/assets/spec/javascripts/sqllab/SqlEditor_spec.jsx +++ b/superset/assets/spec/javascripts/sqllab/SqlEditor_spec.jsx @@ -15,7 +15,7 @@ describe('SqlEditor', () => { latestQuery: queries[0], tables: [table], queries, - height: '', + getHeight: () => ('100px'), editorQueries: [], dataPreviewQueries: [], }; diff --git a/superset/assets/spec/javascripts/sqllab/TabbedSqlEditors_spec.jsx b/superset/assets/spec/javascripts/sqllab/TabbedSqlEditors_spec.jsx index 0fef623409..35f8a45ee7 100644 --- a/superset/assets/spec/javascripts/sqllab/TabbedSqlEditors_spec.jsx +++ b/superset/assets/spec/javascripts/sqllab/TabbedSqlEditors_spec.jsx @@ -50,6 +50,7 @@ describe('TabbedSqlEditors', () => { queryEditors: initialState.queryEditors, tabHistory: initialState.tabHistory, editorHeight: '', + getHeight: () => ('100px'), }; const getWrapper = () => ( shallow(, {