diff --git a/caravel/assets/javascripts/SqlLab/components/LeftPane.jsx b/caravel/assets/javascripts/SqlLab/components/LeftPane.jsx
index fc2190a2bf..e4ff051757 100644
--- a/caravel/assets/javascripts/SqlLab/components/LeftPane.jsx
+++ b/caravel/assets/javascripts/SqlLab/components/LeftPane.jsx
@@ -5,8 +5,6 @@ import { bindActionCreators } from 'redux';
import * as Actions from '../actions';
import QueryLink from './QueryLink';
-import 'react-select/dist/react-select.css';
-
const LeftPane = (props) => {
let queryElements;
if (props.workspaceQueries.length > 0) {
diff --git a/caravel/assets/javascripts/SqlLab/components/QueryLink.jsx b/caravel/assets/javascripts/SqlLab/components/QueryLink.jsx
index f59390effb..da9f0b5d21 100644
--- a/caravel/assets/javascripts/SqlLab/components/QueryLink.jsx
+++ b/caravel/assets/javascripts/SqlLab/components/QueryLink.jsx
@@ -5,9 +5,6 @@ import { bindActionCreators } from 'redux';
import * as Actions from '../actions';
import shortid from 'shortid';
-// CSS
-import 'react-select/dist/react-select.css';
-
class QueryLink extends React.Component {
popTab() {
const qe = {
diff --git a/caravel/assets/javascripts/SqlLab/components/SouthPane.jsx b/caravel/assets/javascripts/SqlLab/components/SouthPane.jsx
index 4c078fbf4e..3957f5932a 100644
--- a/caravel/assets/javascripts/SqlLab/components/SouthPane.jsx
+++ b/caravel/assets/javascripts/SqlLab/components/SouthPane.jsx
@@ -1,4 +1,4 @@
-import { Alert, Panel, Tab, Tabs } from 'react-bootstrap';
+import { Alert, Tab, Tabs } from 'react-bootstrap';
import QueryHistory from './QueryHistory';
import ResultSet from './ResultSet';
import React from 'react';
@@ -21,16 +21,12 @@ const SouthPane = function (props) {
return (
-
-
- {results}
-
-
+
+ {results}
+
-
-
-
+
);
diff --git a/caravel/assets/javascripts/SqlLab/components/SqlEditor.jsx b/caravel/assets/javascripts/SqlLab/components/SqlEditor.jsx
index 0c3fab7197..a76f92e290 100644
--- a/caravel/assets/javascripts/SqlLab/components/SqlEditor.jsx
+++ b/caravel/assets/javascripts/SqlLab/components/SqlEditor.jsx
@@ -4,6 +4,7 @@ import React from 'react';
import {
Button,
ButtonGroup,
+ Col,
FormGroup,
InputGroup,
Form,
@@ -12,6 +13,7 @@ import {
Label,
MenuItem,
OverlayTrigger,
+ Row,
Tooltip,
} from 'react-bootstrap';
@@ -29,10 +31,7 @@ import ButtonWithTooltip from './ButtonWithTooltip';
import SouthPane from './SouthPane';
import Timer from './Timer';
-import SqlEditorTopToolbar from './SqlEditorTopToolbar';
-
-// CSS
-import 'react-select/dist/react-select.css';
+import SqlEditorLeft from './SqlEditorLeft';
class SqlEditor extends React.Component {
constructor(props) {
@@ -246,23 +245,29 @@ class SqlEditor extends React.Component {
-
-
- {editorBottomBar}
-
-
+
+
+
+
+
+
+ {editorBottomBar}
+
+
+
+
diff --git a/caravel/assets/javascripts/SqlLab/components/SqlEditorTopToolbar.jsx b/caravel/assets/javascripts/SqlLab/components/SqlEditorLeft.jsx
similarity index 70%
rename from caravel/assets/javascripts/SqlLab/components/SqlEditorTopToolbar.jsx
rename to caravel/assets/javascripts/SqlLab/components/SqlEditorLeft.jsx
index b1cff7f3f2..7543c8ca8e 100644
--- a/caravel/assets/javascripts/SqlLab/components/SqlEditorTopToolbar.jsx
+++ b/caravel/assets/javascripts/SqlLab/components/SqlEditorLeft.jsx
@@ -1,16 +1,13 @@
const $ = window.$ = require('jquery');
import React from 'react';
-import { Label, OverlayTrigger, Popover } from 'react-bootstrap';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import * as Actions from '../actions';
import shortid from 'shortid';
import Select from 'react-select';
-import Link from './Link';
+import TableElement from './TableElement';
-// CSS
-import 'react-select/dist/react-select.css';
class SqlEditorTopToolbar extends React.Component {
constructor(props) {
@@ -123,7 +120,6 @@ class SqlEditorTopToolbar extends React.Component {
schema: qe.schema,
columns: data.columns,
expanded: true,
- showPopup: true,
});
})
.fail(() => {
@@ -135,76 +131,9 @@ class SqlEditorTopToolbar extends React.Component {
}
render() {
const tables = this.props.tables.filter((t) => (t.queryEditorId === this.props.queryEditor.id));
- const tablesEls = tables.map((table) => {
- let cols = [];
- if (table.columns) {
- cols = table.columns.map((col) => (
-
-
{col.name}
-
{col.type}
-
- ));
- }
- const popoverId = 'tblPopover_' + table.name;
- const popoverTop = (
-
- );
- const popover = (
-
- {cols}
-
- );
- return (
-
- );
- });
return (
-
+
-
+
-
+
-
- {tablesEls}
+
+
+ {tables.map((table) =>
)}
);
diff --git a/caravel/assets/javascripts/SqlLab/components/TableWorkspaceElement.jsx b/caravel/assets/javascripts/SqlLab/components/TableElement.jsx
similarity index 69%
rename from caravel/assets/javascripts/SqlLab/components/TableWorkspaceElement.jsx
rename to caravel/assets/javascripts/SqlLab/components/TableElement.jsx
index d43229ad8c..1d256ad341 100644
--- a/caravel/assets/javascripts/SqlLab/components/TableWorkspaceElement.jsx
+++ b/caravel/assets/javascripts/SqlLab/components/TableElement.jsx
@@ -6,10 +6,7 @@ import { bindActionCreators } from 'redux';
import * as Actions from '../actions';
import shortid from 'shortid';
-// CSS
-import 'react-select/dist/react-select.css';
-
-class TableWorkspaceElement extends React.Component {
+class TableElement extends React.Component {
selectStar() {
let cols = '';
this.props.table.columns.forEach((col, i) => {
@@ -31,35 +28,37 @@ class TableWorkspaceElement extends React.Component {
render() {
let metadata = null;
let buttonToggle;
- if (!this.props.table.expanded) {
- buttonToggle = (
-
-
{this.props.table.name}
-
- );
- metadata = this.props.table.columns.map((col) =>
-
- {col.name}
- {col.type}
-
- );
- metadata = (
-
{metadata}
- );
- } else {
+ if (this.props.table.expanded) {
buttonToggle = (
+ {this.props.table.name}
+
+ );
+ metadata = (
+
+ {this.props.table.columns.map((col) => (
+
+ {col.name}
+ {col.type}
+
+ ))}
+
+
+ );
+ } else {
+ buttonToggle = (
+
-
{this.props.table.name}
+ {this.props.table.name}
);
}
@@ -68,13 +67,19 @@ class TableWorkspaceElement extends React.Component {
{buttonToggle}
+
diff --git a/caravel/assets/javascripts/SqlLab/main.css b/caravel/assets/javascripts/SqlLab/main.css
index 127b6c51b6..50498d9387 100644
--- a/caravel/assets/javascripts/SqlLab/main.css
+++ b/caravel/assets/javascripts/SqlLab/main.css
@@ -72,9 +72,18 @@ div.Workspace {
.m-l-1 {
margin-left: 1px;
}
+.m-l-2 {
+ margin-left: 2px;
+}
.m-r-10 {
margin-right: 10px;
}
+.m-l-10 {
+ margin-left: 10px;
+}
+.m-l-5 {
+ margin-left: 5px;
+}
.m-b-10 {
margin-bottom: 10px;
}
@@ -132,7 +141,9 @@ 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;
@@ -217,7 +228,7 @@ div.tablePopover:hover {
.ace_editor {
border: 1px solid #ccc;
- margin: 10px 0;
+ margin: 0px 0px 10px 0px;
}
.Select-menu-outer {
@@ -227,3 +238,11 @@ 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;
+}
diff --git a/caravel/assets/javascripts/css-theme.js b/caravel/assets/javascripts/css-theme.js
index 93722b9141..c03b05acf8 100644
--- a/caravel/assets/javascripts/css-theme.js
+++ b/caravel/assets/javascripts/css-theme.js
@@ -1 +1,2 @@
require('../stylesheets/less/index.less');
+require('../stylesheets/react-select/select.less');
diff --git a/caravel/assets/stylesheets/react-select/select.less b/caravel/assets/stylesheets/react-select/select.less
index 833adb62dd..9fe319e1e3 100644
--- a/caravel/assets/stylesheets/react-select/select.less
+++ b/caravel/assets/stylesheets/react-select/select.less
@@ -22,7 +22,7 @@
@select-input-border-radius: 4px;
@select-input-border-focus: @select-primary-color;
@select-input-border-width: 1px;
-@select-input-height: 36px;
+@select-input-height: 30px;
@select-input-internal-height: (@select-input-height - (@select-input-border-width * 2));
@select-input-placeholder: #aaa;
@select-text-color: #333;