mirror of
https://github.com/apache/superset.git
synced 2024-09-17 11:09:47 -04:00
[explore v2] add scrollbar to control panel container (#1284)
* add scroll bars to control panel container * make query and save-btns block elements * don't use react component, use custom styles * move style to stylesheet
This commit is contained in:
parent
0a3121c243
commit
382b8e85da
@ -14,8 +14,12 @@ const defaultProps = {
|
|||||||
function ControlPanelsContainer(props) {
|
function ControlPanelsContainer(props) {
|
||||||
return (
|
return (
|
||||||
<Panel>
|
<Panel>
|
||||||
|
<div className="scrollbar-container">
|
||||||
|
<div className="scrollbar-content">
|
||||||
{DefaultControls}
|
{DefaultControls}
|
||||||
{VIZ_CONTROL_MAPPING[props.vizType]}
|
{VIZ_CONTROL_MAPPING[props.vizType]}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</Panel>
|
</Panel>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -31,16 +31,16 @@ export default class ExploreViewContainer extends React.Component {
|
|||||||
overflow: 'hidden',
|
overflow: 'hidden',
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<div className="row table-body">
|
<div className="row">
|
||||||
<div className="table-cell col-sm-4">
|
<div className="col-sm-4">
|
||||||
<QueryAndSaveButtons
|
<QueryAndSaveButtons
|
||||||
canAdd="True"
|
canAdd="True"
|
||||||
onQuery={() => {}}
|
onQuery={() => {}}
|
||||||
/>
|
/>
|
||||||
<br /><br />
|
<br />
|
||||||
<ControlPanelsContainer />
|
<ControlPanelsContainer />
|
||||||
</div>
|
</div>
|
||||||
<div className="table-cell col-sm-8">
|
<div className="col-sm-8">
|
||||||
<ChartContainer
|
<ChartContainer
|
||||||
viz={this.props.data.viz}
|
viz={this.props.data.viz}
|
||||||
height={this.state.height}
|
height={this.state.height}
|
||||||
|
@ -7,23 +7,22 @@ const propTypes = {
|
|||||||
};
|
};
|
||||||
|
|
||||||
export default function QueryAndSaveBtns({ canAdd, onQuery }) {
|
export default function QueryAndSaveBtns({ canAdd, onQuery }) {
|
||||||
const saveClasses = classnames('btn btn-default btn-sm', {
|
const saveClasses = classnames('btn btn-default btn-block btn-sm', {
|
||||||
'disabled disabledButton': canAdd !== 'True',
|
'disabled disabledButton': canAdd !== 'True',
|
||||||
});
|
});
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="btn-group query-and-save">
|
<div className="btn-group btn-group-justified query-and-save">
|
||||||
<button type="button" className="btn btn-primary btn-sm" onClick={onQuery}>
|
<a className="btn btn-primary btn-block btn-sm" onClick={onQuery}>
|
||||||
<i className="fa fa-bolt"></i> Query
|
<i className="fa fa-bolt"></i> Query
|
||||||
</button>
|
</a>
|
||||||
<button
|
<a
|
||||||
type="button"
|
|
||||||
className={saveClasses}
|
className={saveClasses}
|
||||||
data-target="#save_modal"
|
data-target="#save_modal"
|
||||||
data-toggle="modal"
|
data-toggle="modal"
|
||||||
>
|
>
|
||||||
<i className="fa fa-plus-circle"></i> Save as
|
<i className="fa fa-plus-circle"></i> Save as
|
||||||
</button>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -1,8 +1,17 @@
|
|||||||
.table-body {
|
.scrollbar-container {
|
||||||
display: table;
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.table-cell {
|
.scrollbar-content {
|
||||||
float: none;
|
position: absolute;
|
||||||
display: table-cell;
|
top: 0px;
|
||||||
|
left: 0px;
|
||||||
|
right: 0px;
|
||||||
|
bottom: 0px;
|
||||||
|
overflow: scroll;
|
||||||
|
margin-right: 0px;
|
||||||
|
margin-bottom: 100px;
|
||||||
}
|
}
|
||||||
|
@ -1,7 +1,7 @@
|
|||||||
{% extends "caravel/basic.html" %}
|
{% extends "caravel/basic.html" %}
|
||||||
<link rel="stylesheet" type="text/css" href="/static/assets/stylesheets/exploreV2/exploreV2.css" />
|
|
||||||
|
|
||||||
{% block body %}
|
{% block body %}
|
||||||
|
<link rel="stylesheet" type="text/css" href="/static/assets/stylesheets/explorev2/explorev2.css">
|
||||||
<div
|
<div
|
||||||
id="js-explore-view-container"
|
id="js-explore-view-container"
|
||||||
data-bootstrap="{{ bootstrap_data }}"
|
data-bootstrap="{{ bootstrap_data }}"
|
||||||
|
Loading…
Reference in New Issue
Block a user