This is an automated email from the ASF dual-hosted git repository.
graceguo pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/incubator-superset.git
The following commit(s) were added to refs/heads/master by this push:
new db24cef [SqlLab] Fix a few UI issues (#4401)
db24cef is described below
commit db24cef03bda8e73f844d497bc5392184b99fe3f
Author: Grace Guo <grace....@airbnb.com>
AuthorDate: Tue Feb 13 10:18:09 2018 -0800
[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.
---
.../assets/javascripts/SqlLab/components/App.jsx | 15 ++++++++-------
.../javascripts/SqlLab/components/SqlEditor.jsx | 20 +++++++++-----------
.../SqlLab/components/TabbedSqlEditors.jsx | 4 ++--
superset/assets/javascripts/SqlLab/main.less | 5 +++++
.../spec/javascripts/sqllab/SqlEditor_spec.jsx | 2 +-
.../javascripts/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 2d45281..3698a2a 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 cbfaf35..3eab16c 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 4f716d9..c890b5b 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 fd2e7f2..5a2b9b7 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 ab00ee6..739120f 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 0fef623..35f8a45 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} />, {
--
To stop receiving notification emails like this one, please contact
grace...@apache.org.
