Adding options to avatar to change the dimensions of the picture.

spira · Oct 27, 2015 · 6f93929 · 6f93929
1 parent 8fdb880
commit 6f93929
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 3 deletions.
diff --git a/app/src/app/admin/navigation/navigation.tpl.html b/app/src/app/admin/navigation/navigation.tpl.html
@@ -12,7 +12,7 @@ <h2 ng-if="!AdminNavigationController.collapsed">CMS</h2>
 
     <md-list>
         <md-list-item aria-label="Go to your profile" ng-click="AppController.goToUserProfile($event)">
-            <avatar ng-model="AdminNavigationController.ngJwtAuthService.user"></avatar>
+            <avatar ng-model="AdminNavigationController.ngJwtAuthService.user" width="70" height="70"></avatar>
             <p ng-if="!AdminNavigationController.collapsed">{{ AdminNavigationController.ngJwtAuthService.user.fullName() }}</p>
             <md-tooltip md-direction="right" ng-if="AdminNavigationController.collapsed">Profile</md-tooltip>
         </md-list-item>

diff --git a/app/src/common/directives/avatar/avatar.spec.ts b/app/src/common/directives/avatar/avatar.spec.ts
@@ -65,6 +65,10 @@ namespace common.directives.avatar {
 
                 expect(AvatarController.canEdit).to.be.true;
 
+                expect(AvatarController.width).to.equal(200);
+
+                expect(AvatarController.height).to.equal(200);
+
             });
 
             it('should not be able to edit the avatar by default', () => {
@@ -81,6 +85,22 @@ namespace common.directives.avatar {
 
             });
 
+            it('should not be able to set the avatar dimensions', () => {
+
+                let displayOnlyCompiledElement:ng.IAugmentedJQuery = $compile(`
+                    <avatar ng-model="testUser" width="100" height="150"></avatar>
+                `)(directiveScope);
+
+                $rootScope.$digest();
+
+                let DisplayOnlyAvatarController = (<TestScope>displayOnlyCompiledElement.isolateScope()).AvatarController;
+
+                expect(DisplayOnlyAvatarController.width).to.equal(100);
+
+                expect(DisplayOnlyAvatarController.height).to.equal(150);
+
+            });
+
         });
 
         describe('Dialog functions', () => {

diff --git a/app/src/common/directives/avatar/avatar.tpl.html b/app/src/common/directives/avatar/avatar.tpl.html
@@ -1,7 +1,7 @@
 <div flex ng-click="!AvatarController.canEdit || AvatarController.openAvatarDialog()" class="avatar-directive">
     <!-- ng-disabled doesn't work on divs -->
     <cl-image ng-if="AvatarController.user.avatarImgId" width="100%" public-id="{{AvatarController.user.avatarImgId}}">
-        <cl-transformation height="200" width="200" crop="fill" gravity="north"/>
+        <cl-transformation height="{{ AvatarController.height }}" width="{{ AvatarController.width }}" crop="fill" gravity="north"/>
     </cl-image>
 
     <img ng-if="!AvatarController.user.avatarImgId" ng-src="{{AvatarController.user.avatarImgUrl}}" alt="{{AvatarController.user.fullName()}}" />

diff --git a/app/src/common/directives/avatar/avatar.ts b/app/src/common/directives/avatar/avatar.ts
@@ -19,6 +19,10 @@ namespace common.directives.avatar {
 
         public canEdit:boolean;
 
+        public height:number;
+
+        public width:number;
+
         constructor(
             private userService:common.services.user.UserService,
             private $mdDialog:ng.material.IDialogService,
@@ -27,6 +31,14 @@ namespace common.directives.avatar {
             if(typeof this.canEdit === 'undefined') {
                 this.canEdit = false;
             }
+
+            if(_.isNaN(Number(this.height))) {
+                this.height = 200;
+            }
+
+            if(_.isNaN(Number(this.width))) {
+                this.width = 200;
+            }
         }
 
         public registerAvatarChangedHandler(handler:IAvatarChangedHandler):void {
@@ -122,7 +134,9 @@ namespace common.directives.avatar {
         public templateUrl = 'templates/common/directives/avatar/avatar.tpl.html';
         public replace = true;
         public scope = {
-            canEdit: '=?'
+            canEdit: '=?',
+            height: '=?',
+            width: '=?'
         };
 
         public controllerAs = 'AvatarController';