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

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'; 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>
); );
} }

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

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