-
-
-
+
+
+
+
+
);
return (
- xt.queryEditorId === qe.id)}
+ queryEditor={qe}
+ editorQueries={this.state.queriesArray}
+ dataPreviewQueries={this.state.dataPreviewQueries}
+ latestQuery={latestQuery}
+ database={database}
+ actions={this.props.actions}
+ hideLeftBar={this.state.hideLeftBar}
+ defaultQueryLimit={this.props.defaultQueryLimit}
+ maxRow={this.props.maxRow}
+ saveQueryWarning={this.props.saveQueryWarning}
+ />
+ )}
);
});
@@ -264,6 +262,7 @@ class TabbedSqlEditors extends React.PureComponent {
activeKey={this.props.tabHistory[this.props.tabHistory.length - 1]}
onSelect={this.handleSelect.bind(this)}
id="a11y-query-editor-tabs"
+ className="SqlEditorTabs"
>
{editors}
}
+ className="addEditorTab"
eventKey="add_tab"
disabled={this.props.offline}
/>
diff --git a/superset/assets/src/SqlLab/main.less b/superset/assets/src/SqlLab/main.less
index 28755a37c3266..89e5d11b9f0d0 100644
--- a/superset/assets/src/SqlLab/main.less
+++ b/superset/assets/src/SqlLab/main.less
@@ -17,9 +17,11 @@
* under the License.
*/
@import "../../stylesheets/less/cosmo/variables.less";
+
body {
overflow: hidden;
}
+
.inlineBlock {
display: inline-block;
}
@@ -32,10 +34,6 @@ body {
.nopadding {
padding: 0px;
}
-.panel.nopadding .panel-body {
- padding: 0px;
-}
-
.loading {
width: 50px;
margin-top: 15px;
@@ -46,27 +44,19 @@ body {
width: 100%;
height: 100%;
}
-.SqlEditor .header {
- padding-top: 5px;
- padding-bottom: 5px;
-}
-
-.scrollbar-container {
- position: relative;
- overflow: hidden;
- width: 100%;
- height: 100%;
-}
-.scrollbar-content {
- position: absolute;
- top: 0px;
- left: 0px;
- right: 0px;
- bottom: 0px;
- overflow: auto;
- margin-right: 0px;
- margin-bottom: 0px;
+.tab-content {
+ height: 100%;
+ position: relative;
+ background-color: #fff;
+
+ > .tab-pane {
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ }
}
.Workspace .btn-sm {
@@ -82,11 +72,6 @@ div.Workspace {
height: 100%;
margin: 0px;
}
-.SqlEditor .clock {
- background-color: orange;
- padding: 5px;
-}
-
.padded {
padding: 10px;
}
@@ -194,10 +179,19 @@ div.Workspace {
background-color: transparent !important;
}
+#a11y-query-editor-tabs {
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+}
+
.SqlLab {
- .tab-content {
- height: 100%;
- }
+ position: absolute;
+ top: 0px;
+ right: 0px;
+ bottom: 0px;
+ left: 0px;
+ padding: 0 10px;
#brace-editor {
height: calc(100% - 51px);
@@ -212,16 +206,46 @@ div.Workspace {
}
}
+.SqlEditorTabs li {
+ a:focus {
+ outline: 0;
+ }
+
+ .ddbtn-tab {
+ font-size: inherit;
+ font-weight: bold;
+
+ &:active {
+ background: none;
+ }
+ }
+
+ .dropdown-toggle {
+ padding-top: 2px;
+ }
+}
+
.SqlEditor {
display: flex;
flex-direction: row;
height: 100%;
+ padding: 10px;
+
+ .clock {
+ background-color: orange;
+ padding: 5px;
+ }
.schemaPane {
- flex-grow: 1;
+ flex: 0 0 300px;
transition: all .3s ease-in-out;
}
+ .queryPane {
+ flex: 1 1 auto;
+ padding-left: 10px;
+ }
+
.schemaPane-enter-done, .schemaPane-exit {
transform: translateX(0);
}
@@ -236,12 +260,6 @@ div.Workspace {
overflow: hidden;
}
- .queryPane {
- flex-grow: 8;
- position: relative;
- margin-left: 15px;
- }
-
.schemaPane-exit-done + .queryPane {
margin-left: 0;
}
@@ -258,6 +276,22 @@ div.Workspace {
}
}
+.SqlEditorLeftBar {
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+
+ .divider {
+ border-bottom: 1px solid #f2f2f2;
+ margin: 15px 0;
+ }
+
+ .scrollbar-container {
+ flex: 1 1 auto;
+ overflow: auto;
+ }
+}
+
.popover{
max-width:400px;
}
@@ -276,8 +310,7 @@ div.tablePopover:hover {
opacity: 1 !important;
}
.ResultSetControls {
- padding-bottom: 3px;
- padding-top: 3px;
+ padding: 8px 0;
}
.ace_editor {
border: 1px solid #ccc;
@@ -294,14 +327,10 @@ div.tablePopover:hover {
margin-top: 5px;
}
-.ace_content {
+.ace_scroller {
background-color: #f4f4f4;
}
-.SouthPane .tab-content {
- padding-top: 10px;
-}
-
.TableElement {
margin-right: 10px;
}
@@ -346,22 +375,29 @@ a.Link {
max-width: 500px;
}
.SouthPane {
- margin-top: 10px;
- position: absolute;
width: 100%;
- overflow: auto;
-}
-.nav-tabs > li.active > a,
-.nav-tabs > li.active > a:hover,
-.nav-tabs > li.active > a:focus {
- padding-bottom: 8px;
-}
-.nav-tabs .dropdown-toggle.btn .caret {
- margin-top: -12px;
+
+ .SouthPaneTabs {
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ }
+ .tab-pane {
+ overflow-y: auto; // scroll the query history pane
+ }
}
+
.nav-tabs .ddbtn-tab {
- margin-left: 5px;
- padding-right: 0;
+ padding: 0;
+ border: none;
+ background: none;
+
+ &:focus {
+ outline: 0;
+ }
+ &:active {
+ box-shadow: none;
+ }
}
.icon-container {
display: inline-block;
diff --git a/superset/assets/src/components/FilterableTable/FilterableTable.jsx b/superset/assets/src/components/FilterableTable/FilterableTable.jsx
index 03691a14685c7..d557c6ab70a47 100644
--- a/superset/assets/src/components/FilterableTable/FilterableTable.jsx
+++ b/superset/assets/src/components/FilterableTable/FilterableTable.jsx
@@ -32,6 +32,8 @@ function getTextWidth(text, font = '12px Roboto') {
return getTextDimension({ text, style: { font } }).width;
}
+const SCROLL_BAR_HEIGHT = 15;
+
const propTypes = {
orderedColumnKeys: PropTypes.array.isRequired,
data: PropTypes.array.isRequired,
@@ -63,6 +65,7 @@ export default class FilterableTable extends PureComponent {
this.totalTableWidth = props.orderedColumnKeys
.map(key => this.widthsForColumnsByKey[key])
.reduce((curr, next) => curr + next);
+ this.totalTableHeight = props.height;
this.state = {
sortBy: null,
@@ -93,9 +96,10 @@ export default class FilterableTable extends PureComponent {
}
fitTableToWidthIfNeeded() {
- const containerWidth = this.container.getBoundingClientRect().width;
- if (containerWidth > this.totalTableWidth) {
- this.totalTableWidth = containerWidth - 2; // accommodates 1px border on container
+ const containerWidth = this.container.clientWidth;
+ if (this.totalTableWidth < containerWidth) {
+ // fit table width if content doesn't fill the width of the container
+ this.totalTableWidth = containerWidth;
}
this.setState({ fitted: true });
}
@@ -178,6 +182,13 @@ export default class FilterableTable extends PureComponent {
.update(list => sortDirection === SortDirection.DESC ? list.reverse() : list);
}
+ let totalTableHeight = height;
+ if (this.container && this.totalTableWidth > this.container.clientWidth) {
+ // exclude the height of the horizontal scroll bar from the height of the table
+ // if the content overflows
+ totalTableHeight -= SCROLL_BAR_HEIGHT;
+ }
+
const rowGetter = ({ index }) => this.getDatum(sortedAndFilteredList, index);
return (
- {this.props.tables.map(table => (
-
+
+
+
{shouldShowReset &&
diff --git a/superset/assets/src/SqlLab/components/TabbedSqlEditors.jsx b/superset/assets/src/SqlLab/components/TabbedSqlEditors.jsx
index c287b700e7a71..a8516f174387b 100644
--- a/superset/assets/src/SqlLab/components/TabbedSqlEditors.jsx
+++ b/superset/assets/src/SqlLab/components/TabbedSqlEditors.jsx
@@ -18,7 +18,7 @@
*/
import React from 'react';
import PropTypes from 'prop-types';
-import { DropdownButton, MenuItem, Tab, Tabs } from 'react-bootstrap';
+import { MenuItem, SplitButton, Tab, Tabs } from 'react-bootstrap';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import URI from 'urijs';
@@ -196,64 +196,62 @@ class TabbedSqlEditors extends React.PureComponent {
}
const state = latestQuery ? latestQuery.state : '';
- const tabTitle = (
-
+ {this.props.tables.map(table => (
+
+ const title = (
+
this.removeQueryEditor(qe)} tabState={state} />{' '}
{qe.title}{' '}
-
-
-
-
-
-
-
+
+ );
+ const tabTitle = (
+
-
+ {isSelected && (
+
- {isSelected && (
- xt.queryEditorId === qe.id)}
- queryEditor={qe}
- editorQueries={this.state.queriesArray}
- dataPreviewQueries={this.state.dataPreviewQueries}
- latestQuery={latestQuery}
- database={database}
- actions={this.props.actions}
- hideLeftBar={this.state.hideLeftBar}
- defaultQueryLimit={this.props.defaultQueryLimit}
- maxRow={this.props.maxRow}
- saveQueryWarning={this.props.saveQueryWarning}
- />
- )}
-
- a:focus {
+ outline: 0;
+ }
+
&-inverse {
.badge {
@@ -31,6 +36,11 @@
color: @brand-primary;
}
}
+
+ b.caret {
+ display: inline-block;
+ padding: 0 5px 18px 5px;
+ }
}
.navbar-inverse {
@@ -92,28 +102,6 @@
color: @gray-darker;
}
-.dropdown-toggle.btn .caret {
- margin-left: 6px;
- margin-top: -21px;
- margin-right: 6px;
-}
-
-.nav-tabs .dropdown-toggle.btn .caret {
- margin-left: -12px;
- margin-top: -10px;
-}
-
-.navbar-nav .caret,
-.panel-title .caret {
- margin-left: 6px;
- margin-top: -24px;
- margin-right: 6px;
-}
-
-
-
-
-
// Typography =================================================================
body {
@@ -408,6 +396,10 @@ a.list-group-item {
// Tabs ==============================================================
+.nav-tabs > li > a {
+ border-top: 3px solid transparent;
+}
+
.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {
background-color: #fff;
font-weight: bold;
diff --git a/superset/assets/stylesheets/less/index.less b/superset/assets/stylesheets/less/index.less
index b9a455acd74c3..b1fc604323c0e 100644
--- a/superset/assets/stylesheets/less/index.less
+++ b/superset/assets/stylesheets/less/index.less
@@ -23,3 +23,22 @@
@import "./cosmo/bootswatch.less";
@stroke-primary: @brand-primary;
+
+body {
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ display: flex;
+ flex-direction: column;
+}
+
+header {
+ flex: 0 1 auto;
+}
+
+#app {
+ flex: 1 1 auto;
+ position: relative;
+}
diff --git a/superset/assets/stylesheets/superset.less b/superset/assets/stylesheets/superset.less
index ebd648b094860..587851ea00e8d 100644
--- a/superset/assets/stylesheets/superset.less
+++ b/superset/assets/stylesheets/superset.less
@@ -21,14 +21,6 @@
@datasource-sql-expression-width: 450px;
-body {
- margin: 0 !important;
-}
-
-.caret {
- border-top: 4px solid;
-}
-
.emph {
font-weight: bold !important;
}
@@ -413,6 +405,13 @@ table.table-no-hover tr:hover {
display: inline;
}
+.form-actions-container button {
+ display: flex;
+ .caret {
+ margin: 0 8px;
+ }
+}
+
.list-container .filter-action {
margin: 10px 10px 0 10px;
padding-bottom: 15px;
diff --git a/superset/templates/superset/basic.html b/superset/templates/superset/basic.html
index 28835d1cec613..6c1ff626c752c 100644
--- a/superset/templates/superset/basic.html
+++ b/superset/templates/superset/basic.html
@@ -69,8 +69,8 @@
{% endblock %}
{% block body %}
-
- 
+
+
+
{% endblock %}