graceguo-supercat closed pull request #4401: [SqlLab] Fix a few height related 
UI issues
URL: https://github.com/apache/incubator-superset/pull/4401
 
 
   

This is a PR merged from a forked repository.
As GitHub hides the original diff on merge, it is displayed below for
the sake of provenance:

As this is a foreign pull request (from a fork), the diff is supplied
below (as it won't show otherwise due to GitHub magic):

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 = (
         <div>
           <QueryAutoRefresh />
-          <TabbedSqlEditors editorHeight={this.state.contentHeight} />
+          <TabbedSqlEditors getHeight={this.getHeight} />
         </div>
       );
     }
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 {
       <div
         className="SqlEditor"
         style={{
-          minHeight: height,
-          height: this.props.height,
+          height: height + 'px',
         }}
       >
         <Row>
@@ -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()}
                 </div>
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 {
             <div className="panel-body">
               {isSelected &&
                 <SqlEditor
-                  height={this.props.editorHeight}
+                  getHeight={this.props.getHeight}
                   tables={this.props.tables.filter(xt => (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(<TabbedSqlEditors {...mockedProps} />, {


 

----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on GitHub and use the
URL above to go to the specific comment.
 
For queries about this service, please contact Infrastructure at:
us...@infra.apache.org


With regards,
Apache Git Services

Reply via email to