From fdf7eba22dd036c638e26a5335faa87063787c16 Mon Sep 17 00:00:00 2001 From: Matt Bargar Date: Tue, 22 Sep 2015 19:28:19 -0400 Subject: [PATCH 1/3] Fixes #5004 vis editor collapsible sidebar arrow overlaps visualization --- .../public/visualize/editor/styles/_editor.less | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/src/plugins/kibana/public/visualize/editor/styles/_editor.less b/src/plugins/kibana/public/visualize/editor/styles/_editor.less index fa44896cbada..d6f2a1272663 100644 --- a/src/plugins/kibana/public/visualize/editor/styles/_editor.less +++ b/src/plugins/kibana/public/visualize/editor/styles/_editor.less @@ -358,6 +358,22 @@ flex: 1 1 100%; position: relative; } + + .table-vis-container { + padding-left: 20px; + } + + .leaflet-left .leaflet-control { + margin-left: 30px; + } + + .markdown-vis { + padding: 20px; + } + + .y-axis-col-wrapper { + padding-left: 20px; + } } } From 41bf15cc0827d5cd8e06b18c77d100625a0bb608 Mon Sep 17 00:00:00 2001 From: Matt Bargar Date: Wed, 23 Sep 2015 14:38:49 -0400 Subject: [PATCH 2/3] remove vis specific fixes in favor of a full height collapser --- .../kibana/public/discover/styles/main.less | 1 + .../visualize/editor/styles/_editor.less | 17 +-------------- .../collapsible_sidebar.less | 21 +++---------------- src/ui/public/styles/variables/for-theme.less | 6 ++++-- 4 files changed, 9 insertions(+), 36 deletions(-) diff --git a/src/plugins/kibana/public/discover/styles/main.less b/src/plugins/kibana/public/discover/styles/main.less index 5e5040445507..25dba9ba3bee 100644 --- a/src/plugins/kibana/public/discover/styles/main.less +++ b/src/plugins/kibana/public/discover/styles/main.less @@ -8,6 +8,7 @@ &-wrapper { padding-right: 0px !important; + padding-left: @collapser-width; } &-content { diff --git a/src/plugins/kibana/public/visualize/editor/styles/_editor.less b/src/plugins/kibana/public/visualize/editor/styles/_editor.less index d6f2a1272663..e17c84bd9c7a 100644 --- a/src/plugins/kibana/public/visualize/editor/styles/_editor.less +++ b/src/plugins/kibana/public/visualize/editor/styles/_editor.less @@ -332,6 +332,7 @@ display: flex; flex-direction: column; overflow: auto; + padding-left: @collapser-width; &.embedded { flex-shrink: 1; @@ -358,22 +359,6 @@ flex: 1 1 100%; position: relative; } - - .table-vis-container { - padding-left: 20px; - } - - .leaflet-left .leaflet-control { - margin-left: 30px; - } - - .markdown-vis { - padding: 20px; - } - - .y-axis-col-wrapper { - padding-left: 20px; - } } } diff --git a/src/ui/public/collapsible_sidebar/collapsible_sidebar.less b/src/ui/public/collapsible_sidebar/collapsible_sidebar.less index 537b906b89d3..d05a263a8cee 100644 --- a/src/ui/public/collapsible_sidebar/collapsible_sidebar.less +++ b/src/ui/public/collapsible_sidebar/collapsible_sidebar.less @@ -6,28 +6,13 @@ .sidebar-collapser { background-color: @collapser-bg; - height: 28px; + height: 100%; position: absolute; top: 0; - right: -20px; - width: 20px; - border: 1px solid; - border-color: @collapser-border; - border-width: 0 1px 1px 0; + right: -(@collapser-width); + width: @collapser-width; cursor: pointer; z-index: -1; - border-bottom-right-radius: 4px; - - &:hover { - background-color: @collapser-hover-bg; - - .chevron-cont{ - - &:before { - color: @collapser-hover-color; - } - } - } .chevron-cont{ position: absolute; diff --git a/src/ui/public/styles/variables/for-theme.less b/src/ui/public/styles/variables/for-theme.less index e8b58f76097e..9d8b7e0f9d38 100644 --- a/src/ui/public/styles/variables/for-theme.less +++ b/src/ui/public/styles/variables/for-theme.less @@ -65,13 +65,15 @@ // Collapser =================================================================== -@collapser-bg: @white; +@collapser-bg: @gray-lighter; @collapser-border: @gray-lighter; @collapser-color: @gray3; -@collapser-hover-bg: @gray-lighter; +@collapser-hover-bg: @white; @collapser-hover-color: @gray3; +@collapser-width: 20px; + // Dashboard =================================================================== @dashboard-bg: @gray-lighter; From b146709325a64b5055f1fcbeaafc644750b7bf6f Mon Sep 17 00:00:00 2001 From: Rashid Khan Date: Wed, 23 Sep 2015 13:36:01 -0700 Subject: [PATCH 3/3] Add hover to match spy tab, make bar smaller --- .../public/visualize/editor/styles/_editor.less | 1 - .../collapsible_sidebar/collapsible_sidebar.less | 12 +++++++++--- src/ui/public/styles/sidebar.less | 2 -- src/ui/public/styles/variables/for-theme.less | 9 +++++---- 4 files changed, 14 insertions(+), 10 deletions(-) diff --git a/src/plugins/kibana/public/visualize/editor/styles/_editor.less b/src/plugins/kibana/public/visualize/editor/styles/_editor.less index e17c84bd9c7a..d7a988196a33 100644 --- a/src/plugins/kibana/public/visualize/editor/styles/_editor.less +++ b/src/plugins/kibana/public/visualize/editor/styles/_editor.less @@ -89,7 +89,6 @@ .sidebar-container { .flex-parent(1, 1, auto); background-color: @vis-editor-sidebar-bg; - border-right-color: @vis-editor-sidebar-border; form { .flex-parent(1, 1, auto); diff --git a/src/ui/public/collapsible_sidebar/collapsible_sidebar.less b/src/ui/public/collapsible_sidebar/collapsible_sidebar.less index d05a263a8cee..9c3a46f92e52 100644 --- a/src/ui/public/collapsible_sidebar/collapsible_sidebar.less +++ b/src/ui/public/collapsible_sidebar/collapsible_sidebar.less @@ -14,14 +14,20 @@ cursor: pointer; z-index: -1; + &:hover { + background-color: @collapser-hover-bg; + border-color: @collapser-hover-bg; + color: @collapser-hover-color; + } + .chevron-cont{ position: absolute; - left: 4px; - top: 5px; + left: 2px; + top: 8px; + font-size: 10px; &:before { font-family: FontAwesome; - color: @collapser-color; content: "\F053"; } } diff --git a/src/ui/public/styles/sidebar.less b/src/ui/public/styles/sidebar.less index 40f81c869172..fc938f0eb2f2 100644 --- a/src/ui/public/styles/sidebar.less +++ b/src/ui/public/styles/sidebar.less @@ -5,9 +5,7 @@ padding-left: 0px !important; padding-right: 0px !important; background-color: @sidebar-bg; - border-right: 1px solid; border-right-color: @sidebar-border; - border-bottom: 1px solid; border-bottom-color: @sidebar-border; .sidebar-well { diff --git a/src/ui/public/styles/variables/for-theme.less b/src/ui/public/styles/variables/for-theme.less index 9d8b7e0f9d38..3e80305fd3da 100644 --- a/src/ui/public/styles/variables/for-theme.less +++ b/src/ui/public/styles/variables/for-theme.less @@ -66,13 +66,14 @@ // Collapser =================================================================== @collapser-bg: @gray-lighter; -@collapser-border: @gray-lighter; +@collapser-border: @collapser-bg; @collapser-color: @gray3; -@collapser-hover-bg: @white; -@collapser-hover-color: @gray3; +@collapser-hover-bg: @gray-light; +@collapser-hover-border: @collapser-hover-bg; +@collapser-hover-color: @white; -@collapser-width: 20px; +@collapser-width: 12px; // Dashboard ===================================================================