mirror of https://github.com/apache/superset.git
Make Sqllab a one-page app -- body not scrollable (#1551)
* Make Sqllab a one-page app -- body not scrollable * Add scroll-container and scroll-content in main.css
This commit is contained in:
parent
946e4b750a
commit
d70a74479d
|
@ -227,22 +227,24 @@ class SqlEditor extends React.PureComponent {
|
||||||
</Col>
|
</Col>
|
||||||
</Collapse>
|
</Collapse>
|
||||||
<Col md={this.props.hideLeftBar ? 12 : 9}>
|
<Col md={this.props.hideLeftBar ? 12 : 9}>
|
||||||
<div className="scrollbar">
|
<div className="scrollbar-container">
|
||||||
<AceEditorWrapper
|
<div className="scrollbar-content">
|
||||||
actions={this.props.actions}
|
<AceEditorWrapper
|
||||||
onBlur={this.setQueryEditorSql.bind(this)}
|
actions={this.props.actions}
|
||||||
queryEditor={this.props.queryEditor}
|
onBlur={this.setQueryEditorSql.bind(this)}
|
||||||
onAltEnter={this.runQuery.bind(this)}
|
queryEditor={this.props.queryEditor}
|
||||||
sql={this.props.queryEditor.sql}
|
onAltEnter={this.runQuery.bind(this)}
|
||||||
tables={this.props.tables}
|
sql={this.props.queryEditor.sql}
|
||||||
/>
|
tables={this.props.tables}
|
||||||
{editorBottomBar}
|
/>
|
||||||
<br />
|
{editorBottomBar}
|
||||||
<SouthPane
|
<br />
|
||||||
editorQueries={this.props.editorQueries}
|
<SouthPane
|
||||||
dataPreviewQueries={this.props.dataPreviewQueries}
|
editorQueries={this.props.editorQueries}
|
||||||
actions={this.props.actions}
|
dataPreviewQueries={this.props.dataPreviewQueries}
|
||||||
/>
|
actions={this.props.actions}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</Col>
|
</Col>
|
||||||
</Row>
|
</Row>
|
||||||
|
|
|
@ -99,62 +99,64 @@ class SqlEditorLeftBar extends React.PureComponent {
|
||||||
}
|
}
|
||||||
const shouldShowReset = window.location.search === '?reset=1';
|
const shouldShowReset = window.location.search === '?reset=1';
|
||||||
return (
|
return (
|
||||||
<div className="clearfix sql-toolbar scrollbar">
|
<div className="scrollbar-container">
|
||||||
{networkAlert}
|
<div className="clearfix sql-toolbar scrollbar-content">
|
||||||
<div>
|
{networkAlert}
|
||||||
<DatabaseSelect
|
<div>
|
||||||
onChange={this.onChange.bind(this)}
|
<DatabaseSelect
|
||||||
databaseId={this.props.queryEditor.dbId}
|
onChange={this.onChange.bind(this)}
|
||||||
actions={this.props.actions}
|
databaseId={this.props.queryEditor.dbId}
|
||||||
valueRenderer={(o) => (
|
|
||||||
<div>
|
|
||||||
<span className="text-muted">Database:</span> {o.label}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="m-t-5">
|
|
||||||
<Select
|
|
||||||
name="select-schema"
|
|
||||||
placeholder={`Select a schema (${this.state.schemaOptions.length})`}
|
|
||||||
options={this.state.schemaOptions}
|
|
||||||
value={this.props.queryEditor.schema}
|
|
||||||
valueRenderer={(o) => (
|
|
||||||
<div>
|
|
||||||
<span className="text-muted">Schema:</span> {o.label}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
isLoading={this.state.schemaLoading}
|
|
||||||
autosize={false}
|
|
||||||
onChange={this.changeSchema.bind(this)}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="m-t-5">
|
|
||||||
<Select
|
|
||||||
name="select-table"
|
|
||||||
ref="selectTable"
|
|
||||||
isLoading={this.state.tableLoading}
|
|
||||||
placeholder={`Add a table (${this.state.tableOptions.length})`}
|
|
||||||
autosize={false}
|
|
||||||
onChange={this.changeTable.bind(this)}
|
|
||||||
options={this.state.tableOptions}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<hr />
|
|
||||||
<div className="m-t-5">
|
|
||||||
{this.props.tables.map((table) => (
|
|
||||||
<TableElement
|
|
||||||
table={table}
|
|
||||||
key={table.id}
|
|
||||||
actions={this.props.actions}
|
actions={this.props.actions}
|
||||||
|
valueRenderer={(o) => (
|
||||||
|
<div>
|
||||||
|
<span className="text-muted">Database:</span> {o.label}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
/>
|
/>
|
||||||
))}
|
</div>
|
||||||
|
<div className="m-t-5">
|
||||||
|
<Select
|
||||||
|
name="select-schema"
|
||||||
|
placeholder={`Select a schema (${this.state.schemaOptions.length})`}
|
||||||
|
options={this.state.schemaOptions}
|
||||||
|
value={this.props.queryEditor.schema}
|
||||||
|
valueRenderer={(o) => (
|
||||||
|
<div>
|
||||||
|
<span className="text-muted">Schema:</span> {o.label}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
isLoading={this.state.schemaLoading}
|
||||||
|
autosize={false}
|
||||||
|
onChange={this.changeSchema.bind(this)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="m-t-5">
|
||||||
|
<Select
|
||||||
|
name="select-table"
|
||||||
|
ref="selectTable"
|
||||||
|
isLoading={this.state.tableLoading}
|
||||||
|
placeholder={`Add a table (${this.state.tableOptions.length})`}
|
||||||
|
autosize={false}
|
||||||
|
onChange={this.changeTable.bind(this)}
|
||||||
|
options={this.state.tableOptions}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<hr />
|
||||||
|
<div className="m-t-5">
|
||||||
|
{this.props.tables.map((table) => (
|
||||||
|
<TableElement
|
||||||
|
table={table}
|
||||||
|
key={table.id}
|
||||||
|
actions={this.props.actions}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
{shouldShowReset &&
|
||||||
|
<Button bsSize="small" bsStyle="danger" onClick={this.resetState.bind(this)}>
|
||||||
|
<i className="fa fa-bomb" /> Reset State
|
||||||
|
</Button>
|
||||||
|
}
|
||||||
</div>
|
</div>
|
||||||
{shouldShowReset &&
|
|
||||||
<Button bsSize="small" bsStyle="danger" onClick={this.resetState.bind(this)}>
|
|
||||||
<i className="fa fa-bomb" /> Reset State
|
|
||||||
</Button>
|
|
||||||
}
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,3 +1,6 @@
|
||||||
|
body {
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
.inlineBlock {
|
.inlineBlock {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
}
|
}
|
||||||
|
@ -29,11 +32,22 @@
|
||||||
padding-bottom: 5px;
|
padding-bottom: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.scrollbar {
|
.scrollbar-container {
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 100%;
|
overflow: hidden;
|
||||||
overflow-y: auto;
|
width: 100%;
|
||||||
height: 100%;
|
height: 95%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.scrollbar-content {
|
||||||
|
position: absolute;
|
||||||
|
top: 0px;
|
||||||
|
left: 0px;
|
||||||
|
right: 0px;
|
||||||
|
bottom: 0px;
|
||||||
|
overflow: scroll;
|
||||||
|
margin-right: 0px;
|
||||||
|
margin-bottom: 100px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.Workspace .btn-sm {
|
.Workspace .btn-sm {
|
||||||
|
|
Loading…
Reference in New Issue