Commit df77438b authored by Robert Knight's avatar Robert Knight

Convert <group-list> to a component

parent 3030bf40
...@@ -140,6 +140,7 @@ module.exports = angular.module('h', [ ...@@ -140,6 +140,7 @@ module.exports = angular.module('h', [
.component('annotationShareDialog', require('./components/annotation-share-dialog')) .component('annotationShareDialog', require('./components/annotation-share-dialog'))
.component('annotationThread', require('./components/annotation-thread')) .component('annotationThread', require('./components/annotation-thread'))
.component('dropdownMenuBtn', require('./components/dropdown-menu-btn')) .component('dropdownMenuBtn', require('./components/dropdown-menu-btn'))
.component('groupList', require('./directive/group-list').component)
.component('helpLink', require('./components/help-link')) .component('helpLink', require('./components/help-link'))
.component('helpPanel', require('./components/help-panel')) .component('helpPanel', require('./components/help-panel'))
.component('loggedoutMessage', require('./components/loggedout-message')) .component('loggedoutMessage', require('./components/loggedout-message'))
...@@ -158,7 +159,6 @@ module.exports = angular.module('h', [ ...@@ -158,7 +159,6 @@ module.exports = angular.module('h', [
.component('timestamp', require('./components/timestamp')) .component('timestamp', require('./components/timestamp'))
// These should use `component()` but will require some changes. // These should use `component()` but will require some changes.
.directive('groupList', require('./directive/group-list').directive)
.directive('markdown', require('./directive/markdown')) .directive('markdown', require('./directive/markdown'))
.directive('topBar', require('./directive/top-bar')) .directive('topBar', require('./directive/top-bar'))
......
...@@ -4,12 +4,18 @@ var persona = require('../filter/persona'); ...@@ -4,12 +4,18 @@ var persona = require('../filter/persona');
var serviceConfig = require('../service-config'); var serviceConfig = require('../service-config');
// @ngInject // @ngInject
function GroupListController($scope, $window, groups, settings) { function GroupListController($window, groups, settings, serviceUrl) {
$scope.isThirdPartyUser = function () { this.groups = groups;
return persona.isThirdPartyUser($scope.auth.userid, settings.authDomain);
this.createNewGroup = function() {
$window.open(serviceUrl('groups.new'), '_blank');
};
this.isThirdPartyUser = function () {
return persona.isThirdPartyUser(this.auth.userid, settings.authDomain);
}; };
$scope.leaveGroup = function (groupId) { this.leaveGroup = function (groupId) {
var groupName = groups.get(groupId).name; var groupName = groups.get(groupId).name;
var message = 'Are you sure you want to leave the group "' + var message = 'Are you sure you want to leave the group "' +
groupName + '"?'; groupName + '"?';
...@@ -18,42 +24,26 @@ function GroupListController($scope, $window, groups, settings) { ...@@ -18,42 +24,26 @@ function GroupListController($scope, $window, groups, settings) {
} }
}; };
$scope.focusGroup = function (groupId) { this.focusGroup = function (groupId) {
groups.focus(groupId); groups.focus(groupId);
}; };
var svc = serviceConfig(settings); var svc = serviceConfig(settings);
if (svc && svc.icon) { if (svc && svc.icon) {
$scope.thirdPartyGroupIcon = svc.icon; this.thirdPartyGroupIcon = svc.icon;
} }
} }
/** var component = {
* @ngdoc directive controller: GroupListController,
* @name groupList controllerAs: 'vm',
* @restrict E bindings: {
* @description Displays a list of groups of which the user is a member. auth: '<',
*/ },
// @ngInject template: require('../templates/group_list.html'),
function groupList($window, groups, serviceUrl) { };
return {
controller: GroupListController,
link: function ($scope) {
$scope.groups = groups;
$scope.createNewGroup = function() {
$window.open(serviceUrl('groups.new'), '_blank');
};
},
restrict: 'E',
scope: {
auth: '<',
},
template: require('../templates/group_list.html'),
};
}
module.exports = { module.exports = {
directive: groupList, component: component,
Controller: GroupListController, Controller: GroupListController,
}; };
<span ng-if="auth.status === 'logged-out'" <span ng-if="vm.auth.status === 'logged-out'"
ng-switch on="groups.focused().public"> ng-switch on="vm.groups.focused().public">
<img class="group-list-label__icon group-list-label__icon--third-party" <img class="group-list-label__icon group-list-label__icon--third-party"
ng-src="{{ thirdPartyGroupIcon }}" ng-src="{{ vm.thirdPartyGroupIcon }}"
ng-if="thirdPartyGroupIcon" ng-if="vm.thirdPartyGroupIcon"
ng-switch-when="true"><!-- nospace ng-switch-when="true"><!-- nospace
!--><i class="group-list-label__icon h-icon-public" !--><i class="group-list-label__icon h-icon-public"
ng-if="!thirdPartyGroupIcon" ng-if="!vm.thirdPartyGroupIcon"
ng-switch-when="true"></i><!-- nospace ng-switch-when="true"></i><!-- nospace
!--><i class="group-list-label__icon h-icon-group" ng-switch-default></i> !--><i class="group-list-label__icon h-icon-group" ng-switch-default></i>
<span class="group-list-label__label">{{groups.focused().name}}</span> <span class="group-list-label__label">{{vm.groups.focused().name}}</span>
</span> </span>
<div class="pull-right" <div class="pull-right"
ng-if="auth.status === 'logged-in'" ng-if="vm.auth.status === 'logged-in'"
dropdown dropdown
keyboard-nav> keyboard-nav>
<div class="dropdown-toggle" <div class="dropdown-toggle"
dropdown-toggle dropdown-toggle
data-toggle="dropdown" data-toggle="dropdown"
role="button" role="button"
ng-switch on="groups.focused().public" ng-switch on="vm.groups.focused().public"
title="Change the selected group"> title="Change the selected group">
<img class="group-list-label__icon group-list-label__icon--third-party" <img class="group-list-label__icon group-list-label__icon--third-party"
ng-src="{{ thirdPartyGroupIcon }}" ng-src="{{ vm.thirdPartyGroupIcon }}"
ng-if="thirdPartyGroupIcon" ng-if="vm.thirdPartyGroupIcon"
ng-switch-when="true"><!-- nospace ng-switch-when="true"><!-- nospace
!--><i class="group-list-label__icon h-icon-public" !--><i class="group-list-label__icon h-icon-public"
ng-switch-when="true" ng-switch-when="true"
ng-if="!thirdPartyGroupIcon"></i><!-- nospace ng-if="!vm.thirdPartyGroupIcon"></i><!-- nospace
!--><i class="group-list-label__icon h-icon-group" !--><i class="group-list-label__icon h-icon-group"
ng-switch-default></i> ng-switch-default></i>
<span class="group-list-label__label">{{groups.focused().name}}</span><!-- nospace <span class="group-list-label__label">{{vm.groups.focused().name}}</span><!-- nospace
!--><i class="h-icon-arrow-drop-down"></i> !--><i class="h-icon-arrow-drop-down"></i>
</div> </div>
<div class="dropdown-menu__top-arrow"></div> <div class="dropdown-menu__top-arrow"></div>
<ul class="dropdown-menu pull-none" role="menu"> <ul class="dropdown-menu pull-none" role="menu">
<li class="dropdown-menu__row dropdown-menu__row--unpadded " <li class="dropdown-menu__row dropdown-menu__row--unpadded "
ng-repeat="group in groups.all()"> ng-repeat="group in vm.groups.all()">
<div ng-class="{'group-item': true, selected: group.id == groups.focused().id}" <div ng-class="{'group-item': true, selected: group.id == vm.groups.focused().id}"
ng-click="focusGroup(group.id)"> ng-click="vm.focusGroup(group.id)">
<!-- the group icon !--> <!-- the group icon !-->
<div class="group-icon-container" ng-switch on="group.public"> <div class="group-icon-container" ng-switch on="group.public">
<img class="group-list-label__icon group-list-label__icon--third-party" <img class="group-list-label__icon group-list-label__icon--third-party"
ng-src="{{ thirdPartyGroupIcon }}" ng-src="{{ vm.thirdPartyGroupIcon }}"
ng-if="thirdPartyGroupIcon" ng-if="vm.thirdPartyGroupIcon"
ng-switch-when="true"> ng-switch-when="true">
<i class="h-icon-public" ng-if="!thirdPartyGroupIcon" ng-switch-when="true"></i> <i class="h-icon-public" ng-if="!vm.thirdPartyGroupIcon" ng-switch-when="true"></i>
<i class="h-icon-group" ng-switch-default></i> <i class="h-icon-group" ng-switch-default></i>
</div> </div>
<!-- the group name and share link !--> <!-- the group name and share link !-->
...@@ -67,13 +67,13 @@ ...@@ -67,13 +67,13 @@
<div class="group-cancel-icon-container" ng-click="$event.stopPropagation()"> <div class="group-cancel-icon-container" ng-click="$event.stopPropagation()">
<i class="h-icon-cancel-outline btn--cancel" <i class="h-icon-cancel-outline btn--cancel"
ng-if="!group.public" ng-if="!group.public"
ng-click="leaveGroup(group.id)" ng-click="vm.leaveGroup(group.id)"
title="Leave '{{group.name}}'"></i> title="Leave '{{group.name}}'"></i>
</div> </div>
</div> </div>
</li> </li>
<li ng-if="!isThirdPartyUser()" class="dropdown-menu__row dropdown-menu__row--unpadded new-group-btn"> <li ng-if="!vm.isThirdPartyUser()" class="dropdown-menu__row dropdown-menu__row--unpadded new-group-btn">
<div class="group-item" ng-click="createNewGroup()"> <div class="group-item" ng-click="vm.createNewGroup()">
<div class="group-icon-container"><i class="h-icon-add"></i></div> <div class="group-icon-container"><i class="h-icon-add"></i></div>
<div class="group-details"> <div class="group-details">
<a href="" class="group-name-link" title="Create a new group to share annotations"> <a href="" class="group-name-link" title="Create a new group to share annotations">
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment