superset-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From ccwilli...@apache.org
Subject [incubator-superset] 02/02: fix rebase error, clean up css organization and use @less vars
Date Tue, 06 Mar 2018 01:41:15 GMT
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 2c6d61091e34cf78e414d70ac4c7a4f142ae0344
Author: Chris Williams <chris.williams@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/components/DashboardContainer.jsx    |  24 +-
 .../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 +
 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/components/DashboardContainer.jsx b/superset/assets/javascripts/dashboard/components/DashboardContainer.jsx
index 6df72ff..d429461 100644
--- a/superset/assets/javascripts/dashboard/components/DashboardContainer.jsx
+++ b/superset/assets/javascripts/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/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/stylesheets/superset.less b/superset/assets/stylesheets/superset.less
index d2a529c..14e8475 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 cd025e2..ae81cfc 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.

Mime
View raw message