Groups list dropdown UI tweaks

 * Restructure the 'New group' item to make icon
   and label align with the items above it

 * Make the whole 'New group' section clickable

 * Make 'New group' icon bold for visual consistency
   with other icons

 * Use the prerendered group URL from the API instead
   of generating it locally

Card 87

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

 'use strict';
 
-var assert = require('assert');
-
+// @ngInject
 function GroupsListController($scope) {
   $scope.expandedGroupId = undefined;
 
@@ -24,10 +23,6 @@ function GroupsListController($scope) {
   $scope.shouldShowShareLink = function (groupId) {
     return $scope.expandedGroupId === groupId;
   }
-
-  $scope.linkForGroup = function (groupId) {
-    return $scope.baseURI + 'groups/' + groupId;
-  }
 }
 
 /**
@@ -37,15 +32,15 @@ function GroupsListController($scope) {
  * @description Displays a list of groups of which the user is a member.
  */
 // @ngInject
-module.exports = function (groups) {
+module.exports = function (groups, $window) {
   return {
-    controller: ['$scope', GroupsListController],
+    controller: GroupsListController,
     link: function ($scope, elem, attrs) {
       $scope.groups = groups;
 
-      // set the base URI used later to construct the sharing
-      // link for the group
-      $scope.baseURI = elem[0].ownerDocument.baseURI;
+      $scope.createNewGroup = function() {
+        $window.open('/groups/new', '_blank');
+      }
 
       $scope.$watch('expandedGroupId', function (activeGroupId) {
         if (activeGroupId) {
@@ -53,7 +48,6 @@ module.exports = function (groups) {
           // the link's text
           setTimeout(function() {
             var activeShareLinkField = elem[0].querySelector('.share-link-field[data-group-id=' + activeGroupId + ']');
-            assert(activeShareLinkField);
             activeShareLinkField.focus();
             activeShareLinkField.select();
           }, 0);

h/static/styles/app.scss

@@ -131,7 +131,8 @@ $group-list-width: 270px;
 
   .share-link-container {
     font-size: $body1-font-size;
-    margin-top: 10px;
+    line-height: $body1-line-height;
+    margin-top: 1px;
     white-space: normal;
   }
 
@@ -146,6 +147,8 @@ $group-list-width: 270px;
 
   .share-link-field {
     padding: 3px;
+    padding-top: 5px;
+    padding-bottom: 5px;
     margin-top: 12px;
     margin-bottom: 8px;
     border: 1px solid $gray-lighter;
@@ -154,6 +157,15 @@ $group-list-width: 270px;
 
   .new-group-btn {
     background-color: $gray-lightest;
+
+    .group-item {
+      padding-top: 12px;
+      padding-bottom: 12px;
+    }
+
+    .h-icon-add {
+      font-weight: bold;
+    }
   }
 }
 

h/static/styles/variables.scss

@@ -68,6 +68,7 @@ $headings-font-family:    inherit !default;
 $headings-color:          inherit !default;
 
 $body1-font-size:         12px;
+$body1-line-height:       1.4em;
 
 //STANCE COLORS
 $positive: #3aab39;

h/templates/client/group_list.html

@@ -37,7 +37,7 @@
               </a>
             </div>
             <div class="share-link-expander" ng-show="shouldShowShareLink(group.id)">
-              <input class="share-link-field" data-group-id="{{group.id}}" ng-value="linkForGroup(group.id)">
+              <input class="share-link-field" data-group-id="{{group.id}}" ng-value="group.url">
               <p>
                 You can invite other people to join this group
                 by sending them this link
@@ -48,8 +48,14 @@
       </div>
     </li>
     <li class="new-group-btn">
-      <a href="/groups/new" target="_blank" title="Create a new group to share annotations"><i class="h-icon-add"></i>
-      New Group</a>
+      <div class="group-item" ng-click="createNewGroup()">
+        <div class="group-icon-container"><i class="h-icon-add"></i></div>
+        <div class="group-details">
+          <a href="" title="Create a new group to share annotations">
+            New group
+          </a>
+        </div>
+      </div>
     </li>
   </ul>
 </div>