Clean up dashboard padding and coloring (#14811)

Fixes some coloring issues with dashboards with the new margin settings. Makes everything consistent between mode / theme.
elastic · Nov 8, 2017 · 75006b7 · 75006b7
1 parent 3367db0
commit 75006b7
Show file tree

Hide file tree

Showing 4 changed files with 57 additions and 17 deletions.
diff --git a/src/core_plugins/kibana/public/dashboard/panel/__snapshots__/dashboard_panel.test.js.snap b/src/core_plugins/kibana/public/dashboard/panel/__snapshots__/dashboard_panel.test.js.snap
@@ -25,7 +25,7 @@ exports[`DashboardPanel matches snapshot 1`] = `
         >
           <span
             aria-label="Panel options"
-            class="kuiButton__icon kuiIcon panel-dropdown fa fa-caret-down"
+            class="kuiButton__icon kuiIcon panel-dropdown fa fa-gear"
             data-test-subj="dashboardPanelToggleMenuIcon"
             role="button"
             tabindex="0"

diff --git a/src/core_plugins/kibana/public/dashboard/panel/panel_header/panel_options_menu.js b/src/core_plugins/kibana/public/dashboard/panel/panel_header/panel_options_menu.js
@@ -59,7 +59,7 @@ export class PanelOptionsMenu extends React.Component {
       <KuiKeyboardAccessible>
         <span
           aria-label="Panel options"
-          className="kuiButton__icon kuiIcon panel-dropdown fa fa-caret-down"
+          className="kuiButton__icon kuiIcon panel-dropdown fa fa-gear"
           data-test-subj="dashboardPanelToggleMenuIcon"
           onClick={this.toggleMenu}
         />

diff --git a/src/core_plugins/kibana/public/dashboard/styles/index.less b/src/core_plugins/kibana/public/dashboard/styles/index.less
@@ -18,6 +18,8 @@
    */
   .react-resizable-handle {
     z-index: 10; /* 1 */
+    right: 4px;
+    bottom: 4px;
   }
 }
 
@@ -136,7 +138,7 @@
 }
 
 .panel {
-  border: 2px dashed transparent;
+  border: solid 1px transparent;
 }
 
 /**
@@ -153,13 +155,26 @@
 }
 
 .panel--edit-mode {
-  border-color: @kibanaGray4;
+  border-color: @globalColorLightGray;
+
+  &:hover {
+    border-color: @globalColorBlue;
+
+    .panel-title:hover {
+      color: @globalColorBlue;
+    }
+
+    .panel-heading {
+      background-color: rgba(0,0,0,.05) !important;
+    }
+  }
+
   .visualize-show-spy {
     visibility: visible;
   }
 
   .panel-heading {
-    cursor: pointer;
+    cursor: move;
   }
 }
 
@@ -184,6 +199,14 @@ dashboard-viewport-provider {
   }
 }
 
+/**
+ * Overwrites red coloring that comes from this library by default.
+ */
+.react-grid-item.react-grid-placeholder {
+  border-radius: 4px;
+  background: @globalColorBlue;
+}
+
 /**
  * When a single panel is expanded, all the other panels are hidden in the grid.
  */
@@ -231,7 +254,7 @@ dashboard-viewport-provider {
     justify-content: flex-start;
 
     .panel-heading {
-      padding: 2px 10px 2px 5px;
+      padding: 8px;
       flex: 0 0 auto;
       white-space: nowrap;
       display: flex;
@@ -240,19 +263,11 @@ dashboard-viewport-provider {
       background-color: @white;
       border: none;
 
-      /**
-       * 1. The popover aligns with the right side of this icon, so we want the right edge as far so the right as
-       * possible to make the arrows line up.
-       */
-      .dashboardPanelPopOver {
-        margin-right: -10px; /* 1. */
-      }
-
       /**
        * 1. Required to get the pop up component arrow to line up with the menu icon.
        */
-      .panel-dropdown {
-        padding: 0 20px; /* 1. */
+      .panel-dropdown:hover {
+        color: @globalColorBlue;
       }
 
       .kuiPopover__body {
@@ -327,6 +342,7 @@ dashboard-viewport-provider {
       flex: 1 1 100%;
       height: auto;
       z-index: 1; /* 1. */
+      padding: 0 8px 8px 8px;
     }
   }
 
@@ -345,13 +361,27 @@ dashboard-viewport-provider {
  */
 .layout-with-margins {
   background-color: @dashboard-bg-with-margins;
+  .panel-heading {
+    border-top-left-radius: 4px !important;
+    border-top-right-radius: 4px !important;
+  }
+
   .panel-content {
     background-color: @panel-bg-with-margins;
+    border-bottom-left-radius: 4px;
+    border-bottom-right-radius: 4px;
   }
+
   .panel {
     border: 1px solid #D9D9D9;
+    border-radius: 4px;
     box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.1);
   }
+
+  .panel--edit-mode:hover {
+    border-color: @globalColorBlue;
+    box-shadow: 0 4px 4px -1px rgba(0, 0, 0, 0.1);
+  }
 }
 
 .dashboard-viewport {

diff --git a/src/ui/public/styles/dark-theme.less b/src/ui/public/styles/dark-theme.less
@@ -143,7 +143,11 @@
   }
 
   .panel--edit-mode {
-    border-color: @panel-default-border;
+    border-color: #222;
+  }
+
+  .panel--edit-mode:hover {
+    border-color: @globalColorBlue;
   }
 
   .panel-default {
@@ -533,6 +537,7 @@
     color: @dashboard-panel-color;
 
     .panel {
+
       .panel-heading {
         a {
           color: @dashboard-panel-heading-link-color;
@@ -549,6 +554,7 @@
         }
       }
 
+
       .load-error {
         .fa-exclamation-triangle {
           color: @dashboard-panel-load-error-color;
@@ -750,4 +756,8 @@
   .dashboard-container-with-margins {
     background-color: @dashboard-bg-with-margins;
   }
+
+  .react-grid-item > .react-resizable-handle {
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6' viewBox='0 0 6 6'%3E%3Cpolygon fill='%23EFEEEE' points='6 6 0 6 0 4.2 4 4.2 4.2 4.2 4.2 0 6 0' opacity='.302'/%3E%3C/svg%3E%0A");
+  }
 }