Move sort control into top bar

When the 'Groups' feature is enabled, move the sort
menu into a dropdrown triggered via a button
in the top bar.

T-91

h/static/scripts/app-controller.coffee

@@ -38,7 +38,10 @@ module.exports = class AppController
     $scope.isSidebar = $window.top isnt $window
 
     # Default sort
-    $scope.sort = name: 'Location'
+    $scope.sort = {
+      name: 'Location'
+      options: ['Newest', 'Oldest', 'Location']
+    }
 
     # Reload the view when the focused group changes or the
     # list of groups that the user is a member of changes
@@ -67,7 +70,11 @@ module.exports = class AppController
                 if selector.type is 'TextPositionSelector'
                   return selector.start
           return Number.POSITIVE_INFINITY
-      $scope.sort = {name, predicate}
+      $scope.sort = {
+        name,
+        predicate,
+        options: $scope.sort.options,
+      }
 
     $scope.$watch 'auth.user', (newVal, oldVal) ->
       return if newVal is oldVal

h/static/scripts/directive/sort-dropdown.js

@@ -4,6 +4,7 @@ module.exports = function () {
     scope: {
       sortBy: '=',
       sortOptions: '=',
+      showAsIcon: '=',
       onChangeSortBy: '&',
     },
     templateUrl: 'sort_dropdown.html',

h/static/scripts/directive/top-bar.js

@@ -17,6 +17,9 @@ module.exports = function () {
       searchController: '=',
       accountDialog: '=',
       shareDialog: '=',
+      sortBy: '=',
+      sortOptions: '=',
+      onChangeSortBy: '&',
     },
     templateUrl: 'top_bar.html',
   };

h/templates/client/sort_dropdown.html

 <span class="ng-cloak" dropdown keyboard-nav>
   <span role="button"
         data-toggle="dropdown"
-        dropdown-toggle>
+        dropdown-toggle
+        ng-if="!showAsIcon">
     Sorted by {{sortBy | lowercase}}
     <i class="h-icon-arrow-drop-down"></i>
   </span>
+  <button
+    type="button"
+    class="top-bar__btn"
+    ng-if="showAsIcon"
+    dropdown-toggle
+    title="Sort by {{sortBy}}">
+    <i class="h-icon-search"></i>
+  </button>
   <ul class="dropdown-menu pull-right" role="menu">
     <li ng-repeat="sortOption in sortOptions"
         ng-click="onChangeSortBy({sortBy: sortOption})"
-        ><a class="dropdown-menu__link" href="">{{sortOption}}</a></li>
+        ><span ng-class="sortOption === sortBy ? 'dropdown-menu__radio-btn--selected' : ''"
+        ></span><a class="dropdown-menu__link" href="">{{sortOption}}</a></li>
   </ul>
 </span>

h/templates/client/top_bar.html

@@ -55,6 +55,12 @@
          on-search="searchController.update(query)"
          on-clear="searchController.clear()"
          title="Filter the annotation list"></simple-search>
+    <sort-dropdown
+      sort-options="sortOptions"
+      sort-by="sortBy"
+      show-as-icon="true"
+      on-change-sort-by="onChangeSortBy({sortBy: sortBy})">
+    </sort-dropdown>
     <a class="top-bar__btn"
             ng-click="shareDialog.visible = !shareDialog.visible"
             ng-if="isSidebar"

h/templates/client/viewer.html

@@ -10,7 +10,7 @@
     selection-count="selectedAnnotationsCount"
     on-clear-selection="clearSelection()">
   </search-status-bar>
-  <li ng-show="isStream">
+  <li ng-if="!feature('groups') && isStream">
     <sort-dropdown
       sort-by="sort.name"
       sort-options="sortOptions"