Fix display of the top bar for signed-out users

- Show the focused group ("Public") when signed-out, without allowing
  the user to change it.
- Show a "Sign in" link in the right place, with the correct padding.

h/static/scripts/directive/group-list.js

@@ -60,7 +60,9 @@ function groupList(groups, $window) {
       });
     },
     restrict: 'E',
-    scope: {},
+    scope: {
+      auth: '='
+    },
     templateUrl: 'group_list.html'
   };
 };

h/static/scripts/directive/test/group-list-test.js

@@ -91,7 +91,11 @@ describe('groupList', function () {
   }));
 
   function createGroupList() {
-    return util.createDirective(document, 'groupList');
+    return util.createDirective(document, 'groupList', {
+      auth: {
+        status: 'signed-in',
+      },
+    });
   }
 
   it('should render groups', function () {

h/static/styles/app.scss

@@ -14,6 +14,7 @@ $base-line-height: 20px;
 @import './publish-annotation-btn';
 @import './search-status-bar';
 @import './share-link';
+@import './signin-control';
 @import './simple-search';
 @import './top-bar';
 

h/static/styles/signin-control.scss

+.signin-text {
+  font-size: $body2-font-size;
+  padding-left: 6px;
+}

h/static/styles/top-bar.scss

@@ -56,7 +56,7 @@ $top-bar-height: 40px;
   color: $gray-light;
   display: inline-block;
   cursor: pointer;
-  padding-left: 6px;
+  padding: 0 3px;
 
   &:hover {
     color: $gray-dark;

h/templates/client/group_list.html

-<div class="pull-right" dropdown keyboard-nav>
+<span ng-if="auth.status === 'signed-out'"
+      ng-switch on="groups.focused().public">
+  <i class="group-list-label__icon h-icon-public" ng-switch-when="true"></i><!-- nospace
+  !--><i class="group-list-label__icon h-icon-group" ng-switch-default></i>
+  <span class="group-list-label__label">{{groups.focused().name}}</span>
+</span>
+
+<div class="pull-right"
+     ng-if="auth.status === 'signed-in'"
+     dropdown
+     keyboard-nav>
   <span class="dropdown-toggle"
         dropdown-toggle
         data-toggle="dropdown"

h/templates/client/signin_control.html

-<!-- If we don't yet know the authenticated user -->
-<span ng-if="auth.status === 'unknown'">⋯</span>
-
-<!-- If the user is signed out -->
-<span><a href=""
-         ng-click="onLogin()"
-         ng-if="auth.status === 'signed-out'">Sign in</a><span>
-
 <!-- New controls -->
+<span class="signin-text"
+      ng-if="newStyle && auth.status === 'unknown'">⋯</span>
+<span class="signin-text"
+      ng-if="newStyle && auth.status === 'signed-out'">
+  <a href="" ng-click="onLogin()">Sign in</a>
+</span>
 <div ng-if="newStyle"
      class="pull-right user-picker"
      dropdown
@@ -16,10 +14,10 @@
      data-toggle="dropdown"
      dropdown-toggle
      title="{{auth.username}}">
-    <i class="h-icon-account"></i><!--
+    <i class="h-icon-account" ng-if="auth.status === 'signed-in'"></i><!--
     !--><i class="h-icon-arrow-drop-down top-bar__dropdown-arrow"></i>
   </a>
-  <ul class="dropdown-menu pull-right" role="menu" ng-if="newStyle">
+  <ul class="dropdown-menu pull-right" role="menu">
     <li class="dropdown-menu__row" ng-show="auth.status === 'signed-in'">
       <a href="/stream?q=user:{{auth.username}}"
          class="dropdown-menu__link"
@@ -43,6 +41,10 @@
 </div>
 
 <!-- Old controls -->
+<span ng-if="!newStyle && auth.status === 'unknown'">⋯</span>
+<span ng-if="!newStyle && auth.status === 'signed-out'">
+  <a href="" ng-click="onLogin()">Sign in</a>
+</span>
 <div ng-if="!newStyle"
      class="pull-right user-picker"
      dropdown

h/templates/client/top_bar.html

@@ -31,7 +31,7 @@
        the stream view.
   !-->
   <div class="top-bar__inner content" ng-if="groupsEnabled">
-    <group-list class="group-list"></group-list>
+    <group-list class="group-list" auth="auth"></group-list>
     <div class="top-bar__expander"></div>
     <simple-search
       class="simple-search"