mirror of
https://github.com/apache/superset.git
synced 2024-09-12 08:39:45 -04:00
[query-search] fix scrolling on query search and pagination styling (#2646)
* fix scrolling for query search, getHeight was returning NAN * add styling for query search pagination * remove console.log * make pagination buttons match bootstrap theme small buttons
This commit is contained in:
parent
1cadfecd4b
commit
dc364daffd
@ -15,7 +15,7 @@ class App extends React.PureComponent {
|
|||||||
super(props);
|
super(props);
|
||||||
this.state = {
|
this.state = {
|
||||||
hash: window.location.hash,
|
hash: window.location.hash,
|
||||||
contentHeight: this.getHeight(),
|
contentHeight: '0px',
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
componentDidMount() {
|
componentDidMount() {
|
||||||
@ -32,11 +32,16 @@ class App extends React.PureComponent {
|
|||||||
this.setState({ hash: window.location.hash });
|
this.setState({ hash: window.location.hash });
|
||||||
}
|
}
|
||||||
getHeight() {
|
getHeight() {
|
||||||
const navHeight = 90;
|
const warningEl = $('#navbar-warning');
|
||||||
const headerHeight = $('.nav-tabs').outerHeight() ?
|
const navTabsEl = $('.nav-tabs');
|
||||||
$('.nav-tabs').outerHeight() : $('#search-header').outerHeight();
|
const searchHeaderEl = $('#search-header');
|
||||||
const warningHeight = $('#navbar-warning').outerHeight();
|
const alertEl = $('#sqllab-alerts');
|
||||||
const alertHeight = $('#sqllab-alerts').outerHeight();
|
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 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 - navHeight - headerHeight - warningHeight - alertHeight}px`;
|
||||||
}
|
}
|
||||||
handleResize() {
|
handleResize() {
|
||||||
|
@ -11,7 +11,7 @@ const $ = window.$ = require('jquery');
|
|||||||
|
|
||||||
const propTypes = {
|
const propTypes = {
|
||||||
actions: React.PropTypes.object.isRequired,
|
actions: React.PropTypes.object.isRequired,
|
||||||
height: React.PropTypes.integer,
|
height: React.PropTypes.number.isRequired,
|
||||||
};
|
};
|
||||||
|
|
||||||
class QuerySearch extends React.PureComponent {
|
class QuerySearch extends React.PureComponent {
|
||||||
@ -192,11 +192,11 @@ class QuerySearch extends React.PureComponent {
|
|||||||
(<img className="loading" alt="Loading..." src="/static/assets/images/loading.gif" />)
|
(<img className="loading" alt="Loading..." src="/static/assets/images/loading.gif" />)
|
||||||
:
|
:
|
||||||
(
|
(
|
||||||
<div
|
<div className="scrollbar-container">
|
||||||
style={{ height: this.props.height }}
|
<div
|
||||||
className="scrollbar-container"
|
className="scrollbar-content"
|
||||||
>
|
style={{ height: this.props.height }}
|
||||||
<div className="scrollbar-content">
|
>
|
||||||
<QueryTable
|
<QueryTable
|
||||||
columns={[
|
columns={[
|
||||||
'state', 'db', 'user', 'time',
|
'state', 'db', 'user', 'time',
|
||||||
|
@ -10,8 +10,9 @@ import { initJQueryAjaxCSRF } from '../modules/utils';
|
|||||||
import App from './components/App';
|
import App from './components/App';
|
||||||
import { appSetup } from '../common';
|
import { appSetup } from '../common';
|
||||||
|
|
||||||
require('./main.css');
|
import './main.css';
|
||||||
require('../components/FilterableTable/FilterableTableStyles.css');
|
import './reactable-pagination.css';
|
||||||
|
import '../components/FilterableTable/FilterableTableStyles.css';
|
||||||
|
|
||||||
appSetup();
|
appSetup();
|
||||||
initJQueryAjaxCSRF();
|
initJQueryAjaxCSRF();
|
||||||
|
40
superset/assets/javascripts/SqlLab/reactable-pagination.css
Normal file
40
superset/assets/javascripts/SqlLab/reactable-pagination.css
Normal file
@ -0,0 +1,40 @@
|
|||||||
|
.reactable-pagination td {
|
||||||
|
padding: 15px 0 0 0!important;
|
||||||
|
}
|
||||||
|
.reactable-pagination a:focus {
|
||||||
|
text-decoration: none;
|
||||||
|
color: #555555;
|
||||||
|
outline: 1;
|
||||||
|
}
|
||||||
|
.reactable-page-button,
|
||||||
|
.reactable-next-page,
|
||||||
|
.reactable-previous-page {
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 2px;
|
||||||
|
border: 1px solid #b3b3b3;
|
||||||
|
color: #555555;
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 12px;
|
||||||
|
line-height: 1.5;
|
||||||
|
margin-right: 5px;
|
||||||
|
padding: 5px 10px;
|
||||||
|
text-align: center;
|
||||||
|
text-decoration: none;
|
||||||
|
vertical-align: middle;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
.reactable-current-page {
|
||||||
|
border: 1px solid #b3b3b3;
|
||||||
|
color: #555555;
|
||||||
|
font-weight: bold;
|
||||||
|
pointer-events: none;
|
||||||
|
opacity: 0.65;
|
||||||
|
}
|
||||||
|
.reactable-page-button:hover,
|
||||||
|
.reactable-next-page:hover,
|
||||||
|
.reactable-previous-page:hover {
|
||||||
|
background-color: #efefef;
|
||||||
|
border-color: #949494;
|
||||||
|
color: #555555;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
Loading…
Reference in New Issue
Block a user