Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[sql lab] cherry pick ui polish from master #1082

Merged
merged 2 commits into from
Sep 8, 2016
Merged

[sql lab] cherry pick ui polish from master #1082

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
b6e2664
only show the reset state button if location param (#1075)
Sep 8, 2016
d7609f1
cherry pick commits from master
Sep 8, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 6 additions & 3 deletions caravel/assets/javascripts/SqlLab/components/SqlEditorLeft.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -117,6 +117,7 @@ class SqlEditorTopToolbar extends React.Component {
}
render() {
const tables = this.props.tables.filter((t) => (t.queryEditorId === this.props.queryEditor.id));
const shouldShowReset = window.location.search === '?reset=1';
return (
<div className="clearfix sql-toolbar">
<div>
Expand Down Expand Up @@ -159,9 +160,11 @@ class SqlEditorTopToolbar extends React.Component {
<TableElement table={table} queryEditor={this.props.queryEditor} />
))}
</div>
<Button bsSize="small" bsStyle="danger" onClick={this.resetState.bind(this)}>
<i className="fa fa-bomb" /> Reset State
</Button>
{shouldShowReset &&
<Button bsSize="small" bsStyle="danger" onClick={this.resetState.bind(this)}>
<i className="fa fa-bomb" /> Reset State
</Button>
}
</div>
);
}
Expand Down
95 changes: 58 additions & 37 deletions caravel/assets/javascripts/SqlLab/components/TableElement.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ class TableElement extends React.Component {
setSelectStar() {
this.props.actions.queryEditorSetSql(this.props.queryEditor, this.selectStar());
}

selectStar() {
let cols = '';
this.props.table.columns.forEach((col, i) => {
Expand All @@ -20,6 +21,7 @@ class TableElement extends React.Component {
});
return `SELECT ${cols}\nFROM ${this.props.table.name}`;
}

popSelectStar() {
const qe = {
id: shortid.generate(),
Expand All @@ -30,66 +32,85 @@ class TableElement extends React.Component {
};
this.props.actions.addQueryEditor(qe);
}

collapseTable(e) {
e.preventDefault();
this.props.actions.collapseTable.bind(this, this.props.table)();
}

expandTable(e) {
e.preventDefault();
this.props.actions.expandTable.bind(this, this.props.table)();
}

render() {
let metadata = null;
let buttonToggle;
if (this.props.table.expanded) {
buttonToggle = (
<Link
<a
href="#"
onClick={this.props.actions.collapseTable.bind(this, this.props.table)}
placement="right"
tooltip="Collapse the table's structure information"
onClick={(e) => { this.collapseTable(e); }}
>
{this.props.table.name} <i className="fa fa-caret-up" />
</Link>
<strong>{this.props.table.name}</strong>
<small className="m-l-5"><i className="fa fa-minus" /></small>
</a>
);
metadata = (
<div>
{this.props.table.columns.map((col) => (
<div className="clearfix">
<span className="pull-left m-l-5">{col.name}</span>
<span className="pull-right text-muted">{col.type}</span>
<div className="row">
<div className="col-sm-8">
<div className="m-l-5">{col.name}</div>
</div>
<div className="col-sm-4">
<div className="pull-right text-muted"><small>{col.type}</small></div>
</div>
</div>
))}
<hr />
</div>
);
} else {
buttonToggle = (
<Link
<a
href="#"
onClick={this.props.actions.expandTable.bind(this, this.props.table)}
placement="right"
tooltip="Expand the table's structure information"
onClick={(e) => { this.expandTable(e); }}
>
{this.props.table.name} <i className="fa fa-caret-down" />
</Link>
{this.props.table.name}
<small className="m-l-5"><i className="fa fa-plus" /></small>
</a>
);
}
return (
<div className="ws-el">
{buttonToggle}
<ButtonGroup className="ws-el-controls pull-right">
<Link
className="fa fa-pencil m-l-2"
onClick={this.setSelectStar.bind(this)}
tooltip="Run query in a new tab"
href="#"
/>
<Link
className="fa fa-plus-circle m-l-2"
onClick={this.popSelectStar.bind(this)}
tooltip="Run query in a new tab"
href="#"
/>
<Link
className="fa fa-trash m-l-2"
onClick={this.props.actions.removeTable.bind(this, this.props.table)}
tooltip="Remove from workspace"
href="#"
/>
</ButtonGroup>
<div>
<div className="row">
<div className="col-sm-9 m-b-10">
{buttonToggle}
</div>
<div className="col-sm-3">
<ButtonGroup className="ws-el-controls pull-right">
<Link
className="fa fa-pencil pull-left m-l-2"
onClick={this.setSelectStar.bind(this)}
tooltip="Run query in this tab"
href="#"
/>
<Link
className="fa fa-plus-circle pull-left m-l-2"
onClick={this.popSelectStar.bind(this)}
tooltip="Run query in a new tab"
href="#"
/>
<Link
className="fa fa-trash pull-left m-l-2"
onClick={this.props.actions.removeTable.bind(this, this.props.table)}
tooltip="Remove from workspace"
href="#"
/>
</ButtonGroup>
</div>
</div>
{metadata}
</div>
);
Expand Down
15 changes: 2 additions & 13 deletions caravel/assets/javascripts/SqlLab/main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -141,15 +141,12 @@ div.Workspace {
max-height: 600px;
box-shadow: rgba(0, 0, 0, 0.8) 5px 5px 25px
}
.SqlLab {
font-size: 12px;
}
.SqlLab pre {
padding: 0px !important;
margin: 0px;
border: none;
font-size: 11px;
line-height: 125%;
font-size: 12px;
line-height: @line-height-base;
background-color: transparent !important;
}

Expand Down Expand Up @@ -238,14 +235,6 @@ div.tablePopover:hover {
.ace_content {
background-color: #f4f4f4;
}
.ws-el > .ws-el-controls {
opacity: 0;
transition: visibility 0s, opacity 0.3s linear;
}
.ws-el:hover > .ws-el-controls {
opacity: 1;
transition: visibility 0s, opacity 0.3s linear;
}

.SouthPane .tab-content {
padding-top: 10px;
Expand Down
2 changes: 1 addition & 1 deletion caravel/assets/stylesheets/less/cosmo/variables.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@
@font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace;
@font-family-base: @font-family-sans-serif;

@font-size-base: 15px;
@font-size-base: 14px;
@font-size-large: ceil((@font-size-base * 1.25)); // ~18px
@font-size-small: ceil((@font-size-base * 0.85)); // ~12px

Expand Down
2 changes: 1 addition & 1 deletion caravel/templates/caravel/welcome.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ <h2>{{ _("Dashboards") }}</h2>
</div>
<div class="panel-body">
<img class="loading" src="/static/assets/images/loading.gif"/>
<table id="dash_table" class="table table-condensed" width="100%"></table>
<table id="dash_table" class="table" width="100%"></table>
</div>
</div>
</div>
Expand Down