mirror of
https://github.com/apache/superset.git
synced 2024-09-17 11:09:47 -04:00
Calculate height dynamically using jquery for scrollable sqllab (#1611)
* Calculate height dynamically using jquery for scrollable sqllab components * Move editorHeight to App.jsx * Calculate height dynamically for query search
This commit is contained in:
parent
10982dec3c
commit
db1ed2a765
@ -1,3 +1,4 @@
|
||||
const $ = window.$ = require('jquery');
|
||||
import * as Actions from '../actions';
|
||||
import React from 'react';
|
||||
|
||||
@ -14,13 +15,29 @@ class App extends React.PureComponent {
|
||||
super(props);
|
||||
this.state = {
|
||||
hash: window.location.hash,
|
||||
contentHeight: this.getHeight(),
|
||||
};
|
||||
}
|
||||
componentDidMount() {
|
||||
/* eslint-disable react/no-did-mount-set-state */
|
||||
this.setState({ contentHeight: this.getHeight() });
|
||||
window.addEventListener('hashchange', this.onHashChanged.bind(this));
|
||||
window.addEventListener('resize', this.handleResize.bind(this));
|
||||
}
|
||||
componentWillUnmount() {
|
||||
window.removeEventListener('hashchange', this.onHashChanged.bind(this));
|
||||
window.removeEventListener('resize', this.handleResize.bind(this));
|
||||
}
|
||||
getHeight() {
|
||||
const navHeight = 90;
|
||||
const headerHeight = $('.nav-tabs').outerHeight() ?
|
||||
$('.nav-tabs').outerHeight() : $('#search-header').outerHeight();
|
||||
const warningHeight = $('#navbar-warning').outerHeight();
|
||||
const alertHeight = $('#sqllab-alerts').outerHeight();
|
||||
return `${window.innerHeight - navHeight - headerHeight - warningHeight - alertHeight}px`;
|
||||
}
|
||||
handleResize() {
|
||||
this.setState({ contentHeight: this.getHeight() });
|
||||
}
|
||||
onHashChanged() {
|
||||
this.setState({ hash: window.location.hash });
|
||||
@ -32,7 +49,7 @@ class App extends React.PureComponent {
|
||||
<div className="container-fluid">
|
||||
<div className="row">
|
||||
<div className="col-md-12">
|
||||
<QuerySearch />
|
||||
<QuerySearch height={this.state.contentHeight} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -41,13 +58,13 @@ class App extends React.PureComponent {
|
||||
content = (
|
||||
<div>
|
||||
<QueryAutoRefresh />
|
||||
<TabbedSqlEditors />
|
||||
<TabbedSqlEditors editorHeight={this.state.contentHeight} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<div className="App SqlLab">
|
||||
<Alerts alerts={this.props.alerts} actions={this.props.actions} />
|
||||
<Alerts id="sqllab-alerts" alerts={this.props.alerts} actions={this.props.actions} />
|
||||
<div className="container-fluid">
|
||||
{content}
|
||||
</div>
|
||||
|
@ -127,7 +127,7 @@ class QuerySearch extends React.PureComponent {
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<div className="row space-1">
|
||||
<div id="search-header" className="row space-1">
|
||||
<div className="col-sm-2">
|
||||
<Select
|
||||
name="select-user"
|
||||
@ -193,7 +193,10 @@ class QuerySearch extends React.PureComponent {
|
||||
(<img className="loading" alt="Loading..." src="/static/assets/images/loading.gif" />)
|
||||
:
|
||||
(
|
||||
<div className="scrollbar-container">
|
||||
<div
|
||||
style={{ height: this.props.height }}
|
||||
className="scrollbar-container"
|
||||
>
|
||||
<div className="scrollbar-content">
|
||||
<QueryTable
|
||||
columns={[
|
||||
|
@ -22,6 +22,7 @@ import AceEditorWrapper from './AceEditorWrapper';
|
||||
|
||||
const propTypes = {
|
||||
actions: React.PropTypes.object.isRequired,
|
||||
height: React.PropTypes.string.isRequired,
|
||||
database: React.PropTypes.object,
|
||||
latestQuery: React.PropTypes.object,
|
||||
networkOn: React.PropTypes.bool,
|
||||
@ -212,13 +213,20 @@ class SqlEditor extends React.PureComponent {
|
||||
</div>
|
||||
);
|
||||
return (
|
||||
<div className="SqlEditor" style={{ minHeight: this.sqlEditorHeight() }}>
|
||||
<div
|
||||
className="SqlEditor"
|
||||
style={{
|
||||
minHeight: this.sqlEditorHeight(),
|
||||
height: this.props.height,
|
||||
}}
|
||||
>
|
||||
<Row>
|
||||
<Collapse
|
||||
in={!this.props.hideLeftBar}
|
||||
>
|
||||
<Col md={3}>
|
||||
<SqlEditorLeftBar
|
||||
style={{ height: this.props.height }}
|
||||
queryEditor={this.props.queryEditor}
|
||||
tables={this.props.tables}
|
||||
networkOn={this.props.networkOn}
|
||||
|
@ -16,6 +16,7 @@ const propTypes = {
|
||||
tabHistory: React.PropTypes.array.isRequired,
|
||||
tables: React.PropTypes.array.isRequired,
|
||||
networkOn: React.PropTypes.bool,
|
||||
editorHeight: React.PropTypes.string.isRequired,
|
||||
};
|
||||
const defaultProps = {
|
||||
queryEditors: [],
|
||||
@ -168,6 +169,7 @@ class TabbedSqlEditors extends React.PureComponent {
|
||||
<div className="panel-body">
|
||||
{isSelected &&
|
||||
<SqlEditor
|
||||
height={this.props.editorHeight}
|
||||
tables={this.props.tables.filter((t) => (t.queryEditorId === qe.id))}
|
||||
queryEditor={qe}
|
||||
editorQueries={this.state.queriesArray}
|
||||
|
@ -36,7 +36,7 @@ body {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
height: 95%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.scrollbar-content {
|
||||
@ -47,7 +47,7 @@ body {
|
||||
bottom: 0px;
|
||||
overflow: scroll;
|
||||
margin-right: 0px;
|
||||
margin-bottom: 100px;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
.Workspace .btn-sm {
|
||||
|
@ -33,7 +33,7 @@
|
||||
{% set WARNING_MSG = appbuilder.app.config.get('WARNING_MSG') %}
|
||||
{% if WARNING_MSG %}
|
||||
<div class="container">
|
||||
<div class="alert alert-danger">
|
||||
<div id="navbar-warning" class="alert alert-danger">
|
||||
{{ WARNING_MSG | safe }}
|
||||
</div>
|
||||
</div>
|
||||
|
Loading…
Reference in New Issue
Block a user