Add close button to localNavDropdowns. (#9451)

Backports PR #9437

**Commit 1:**
Add close button to localNavDropdowns.
- Make Timelion docs dropdown scroll only the table.
- Make Timelion tutorial a fluid height, instead of fixed.

* Original sha: f149a44
* Authored by CJ Cenizal <[email protected]> on 2016-12-10T00:15:50Z

**Commit 2:**
Use chevron for localDropdownCloseButton.

* Original sha: e4c62eb
* Authored by CJ Cenizal <[email protected]> on 2016-12-10T00:49:44Z

package.json

@@ -72,7 +72,7 @@
     "@bigfunger/decompress-zip": "0.2.0-stripfix3",
     "@bigfunger/jsondiffpatch": "0.1.38-webpack",
     "@elastic/datemath": "2.3.0",
-    "@elastic/kibana-ui-framework": "0.0.11",
+    "@elastic/kibana-ui-framework": "0.0.13",
     "@spalger/filesaver": "1.1.2",
     "@spalger/leaflet-draw": "0.2.3",
     "@spalger/leaflet-heat": "0.1.3",

src/core_plugins/timelion/public/app.less

@@ -121,7 +121,7 @@ timelion-interval {
   display: flex;
 }
 
-.timelionFunctionsDropdown {
+.timelionFunctionsDropdownContent {
   height: 310px;
   overflow-y: auto;
 }
@@ -144,27 +144,22 @@ timelion-interval {
 }
 
 .doc-container-content {
-  padding: 0 20px 20px 20px;
-  height: 310px;
-  overflow-y: auto;
-  background-color: @body-bg;
   position: relative;
 }
 
 .doc-container-buttons {
   position: relative;
   text-align: center;
-  background-color: @body-bg;
   height: 40px;
 
   .btn-doc-prev {
     position: absolute;
-    left: 20px;
+    left: 0px;
   }
 
   .btn-doc-next {
     position: absolute;
-    right: 20px;
+    right: 0px;
   }
 }
 

src/core_plugins/timelion/public/partials/docs/tutorial.html

@@ -145,44 +145,46 @@ <h2>Data: Transform <small>insert beat boxing</small></h2>
   </div>
 </div>
 
-<div ng-show="section === 'functions'" class="localDropdown timelionFunctionsDropdown">
+<div ng-show="section === 'functions'">
   <div class="localDropdownTitle">
     Function reference
   </div>
   <div class="localDropdownHelpText">
     Click a function for details and arguments or <a ng-click="section = 'tutorial'">return to the tutorial.</a>
   </div>
-  <table class="table table-condensed table-bordered timelionFunctionsTable">
-    <tr class="timelionFunctionsTableRow"
-      ng-repeat-start="function in functions.list"
-      ng-class="{active: functions.details === function.name}"
-      ng-click="functions.details = (functions.details === function.name ? null : function.name)">
-      <td><strong>.{{function.name}}()</strong></td>
-      <td>{{function.help}}</td>
-    </tr>
+  <div class="timelionFunctionsDropdownContent">
+    <table class="table table-condensed table-bordered timelionFunctionsTable">
+      <tr class="timelionFunctionsTableRow"
+        ng-repeat-start="function in functions.list"
+        ng-class="{active: functions.details === function.name}"
+        ng-click="functions.details = (functions.details === function.name ? null : function.name)">
+        <td><strong>.{{function.name}}()</strong></td>
+        <td>{{function.help}}</td>
+      </tr>
 
-    <!-- Function details -->
-    <tr ng-if="functions.details === function.name" ng-repeat-end>
-      <td colspan=2>
-        <div class="suggestion-details" >
-          <table class="table table-condensed table-bordered timelionFunctionDetailsTable"
-            ng-show="function.args.length > (function.chainable ? 1: 0)">
-          <thead>
-            <th>Argument Name</th>
-            <th>Accepted Types</th>
-            <th>Information</th>
-          </thead>
-          <tr ng-repeat="arg in function.args" ng-hide="$index < 1 && function.chainable">
-            <td>{{arg.name}}</td>
-            <td><em>{{arg.types.join(', ')}}</em></td>
-            <td>{{arg.help}}</td>
-          </tr>
-          </table>
-          <div ng-hide="function.args.length > (function.chainable ? 1: 0)">
-            <em>This function does not accept any arguments. Well that's simple, isn't it?</em>
+      <!-- Function details -->
+      <tr ng-if="functions.details === function.name" ng-repeat-end>
+        <td colspan=2>
+          <div class="suggestion-details" >
+            <table class="table table-condensed table-bordered timelionFunctionDetailsTable"
+              ng-show="function.args.length > (function.chainable ? 1: 0)">
+            <thead>
+              <th>Argument Name</th>
+              <th>Accepted Types</th>
+              <th>Information</th>
+            </thead>
+            <tr ng-repeat="arg in function.args" ng-hide="$index < 1 && function.chainable">
+              <td>{{arg.name}}</td>
+              <td><em>{{arg.types.join(', ')}}</em></td>
+              <td>{{arg.help}}</td>
+            </tr>
+            </table>
+            <div ng-hide="function.args.length > (function.chainable ? 1: 0)">
+              <em>This function does not accept any arguments. Well that's simple, isn't it?</em>
+            </div>
           </div>
-        </div>
-      </td>
-    </tr>
-  </table>
+        </td>
+      </tr>
+    </table>
+  </div>
 </div>

src/ui/public/kbn_top_nav/kbn_top_nav.html

@@ -39,10 +39,14 @@
   <!-- Dropdown content, e.g. time-picker. -->
   <div
     class="localDropdown"
-    id="template_wrapper"
     ng-show="kbnTopNav.rendered"
   >
-    <!-- Content gets dynamically inserted here. -->
+    <button class="localDropdownCloseButton" ng-click="kbnTopNav.close()">
+      <span class="fa fa-chevron-circle-up"></span>
+    </button>
+    <div id="template_wrapper">
+      <!-- Content gets dynamically inserted here. -->
+    </div>
   </div>
 
   <div class="localNavRow localNavRow--secondary">

src/ui/public/styles/base.less

@@ -1070,4 +1070,15 @@ fieldset {
   .makeKuiColumns(@n, (@i + 1));
 }
 
+/**
+ * 1. Override Bootstrap styles.
+ */
+.localDropdownCloseButton {
+  color: #2d2d2d !important; /* 1 */
+
+  .theme-dark & {
+    color: #cecece !important; /* 1 */
+  }
+}
+
 @import "~dragula/dist/dragula.css";