Add inline share link to groups dropdown in top bar

 * Use an element directive for <group-list> for
   consistency with the <privacy> directive and because
   the directive has its own template.

 * Use flexbox for easier layout of items in the groups
   dropdown list.

 * Update the hover and selection states of items in the dropdown
   list as per the mocks.

 * Add descriptive titles to all links in the list

Card 87

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

 'use strict';
 
+var assert = require('assert');
+
+function GroupsListController($scope) {
+  $scope.expandedGroupId = undefined;
+
+  // used to keep the dropdown from closing when the user
+  // interacts with the inline link share pane within the groups list
+  $scope.stopClickPropagation = function($event) {
+    $event.stopPropagation();
+  }
+
+  // show the share link for the specified group or clear it if
+  // null
+  $scope.toggleShareLink = function (groupId) {
+    if (!groupId || $scope.expandedGroupId === groupId) {
+      $scope.expandedGroupId = undefined;
+    } else {
+      $scope.expandedGroupId = groupId;
+    }
+  };
+
+  $scope.shouldShowShareLink = function (groupId) {
+    return $scope.expandedGroupId === groupId;
+  }
+
+  $scope.linkForGroup = function (groupId) {
+    return $scope.baseURI + 'groups/' + groupId;
+  }
+}
+
 /**
  * @ngdoc directive
  * @name groupList
  * @restrict AE
  * @description Displays a list of groups of which the user is a member.
  */
-
 // @ngInject
 module.exports = function (groups) {
   return {
-    link: function (scope, elem, attrs) {
-      scope.groups = groups;
+    controller: ['$scope', 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.$watch('expandedGroupId', function (activeGroupId) {
+        if (activeGroupId) {
+          // wait for the share link field to be revealed and then select
+          // 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);
+        }
+      });
     },
     restrict: 'AE',
     scope: {},

h/static/styles/app.scss

@@ -82,7 +82,7 @@ ol {
 
 /* The groups dropdown list. */
 
-$group-list-width: 225px;
+$group-list-width: 270px;
 
 .group-list {
   .dropdown {
@@ -92,21 +92,69 @@ $group-list-width: 225px;
   .dropdown-menu {
     width: $group-list-width;
 
-    li {
-      @include pie-clearfix;
-    }
-
     .group-name {
-      float: left;
       overflow: hidden;
       text-overflow: ellipsis;
       width: $group-list-width - 30px;
     }
+  }
 
-    .new-group-btn {
-      background-color: $gray-lightest;
+  .group-item {
+    display: flex;
+    flex-direction: row;
+    padding: 10px;
+    cursor: pointer;
+
+    &:hover {
+      .share-link-toggle {
+        color: inherit;
+      }
+      .group-name-link {
+        color: $brand-color;
+      }
+    }
+
+    &.selected {
+      .group-name-link {
+        font-weight: 600;
+      }
     }
   }
+
+  .group-icon-container {
+    margin-right: 10px;
+  }
+
+  .group-details {
+    margin-right: 20px;
+  }
+
+  .share-link-container {
+    font-size: $body1-font-size;
+    margin-top: 10px;
+    white-space: normal;
+  }
+
+  .share-link-toggle {
+    color: $gray-light;
+  }
+
+  .share-link-toggle:hover {
+    text-decoration: underline;
+    color: $gray-dark;
+  }
+
+  .share-link-field {
+    padding: 3px;
+    margin-top: 12px;
+    margin-bottom: 8px;
+    border: 1px solid $gray-lighter;
+    width: 100%;
+  }
+
+  .new-group-btn {
+    background-color: $gray-lightest;
+  }
 }
 
 /* The user account dropdown menu */

h/static/styles/common.scss

@@ -180,24 +180,17 @@ html {
   li:not(.ng-hide) {
     text-align: left;
 
-    a {
+    & > a {
       display: block;
       line-height: 1;
       padding: 1em;
       white-space: nowrap;
-    }
 
-    &:hover {
-      color: $brand-color;
-    }
-
-    &.selected {
-      font-weight: 600;
-      line-height: 1;
-      &:before {
-        font-size: .7em;
+      :hover {
+        color: $brand-color;
       }
     }
+
     &.inactive {
       font-weight: 400;
       color: $gray-lighter;

h/static/styles/variables.scss

@@ -67,6 +67,8 @@ $alt-font-family:         $serif-font-family !default;
 $headings-font-family:    inherit !default;
 $headings-color:          inherit !default;
 
+$body1-font-size:         12px;
+
 //STANCE COLORS
 $positive: #3aab39;
 $negative: #d11c2b;

h/templates/client/group_list.html

@@ -2,28 +2,53 @@
   <span class="dropdown-toggle"
         data-toggle="dropdown"
         role="button"
-        ng-switch on="groups.focused().public">
+        ng-switch on="groups.focused().public"
+        ng-click="toggleShareLink(undefined)">
     <i class="h-icon-public" ng-switch-when="true"></i>
     <i class="h-icon-group" ng-switch-default></i>
     {{groups.focused().name}}
     <i class="h-icon-arrow-drop-down"></i>
   </span>
   <ul class="dropdown-menu pull-right" role="menu">
-    <li ng-repeat="group in groups.all()"
-        ng-class="group.id == groups.focused().id? 'selected' : ''">
-      <a class="group-name"
-         href=""
-         ng-click="groups.focus(group.id)"
-         ng-switch on="group.public">
-        <i class="h-icon-public" ng-switch-when="true"></i>
-        <i class="h-icon-group" ng-switch-default></i>
-        {{group.name}}
-      </a>
-      <a ng-href="{{group.url}}" ng-if="group.url"
-         target="_blank" class="h-icon-link" title="Share this group"></a>
+    <li ng-repeat="group in groups.all()">
+      <div ng-class="{'group-item': true, selected: group.id == groups.focused().id}"
+           ng-click="groups.focus(group.id)">
+        <!-- the group icon !-->
+        <div class="group-icon-container" ng-switch on="group.public">
+          <i class="h-icon-public" ng-switch-when="true"></i>
+          <i class="h-icon-group" ng-switch-default></i>
+        </div>
+        <!-- the group name and share link !-->
+        <div class="group-details">
+          <div class="group-name-container">
+            <a class="group-name-link"
+               href=""
+               title="{{ group.public ? 'Show public annotations' : 'Show and create annotations in ' + group.name }}">
+               {{group.name}}
+            </a>
+          </div>
+          <div class="share-link-container" ng-click="stopClickPropagation($event)" ng-show="!group.public">
+            <div>
+              <a class="share-link-toggle"
+                 href=""
+                 ng-click="toggleShareLink(group.id)"
+                 title="Invite others to join this group">
+                Invite others to join this group
+              </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)">
+              <p>
+                You can invite other people to join this group
+                by sending them this link
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
     </li>
     <li class="new-group-btn">
-      <a href="/groups/new" target="_blank"><i class="h-icon-add"></i>
+      <a href="/groups/new" target="_blank" title="Create a new group to share annotations"><i class="h-icon-add"></i>
       New Group</a>
     </li>
   </ul>