superset-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From ccwilli...@apache.org
Subject [incubator-superset] branch chris--top-level-tabs updated: [top-level-tabs] improve tab drag and drop css
Date Fri, 16 Mar 2018 06:00:26 GMT
This is an automated email from the ASF dual-hosted git repository.

ccwilliams pushed a commit to branch chris--top-level-tabs
in repository https://gitbox.apache.org/repos/asf/incubator-superset.git


The following commit(s) were added to refs/heads/chris--top-level-tabs by this push:
     new bdc5dfe  [top-level-tabs] improve tab drag and drop css
bdc5dfe is described below

commit bdc5dfeeafd7e423ea332965bef5e12a66f5871e
Author: Chris Williams <chris.williams@airbnb.com>
AuthorDate: Thu Mar 15 23:00:01 2018 -0700

    [top-level-tabs] improve tab drag and drop css
---
 .../dashboard/v2/stylesheets/components/column.less         |  2 +-
 .../dashboard/v2/stylesheets/components/new-component.less  |  1 +
 .../dashboard/v2/stylesheets/components/row.less            |  2 +-
 .../dashboard/v2/stylesheets/components/tabs.less           | 13 ++++++++-----
 .../assets/javascripts/dashboard/v2/stylesheets/dnd.less    |  2 +-
 .../javascripts/dashboard/v2/stylesheets/popover-menu.less  | 12 ++++++++++++
 6 files changed, 24 insertions(+), 8 deletions(-)

diff --git a/superset/assets/javascripts/dashboard/v2/stylesheets/components/column.less b/superset/assets/javascripts/dashboard/v2/stylesheets/components/column.less
index b96b14b..0b96f78 100644
--- a/superset/assets/javascripts/dashboard/v2/stylesheets/components/column.less
+++ b/superset/assets/javascripts/dashboard/v2/stylesheets/components/column.less
@@ -7,7 +7,7 @@
   top: -20px;
 }
 
-.grid-column--empty:after {
+.grid-column--empty:before {
   content: "Empty column";
   position: absolute;
   top: 0;
diff --git a/superset/assets/javascripts/dashboard/v2/stylesheets/components/new-component.less
b/superset/assets/javascripts/dashboard/v2/stylesheets/components/new-component.less
index 31e84cb..e36fee2 100644
--- a/superset/assets/javascripts/dashboard/v2/stylesheets/components/new-component.less
+++ b/superset/assets/javascripts/dashboard/v2/stylesheets/components/new-component.less
@@ -5,6 +5,7 @@
   align-items: center;
   padding: 16px;
   background: white;
+  cursor: move;
 }
 
 .new-component-placeholder {
diff --git a/superset/assets/javascripts/dashboard/v2/stylesheets/components/row.less b/superset/assets/javascripts/dashboard/v2/stylesheets/components/row.less
index 8859926..f4e1ed8 100644
--- a/superset/assets/javascripts/dashboard/v2/stylesheets/components/row.less
+++ b/superset/assets/javascripts/dashboard/v2/stylesheets/components/row.less
@@ -25,7 +25,7 @@
   height: 80px;
 }
 
-.grid-row--empty:after {
+.grid-row--empty:before {
   position: absolute;
   top: 0;
   left: 0;
diff --git a/superset/assets/javascripts/dashboard/v2/stylesheets/components/tabs.less b/superset/assets/javascripts/dashboard/v2/stylesheets/components/tabs.less
index f86365f..1bf79dc 100644
--- a/superset/assets/javascripts/dashboard/v2/stylesheets/components/tabs.less
+++ b/superset/assets/javascripts/dashboard/v2/stylesheets/components/tabs.less
@@ -14,7 +14,7 @@
 
 /* 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;
+  margin: 0 16px;
 }
 
 .dashboard-component-tabs .nav-tabs > li > a {
@@ -53,12 +53,15 @@
 }
 
 .dashboard-component-tabs .nav-tabs > li .drop-indicator {
-  height: 40px !important;
-  top: -10px !important;
-  opacity: 0.5;
+  top: -12px !important;
+  left: -12px !important;
+  width: ~"calc(100% + 24px)" !important; /* escape for .less */
+  height: ~"calc(100% + 24px)" !important;
+  opacity: 0.4;
 }
 
-.dashboard-component-tabs .fa-plus-square {
+.dashboard-component-tabs li .fa {
   color: @almost-black;
   font-size: 14px;
+  margin-top: 3px;
 }
diff --git a/superset/assets/javascripts/dashboard/v2/stylesheets/dnd.less b/superset/assets/javascripts/dashboard/v2/stylesheets/dnd.less
index 7d64609..cb1d46c 100644
--- a/superset/assets/javascripts/dashboard/v2/stylesheets/dnd.less
+++ b/superset/assets/javascripts/dashboard/v2/stylesheets/dnd.less
@@ -3,7 +3,7 @@
 }
 
 .dragdroppable--dragging {
-  opacity: 0.25;
+  opacity: 0.15;
 }
 
 .dragdroppable-row {
diff --git a/superset/assets/javascripts/dashboard/v2/stylesheets/popover-menu.less b/superset/assets/javascripts/dashboard/v2/stylesheets/popover-menu.less
index f68cf13..0f2466b 100644
--- a/superset/assets/javascripts/dashboard/v2/stylesheets/popover-menu.less
+++ b/superset/assets/javascripts/dashboard/v2/stylesheets/popover-menu.less
@@ -37,6 +37,18 @@
   z-index: 10;
 }
 
+/* the focus menu doesn't account for parent padding */
+.dashboard-component-tabs li .with-popover-menu--focused:after {
+  top: -12px;
+  left: -2px;
+  width: ~"calc(100% + 4px)"; /* escape for .less */
+  height: ~"calc(100% + 28px)";
+}
+
+.dashboard-component-tabs li .popover-menu {
+  top: -56px;
+}
+
 .popover-menu .menu-item {
   display: flex;
   flex-direction: row;

-- 
To stop receiving notification emails like this one, please contact
ccwilliams@apache.org.

Mime
View raw message