Collapse the search input when the search query is empty

When the new top-bar design is enabled,
collapse the search input unless the field is hovered,
focused or there is an active search query.

In the legacy top-bar design, the search field remains
expanded all the time

T-90

h/static/scripts/directive/simple-search.coffee

@@ -27,6 +27,11 @@ module.exports = ['$http', '$parse', ($http, $parse) ->
 
   restrict: 'E'
   scope:
+    # Specifies whether the search input field should always be expanded,
+    # regardless of whether the it is focused or has an active query.
+    #
+    # If false, it is only expanded when focused or when 'query' is non-empty
+    alwaysExpanded: '='
     query: '='
     onSearch: '&'
     onClear: '&'
@@ -34,7 +39,8 @@ module.exports = ['$http', '$parse', ($http, $parse) ->
             <form class="simple-search-form" ng-class="!searchtext && 'simple-search-inactive'" name="searchBox" ng-submit="search($event)">
               <input class="simple-search-input" type="text" ng-model="searchtext" name="searchText"
                      placeholder="{{loading && 'Loading' || 'Search'}}…"
-                     ng-disabled="loading" />
+                     ng-disabled="loading"
+                     ng-class="(alwaysExpanded || searchtext.length > 0) ? 'is-expanded' : ''"/>
               <button class="simple-search-icon btn btn-clean" ng-hide="loading">
                 <i class="h-icon-search btn-icon"></i>
               </button>

h/static/styles/simple-search.scss

@@ -17,17 +17,32 @@
   color: $gray-light;
 }
 
-input.simple-search-input {
-  flex-grow: 1;
-  order: 1;
-
-  color: $text-color;
-  border: none;
-  outline: none;
-  padding: 0;
-
-  &:disabled {
-    background: none;
-    color: $gray-light;
+@at-root {
+  $expanded-max-width: 150px;
+
+  .simple-search-input {
+    flex-grow: 1;
+    order: 1;
+
+    color: $text-color;
+    border: none;
+    outline: none;
+    padding: 0;
+
+    max-width: 0px;
+    transition: max-width .3s ease-out;
+
+    &:disabled {
+      background: none;
+      color: $gray-light;
+    }
+
+    &:focus,&.is-expanded {
+      max-width: $expanded-max-width;
+    }
+  }
+
+  .simple-search-form:hover .simple-search-input {
+    max-width: $expanded-max-width;
   }
 }

h/static/styles/top-bar.scss

@@ -21,7 +21,7 @@
   display: flex;
   flex-flow: row nowrap;
   align-items: center;
-  justify-content: space-between;
+  justify-content: flex-end;
 
   padding-left: $h-padding;
   padding-right: $h-padding;
@@ -29,14 +29,14 @@
   height: 28px;
 }
 
-.top-bar__inner .simple-search {
-  flex-grow: 1;
+.top-bar__inner .group-list {
   margin-right: .75em;
-  overflow: hidden;
 }
 
-.top-bar__inner .group-list {
-  margin-right: .75em;
+// an expander which adds spacing between the groups list
+// and the toolbar icons (in the new top-bar design)
+.top-bar__expander {
+  flex-grow: 1;
 }
 
 .top-bar__btn {

h/templates/client/top_bar.html

@@ -11,7 +11,10 @@
     <simple-search class="simple-search"
          query="searchController.query"
          on-search="searchController.update(query)"
-         on-clear="searchController.clear()"></simple-search>
+         on-clear="searchController.clear()"
+         always-expanded="true"></simple-search>
+
+    <div class="top-bar__expander"></div>
 
     <group-list class="group-list" ng-if="groupsEnabled">
     </group-list>
@@ -41,6 +44,7 @@
   <div class="top-bar__inner content" ng-if="groupsEnabled">
     <group-list class="group-list">
     </group-list>
+    <div class="top-bar__expander"></div>
     <simple-search class="simple-search"
          query="searchController.query"
          on-search="searchController.update(query)"