From 4f24a3c00ed6b418a52dbf30f596b817e535f872 Mon Sep 17 00:00:00 2001 From: alanna scott Date: Wed, 7 Sep 2016 23:21:01 -0700 Subject: [PATCH 1/5] we don't need tooltips on accordion menu, known ui pattern --- caravel/assets/javascripts/SqlLab/components/TableElement.jsx | 4 ---- 1 file changed, 4 deletions(-) diff --git a/caravel/assets/javascripts/SqlLab/components/TableElement.jsx b/caravel/assets/javascripts/SqlLab/components/TableElement.jsx index d2f74bcc2495..ec2fe45da5f5 100644 --- a/caravel/assets/javascripts/SqlLab/components/TableElement.jsx +++ b/caravel/assets/javascripts/SqlLab/components/TableElement.jsx @@ -38,8 +38,6 @@ class TableElement extends React.Component { {this.props.table.name} @@ -60,8 +58,6 @@ class TableElement extends React.Component { {this.props.table.name} From 8839a1086f909cb2d78dd086db8a9eb2e76593da Mon Sep 17 00:00:00 2001 From: alanna scott Date: Wed, 7 Sep 2016 23:21:50 -0700 Subject: [PATCH 2/5] use consistent type sizes, bump body type down to 14px --- caravel/assets/javascripts/SqlLab/main.css | 7 ++----- caravel/assets/stylesheets/less/cosmo/variables.less | 2 +- caravel/templates/caravel/welcome.html | 2 +- 3 files changed, 4 insertions(+), 7 deletions(-) diff --git a/caravel/assets/javascripts/SqlLab/main.css b/caravel/assets/javascripts/SqlLab/main.css index 0f637781746c..3f67e0425151 100644 --- a/caravel/assets/javascripts/SqlLab/main.css +++ b/caravel/assets/javascripts/SqlLab/main.css @@ -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; } diff --git a/caravel/assets/stylesheets/less/cosmo/variables.less b/caravel/assets/stylesheets/less/cosmo/variables.less index 56ac8416fa1b..a90a65362e10 100644 --- a/caravel/assets/stylesheets/less/cosmo/variables.less +++ b/caravel/assets/stylesheets/less/cosmo/variables.less @@ -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 diff --git a/caravel/templates/caravel/welcome.html b/caravel/templates/caravel/welcome.html index 80c8c05eaae4..bdc8f92a46b1 100644 --- a/caravel/templates/caravel/welcome.html +++ b/caravel/templates/caravel/welcome.html @@ -34,7 +34,7 @@

{{ _("Dashboards") }}

-
+
From 306cd2a32ed0377ca8fc26876aab261898344158 Mon Sep 17 00:00:00 2001 From: alanna scott Date: Thu, 8 Sep 2016 00:39:26 -0700 Subject: [PATCH 3/5] make editor same height as 3 selects --- caravel/assets/javascripts/SqlLab/components/SqlEditor.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/caravel/assets/javascripts/SqlLab/components/SqlEditor.jsx b/caravel/assets/javascripts/SqlLab/components/SqlEditor.jsx index 5bab1a1a9ecf..ef676ce3b87b 100644 --- a/caravel/assets/javascripts/SqlLab/components/SqlEditor.jsx +++ b/caravel/assets/javascripts/SqlLab/components/SqlEditor.jsx @@ -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" From 72dded8a7ac0340be1708749f9b5dda23cdeaa71 Mon Sep 17 00:00:00 2001 From: alanna scott Date: Thu, 8 Sep 2016 00:45:26 -0700 Subject: [PATCH 4/5] table meta data accordion menu - prevent default on accordion clicks - always show table actions, they are more discoverable like that - polish spacing/layout --- .../SqlLab/components/TableElement.jsx | 91 ++++++++++++------- 1 file changed, 58 insertions(+), 33 deletions(-) diff --git a/caravel/assets/javascripts/SqlLab/components/TableElement.jsx b/caravel/assets/javascripts/SqlLab/components/TableElement.jsx index ec2fe45da5f5..50a8668ccffe 100644 --- a/caravel/assets/javascripts/SqlLab/components/TableElement.jsx +++ b/caravel/assets/javascripts/SqlLab/components/TableElement.jsx @@ -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) => { @@ -20,6 +21,7 @@ class TableElement extends React.Component { }); return `SELECT ${cols}\nFROM ${this.props.table.name}`; } + popSelectStar() { const qe = { id: shortid.generate(), @@ -30,24 +32,40 @@ 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 = ( - { this.collapseTable(e); }} > - {this.props.table.name} - + {this.props.table.name} + + ); metadata = (
{this.props.table.columns.map((col) => ( -
- {col.name} - {col.type} +
+
+
{col.name}
+
+
+
{col.type}
+
))}
@@ -55,37 +73,44 @@ class TableElement extends React.Component { ); } else { buttonToggle = ( - { this.expandTable(e); }} > - {this.props.table.name} - + {this.props.table.name} + + ); } return ( -
- {buttonToggle} - - - - - +
+
+
+ {buttonToggle} +
+
+ + + + + +
+
{metadata}
); From 166224822bc1397522e1fc851c7175034bf59082 Mon Sep 17 00:00:00 2001 From: alanna scott Date: Thu, 8 Sep 2016 00:47:19 -0700 Subject: [PATCH 5/5] remove hover effect on table actions --- caravel/assets/javascripts/SqlLab/main.css | 8 -------- 1 file changed, 8 deletions(-) diff --git a/caravel/assets/javascripts/SqlLab/main.css b/caravel/assets/javascripts/SqlLab/main.css index 3f67e0425151..f130a162b43b 100644 --- a/caravel/assets/javascripts/SqlLab/main.css +++ b/caravel/assets/javascripts/SqlLab/main.css @@ -235,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;