Show 3rd party group logos. (#232)

docs/config.md

@@ -66,3 +66,4 @@ Each service description is an object with the keys:
 
  * `authority` _String_. The domain name which the annotation service is associated with.
  * `grantToken` _String|null_. An OAuth grant token which the client can exchange for an access token in order to make authenticated requests to the service. If _null_, the user will only be able to read rather than create or modify annotations. (Default: _null_)
+ * `icon` _String|null_. The URL to an image for the annotation service. This image will appear to the left of the name of the currently selected group. The image should be suitable for display at 16x16px and the recommended format is SVG.

src/sidebar/directive/group-list.js

 'use strict';
 
 var persona = require('../filter/persona');
+var serviceConfig = require('../service-config');
 
 // @ngInject
 function GroupListController($scope, $window, groups, settings) {
@@ -20,6 +21,11 @@ function GroupListController($scope, $window, groups, settings) {
   $scope.focusGroup = function (groupId) {
     groups.focus(groupId);
   };
+
+  var svc = serviceConfig(settings);
+  if (svc && svc.icon) {
+    $scope.thirdPartyGroupIcon = svc.icon;
+  }
 }
 
 /**

src/sidebar/service-config.js

+'use strict';
+
+/**
+ * Return the configuration for the annotation service which the client would retrieve
+ * annotations from which may contain the authority, grantToken and icon.
+ *
+ * @param {Object} settings - The settings object which would contain the services array.
+ */
+
+function serviceConfig(settings) {
+  if (!Array.isArray(settings.services) || settings.services.length === 0) {
+    return null;
+  }
+  return settings.services[0];
+}
+
+module.exports = serviceConfig;

src/sidebar/templates/group_list.html

 <span ng-if="auth.status === 'logged-out'"
       ng-switch on="groups.focused().public">
-  <i class="group-list-label__icon h-icon-public" ng-switch-when="true"></i><!-- nospace
+  <img class="group-list-label__icon group-list-label__icon--third-party"
+    ng-src="{{ thirdPartyGroupIcon }}"
+    ng-if="thirdPartyGroupIcon"
+    ng-switch-when="true"><!-- nospace
+  !--><i class="group-list-label__icon h-icon-public"
+    ng-if="!thirdPartyGroupIcon"
+    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>
@@ -15,8 +21,15 @@
         role="button"
         ng-switch on="groups.focused().public"
         title="Change the selected group">
-    <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>
+    <img class="group-list-label__icon group-list-label__icon--third-party"
+         ng-src="{{ thirdPartyGroupIcon }}"
+         ng-if="thirdPartyGroupIcon"
+         ng-switch-when="true"><!-- nospace
+    !--><i class="group-list-label__icon h-icon-public"
+           ng-switch-when="true"
+           ng-if="!thirdPartyGroupIcon"></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><!-- nospace
     !--><i class="h-icon-arrow-drop-down"></i>
   </div>
@@ -28,7 +41,11 @@
            ng-click="focusGroup(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>
+          <img class="group-list-label__icon group-list-label__icon--third-party"
+               ng-src="{{ thirdPartyGroupIcon }}"
+               ng-if="thirdPartyGroupIcon"
+               ng-switch-when="true">
+          <i class="h-icon-public" ng-if="!thirdPartyGroupIcon" ng-switch-when="true"></i>
           <i class="h-icon-group" ng-switch-default></i>
         </div>
         <!-- the group name and share link !-->

src/sidebar/test/service-config-test.js

+'use strict';
+
+var serviceConfig = require('../service-config');
+
+describe('serviceConfig', function () {
+  it('returns null if services is not an array', function () {
+    var settings = {
+      services: 'someString',
+    };
+
+    assert.isNull(serviceConfig(settings));
+  });
+
+  it('returns null if the settings object has no services', function () {
+    var settings = {
+      services: [],
+    };
+
+    assert.isNull(serviceConfig(settings));
+  });
+
+  it('returns the first service in the settings object', function () {
+    var settings = {
+      services: [{
+        key: 'val',
+      }],
+    };
+
+    assert.deepEqual(settings.services[0], serviceConfig(settings));
+  });
+});

src/styles/group-list.scss

@@ -80,6 +80,7 @@ $group-list-spacing-below: 50px;
   color: $color-gray;
   display: inline-block;
   margin-right: 4px;
+  position: relative;
   vertical-align: baseline;
 
   // align the base of the chat-heads icon for groups
@@ -87,6 +88,12 @@ $group-list-spacing-below: 50px;
   transform: translateY(1px);
 }
 
+.group-list-label__icon--third-party {
+  height: 15px;
+  width: 15px;
+  top: 2px;
+}
+
 // the label showing the currently selected group which opens
 // the drop-down list when clicked
 .group-list-label__label {