Skip to content

[sql-lab] ui polish #1079

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

Merged
ascott merged 5 commits into from
Sep 8, 2016
Merged

[sql-lab] ui polish #1079

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
4f24a3c
we don't need tooltips on accordion menu, known ui pattern
Sep 8, 2016
8839a10
use consistent type sizes, bump body type down to 14px
Sep 8, 2016
306cd2a
make editor same height as 3 selects
Sep 8, 2016
72dded8
table meta data accordion menu
Sep 8, 2016
1662248
remove hover effect on table actions
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
2 changes: 1 addition & 1 deletion caravel/assets/javascripts/SqlLab/components/SqlEditor.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -260,7 +260,7 @@ class SqlEditor extends React.Component {
mode="sql"
name={this.props.queryEditor.id}
theme="github"
minLines={5}
minLines={7}
maxLines={30}
onChange={this.textChange.bind(this)}
height="200px"
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">
Copy link
Member

@mistercrunch mistercrunch Sep 8, 2016

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I prefer having the pull-left pull-right there. Long table names will overflow in unoptimal and inconsistent ways depending on window size.

Copy link
Author

@ascott ascott Sep 8, 2016

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ok good point, will change this back.

Copy link
Author

@ascott ascott Sep 8, 2016

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

discussed and the browser size that using the grid here would pose a problem at is basically tablet size, and we haven't designed for the breakpoint anywhere else yet.

<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