QT/superset2
1
0
Fork 0
mirror of https://github.com/apache/superset.git synced 2026-04-21 00:54:44 +00:00
Code Issues Packages Projects Releases Wiki Activity

[SqlLab] Fix a few UI issues (#4401)

Browse Source 
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:
Grace Guo
2018-02-13 10:18:09 -08:00
committed by GitHub
parent 4a6adb2f27
commit db24cef03b
6 changed files with 26 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
superset/assets/javascripts/SqlLab/components/SqlEditor.jsx
View File

@@ -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>