Implement new design for search status bar

This provides a clearer design for the search status
button.

The new design is part of the groups roll-out and
is only shown when the groups feature is enabled.

T-93

h/static/scripts/directive/search-status-bar.js

+// @ngInject
 module.exports = function () {
   return {
     restrict: 'E',
     scope: {
+      /** Specifies whether to use the new design that is part of
+       * the groups roll-out.
+       * See https://trello.com/c/GxVkM1eN/
+       */
+      newDesign: '=',
       filterActive: '=',
       filterMatchCount: '=',
       onClearSelection: '&',

h/static/scripts/directive/test/search-status-bar-test.js

@@ -13,18 +13,39 @@ describe('searchStatusBar', function () {
     angular.mock.module('h.templates');
   });
 
-  it('should display the filter count', function () {
-    var elem = util.createDirective(document, 'searchStatusBar', {
-      filterActive: true,
-      filterMatchCount: 5
+  describe('old design', function () {
+    it('should display the filter count', function () {
+      var elem = util.createDirective(document, 'searchStatusBar', {
+        filterActive: true,
+        filterMatchCount: 5
+      });
+      assert.include($(elem).text(), "Found 5 results");
+    });
+
+    it('should display the selection count', function () {
+      var elem = util.createDirective(document, 'searchStatusBar', {
+        selectionCount: 1
+      });
+      assert.include($(elem).text(), 'Showing 1 selected annotation');
     });
-    assert.include($(elem).text(), "Found 5 results");
   });
 
-  it('should display the selection count', function () {
-    var elem = util.createDirective(document, 'searchStatusBar', {
-      selectionCount: 1
+  describe('new design', function () {
+    it('should display the filter count', function () {
+      var elem = util.createDirective(document, 'searchStatusBar', {
+        newDesign: true,
+        filterActive: true,
+        filterMatchCount: 5
+      });
+      assert.include($(elem).text(), "5 search results");
+    });
+
+    it('should display the selection count', function () {
+      var elem = util.createDirective(document, 'searchStatusBar', {
+        newDesign: true,
+        selectionCount: 2
+      });
+      assert.include($(elem).text(), '2 selected annotations');
     });
-    assert.include($(elem).text(), 'Showing 1 selected annotation');
   });
 });

h/static/styles/app.scss

@@ -12,6 +12,7 @@ $base-line-height: 20px;
 @import './primary-action-btn';
 @import './dropdown-menu-btn';
 @import './publish-annotation-btn';
+@import './search-status-bar';
 @import './share-link';
 
 body {

h/static/styles/primary-action-btn.scss

@@ -12,6 +12,9 @@
   font-weight: bold;
   font-size: $body1-font-size;
 
+  padding-left: 12px;
+  padding-right: 12px;
+
   &:disabled {
     color: $gray-light;
   }
@@ -20,3 +23,16 @@
     background-color: $color-mine-shaft;
   }
 }
+
+.primary-action-btn--short {
+  height: 30px;
+}
+
+.primary-action-btn__icon {
+  color: $color-silver-chalice;
+  display: inline-block;
+  font-weight: bold;
+  margin-left: -3px;
+  margin-right: 3px;
+  transform: translateY(1px);
+}

h/static/styles/search-status-bar.scss

+.search-status-bar {
+  margin-bottom: 10px;
+}
+
+.search-status-bar > button {
+  margin-right: 10px;
+}

h/templates/client/search_status_bar.html

-<li ng-show="filterActive">
+<div ng-if="newDesign" class="search-status-bar" ng-show="filterActive">
+  <button class="primary-action-btn primary-action-btn--short"
+          ng-click="onClearSelection()"
+          title="Clear the search filter and show all annotations"
+  >
+    <i class="primary-action-btn__icon h-icon-close"></i> Clear search
+  </button>
+  <span ng-pluralize
+           count="filterMatchCount"
+           when="{'0': 'No results for “{{searchQuery}}”',
+                  'one': '1 search result',
+                  'other': '{} search results'}"></span>
+</div>
+<div ng-if="newDesign" class="search-status-bar" ng-show="!filterActive && selectionCount > 0">
+  <button class="primary-action-btn primary-action-btn--short"
+          ng-click="onClearSelection()"
+          title="Clear the selection and show all annotations"
+  >
+    <i class="primary-action-btn__icon h-icon-close"></i> Clear selection
+  </button>
+  <span ng-pluralize
+           count="selectionCount"
+           when="{'0': 'No annotations selected',
+                  'one': '1 selected annotation',
+                  'other': '{} selected annotations'}"></span>
+</div>
+<div ng-if="!newDesign" class="search-status-bar" ng-show="filterActive">
   <span ng-pluralize
            count="filterMatchCount"
            when="{'0': 'No results for “{{searchQuery}}”.',
                   'one': 'Found one result.',
                   'other': 'Found {} results.'}"></span>
   <a href="" ng-click="onClearSelection()">Clear search</a>.
-</li>
-<li ng-show="!filterActive && selectionCount > 0">
+</div>
+<div ng-if="!newDesign" class="search-status-bar"
+  ng-show="!filterActive && selectionCount > 0">
   <span ng-pluralize
            count="selectionCount"
            when="{'0': 'No annotations selected.',

h/templates/client/viewer.html

@@ -4,6 +4,7 @@
     thread-filter="search.query"
     window-scroll="loadMore(20)">
   <search-status-bar
+    new-design="feature('groups')"
     filter-active="threadFilter.active()"
     filter-match-count="count('match')"
     search-query="search ? search.query : ''"