mirror of https://github.com/apache/superset.git
[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.
This commit is contained in:
parent
4a6adb2f27
commit
db24cef03b
|
@ -34,16 +34,17 @@ class App extends React.PureComponent {
|
||||||
}
|
}
|
||||||
getHeight() {
|
getHeight() {
|
||||||
const warningEl = $('#navbar-warning');
|
const warningEl = $('#navbar-warning');
|
||||||
const navTabsEl = $('.nav-tabs');
|
const tabsEl = $('.nav-tabs');
|
||||||
const searchHeaderEl = $('#search-header');
|
const searchHeaderEl = $('#search-header');
|
||||||
const alertEl = $('#sqllab-alerts');
|
const alertEl = $('#sqllab-alerts');
|
||||||
const headerNavEl = $('header .navbar');
|
const headerEl = $('header .navbar');
|
||||||
const navHeight = headerNavEl.outerHeight() + parseInt(headerNavEl.css('marginBottom'), 10);
|
const headerHeight = headerEl.outerHeight() + parseInt(headerEl.css('marginBottom'), 10);
|
||||||
const searchHeaderHeight = searchHeaderEl.outerHeight() + parseInt(searchHeaderEl.css('marginBottom'), 10);
|
const searchHeaderHeight = searchHeaderEl.length > 0 ?
|
||||||
const headerHeight = navTabsEl.outerHeight() ? navTabsEl.outerHeight() : searchHeaderHeight;
|
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 warningHeight = warningEl.length > 0 ? warningEl.outerHeight() : 0;
|
||||||
const alertHeight = alertEl.length > 0 ? alertEl.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() {
|
handleResize() {
|
||||||
this.setState({ contentHeight: this.getHeight() });
|
this.setState({ contentHeight: this.getHeight() });
|
||||||
|
@ -64,7 +65,7 @@ class App extends React.PureComponent {
|
||||||
content = (
|
content = (
|
||||||
<div>
|
<div>
|
||||||
<QueryAutoRefresh />
|
<QueryAutoRefresh />
|
||||||
<TabbedSqlEditors editorHeight={this.state.contentHeight} />
|
<TabbedSqlEditors getHeight={this.getHeight} />
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -29,7 +29,7 @@ import { t } from '../../locales';
|
||||||
|
|
||||||
const propTypes = {
|
const propTypes = {
|
||||||
actions: PropTypes.object.isRequired,
|
actions: PropTypes.object.isRequired,
|
||||||
height: PropTypes.string.isRequired,
|
getHeight: PropTypes.func.isRequired,
|
||||||
database: PropTypes.object,
|
database: PropTypes.object,
|
||||||
latestQuery: PropTypes.object,
|
latestQuery: PropTypes.object,
|
||||||
tables: PropTypes.array.isRequired,
|
tables: PropTypes.array.isRequired,
|
||||||
|
@ -73,9 +73,11 @@ class SqlEditor extends React.PureComponent {
|
||||||
}
|
}
|
||||||
onResize() {
|
onResize() {
|
||||||
const height = this.sqlEditorHeight();
|
const height = this.sqlEditorHeight();
|
||||||
|
const editorPaneHeight = this.props.queryEditor.height || 200;
|
||||||
|
const splitPaneHandlerHeight = 15;
|
||||||
this.setState({
|
this.setState({
|
||||||
editorPaneHeight: this.props.queryEditor.height,
|
editorPaneHeight,
|
||||||
southPaneHeight: height - this.props.queryEditor.height,
|
southPaneHeight: height - editorPaneHeight - splitPaneHandlerHeight,
|
||||||
height,
|
height,
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -122,11 +124,8 @@ class SqlEditor extends React.PureComponent {
|
||||||
this.setState({ ctas: event.target.value });
|
this.setState({ ctas: event.target.value });
|
||||||
}
|
}
|
||||||
sqlEditorHeight() {
|
sqlEditorHeight() {
|
||||||
// quick hack to make the white bg of the tab stretch full height.
|
const horizontalScrollbarHeight = 25;
|
||||||
const tabNavHeight = 40;
|
return parseInt(this.props.getHeight(), 10) - horizontalScrollbarHeight;
|
||||||
const navBarHeight = 56;
|
|
||||||
const mysteryVerticalHeight = 50;
|
|
||||||
return window.innerHeight - tabNavHeight - navBarHeight - mysteryVerticalHeight;
|
|
||||||
}
|
}
|
||||||
renderEditorBottomBar() {
|
renderEditorBottomBar() {
|
||||||
let ctasControls;
|
let ctasControls;
|
||||||
|
@ -227,8 +226,7 @@ class SqlEditor extends React.PureComponent {
|
||||||
<div
|
<div
|
||||||
className="SqlEditor"
|
className="SqlEditor"
|
||||||
style={{
|
style={{
|
||||||
minHeight: height,
|
height: height + 'px',
|
||||||
height: this.props.height,
|
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<Row>
|
<Row>
|
||||||
|
@ -271,7 +269,7 @@ class SqlEditor extends React.PureComponent {
|
||||||
onAltEnter={this.runQuery.bind(this)}
|
onAltEnter={this.runQuery.bind(this)}
|
||||||
sql={this.props.queryEditor.sql}
|
sql={this.props.queryEditor.sql}
|
||||||
tables={this.props.tables}
|
tables={this.props.tables}
|
||||||
height={((this.state.editorPaneHeight || defaultNorthHeight) - 50).toString()}
|
height={((this.state.editorPaneHeight || defaultNorthHeight) - 50) + 'px'}
|
||||||
/>
|
/>
|
||||||
{this.renderEditorBottomBar()}
|
{this.renderEditorBottomBar()}
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -19,7 +19,7 @@ const propTypes = {
|
||||||
queryEditors: PropTypes.array,
|
queryEditors: PropTypes.array,
|
||||||
tabHistory: PropTypes.array.isRequired,
|
tabHistory: PropTypes.array.isRequired,
|
||||||
tables: PropTypes.array.isRequired,
|
tables: PropTypes.array.isRequired,
|
||||||
editorHeight: PropTypes.string.isRequired,
|
getHeight: PropTypes.func.isRequired,
|
||||||
};
|
};
|
||||||
const defaultProps = {
|
const defaultProps = {
|
||||||
queryEditors: [],
|
queryEditors: [],
|
||||||
|
@ -193,7 +193,7 @@ class TabbedSqlEditors extends React.PureComponent {
|
||||||
<div className="panel-body">
|
<div className="panel-body">
|
||||||
{isSelected &&
|
{isSelected &&
|
||||||
<SqlEditor
|
<SqlEditor
|
||||||
height={this.props.editorHeight}
|
getHeight={this.props.getHeight}
|
||||||
tables={this.props.tables.filter(xt => (xt.queryEditorId === qe.id))}
|
tables={this.props.tables.filter(xt => (xt.queryEditorId === qe.id))}
|
||||||
queryEditor={qe}
|
queryEditor={qe}
|
||||||
editorQueries={this.state.queriesArray}
|
editorQueries={this.state.queriesArray}
|
||||||
|
|
|
@ -298,6 +298,11 @@ a.Link {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
overflow: scroll;
|
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 {
|
.search-date-filter-container {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
||||||
|
|
|
@ -15,7 +15,7 @@ describe('SqlEditor', () => {
|
||||||
latestQuery: queries[0],
|
latestQuery: queries[0],
|
||||||
tables: [table],
|
tables: [table],
|
||||||
queries,
|
queries,
|
||||||
height: '',
|
getHeight: () => ('100px'),
|
||||||
editorQueries: [],
|
editorQueries: [],
|
||||||
dataPreviewQueries: [],
|
dataPreviewQueries: [],
|
||||||
};
|
};
|
||||||
|
|
|
@ -50,6 +50,7 @@ describe('TabbedSqlEditors', () => {
|
||||||
queryEditors: initialState.queryEditors,
|
queryEditors: initialState.queryEditors,
|
||||||
tabHistory: initialState.tabHistory,
|
tabHistory: initialState.tabHistory,
|
||||||
editorHeight: '',
|
editorHeight: '',
|
||||||
|
getHeight: () => ('100px'),
|
||||||
};
|
};
|
||||||
const getWrapper = () => (
|
const getWrapper = () => (
|
||||||
shallow(<TabbedSqlEditors {...mockedProps} />, {
|
shallow(<TabbedSqlEditors {...mockedProps} />, {
|
||||||
|
|
Loading…
Reference in New Issue