From c3d74594a85021569b8d0cd1aa6d5fa279e3eefc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Felix=20St=C3=BCrmer?= <stuermer@weltenwort.de>
Date: Tue, 22 Nov 2016 20:19:11 +0100
Subject: [PATCH] Make the context size display editable

---
 .../kibana/public/context/app.html            | 15 ++++++++---
 .../local_navigation/local_navigation.js      |  1 +
 .../local_navigation/local_navigation.less    | 27 +++++++++++++++++++
 3 files changed, 39 insertions(+), 4 deletions(-)
 create mode 100644 src/ui/public/local_navigation/local_navigation.less

diff --git a/src/core_plugins/kibana/public/context/app.html b/src/core_plugins/kibana/public/context/app.html
index 8e56c6a8a1cce..710f4355b3a03 100644
--- a/src/core_plugins/kibana/public/context/app.html
+++ b/src/core_plugins/kibana/public/context/app.html
@@ -17,13 +17,20 @@
 
       <div data-transclude-slot="primaryRight" class="localMenu">
         <div class="localMenuItem" ng-click="contextApp.actions.increaseSize()">
-          <div class="localMenuItem__icon fa fa-plus"></div>
+          <div class="fa fa-plus"></div>
         </div>
-        <div class="localMenuIten">
-          {{ contextApp.size }} surrounding entries
+        <div class="localMenuItem">
+          <input
+            class="localMenuItem__input--inPlace"
+            ng-change="contextApp.actions.setSize(contextApp.size)"
+            ng-model-options="{updateOn: 'change'}"
+            ng-model="contextApp.size"
+            type="number"
+          />
+          <div>surrounding entries</div>
         </div>
         <div class="localMenuItem" ng-click="contextApp.actions.decreaseSize()">
-          <div class="localMenuItem__icon fa fa-minus"></div>
+          <div class="a fa-minus"></div>
         </div>
       </div>
     </div>
diff --git a/src/ui/public/local_navigation/local_navigation.js b/src/ui/public/local_navigation/local_navigation.js
index 2d645afd4e814..8d949f755b45d 100644
--- a/src/ui/public/local_navigation/local_navigation.js
+++ b/src/ui/public/local_navigation/local_navigation.js
@@ -3,6 +3,7 @@ import angular from 'angular';
 import uiModules from 'ui/modules';
 
 import 'ui/multi_transclude';
+import './local_navigation.less';
 import localNavigationTemplate from './local_navigation.html';
 
 
diff --git a/src/ui/public/local_navigation/local_navigation.less b/src/ui/public/local_navigation/local_navigation.less
new file mode 100644
index 0000000000000..9c405233bb5c6
--- /dev/null
+++ b/src/ui/public/local_navigation/local_navigation.less
@@ -0,0 +1,27 @@
+@import "~ui/styles/variables.less";
+
+// This should be moved to the kibana ui framework code as soon as it has been
+// integrated into the kibana repo. See elastic/kibana#8867 for the status.
+.localMenuItem__input--inPlace {
+  appearance: textfield;
+  background: transparent;
+  border: 0;
+  border-bottom: 1px dashed;
+  display: block;
+  margin-right: 5px;
+  outline: none;
+  padding-left: 0;
+  padding-right: 0;
+  text-align: center;
+  width: 2em;
+
+  &::-webkit-outer-spin-button,
+  &::-webkit-inner-spin-button {
+    appearance: none;
+    margin: 0;
+  }
+
+  &:focus {
+    background-color: @kibanaGray6;
+  }
+}