pt
/
superset
mirror of https://github.com/apache/superset.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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:
vera-liu 2016-11-09 14:21:43 -08:00 committed by Maxime Beauchemin
parent 946e4b750a
commit d70a74479d
3 changed files with 92 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
caravel/assets/javascripts/SqlLab/components/SqlEditor.jsx
View File

@ -227,22 +227,24 @@ class SqlEditor extends React.PureComponent {
</Col>
</Collapse>
<Col md={this.props.hideLeftBar ? 12 : 9}>
<div className="scrollbar">
<AceEditorWrapper
actions={this.props.actions}
onBlur={this.setQueryEditorSql.bind(this)}
queryEditor={this.props.queryEditor}
onAltEnter={this.runQuery.bind(this)}
sql={this.props.queryEditor.sql}
tables={this.props.tables}
/>
{editorBottomBar}
<br />
<SouthPane
editorQueries={this.props.editorQueries}
dataPreviewQueries={this.props.dataPreviewQueries}
actions={this.props.actions}
/>
<div className="scrollbar-container">
<div className="scrollbar-content">
<AceEditorWrapper
actions={this.props.actions}
onBlur={this.setQueryEditorSql.bind(this)}
queryEditor={this.props.queryEditor}
onAltEnter={this.runQuery.bind(this)}
sql={this.props.queryEditor.sql}
tables={this.props.tables}
/>
{editorBottomBar}
<br />
<SouthPane
editorQueries={this.props.editorQueries}
dataPreviewQueries={this.props.dataPreviewQueries}
actions={this.props.actions}
/>
</div>
</div>
</Col>
</Row>

108
caravel/assets/javascripts/SqlLab/components/SqlEditorLeftBar.jsx
View File

@ -99,62 +99,64 @@ class SqlEditorLeftBar extends React.PureComponent {
}
const shouldShowReset = window.location.search === '?reset=1';
return (
<div className="clearfix sql-toolbar scrollbar">
{networkAlert}
<div>
<DatabaseSelect
onChange={this.onChange.bind(this)}
databaseId={this.props.queryEditor.dbId}
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}
<div className="scrollbar-container">
<div className="clearfix sql-toolbar scrollbar-content">
{networkAlert}
<div>
<DatabaseSelect
onChange={this.onChange.bind(this)}
databaseId={this.props.queryEditor.dbId}
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>
{shouldShowReset &&
<Button bsSize="small" bsStyle="danger" onClick={this.resetState.bind(this)}>
<i className="fa fa-bomb" /> Reset State
</Button>
}
</div>
);
}

24
caravel/assets/javascripts/SqlLab/main.css
View File

@ -1,3 +1,6 @@
body {
overflow: hidden;
}
.inlineBlock {
display: inline-block;
}
@ -29,11 +32,22 @@
padding-bottom: 5px;
}
.scrollbar {
position: relative;
width: 100%;
overflow-y: auto;
height: 100%;
.scrollbar-container {
position: relative;
overflow: hidden;
width: 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 {