From 483a000bddfeb4145e1cf5f42209960480a95f48 Mon Sep 17 00:00:00 2001 From: Khalah Jones-Golden Date: Wed, 25 Feb 2015 22:52:14 -0400 Subject: [PATCH 1/5] [directives/collapsible_sidebar] created the collapsible sidebar directive --- .../collapsible_sidebar.js | 37 +++++++++++++ .../collapsible_sidebar.less | 52 +++++++++++++++++++ 2 files changed, 89 insertions(+) create mode 100644 src/kibana/components/collapsible_sidebar/collapsible_sidebar.js create mode 100644 src/kibana/components/collapsible_sidebar/collapsible_sidebar.less diff --git a/src/kibana/components/collapsible_sidebar/collapsible_sidebar.js b/src/kibana/components/collapsible_sidebar/collapsible_sidebar.js new file mode 100644 index 0000000000000..31c2387bd72df --- /dev/null +++ b/src/kibana/components/collapsible_sidebar/collapsible_sidebar.js @@ -0,0 +1,37 @@ +define(function (require) { + require('css!components/collapsible_sidebar/collapsible_sidebar.css'); + + var _ = require('lodash'); + var $ = require('jquery'); + + require('modules') + .get('kibana') + .directive('collapsibleSidebar', function () { + var listOfWidthClasses = 1; + // simply a list of all of all of angulars .col-md-* classes except 12 + listOfWidthClasses = _(new Array(11)).map(function (n) { return 'col-md-' + listOfWidthClasses++; }); + + return { + restrict: 'C', + link: function ($scope, $elem) { + var $collapser = $('
'); + var $siblings = $elem.siblings(); + + var siblingsClass = listOfWidthClasses.reduce(function (prev, className) { + if (prev) return prev; + return $siblings.hasClass(className) && className; + }, false); + + $collapser.on('click', function () { + $elem.toggleClass('closed'); + // if there is are only two elements we can assume the other one will take 100% of the width + if ($siblings.length === 1 && siblingsClass) { + $siblings.toggleClass(siblingsClass + ' col-md-12'); + } + }) + + .appendTo($elem); + } + }; + }); +}); diff --git a/src/kibana/components/collapsible_sidebar/collapsible_sidebar.less b/src/kibana/components/collapsible_sidebar/collapsible_sidebar.less new file mode 100644 index 0000000000000..7f45d8c9ddcdb --- /dev/null +++ b/src/kibana/components/collapsible_sidebar/collapsible_sidebar.less @@ -0,0 +1,52 @@ +.sidebar-container.collapsible-sidebar { + position: relative; + + .sidebar-collapser { + background-color: #fff; + right: 0; + height: 100%; + position: absolute; + top: 0; + right: 0; + margin-top: -25px; + width: 10px; + border: 1px solid #ecf0f1; + border-width: 1px 0 1px 1px; + cursor: pointer; + + .chevron-cont{ + position: absolute; + height: 50px; + top: 25%; /* FIXME because of the different layouts (fullscreen;scrolling) in Discover vs Visualize. */ + text-align: center; + line-height: 50px; + left: 50%; + margin-left: -5px; + &:before { + font-family: FontAwesome; + color: #333; + content: "\F053"; + } + } + } + + &.closed { + width: 0 !important; + border-right-width: 0; + border-left-width: 0; + z-index: 100; + + > * { + visibility: hidden; + } + + .sidebar-collapser { + visibility: visible; + right: -10px; + border-right: 1px solid #ecf0f1; + .chevron-cont:before { + content: "\F054"; + } + } + } +} From 1a68de5555661a7589c57edbef55d5d37282e4eb Mon Sep 17 00:00:00 2001 From: Khalah Jones-Golden Date: Wed, 25 Feb 2015 22:55:34 -0400 Subject: [PATCH 2/5] [discover/sidebar] Made the sidebar collapsible on Discover page --- src/kibana/plugins/discover/index.html | 2 +- src/kibana/plugins/discover/index.js | 3 ++- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/src/kibana/plugins/discover/index.html b/src/kibana/plugins/discover/index.html index ca599cb664a8b..643ec900d85ed 100644 --- a/src/kibana/plugins/discover/index.html +++ b/src/kibana/plugins/discover/index.html @@ -43,7 +43,7 @@
-
+
Date: Wed, 25 Feb 2015 23:19:57 -0400 Subject: [PATCH 3/5] [discover/sidebar]fixed styling problem with sidebar --- .../components/collapsible_sidebar/collapsible_sidebar.less | 1 - 1 file changed, 1 deletion(-) diff --git a/src/kibana/components/collapsible_sidebar/collapsible_sidebar.less b/src/kibana/components/collapsible_sidebar/collapsible_sidebar.less index 7f45d8c9ddcdb..0212d2dc8bda0 100644 --- a/src/kibana/components/collapsible_sidebar/collapsible_sidebar.less +++ b/src/kibana/components/collapsible_sidebar/collapsible_sidebar.less @@ -8,7 +8,6 @@ position: absolute; top: 0; right: 0; - margin-top: -25px; width: 10px; border: 1px solid #ecf0f1; border-width: 1px 0 1px 1px; From 213cc4a724753f38e23419a5559fb45541f1aeab Mon Sep 17 00:00:00 2001 From: Khalah Jones-Golden Date: Thu, 26 Feb 2015 16:32:05 -0400 Subject: [PATCH 4/5] [Discover/Sidebar] Restyled the collapsible sidebar, and moved it to the top of the side panel --- .../collapsible_sidebar.less | 26 ++++++++----------- 1 file changed, 11 insertions(+), 15 deletions(-) diff --git a/src/kibana/components/collapsible_sidebar/collapsible_sidebar.less b/src/kibana/components/collapsible_sidebar/collapsible_sidebar.less index 0212d2dc8bda0..74f092a225604 100644 --- a/src/kibana/components/collapsible_sidebar/collapsible_sidebar.less +++ b/src/kibana/components/collapsible_sidebar/collapsible_sidebar.less @@ -1,26 +1,25 @@ .sidebar-container.collapsible-sidebar { position: relative; + z-index: 1; .sidebar-collapser { - background-color: #fff; - right: 0; - height: 100%; + background-color: #ecf0f1; + height: 28px; position: absolute; top: 0; - right: 0; - width: 10px; + right: -20px; + width: 20px; border: 1px solid #ecf0f1; - border-width: 1px 0 1px 1px; + border-width: 0 1px 1px 0; cursor: pointer; + z-index: -1; + border-bottom-right-radius: 4px; .chevron-cont{ position: absolute; - height: 50px; - top: 25%; /* FIXME because of the different layouts (fullscreen;scrolling) in Discover vs Visualize. */ - text-align: center; - line-height: 50px; - left: 50%; - margin-left: -5px; + left: 4px; + top: 5px; + &:before { font-family: FontAwesome; color: #333; @@ -33,7 +32,6 @@ width: 0 !important; border-right-width: 0; border-left-width: 0; - z-index: 100; > * { visibility: hidden; @@ -41,8 +39,6 @@ .sidebar-collapser { visibility: visible; - right: -10px; - border-right: 1px solid #ecf0f1; .chevron-cont:before { content: "\F054"; } From d0271c97e6d2107d25ae4697a51c238a1358ae57 Mon Sep 17 00:00:00 2001 From: Khalah Jones-Golden Date: Mon, 2 Mar 2015 15:53:19 -0400 Subject: [PATCH 5/5] [Sidebar/collapser] Added a media query that hides the collapser when the screen is too small, and hides the entire sidebar when it's collapsed and too small --- .../collapsible_sidebar/collapsible_sidebar.less | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/src/kibana/components/collapsible_sidebar/collapsible_sidebar.less b/src/kibana/components/collapsible_sidebar/collapsible_sidebar.less index 74f092a225604..12a5617ba01d3 100644 --- a/src/kibana/components/collapsible_sidebar/collapsible_sidebar.less +++ b/src/kibana/components/collapsible_sidebar/collapsible_sidebar.less @@ -45,3 +45,14 @@ } } } + +@media (max-width: 992px) { + .sidebar-container.collapsible-sidebar { + &.closed { + display: none; + } + .sidebar-collapser { + display: none; + } + } +}