fix search box visibility when change browser size

zeppelin-web/src/app/notebook/notebook-actionBar.html

@@ -166,10 +166,12 @@ limitations under the License.
 
     <span class="labelBtn btn-group" id="searchGroup" style="vertical-align:middle; display:inline-block;">
       <button type="button" class="btn btn-default btn-xs dropdown-toggle"
-              data-toggle="dropdown" tooltip-placement="bottom" uib-tooltip="Search code">
+              data-toggle="dropdown" tooltip-placement="bottom" uib-tooltip="Search code"
+      ng-click="searchClicked()">
         <i class="fa fa-search"></i>
       </button>
-      <ul class="dropdown-menu search-dropdown" ng-click="$event.stopPropagation()" style="width: 350px">
+      <ul class="dropdown-menu search-dropdown" ng-click="$event.stopPropagation()"
+          ng-style="{left : search.left}" style="width: 350px">
         <li>
           <div class="input-group input-group-sm search-group">
             <span class="input-group-addon">Find</span>

zeppelin-web/src/app/notebook/notebook.controller.js

@@ -70,7 +70,10 @@ function NotebookCtrl ($scope, $route, $routeParams, $location, $rootScope,
     replaceText: '',
     needToSendNextOccurrenceAfterReplace: false,
     occurrencesCount: 0,
-    currentOccurrence: 0
+    currentOccurrence: 0,
+    searchBoxOpened: false,
+    searchBoxWidth: 350,
+    left: '0px'
   }
   let currentSearchParagraph = 0
 
@@ -903,6 +906,37 @@ function NotebookCtrl ($scope, $route, $routeParams, $location, $rootScope,
     }
   }
 
+  let makeSearchBoxVisible = function() {
+    if ($scope.search.searchBoxOpened) {
+      $scope.search.searchBoxOpened = false
+      console.log('make 0')
+      $scope.search.left = '0px'
+    } else {
+      $scope.search.searchBoxOpened = true
+      let searchGroupRect = angular.element('#searchGroup')[0].getBoundingClientRect()
+      console.log('make visible')
+      let dropdownRight = searchGroupRect.left + $scope.search.searchBoxWidth
+      console.log(dropdownRight + ' ' + window.innerWidth)
+      if (dropdownRight + 5 > window.innerWidth) {
+        $scope.search.left = window.innerWidth - dropdownRight - 15 + 'px'
+      }
+    }
+  }
+
+  $scope.searchClicked = function() {
+    makeSearchBoxVisible()
+  }
+
+  $scope.$on('toggleSearchBox', function() {
+    let elem = angular.element('#searchGroup')
+    if ($scope.search.searchBoxOpened) {
+      elem.removeClass('open')
+    } else {
+      elem.addClass('open')
+    }
+    $timeout(makeSearchBoxVisible())
+  })
+
   $scope.restartInterpreter = function(interpreter) {
     const thisConfirm = BootstrapDialog.confirm({
       closable: false,

zeppelin-web/src/app/notebook/paragraph/paragraph.controller.js

@@ -1453,13 +1453,7 @@ function ParagraphCtrl ($scope, $rootScope, $route, $window, $routeParams, $loca
       } else if (keyEvent.ctrlKey && keyEvent.altKey && keyCode === 87) { // Ctrl + Alt + w
         $scope.goToSingleParagraph()
       } else if (keyEvent.ctrlKey && keyCode === 70) { // Ctrl + f
-        let elem = angular.element('#searchGroup')
-        let openClass = 'open'
-        if (elem.hasClass(openClass)) {
-          elem.removeClass(openClass)
-        } else {
-          elem.addClass(openClass)
-        }
+        $scope.$emit('toggleSearchBox')
       } else {
         noShortcutDefined = true
       }