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..12a5617ba01d3 --- /dev/null +++ b/src/kibana/components/collapsible_sidebar/collapsible_sidebar.less @@ -0,0 +1,58 @@ +.sidebar-container.collapsible-sidebar { + position: relative; + z-index: 1; + + .sidebar-collapser { + background-color: #ecf0f1; + height: 28px; + position: absolute; + top: 0; + right: -20px; + width: 20px; + border: 1px solid #ecf0f1; + border-width: 0 1px 1px 0; + cursor: pointer; + z-index: -1; + border-bottom-right-radius: 4px; + + .chevron-cont{ + position: absolute; + left: 4px; + top: 5px; + + &:before { + font-family: FontAwesome; + color: #333; + content: "\F053"; + } + } + } + + &.closed { + width: 0 !important; + border-right-width: 0; + border-left-width: 0; + + > * { + visibility: hidden; + } + + .sidebar-collapser { + visibility: visible; + .chevron-cont:before { + content: "\F054"; + } + } + } +} + +@media (max-width: 992px) { + .sidebar-container.collapsible-sidebar { + &.closed { + display: none; + } + .sidebar-collapser { + display: none; + } + } +} 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 @@