Improves dark theme support in the filter editor (elastic#13522)

Fixes elastic#12955 * Added dark theme support to the ui framework modal component * Also fixed z-index issue where dashboard panels would appear above the filter editor modal when the user moved or resized the panel (see gif below)
Bargs · Aug 18, 2017 · 325c049 · 325c049
1 parent 179d476
commit 325c049
Show file tree

Hide file tree

Showing 6 changed files with 38 additions and 2 deletions.
diff --git a/src/core_plugins/kibana/public/dashboard/styles/index.less b/src/core_plugins/kibana/public/dashboard/styles/index.less
@@ -81,6 +81,7 @@ dashboard-grid {
   display: block;
   margin: 0;
   padding: 5px;
+  z-index: @dashboardGridDepth;
 }
 
 .start-screen {

diff --git a/src/ui/public/styles/variables/depth.less b/src/ui/public/styles/variables/depth.less
@@ -1,5 +1,7 @@
 /**
  * 1. The local nav contains tooltips which should pop over the filter bar.
+ * 2. The filter and local nav components should always appear above the dashboard grid items.
  */
-@filterBarDepth: 1; /* 1 */
+@filterBarDepth: 2; /* 1 */
 @localNavDepth: 3; /* 1 */
+@dashboardGridDepth: 1; /* 2 */
diff --git a/ui_framework/dist/ui_framework.css b/ui_framework/dist/ui_framework.css
@@ -2498,6 +2498,9 @@ main {
   border-radius: 4px;
   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1);
   z-index: 1001; }
+  .theme-dark .kuiModal {
+    background-color: #525252;
+    border-color: #000; }
 
 .kuiModalHeader {
   display: -webkit-box;
@@ -2515,9 +2518,13 @@ main {
   padding: 10px;
   padding-left: 20px;
   border-bottom: 1px solid #D9D9D9; }
+  .theme-dark .kuiModalHeader {
+    border-bottom-color: #000; }
 
 .kuiModalHeader__title {
   font-size: 18px; }
+  .theme-dark .kuiModalHeader__title {
+    color: #cecece; }
 
 .kuiModalHeaderCloseButton {
   display: inline-block;
@@ -2541,6 +2548,8 @@ main {
 
 .kuiModalBodyText {
   font-size: 14px; }
+  .theme-dark .kuiModalBodyText {
+    color: #cecece; }
 
 .kuiModalFooter {
   display: -webkit-box;

diff --git a/ui_framework/doc_site/src/views/modal/modal_example.js b/ui_framework/doc_site/src/views/modal/modal_example.js
@@ -33,6 +33,9 @@ export default props => (
       <GuideDemo>
         <StaticConfirmModal />
       </GuideDemo>
+      <GuideDemo isDarkTheme>
+        <StaticConfirmModal />
+      </GuideDemo>
     </GuideSection>
 
     <GuideSection

diff --git a/ui_framework/src/components/modal/_index.scss b/ui_framework/src/components/modal/_index.scss
@@ -4,5 +4,9 @@ $modalBackgroundColor: #FFF;
 $modalOverlayBackground: rgba(#000000, 0.5);
 $globalModalDepth: 1000;
 
+// Dark theme colors
+$modalBorderColor--darkTheme: #000;
+$modalBackgroundColor--darkTheme: #525252;
+
 @import "modal_overlay";
 @import "modal";
diff --git a/ui_framework/src/components/modal/_modal.scss b/ui_framework/src/components/modal/_modal.scss
@@ -5,6 +5,11 @@
   border-radius: $globalBorderRadius;
   box-shadow: $globalBoxShadow;
   z-index: $globalModalDepth + 1;
+
+  @include darkTheme {
+    background-color: $modalBackgroundColor--darkTheme;
+    border-color: $modalBorderColor--darkTheme;
+  }
 }
 
 .kuiModalHeader {
@@ -14,10 +19,18 @@
   padding: $modalPadding;
   padding-left: $modalPadding * 2;
   border-bottom: $globalBorderThin;
+
+  @include darkTheme {
+    border-bottom-color: $modalBorderColor--darkTheme;
+  }
 }
 
   .kuiModalHeader__title {
     font-size: $globalTitleFontSize;
+
+    @include darkTheme {
+      color: $globalTextColor--darkTheme;
+    }
   }
 
 .kuiModalHeaderCloseButton {
@@ -31,13 +44,17 @@
 
 .kuiModalBodyText {
   font-size: 14px;
+
+  @include darkTheme {
+    color: $globalTextColor--darkTheme;
+  }
 }
 
 .kuiModalFooter {
   display: flex;
   justify-content: flex-end;
   padding: $modalPadding * 2;
-  padding-top:: $modalPadding;
+  padding-top: $modalPadding;
 
   > * + * {
     margin-left: 5px;