You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@superset.apache.org by cc...@apache.org on 2018/04/19 00:04:57 UTC
[incubator-superset] 02/05: fix rebase error,
clean up css organization and use @less vars
This is an automated email from the ASF dual-hosted git repository.
ccwilliams pushed a commit to branch dashboard-builder
in repository https://gitbox.apache.org/repos/asf/incubator-superset.git
commit 3f32c44d046d0d905cfebc93e9da1922bc2765d4
Author: Chris Williams <ch...@airbnb.com>
AuthorDate: Mon Mar 5 17:40:45 2018 -0800
fix rebase error, clean up css organization and use @less vars
---
superset/assets/images/favicon.png | Bin 18166 -> 6927 bytes
superset/assets/images/superset-logo@2x.png | Bin 0 -> 4132 bytes
.../dashboard/v2/components/Dashboard.jsx | 1 +
.../dashboard/v2/components/DashboardBuilder.jsx | 2 -
.../dashboard/v2/components/DashboardGrid.jsx | 2 -
.../dashboard/v2/components/gridComponents/Row.jsx | 1 -
.../v2/components/gridComponents/Spacer.jsx | 6 -
.../v2/components/gridComponents/components.css | 455 ---------------------
.../v2/components/gridComponents/index.js | 2 -
.../v2/components/resizable/ResizableContainer.jsx | 2 -
.../dashboard/v2/stylesheets/buttons.less | 17 +
.../dashboard/v2/stylesheets/components/chart.less | 21 +
.../v2/stylesheets/components/column.less | 21 +
.../v2/stylesheets/components/divider.less | 24 ++
.../v2/stylesheets/components/header.less | 26 ++
.../dashboard/v2/stylesheets/components/index.less | 8 +
.../v2/stylesheets/components/new-component.less | 38 ++
.../dashboard/v2/stylesheets/components/row.less | 39 ++
.../v2/stylesheets/components/spacer.less | 13 +
.../dashboard/v2/stylesheets/components/tabs.less | 65 +++
.../dnd/dnd.css => stylesheets/dnd.less} | 0
.../grid.css => stylesheets/grid.less} | 10 +-
.../dashboard/v2/stylesheets/hover-menu.less | 44 ++
.../dashboard/v2/stylesheets/index.less | 9 +
.../dashboard/v2/stylesheets/popover-menu.less | 116 ++++++
.../resizable.css => stylesheets/resizable.less} | 16 +-
.../dashboard/v2/stylesheets/variables.less | 7 +
.../dashboard/components/DashboardContainer.jsx | 24 +-
superset/assets/stylesheets/superset.less | 11 -
superset/config.py | 2 +-
superset/templates/appbuilder/navbar.html | 3 +-
31 files changed, 480 insertions(+), 505 deletions(-)
diff --git a/superset/assets/images/favicon.png b/superset/assets/images/favicon.png
index f03cd5c..55316fa 100644
Binary files a/superset/assets/images/favicon.png and b/superset/assets/images/favicon.png differ
diff --git a/superset/assets/images/superset-logo@2x.png b/superset/assets/images/superset-logo@2x.png
new file mode 100644
index 0000000..839f617
Binary files /dev/null and b/superset/assets/images/superset-logo@2x.png differ
diff --git a/superset/assets/javascripts/dashboard/v2/components/Dashboard.jsx b/superset/assets/javascripts/dashboard/v2/components/Dashboard.jsx
index 5936006..a2ed1a0 100644
--- a/superset/assets/javascripts/dashboard/v2/components/Dashboard.jsx
+++ b/superset/assets/javascripts/dashboard/v2/components/Dashboard.jsx
@@ -6,6 +6,7 @@ import StaticDashboard from './StaticDashboard';
import DashboardHeader from './DashboardHeader';
import '../../../../stylesheets/dashboard-v2.css';
+import '../stylesheets/index.less';
const propTypes = {
actions: PropTypes.shape({
diff --git a/superset/assets/javascripts/dashboard/v2/components/DashboardBuilder.jsx b/superset/assets/javascripts/dashboard/v2/components/DashboardBuilder.jsx
index 94069b7..1878db6 100644
--- a/superset/assets/javascripts/dashboard/v2/components/DashboardBuilder.jsx
+++ b/superset/assets/javascripts/dashboard/v2/components/DashboardBuilder.jsx
@@ -7,8 +7,6 @@ import cx from 'classnames';
import BuilderComponentPane from './BuilderComponentPane';
import DashboardGrid from '../containers/DashboardGrid';
-import './dnd/dnd.css';
-
const propTypes = {
editMode: PropTypes.bool,
};
diff --git a/superset/assets/javascripts/dashboard/v2/components/DashboardGrid.jsx b/superset/assets/javascripts/dashboard/v2/components/DashboardGrid.jsx
index 6cbcee5..c92161a 100644
--- a/superset/assets/javascripts/dashboard/v2/components/DashboardGrid.jsx
+++ b/superset/assets/javascripts/dashboard/v2/components/DashboardGrid.jsx
@@ -12,8 +12,6 @@ import {
GRID_COLUMN_COUNT,
} from '../util/constants';
-import './gridComponents/grid.css';
-
const propTypes = {
dashboard: PropTypes.object.isRequired,
updateComponents: PropTypes.func.isRequired,
diff --git a/superset/assets/javascripts/dashboard/v2/components/gridComponents/Row.jsx b/superset/assets/javascripts/dashboard/v2/components/gridComponents/Row.jsx
index 632a3f3..3386f8c 100644
--- a/superset/assets/javascripts/dashboard/v2/components/gridComponents/Row.jsx
+++ b/superset/assets/javascripts/dashboard/v2/components/gridComponents/Row.jsx
@@ -97,7 +97,6 @@ class Row extends React.PureComponent {
} = this.props;
const rowItems = [];
- console.log('render row', rowComponent);
// this adds a gutter between each child in the row.
(rowComponent.children || []).forEach((id, childIndex) => {
diff --git a/superset/assets/javascripts/dashboard/v2/components/gridComponents/Spacer.jsx b/superset/assets/javascripts/dashboard/v2/components/gridComponents/Spacer.jsx
index 4b54edd..faac589 100644
--- a/superset/assets/javascripts/dashboard/v2/components/gridComponents/Spacer.jsx
+++ b/superset/assets/javascripts/dashboard/v2/components/gridComponents/Spacer.jsx
@@ -3,16 +3,10 @@ import PropTypes from 'prop-types';
import DeleteComponentButton from '../DeleteComponentButton';
import DragDroppable from '../dnd/DragDroppable';
-// import DragHandle from '../dnd/DragHandle';
import HoverMenu from '../menu/HoverMenu';
import ResizableContainer from '../resizable/ResizableContainer';
import { componentShape } from '../../util/propShapes';
-import {
-// GRID_MIN_COLUMN_COUNT,
- // GRID_MIN_ROW_UNITS,
-} from '../../util/constants';
-
const propTypes = {
id: PropTypes.string.isRequired,
parentId: PropTypes.string.isRequired,
diff --git a/superset/assets/javascripts/dashboard/v2/components/gridComponents/components.css b/superset/assets/javascripts/dashboard/v2/components/gridComponents/components.css
deleted file mode 100644
index a88ea09..0000000
--- a/superset/assets/javascripts/dashboard/v2/components/gridComponents/components.css
+++ /dev/null
@@ -1,455 +0,0 @@
-/* Header */
-.dashboard-component-header {
- width: 100%;
- line-height: 1em;
- font-weight: 700;
- background-color: inherit;
- padding: 16px 0;
- color: #263238;
-}
-
-.header-small {
- font-size: 16px;
-}
-
-.header-medium {
- font-size: 22px;
-}
-
-.header-large {
- font-size: 32px;
-}
-
- .dragdroppable-row .dragdroppable-row .dashboard-component-header,
- .dragdroppable-row .dragdroppable-row .dashboard-component-divider {
- padding-left: 16px;
- padding-right: 16px;
- }
-
-/* Chart */
-.dashboard-component-chart {
- width: 100%;
- height: 100%;
- color: #879399;
- background-color: #fff;
- padding: 16px;
- display: flex;
- align-items: center;
- justify-content: center;
-}
-
-.dashboard-component-chart .fa {
- font-size: 100px;
- opacity: 0.3;
-}
-
-.grid-container--resizing .dashboard-component-chart,
-.dashboard-builder--dragging .dashboard-component-chart,
-.dashboard-component-chart:hover {
- box-shadow: inset 0 0 0 1px #CFD8DC;
-}
-
-/* Divider */
-.dashboard-component-divider {
- width: 100%;
- padding: 24px 0; /* this is padding not margin to enable a larger mouse target */
- background-color: transparent;
-}
-
-.dashboard-component-divider:after {
- content: "";
- height: 1px;
- width: 100%;
- background-color: #CFD8DC;
- display: block;
-}
-
-.new-component-placeholder.divider-placeholder:after {
- content: "";
- height: 2px;
- width: 100%;
- background-color: #CFD8DC;
-}
-
-.dragdroppable .dashboard-component-divider {
- cursor: move;
-}
-
-/* Tabs -- this overwrites Superset bootstrap theme tab styling */
-.dashboard-component-tabs {
- width: 100%;
- background-color: white;
-}
-.dashboard-component-tabs .dashboard-component-tabs-content {
- min-height: 48px;
- margin-top: 1px;
-}
-
-.dashboard-component-tabs .nav-tabs {
- border-bottom: none;
-}
-
-/* by moving padding from <a/> to <li/> we can restrict the selected tab indicator to text width */
-.dashboard-component-tabs .nav-tabs > li {
- padding: 0 16px;
-}
-
-.dashboard-component-tabs .nav-tabs > li > a {
- color: #263238;
- border: none;
- padding: 12px 0 14px 0;
-}
-
-.dashboard-component-tabs .nav-tabs > li.active > a {
- border: none;
-}
-
-.dashboard-component-tabs .nav-tabs > li.active > a:after {
- content: "";
- position: absolute;
- height: 3px;
- width: 100%;
- bottom: 0;
- background: linear-gradient(to right, #E32464, #2C2261);
-}
-
-.dashboard-component-tabs .nav-tabs > li > a:hover {
- border: none;
- background: inherit;
- color: #000000;
-}
-
-
-.dashboard-component-tabs .nav-tabs > li > a:focus {
- outline: none;
- background: #fff;
-}
-
-.dashboard-component-tabs .nav-tabs > li .dragdroppable-tab {
- cursor: move;
-}
-
-.dashboard-component-tabs .nav-tabs > li .drop-indicator {
- height: 40px !important;
- top: -10px !important;
- opacity: 0.5;
-}
-
-.dashboard-component-tabs .fa-plus-square {
- background: linear-gradient(135deg, #E32464, #2C2261);
- -webkit-background-clip: text;
- -webkit-text-fill-color: transparent;
- display: initial;
- font-size: 16px;
-}
-
-/* New components */
-.new-component {
- display: flex;
- flex-direction: row;
- flex-wrap: nowrap;
- align-items: center;
- padding: 16px;
- background: white;
-}
-
-.new-component-placeholder {
- position: relative;
- background: #f5f5f5;
- width: 40px;
- height: 40px;
- margin-right: 16px;
- box-shadow: 0 0 1px #fff;
- display: flex;
- align-items: center;
- justify-content: center;
- color: #aaa;
- font-size: 1.5em;
-}
-
-/* Spacer */
-.grid-container {
- flex-grow: 1;
- min-width: 66%;
- margin: 24px 32px;
- height: 100%;
- position: relative;
-}
-
-.new-component-placeholder.spacer-placeholder {
- font-size: 1em;
-}
-
-.new-component-placeholder.fa-window-restore {
- font-size: 1em;
-}
-
-.new-component-placeholder.spacer-placeholder:after {
- content: "";
- position: absolute;
- height: 60%;
- width: 60%;
- border: 1px dashed #aaa;
-}
-
-/* columns and rows */
-.grid-column {
- width: 100%;
- min-height: 56px;
-}
-
-.grid-column > .hover-menu--top {
- top: -20px;
-}
-
-.grid-row {
- display: flex;
- flex-direction: row;
- flex-wrap: wrap;
- align-items: flex-start;
- width: 100%;
- height: fit-content;
- background-color: transparent;
-}
-
-.grid-row--transparent {
- background-color: transparent;
-}
-
-.grid-row--white {
- background-color: #fff;
-}
-
-.dashboard-component-header.grid-row--white {
- padding-left: 16px;
-}
-
-.grid-row.grid-row--empty {
- align-items: center; /* this centers the empty note content */
- height: 80px;
-}
-
-.grid-row--empty:after {
- position: absolute;
- top: 0;
- left: 0;
- content: "Empty row";
- display: flex;
- align-items: center;
- justify-content: center;
- width: 100%;
- height: 100%;
- color: #aaa;
-}
-
-.grid-column--empty:after {
- content: "Empty column";
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- display: flex;
- align-items: center;
- justify-content: center;
- color: #CFD8DC;
-}
-
-/* spacer */
-.grid-spacer {
- width: 100%;
- height: 100%;
- background-color: transparent;
-}
-
-.dragdroppable .grid-spacer {
- cursor: move;
-}
-
-.dragdroppable:hover .grid-spacer {
- box-shadow: inset 0 0 0 1px #CFD8DC;
-}
-
-/* popover menu */
-.with-popover-menu {
- position: relative;
- outline: none;
-}
-
-.grid-row.grid-row--empty .with-popover-menu { /* drop indicator doesn't show up without this */
- width: 100%;
- height: 100%;
-}
-
-.with-popover-menu--focused:after {
- content: "";
- position: absolute;
- top: 1;
- left: -1;
- width: 100%;
- height: 100%;
- box-shadow: inset 0 0 0 2px #44C0FF;
- pointer-events: none;
- z-index: 9;
-}
-
-.popover-menu {
- position: absolute;
- display: flex;
- flex-direction: row;
- align-items: center;
- flex-wrap: nowrap;
- left: 1px;
- top: -42px;
- height: 40px;
- padding: 0 16px;
- background: #fff;
- box-shadow: 0 1px 2px 1px rgba(0, 0, 0, 0.2);
- font-size: 14px;
- cursor: default;
- z-index: 10;
-}
-
-.popover-menu .menu-item {
- display: flex;
- flex-direction: row;
- align-items: center;
-}
-
-/* vertical spacer after each menu item */
-.popover-menu .menu-item:not(:only-child):not(:last-child):after {
- content: "";
- width: 1;
- height: 100%;
- background: #CFD8DC;
- margin: 0 16px;
-}
-
-.popover-menu .popover-dropdown.btn {
- border: none;
- padding: 0;
- font-size: inherit;
- color: #000;
-}
-
-.popover-menu .popover-dropdown.btn:hover,
-.popover-menu .popover-dropdown.btn:active,
-.popover-menu .popover-dropdown.btn:focus,
-.hover-dropdown .btn:hover,
-.hover-dropdown .btn:active,
-.hover-dropdown .btn:focus {
- background: initial;
- box-shadow: none;
-}
-
-.hover-dropdown li.dropdown-item:hover a,
-.popover-menu li.dropdown-item:hover a {
- background: #CFD8DC;
-}
-
-.popover-dropdown .caret { /* without this the caret doesn't take up full width / is clipped */
- width: auto;
- border-top-color: transparent;
-}
-
-
-.hover-dropdown li.dropdown-item.active a,
-.popover-menu li.dropdown-item.active a {
- background: #fff;
- font-weight: bold;
- color: #000;
-}
-
-/* row style menu */
-.row-style-option {
- display: inline-block;
-}
-
-.row-style-option:before {
- content: "";
- width: 1em;
- height: 1em;
- margin-right: 8px;
- display: inline-block;
- vertical-align: middle;
-}
-
-.row-style-option.grid-row--white {
- padding-left: 0;
- background: transparent;
-}
-
-.row-style-option.grid-row--white:before {
- background: #fff;
- border: 1px solid #CFD8DC;
-}
-
-.row-style-option.grid-row--transparent:before {
- background: #CFD8DC;
-}
-
-/* hover menu */
-.hover-menu {
- opacity: 0;
- position: absolute;
- z-index: 2;
-}
-
-.hover-menu--left {
- width: 20px;
- height: 100%;
- top: 0;
- left: -20px;
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: center;
-}
-
-.hover-menu--left > :nth-child(n):not(:only-child):not(:last-child) {
- margin-bottom: 8px;
-}
-
-.dragdroppable-row .dragdroppable-row .hover-menu--left {
- left: 1px;
-}
-
-.hover-menu--top {
- width: 100%;
- height: 20px;
- top: 0;
- left: 0;
- display: flex;
- flex-direction: row;
- justify-content: center;
- align-items: center;
-}
-
-.hover-menu--top > :nth-child(n):not(:only-child):not(:last-child) {
- margin-right: 8px;
-}
-
-.dragdroppable:hover .hover-menu,
-.dragdroppable .hover-menu:hover {
- opacity: 1;
-}
-
-
-/* Menu fa buttons */
-.icon-button {
- color: #879399;
- font-size: 1em;
- display: flex;
- flex-direction: row;
- align-items: center;
- justify-content: center;
- outline: none;
-}
-
-.icon-button:hover,
-.icon-button:active,
-.icon-button:focus {
- color: #484848;
- outline: none;
- text-decoration: none;
-}
diff --git a/superset/assets/javascripts/dashboard/v2/components/gridComponents/index.js b/superset/assets/javascripts/dashboard/v2/components/gridComponents/index.js
index c84864e..3a3fad5 100644
--- a/superset/assets/javascripts/dashboard/v2/components/gridComponents/index.js
+++ b/superset/assets/javascripts/dashboard/v2/components/gridComponents/index.js
@@ -1,5 +1,3 @@
-import './components.css';
-
import {
CHART_TYPE,
COLUMN_TYPE,
diff --git a/superset/assets/javascripts/dashboard/v2/components/resizable/ResizableContainer.jsx b/superset/assets/javascripts/dashboard/v2/components/resizable/ResizableContainer.jsx
index bd590ae..5e43678 100644
--- a/superset/assets/javascripts/dashboard/v2/components/resizable/ResizableContainer.jsx
+++ b/superset/assets/javascripts/dashboard/v2/components/resizable/ResizableContainer.jsx
@@ -11,8 +11,6 @@ import {
GRID_GUTTER_SIZE,
} from '../../util/constants';
-import './resizable.css';
-
const propTypes = {
id: PropTypes.string.isRequired,
children: PropTypes.node,
diff --git a/superset/assets/javascripts/dashboard/v2/stylesheets/buttons.less b/superset/assets/javascripts/dashboard/v2/stylesheets/buttons.less
new file mode 100644
index 0000000..a8dd661
--- /dev/null
+++ b/superset/assets/javascripts/dashboard/v2/stylesheets/buttons.less
@@ -0,0 +1,17 @@
+.icon-button {
+ color: @gray;
+ font-size: 1em;
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: center;
+ outline: none;
+}
+
+.icon-button:hover,
+.icon-button:active,
+.icon-button:focus {
+ color: @almost-black;
+ outline: none;
+ text-decoration: none;
+}
diff --git a/superset/assets/javascripts/dashboard/v2/stylesheets/components/chart.less b/superset/assets/javascripts/dashboard/v2/stylesheets/components/chart.less
new file mode 100644
index 0000000..2bdf3cc
--- /dev/null
+++ b/superset/assets/javascripts/dashboard/v2/stylesheets/components/chart.less
@@ -0,0 +1,21 @@
+.dashboard-component-chart {
+ width: 100%;
+ height: 100%;
+ color: @gray-dark;
+ background-color: white;
+ padding: 16px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.dashboard-component-chart .fa {
+ font-size: 100px;
+ opacity: 0.3;
+}
+
+.grid-container--resizing .dashboard-component-chart,
+.dashboard-builder--dragging .dashboard-component-chart,
+.dashboard-component-chart:hover {
+ box-shadow: inset 0 0 0 1px @gray-light;
+}
diff --git a/superset/assets/javascripts/dashboard/v2/stylesheets/components/column.less b/superset/assets/javascripts/dashboard/v2/stylesheets/components/column.less
new file mode 100644
index 0000000..b96b14b
--- /dev/null
+++ b/superset/assets/javascripts/dashboard/v2/stylesheets/components/column.less
@@ -0,0 +1,21 @@
+.grid-column {
+ width: 100%;
+ min-height: 56px;
+}
+
+.grid-column > .hover-menu--top {
+ top: -20px;
+}
+
+.grid-column--empty:after {
+ content: "Empty column";
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ color: @gray-light;
+}
diff --git a/superset/assets/javascripts/dashboard/v2/stylesheets/components/divider.less b/superset/assets/javascripts/dashboard/v2/stylesheets/components/divider.less
new file mode 100644
index 0000000..f1d3d86
--- /dev/null
+++ b/superset/assets/javascripts/dashboard/v2/stylesheets/components/divider.less
@@ -0,0 +1,24 @@
+.dashboard-component-divider {
+ width: 100%;
+ padding: 24px 0; /* this is padding not margin to enable a larger mouse target */
+ background-color: transparent;
+}
+
+.dashboard-component-divider:after {
+ content: "";
+ height: 1px;
+ width: 100%;
+ background-color: @gray-light;
+ display: block;
+}
+
+.new-component-placeholder.divider-placeholder:after {
+ content: "";
+ height: 2px;
+ width: 100%;
+ background-color: @gray-light;
+}
+
+.dragdroppable .dashboard-component-divider {
+ cursor: move;
+}
diff --git a/superset/assets/javascripts/dashboard/v2/stylesheets/components/header.less b/superset/assets/javascripts/dashboard/v2/stylesheets/components/header.less
new file mode 100644
index 0000000..77066da
--- /dev/null
+++ b/superset/assets/javascripts/dashboard/v2/stylesheets/components/header.less
@@ -0,0 +1,26 @@
+.dashboard-component-header {
+ width: 100%;
+ line-height: 1em;
+ font-weight: 700;
+ background-color: inherit;
+ padding: 16px 0;
+ color: @almost-black;
+}
+
+.header-small {
+ font-size: 16px;
+}
+
+.header-medium {
+ font-size: 22px;
+}
+
+.header-large {
+ font-size: 32px;
+}
+
+.dragdroppable-row .dragdroppable-row .dashboard-component-header,
+.dragdroppable-row .dragdroppable-row .dashboard-component-divider {
+ padding-left: 16px;
+ padding-right: 16px;
+}
diff --git a/superset/assets/javascripts/dashboard/v2/stylesheets/components/index.less b/superset/assets/javascripts/dashboard/v2/stylesheets/components/index.less
new file mode 100644
index 0000000..5da54e5
--- /dev/null
+++ b/superset/assets/javascripts/dashboard/v2/stylesheets/components/index.less
@@ -0,0 +1,8 @@
+@import './chart.less';
+@import './column.less';
+@import './divider.less';
+@import './header.less';
+@import './new-component.less';
+@import './row.less';
+@import './spacer.less';
+@import './tabs.less';
diff --git a/superset/assets/javascripts/dashboard/v2/stylesheets/components/new-component.less b/superset/assets/javascripts/dashboard/v2/stylesheets/components/new-component.less
new file mode 100644
index 0000000..31e84cb
--- /dev/null
+++ b/superset/assets/javascripts/dashboard/v2/stylesheets/components/new-component.less
@@ -0,0 +1,38 @@
+.new-component {
+ display: flex;
+ flex-direction: row;
+ flex-wrap: nowrap;
+ align-items: center;
+ padding: 16px;
+ background: white;
+}
+
+.new-component-placeholder {
+ position: relative;
+ background: @gray-bg;
+ width: 40px;
+ height: 40px;
+ margin-right: 16px;
+ box-shadow: 0 0 1px white;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ color: @gray;
+ font-size: 1.5em;
+}
+
+.new-component-placeholder.spacer-placeholder {
+ font-size: 1em;
+}
+
+.new-component-placeholder.fa-window-restore {
+ font-size: 1em;
+}
+
+.new-component-placeholder.spacer-placeholder:after {
+ content: "";
+ position: absolute;
+ height: 60%;
+ width: 60%;
+ border: 1px dashed @gray;
+}
diff --git a/superset/assets/javascripts/dashboard/v2/stylesheets/components/row.less b/superset/assets/javascripts/dashboard/v2/stylesheets/components/row.less
new file mode 100644
index 0000000..8859926
--- /dev/null
+++ b/superset/assets/javascripts/dashboard/v2/stylesheets/components/row.less
@@ -0,0 +1,39 @@
+.grid-row {
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ align-items: flex-start;
+ width: 100%;
+ height: fit-content;
+ background-color: transparent;
+}
+
+.grid-row--transparent {
+ background-color: transparent;
+}
+
+.grid-row--white {
+ background-color: white;
+}
+
+.dashboard-component-header.grid-row--white {
+ padding-left: 16px;
+}
+
+.grid-row.grid-row--empty {
+ align-items: center; /* this centers the empty note content */
+ height: 80px;
+}
+
+.grid-row--empty:after {
+ position: absolute;
+ top: 0;
+ left: 0;
+ content: "Empty row";
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 100%;
+ height: 100%;
+ color: @gray;
+}
diff --git a/superset/assets/javascripts/dashboard/v2/stylesheets/components/spacer.less b/superset/assets/javascripts/dashboard/v2/stylesheets/components/spacer.less
new file mode 100644
index 0000000..8716c21
--- /dev/null
+++ b/superset/assets/javascripts/dashboard/v2/stylesheets/components/spacer.less
@@ -0,0 +1,13 @@
+.grid-spacer {
+ width: 100%;
+ height: 100%;
+ background-color: transparent;
+}
+
+.dragdroppable .grid-spacer {
+ cursor: move;
+}
+
+.dragdroppable:hover .grid-spacer {
+ box-shadow: inset 0 0 0 1px @gray-light;
+}
diff --git a/superset/assets/javascripts/dashboard/v2/stylesheets/components/tabs.less b/superset/assets/javascripts/dashboard/v2/stylesheets/components/tabs.less
new file mode 100644
index 0000000..23e0469
--- /dev/null
+++ b/superset/assets/javascripts/dashboard/v2/stylesheets/components/tabs.less
@@ -0,0 +1,65 @@
+.dashboard-component-tabs {
+ width: 100%;
+ background-color: white;
+}
+.dashboard-component-tabs .dashboard-component-tabs-content {
+ min-height: 48px;
+ margin-top: 1px;
+}
+
+.dashboard-component-tabs .nav-tabs {
+ border-bottom: none;
+}
+
+/* by moving padding from <a/> to <li/> we can restrict the selected tab indicator to text width */
+.dashboard-component-tabs .nav-tabs > li {
+ padding: 0 16px;
+}
+
+.dashboard-component-tabs .nav-tabs > li > a {
+ color: #263238;
+ border: none;
+ padding: 12px 0 14px 0;
+}
+
+.dashboard-component-tabs .nav-tabs > li.active > a {
+ border: none;
+}
+
+.dashboard-component-tabs .nav-tabs > li.active > a:after {
+ content: "";
+ position: absolute;
+ height: 3px;
+ width: 100%;
+ bottom: 0;
+ background: linear-gradient(to right, #E32464, #2C2261);
+}
+
+.dashboard-component-tabs .nav-tabs > li > a:hover {
+ border: none;
+ background: inherit;
+ color: #000000;
+}
+
+.dashboard-component-tabs .nav-tabs > li > a:focus {
+ outline: none;
+ background: #fff;
+}
+
+.dashboard-component-tabs .nav-tabs > li .dragdroppable-tab {
+ cursor: move;
+}
+
+.dashboard-component-tabs .nav-tabs > li .drop-indicator {
+ height: 40px !important;
+ top: -10px !important;
+ opacity: 0.5;
+}
+
+.dashboard-component-tabs .fa-plus-square {
+ background: linear-gradient(135deg, #E32464, #2C2261);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ display: initial;
+ font-size: 16px;
+}
diff --git a/superset/assets/javascripts/dashboard/v2/components/dnd/dnd.css b/superset/assets/javascripts/dashboard/v2/stylesheets/dnd.less
similarity index 100%
rename from superset/assets/javascripts/dashboard/v2/components/dnd/dnd.css
rename to superset/assets/javascripts/dashboard/v2/stylesheets/dnd.less
diff --git a/superset/assets/javascripts/dashboard/v2/components/gridComponents/grid.css b/superset/assets/javascripts/dashboard/v2/stylesheets/grid.less
similarity index 65%
rename from superset/assets/javascripts/dashboard/v2/components/gridComponents/grid.css
rename to superset/assets/javascripts/dashboard/v2/stylesheets/grid.less
index 6119eab..c26ee0a 100644
--- a/superset/assets/javascripts/dashboard/v2/components/gridComponents/grid.css
+++ b/superset/assets/javascripts/dashboard/v2/stylesheets/grid.less
@@ -1,3 +1,11 @@
+.grid-container {
+ flex-grow: 1;
+ min-width: 66%;
+ margin: 24px 32px;
+ height: 100%;
+ position: relative;
+}
+
/* Editing guides */
.grid-column-guide {
position: absolute;
@@ -12,6 +20,6 @@
position: absolute;
left: 0;
height: 1;
- background-color: #44C0FF;
+ background-color: var(--indicator-color);
pointer-events: none;
}
diff --git a/superset/assets/javascripts/dashboard/v2/stylesheets/hover-menu.less b/superset/assets/javascripts/dashboard/v2/stylesheets/hover-menu.less
new file mode 100644
index 0000000..bc2935c
--- /dev/null
+++ b/superset/assets/javascripts/dashboard/v2/stylesheets/hover-menu.less
@@ -0,0 +1,44 @@
+.hover-menu {
+ opacity: 0;
+ position: absolute;
+ z-index: 2;
+}
+
+.hover-menu--left {
+ width: 20px;
+ height: 100%;
+ top: 0;
+ left: -20px;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+}
+
+.hover-menu--left > :nth-child(n):not(:only-child):not(:last-child) {
+ margin-bottom: 8px;
+}
+
+.dragdroppable-row .dragdroppable-row .hover-menu--left {
+ left: 1px;
+}
+
+.hover-menu--top {
+ width: 100%;
+ height: 20px;
+ top: 0;
+ left: 0;
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+}
+
+.hover-menu--top > :nth-child(n):not(:only-child):not(:last-child) {
+ margin-right: 8px;
+}
+
+.dragdroppable:hover .hover-menu,
+.dragdroppable .hover-menu:hover {
+ opacity: 1;
+}
diff --git a/superset/assets/javascripts/dashboard/v2/stylesheets/index.less b/superset/assets/javascripts/dashboard/v2/stylesheets/index.less
new file mode 100644
index 0000000..125c894
--- /dev/null
+++ b/superset/assets/javascripts/dashboard/v2/stylesheets/index.less
@@ -0,0 +1,9 @@
+@import './variables.less';
+
+@import './buttons.less';
+@import './dnd.less';
+@import './grid.less';
+@import './hover-menu.less';
+@import './popover-menu.less';
+@import './resizable.less';
+@import './components/index.less';
diff --git a/superset/assets/javascripts/dashboard/v2/stylesheets/popover-menu.less b/superset/assets/javascripts/dashboard/v2/stylesheets/popover-menu.less
new file mode 100644
index 0000000..f68cf13
--- /dev/null
+++ b/superset/assets/javascripts/dashboard/v2/stylesheets/popover-menu.less
@@ -0,0 +1,116 @@
+.with-popover-menu {
+ position: relative;
+ outline: none;
+}
+
+.grid-row.grid-row--empty .with-popover-menu { /* drop indicator doesn't show up without this */
+ width: 100%;
+ height: 100%;
+}
+
+.with-popover-menu--focused:after {
+ content: "";
+ position: absolute;
+ top: 1;
+ left: -1;
+ width: 100%;
+ height: 100%;
+ box-shadow: inset 0 0 0 2px @indicator-color;
+ pointer-events: none;
+ z-index: 9;
+}
+
+.popover-menu {
+ position: absolute;
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ flex-wrap: nowrap;
+ left: 1px;
+ top: -42px;
+ height: 40px;
+ padding: 0 16px;
+ background: white;
+ box-shadow: 0 1px 2px 1px rgba(0, 0, 0, 0.2);
+ font-size: 14px;
+ cursor: default;
+ z-index: 10;
+}
+
+.popover-menu .menu-item {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+}
+
+/* vertical spacer after each menu item */
+.popover-menu .menu-item:not(:only-child):not(:last-child):after {
+ content: "";
+ width: 1;
+ height: 100%;
+ background: @gray-light;
+ margin: 0 16px;
+}
+
+.popover-menu .popover-dropdown.btn {
+ border: none;
+ padding: 0;
+ font-size: inherit;
+ color: @almost-black;
+}
+
+.popover-menu .popover-dropdown.btn:hover,
+.popover-menu .popover-dropdown.btn:active,
+.popover-menu .popover-dropdown.btn:focus,
+.hover-dropdown .btn:hover,
+.hover-dropdown .btn:active,
+.hover-dropdown .btn:focus {
+ background: initial;
+ box-shadow: none;
+}
+
+.hover-dropdown li.dropdown-item:hover a,
+.popover-menu li.dropdown-item:hover a {
+ background: @gray-light;
+}
+
+.popover-dropdown .caret { /* without this the caret doesn't take up full width / is clipped */
+ width: auto;
+ border-top-color: transparent;
+}
+
+
+.hover-dropdown li.dropdown-item.active a,
+.popover-menu li.dropdown-item.active a {
+ background: white;
+ font-weight: bold;
+ color: @almost-black;
+}
+
+/* row style menu */
+.row-style-option {
+ display: inline-block;
+}
+
+.row-style-option:before {
+ content: "";
+ width: 1em;
+ height: 1em;
+ margin-right: 8px;
+ display: inline-block;
+ vertical-align: middle;
+}
+
+.row-style-option.grid-row--white {
+ padding-left: 0;
+ background: transparent;
+}
+
+.row-style-option.grid-row--white:before {
+ background: white;
+ border: 1px solid @gray-light;
+}
+
+.row-style-option.grid-row--transparent:before {
+ background: @gray-light;
+}
diff --git a/superset/assets/javascripts/dashboard/v2/components/resizable/resizable.css b/superset/assets/javascripts/dashboard/v2/stylesheets/resizable.less
similarity index 81%
rename from superset/assets/javascripts/dashboard/v2/components/resizable/resizable.css
rename to superset/assets/javascripts/dashboard/v2/stylesheets/resizable.less
index 1d5de72..0ccd2f8 100644
--- a/superset/assets/javascripts/dashboard/v2/components/resizable/resizable.css
+++ b/superset/assets/javascripts/dashboard/v2/stylesheets/resizable.less
@@ -11,7 +11,7 @@
left: 0;
width: 100%;
height: 100%;
- box-shadow: inset 0 0 0 2px #44C0FF;
+ box-shadow: inset 0 0 0 2px @indicator-color;
}
.resize-handle {
@@ -27,8 +27,8 @@
position: absolute;
border: solid;
border-width: 0 1.5px 1.5px 0;
- border-right-color: #879399;
- border-bottom-color: #879399;
+ border-right-color: @gray;
+ border-bottom-color: @gray;
right: 16;
bottom: 16;
width: 8px;
@@ -41,8 +41,8 @@
right: -2px;
top: 47%;
position: absolute;
- border-left: 1px solid #879399;
- border-right: 1px solid #879399;
+ border-left: 1px solid @gray;
+ border-right: 1px solid @gray;
}
.grid-spacer + span .resize-handle--right {
@@ -55,12 +55,12 @@
bottom: 10px;
left: 47%;
position: absolute;
- border-top: 1px solid #879399;
- border-bottom: 1px solid #879399;
+ border-top: 1px solid @gray;
+ border-bottom: 1px solid @gray;
}
.grid-resizable-container--resizing > span .resize-handle {
- border-color: #44C0FF;
+ border-color: @indicator-color;
}
/* re-resizable sets an empty div to 100% width and height, which doesn't
diff --git a/superset/assets/javascripts/dashboard/v2/stylesheets/variables.less b/superset/assets/javascripts/dashboard/v2/stylesheets/variables.less
new file mode 100644
index 0000000..f3a61df
--- /dev/null
+++ b/superset/assets/javascripts/dashboard/v2/stylesheets/variables.less
@@ -0,0 +1,7 @@
+@indicator-color: #44C0FF;
+
+@almost-black: #263238;
+@gray-dark: #484848;
+@gray: #879399;
+@gray-light: #CFD8DC;
+@gray-bg: #f5f5f5;
diff --git a/superset/assets/src/dashboard/components/DashboardContainer.jsx b/superset/assets/src/dashboard/components/DashboardContainer.jsx
index 6df72ff..d429461 100644
--- a/superset/assets/src/dashboard/components/DashboardContainer.jsx
+++ b/superset/assets/src/dashboard/components/DashboardContainer.jsx
@@ -5,19 +5,19 @@ import * as dashboardActions from '../actions';
import * as chartActions from '../../chart/chartAction';
import Dashboard from '../v2/components/Dashboard';
-function mapStateToProps({ charts, dashboard, impressionId }) {
+function mapStateToProps(/* { charts, dashboard, impressionId } */) {
return {
- initMessages: dashboard.common.flash_messages,
- timeout: dashboard.common.conf.SUPERSET_WEBSERVER_TIMEOUT,
- dashboard: dashboard.dashboard,
- slices: charts,
- datasources: dashboard.datasources,
- filters: dashboard.filters,
- refresh: !!dashboard.refresh,
- userId: dashboard.userId,
- isStarred: !!dashboard.isStarred,
- editMode: dashboard.editMode,
- impressionId,
+ // initMessages: dashboard.common.flash_messages,
+ // timeout: dashboard.common.conf.SUPERSET_WEBSERVER_TIMEOUT,
+ // dashboard: dashboard.dashboard,
+ // slices: charts,
+ // datasources: dashboard.datasources,
+ // filters: dashboard.filters,
+ // refresh: !!dashboard.refresh,
+ // userId: dashboard.userId,
+ // isStarred: !!dashboard.isStarred,
+ // editMode: dashboard.editMode,
+ // impressionId,
};
}
diff --git a/superset/assets/stylesheets/superset.less b/superset/assets/stylesheets/superset.less
index 6513b6f..2c405cd 100644
--- a/superset/assets/stylesheets/superset.less
+++ b/superset/assets/stylesheets/superset.less
@@ -208,17 +208,6 @@ div.widget {
}
}
}
-/* brand icon */
-.navbar-brand > img.logo {
- margin-left: 15px;
- width: 36px;
- display: inline;
-}
-.navbar-brand > span {
- margin-left: 2px;
- font-size: 15px;
- font-weight: bold;
-}
.navbar .alert {
padding: 5px 10px;
diff --git a/superset/config.py b/superset/config.py
index a889c17..6075352 100644
--- a/superset/config.py
+++ b/superset/config.py
@@ -96,7 +96,7 @@ ENABLE_PROXY_FIX = False
APP_NAME = 'Superset'
# Uncomment to setup an App icon
-APP_ICON = '/static/assets/images/favicon.png'
+APP_ICON = '/static/assets/images/superset-logo@2x.png'
# Druid query timezone
# tz.tzutc() : Using utc timezone
diff --git a/superset/templates/appbuilder/navbar.html b/superset/templates/appbuilder/navbar.html
index c2f0668..acb292c 100644
--- a/superset/templates/appbuilder/navbar.html
+++ b/superset/templates/appbuilder/navbar.html
@@ -12,11 +12,10 @@
</button>
<a class="navbar-brand" href="/superset/profile/{{ current_user.username }}/">
<img
- class="logo"
+ width="126"
src="{{ appbuilder.app_icon }}"
alt="{{ appbuilder.app_name }}"
/>
- <span>Superset</span>
</a>
</div>
<div class="navbar-collapse collapse">
--
To stop receiving notification emails like this one, please contact
ccwilliams@apache.org.