Merge pull request #2676 from hypothesis/fix-signed-out-top-bar

Fix display of the (new) top bar for signed-out users

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,17 +14,17 @@
      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">
-    <li class="dropdown-menu__row" ng-show="auth.status === 'signed-in'">
+  <ul class="dropdown-menu pull-right" role="menu">
+    <li class="dropdown-menu__row" ng-if="auth.status === 'signed-in'">
       <a href="/stream?q=user:{{auth.username}}"
          class="dropdown-menu__link"
          title="View all your annotations"
          target="_blank">{{auth.username}}</a>
     </li>
-    <li class="dropdown-menu__row" ng-show="auth.status === 'signed-in'">
+    <li class="dropdown-menu__row" ng-if="auth.status === 'signed-in'">
       <a class="dropdown-menu__link" href="/profile" target="_blank">Account settings</a>
     </li>
     <li class="dropdown-menu__row">
@@ -35,7 +33,7 @@
     <li class="dropdown-menu__row">
       <a class="dropdown-menu__link" href="mailto:support@hypothes.is">Feedback</a>
     </li>
-    <li class="dropdown-menu__row" ng-show="auth.status === 'signed-in'">
+    <li class="dropdown-menu__row" ng-if="auth.status === 'signed-in'">
       <a class="dropdown-menu__link dropdown-menu__link--subtle"
          href="" ng-click="onLogout()">Sign out</a>
     </li>
@@ -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
@@ -54,7 +56,7 @@
     --><i class="h-icon-arrow-drop-down"></i>
   </span>
   <ul class="dropdown-menu pull-right" role="menu">
-    <li class="dropdown-menu__row" ng-show="auth.status === 'signed-in'">
+    <li class="dropdown-menu__row" ng-if="auth.status === 'signed-in'">
       <a class="dropdown-menu__link" href="/profile" target="_blank">Account</a>
     </li>
     <li class="dropdown-menu__row" >
@@ -63,11 +65,11 @@
     <li class="dropdown-menu__row" >
       <a class="dropdown-menu__link" href="/docs/help" target="_blank">Help</a>
     </li>
-    <li class="dropdown-menu__row" ng-show="auth.status === 'signed-in'">
+    <li class="dropdown-menu__row" ng-if="auth.status === 'signed-in'">
       <a class="dropdown-menu__link" href="/stream?q=user:{{auth.username}}"
          target="_blank">My Annotations</a>
     </li>
-    <li class="dropdown-menu__row" ng-show="auth.status === 'signed-in'">
+    <li class="dropdown-menu__row" ng-if="auth.status === 'signed-in'">
       <a class="dropdown-menu__link" href="" ng-click="onLogout()">Sign out</a>
     </li>
   </ul>

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"