From 3b577791f11403887cb7ded81f446623ab97b74e Mon Sep 17 00:00:00 2001 From: Matthew Bargar Date: Tue, 15 Aug 2017 16:16:55 -0400 Subject: [PATCH 1/5] Stack filter-editor above dashboard panels --- src/ui/public/styles/variables/depth.less | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/ui/public/styles/variables/depth.less b/src/ui/public/styles/variables/depth.less index 9ae4af17b93b1..2df3698d46844 100644 --- a/src/ui/public/styles/variables/depth.less +++ b/src/ui/public/styles/variables/depth.less @@ -1,5 +1,5 @@ /** * 1. The local nav contains tooltips which should pop over the filter bar. */ -@filterBarDepth: 1; /* 1 */ -@localNavDepth: 3; /* 1 */ +@filterBarDepth: 3; /* 1 */ +@localNavDepth: 5; /* 1 */ From b39f1098cd6ea2167a41cad21257cc5e4f78ee36 Mon Sep 17 00:00:00 2001 From: Matthew Bargar Date: Tue, 15 Aug 2017 17:20:54 -0400 Subject: [PATCH 2/5] Make modal component dark mode friendly --- ui_framework/dist/ui_framework.css | 5 +++++ ui_framework/src/components/modal/_index.scss | 4 ++++ ui_framework/src/components/modal/_modal.scss | 11 ++++++++++- 3 files changed, 19 insertions(+), 1 deletion(-) diff --git a/ui_framework/dist/ui_framework.css b/ui_framework/dist/ui_framework.css index 369a303af80e6..1775ec53181a5 100644 --- 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: #272727; + border-color: #000; } .kuiModalHeader { display: -webkit-box; @@ -2515,6 +2518,8 @@ main { padding: 10px; padding-left: 20px; border-bottom: 1px solid #D9D9D9; } + .theme-dark .kuiModalHeader { + border-bottom-color: #000; } .kuiModalHeader__title { font-size: 18px; } diff --git a/ui_framework/src/components/modal/_index.scss b/ui_framework/src/components/modal/_index.scss index 27506eaf74402..d6a0323626f72 100644 --- 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: #272727; + @import "modal_overlay"; @import "modal"; diff --git a/ui_framework/src/components/modal/_modal.scss b/ui_framework/src/components/modal/_modal.scss index 501bb711e7467..564078c06ef00 100644 --- 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,6 +19,10 @@ padding: $modalPadding; padding-left: $modalPadding * 2; border-bottom: $globalBorderThin; + + @include darkTheme { + border-bottom-color: $modalBorderColor--darkTheme; + } } .kuiModalHeader__title { @@ -37,7 +46,7 @@ display: flex; justify-content: flex-end; padding: $modalPadding * 2; - padding-top:: $modalPadding; + padding-top: $modalPadding; > * + * { margin-left: 5px; From 3d0c786797d444daa26093dca66fb867e50c325b Mon Sep 17 00:00:00 2001 From: Matthew Bargar Date: Tue, 15 Aug 2017 18:17:15 -0400 Subject: [PATCH 3/5] Stack localNav and filter bar above dashboard grid items --- src/core_plugins/kibana/public/dashboard/styles/index.less | 1 + src/ui/public/styles/variables/depth.less | 2 ++ 2 files changed, 3 insertions(+) diff --git a/src/core_plugins/kibana/public/dashboard/styles/index.less b/src/core_plugins/kibana/public/dashboard/styles/index.less index c2b9a024d82f5..629c175da2c65 100644 --- 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 index 2df3698d46844..45604bb892f8a 100644 --- 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: 3; /* 1 */ @localNavDepth: 5; /* 1 */ +@dashboardGridDepth: 2; /* 2 */ From 8f36054cb92f782dd1bbed3c5af90f78132b40dd Mon Sep 17 00:00:00 2001 From: Matthew Bargar Date: Tue, 15 Aug 2017 18:21:48 -0400 Subject: [PATCH 4/5] start counting from 1 --- src/ui/public/styles/variables/depth.less | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/ui/public/styles/variables/depth.less b/src/ui/public/styles/variables/depth.less index 45604bb892f8a..6042068c111d7 100644 --- a/src/ui/public/styles/variables/depth.less +++ b/src/ui/public/styles/variables/depth.less @@ -2,6 +2,6 @@ * 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: 3; /* 1 */ -@localNavDepth: 5; /* 1 */ -@dashboardGridDepth: 2; /* 2 */ +@filterBarDepth: 2; /* 1 */ +@localNavDepth: 3; /* 1 */ +@dashboardGridDepth: 1; /* 2 */ From 514d1367070e2f15429a5621ffdaf830220aa550 Mon Sep 17 00:00:00 2001 From: Matthew Bargar Date: Thu, 17 Aug 2017 14:55:15 -0400 Subject: [PATCH 5/5] Review updates --- ui_framework/dist/ui_framework.css | 6 +++++- ui_framework/doc_site/src/views/modal/modal_example.js | 3 +++ ui_framework/src/components/modal/_index.scss | 2 +- ui_framework/src/components/modal/_modal.scss | 8 ++++++++ 4 files changed, 17 insertions(+), 2 deletions(-) diff --git a/ui_framework/dist/ui_framework.css b/ui_framework/dist/ui_framework.css index 1775ec53181a5..8bc3e3f2017e0 100644 --- a/ui_framework/dist/ui_framework.css +++ b/ui_framework/dist/ui_framework.css @@ -2499,7 +2499,7 @@ main { box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1); z-index: 1001; } .theme-dark .kuiModal { - background-color: #272727; + background-color: #525252; border-color: #000; } .kuiModalHeader { @@ -2523,6 +2523,8 @@ main { .kuiModalHeader__title { font-size: 18px; } + .theme-dark .kuiModalHeader__title { + color: #cecece; } .kuiModalHeaderCloseButton { display: inline-block; @@ -2546,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 index 411606adec4d7..d65e49cbfdea4 100644 --- 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 => ( + + +