(js) Zoomable custom avatar in card view

UI/WebServerResources/js/Common/sgAvatarImage.directive.js

@@ -50,10 +50,15 @@
    */
   sgAvatarImageController.$inject = ['$scope', '$element', '$http', '$q', 'Preferences', 'Gravatar'];
   function sgAvatarImageController($scope, $element, $http, $q, Preferences, Gravatar) {
-    var vm;
+    var vm, toggleZoomFcn;
 
     vm = this;
 
+    $scope.$on('$destroy', function() {
+      if (toggleZoomFcn)
+        $element.off('click', toggleZoomFcn);
+    });
+
     // Wait on user's defaults
     Preferences.ready().then(function() {
       $scope.$watch(function() { return vm.email; }, function(email, old) {
@@ -75,6 +80,7 @@
           // Set image URL and save the associated email address
           vm.url = src;
           vm.urlEmail = '' + vm.email;
+          configureZoomableAvatar();
           hideGenericAvatar();
         }
       });
@@ -110,6 +116,15 @@
       vm.genericImg.addClass('ng-hide');
       vm.img.removeClass('ng-hide');
     }
+
+    function configureZoomableAvatar() {
+      $element.addClass('sg-avatar-image--zoomable');
+      toggleZoomFcn = function() {
+        $element.toggleClass('sg-avatar-image--zoom');
+      };
+      $element.on('click', toggleZoomFcn);
+    }
+
   }
 
   angular

UI/WebServerResources/scss/components/avatarImage/avatarImage.scss

@@ -0,0 +1,29 @@
+/// avatarImage.scss -*- Mode: scss; indent-tabs-mode: nil; basic-offset: 2 -*-
+
+$avatar-image-transition: $swift-ease-out;
+
+.sg-avatar-image {
+  &--zoomable {
+    cursor: pointer;
+    img {
+      @extend .md-whiteframe-1dp;
+      transition: $avatar-image-transition;
+    }
+    &:hover {
+      img {
+        @extend .md-whiteframe-3dp;
+      }
+    }
+  }
+  &--zoom {
+    height: auto;
+    max-width: 50%;
+    width: auto;
+    img {
+      border-radius: 0;
+      height: auto;
+      transition: $avatar-image-transition;
+      width: 100%;
+    }
+  }
+}

UI/WebServerResources/scss/styles.scss

@@ -63,6 +63,7 @@
 @import 'components/whiteframe/whiteframe';
 
 // Inverse components
+@import 'components/avatarImage/avatarImage';
 @import 'components/draggable-droppable/draggable';
 @import 'components/draggable-droppable/droppable';
 @import 'components/hotkeys/hotkeys';