change image component name to profile image component

Leandro Santos
1 parent e6bb091b
Showing 11 changed files with 245 additions and 251 deletions Show diff stats
src/app/layout/blocks/profile-image/profile-image-block.component.ts
src/app/profile/image/image.component.spec.ts
src/app/profile/image/image.component.ts
src/app/profile/image/image.html
src/app/profile/image/image.scss
src/app/profile/image/index.ts
src/app/profile/image/profile-image-editor.component.ts
src/app/profile/image/profile-image.component.spec.ts
src/app/profile/image/profile-image.component.ts
src/app/profile/image/profile-image.html
src/app/profile/image/profile-image.scss
 import { Inject, Input, Component } from "ng-forward";
-import { ProfileImageComponent } from "./../../../profile/image/image.component";
+import { ProfileImageComponent } from "./../../../profile/image/profile-image.component";
 import { ProfileService } from "../../../../lib/ng-noosfero-api/http/profile.service";
 import { SessionService } from "./../../../login";
 import { NotificationService } from "../../../shared/services/notification.service";
@@ -1,75 +0,0 @@
-/**
- * @ngdoc overview
- * @name components.noosfero.profile-image.ProfileImageSpec
- * @description
- *  This file contains the tests for the {@link components.noosfero.profile-image.ProfileImage} component.
- */
-import { ComponentTestHelper, createClass } from '../../../spec/component-test-helper';
-import { TestComponentBuilder, ComponentFixture } from 'ng-forward/cjs/testing/test-component-builder';
-import { Pipe, Input, provide, Component } from 'ng-forward';
-import { ProfileService } from "../../../lib/ng-noosfero-api/http/profile.service";
-
-import * as helpers from "../../../spec/helpers";
-
-import { ProfileImageComponent } from "./image.component";
-
-const htmlTemplate: string = '<noosfero-profile-image [editable]="true" [edit-class]="editable-class" [profile]="ctrl.profile"></noosfero-profile-image>';
-
-describe("Components", () => {
-
-    describe("Profile Image Component", () => {
-
-        let helper: ComponentTestHelper<ProfileImageComponent>;
-
-        beforeEach(angular.mock.module("templates"));
-
-        beforeEach((done) => {
-            let scope = helpers.mocks.scopeWithEvents;
-            let profileService = jasmine.createSpyObj("profileService", ["upload"]);
-            let properties = { profile: { custom_footer: "footer" } };
-            let cls = createClass({
-                template: htmlTemplate,
-                directives: [ProfileImageComponent],
-                properties: properties,
-                providers: [
-                    helpers.createProviderToValue("ProfileService", profileService),
-                    helpers.createProviderToValue("$uibModal", helpers.mocks.$modal),
-                    helpers.createProviderToValue("$scope", scope)
-                ]
-            });
-            helper = new ComponentTestHelper<ProfileImageComponent>(cls, done);
-        });
-
-        it("set modal instance when select files modal", () => {
-            helper.component['$uibModal'].open = jasmine.createSpy("open");
-            helper.component.fileSelected("file", []);
-            expect(helper.component['$uibModal'].open).toHaveBeenCalled();
-        });
-
-
-        it("show community users image if profile is not Person", (done) => {
-
-            let profile = <noosfero.Profile>{ id: 1, identifier: "myprofile", type: "Community" };
-            helper.component.profile = profile;
-            helper.component.ngOnInit();
-
-            // Check the attribute
-            expect(helper.component.defaultIcon).toBe("fa-users", "The default icon should be community users");
-            // var elProfile = fixture.debugElement.componentViewChildren[0];
-            // expect(elProfile.query('div.profile-image-block').length).toEqual(1);
-            done();
-
-        });
-
-        it("show Person image if profile is Person", (done) => {
-
-            let profile = <noosfero.Profile>{ id: 1, identifier: "myprofile", type: "Person" };
-            helper.component.profile = profile;
-            helper.component.ngOnInit();
-            // Check the attribute
-            expect(helper.component.defaultIcon).toEqual("fa-user", "The default icon should be person user");
-            done();
-        });
-
-    });
-});
@@ -1,94 +0,0 @@
-import { Inject, Input, Component, provide } from "ng-forward";
-import { ProfileService } from "../../../lib/ng-noosfero-api/http/profile.service";
-import { PermissionService } from "../../shared/services/permission.service";
-import { ProfileImageEditorComponent } from "./profile-image-editor.component";
-
-/**
- * @ngdoc controller
- * @name components.noosfero.profile-image.ProfileImage
- * @description The component responsible for rendering the profile image
- * @exports ProfileImage
- */
-@Component({
-    selector: "noosfero-profile-image",
-    templateUrl: 'app/profile/image/image.html',
-    providers: [provide('profileService', { useClass: ProfileService })]
-})
-@Inject(ProfileService, PermissionService, "$uibModal", "$scope")
-export class ProfileImageComponent {
-    /**
-     * @ngdoc property
-     * @name profile
-     * @propertyOf components.noosfero.profile-image.ProfileImage
-     * @description
-     *  The Noosfero {@link models.Profile} holding the image.
-     */
-    @Input() profile: noosfero.Profile;
-    /**
-     * @ngdoc property
-     * @name defaultIcon
-     * @propertyOf components.noosfero.profile-image.ProfileImage
-     * @descritpion
-     *  The default icon used by this profile
-     */
-    defaultIcon: string;
-
-    @Input() editable: boolean;
-
-    @Input() editClass: string;
-
-    picFile: any;
-    croppedDataUrl: any;
-    modalInstance: any;
-
-    constructor(private profileService: ProfileService, private permissionService: PermissionService, private $uibModal: ng.ui.bootstrap.IModalService, private $scope: ng.IScope) {
-    }
-
-    fileSelected(file: any, errFiles: any) {
-        if (file) {
-            this.picFile = file;
-            this.modalInstance = this.$uibModal.open({
-                templateUrl: 'app/profile/image/profile-image-editor.html',
-                controller: ProfileImageEditorComponent,
-                controllerAs: 'ctrl',
-                scope: this.$scope,
-                bindToController: true,
-                backdrop: 'static',
-                resolve: {
-                    picFile: this.picFile,
-                    profile: this.profile,
-                    profileService: this.profileService
-                }
-            });
-        }
-    }
-
-    private _showCamera: boolean = false;
-
-    showChange(show: boolean) {
-        this._showCamera = show;
-    }
-
-    showCamera() {
-        return this._showCamera;
-    }
-
-    isEditable() {
-        return this.editable && this.permissionService.isAllowed(this.profile, 'allow_edit');
-    }
-
-    /**
-     * @ngdoc method
-     * @name ngOnInit
-     * @methodOf components.noosfero.profile-image.ProfileImage
-     * @description
-     *  Initializes the icon names to their corresponding values depending on the profile type passed to the controller
-     */
-    ngOnInit() {
-        this.defaultIcon = 'fa-users';
-        if (this.profile && this.profile.type === 'Person') {
-            this.defaultIcon = 'fa-user';
-        }
-    }
-
-}
@@ -1,20 +0,0 @@
-<div ng-if="ctrl.isEditable()" id="profile-image-container">
-  <div class="profile-image-wrap" title="{{ctrl.profile.name}}" ng-mouseenter="ctrl.showChange(true)" ng-mouseleave="ctrl.showChange(false)">
-    <div class="hovereffect   ">
-      <i ng-if="!ctrl.profile.image" class="fa {{ctrl.defaultIcon}} fa-5x profile-image"></i>
-      <img ng-if="ctrl.profile.image" ng-src="{{ctrl.profile.image.url}}" class="img-responsive profile-image">
-      <div class='container-camera'>
-        <a ngf-select="ctrl.fileSelected($file)"
-            ngf-pattern="'image/*'" ngf-accept="'image/*'"
-            ngf-max-size="20MB"
-            data-toggle="modal" data-target=".crop-dialog" href="#"><i class="fa fa-camera upload-camera" ></i>
-        </a>
-      </div>
-      <div class="overlay"></div>
-    </div>
-  </div>
-</div>
-<span ng-if="!ctrl.isEditable()" class="profile-image-wrap" title="{{ctrl.profile.name}}">
-  <img ng-if="ctrl.profile.image" ng-src="{{ctrl.profile.image.url}}" class="img-responsive profile-image">
-  <i ng-if="!ctrl.profile.image" class="fa {{ctrl.defaultIcon}} fa-5x profile-image"></i>
-</span>
@@ -1,59 +0,0 @@
-.hovereffect {
-  width:100%;
-  height:100%;
-  float:left;
-  overflow:hidden;
-  position:relative;
-  text-align:center;
-  cursor:default;  
-  .container-camera {
-      position: relative;
-      z-index: 2;
-      .upload-camera{
-        right: 0px;
-        left: 0px;
-        position: absolute;
-        font-size: 1.5em;
-        bottom: 2px;
-        text-shadow: 0px 0px 3px black;
-        color: white;
-        padding-top: 5px;
-        &:hover{
-          font-size: 1.5em;
-          background-color: rgba(0, 0, 0, 0.50);
-        }
-
-      }
-  }
-  .overlay {
-    width:100%;
-    height:100%;
-    position:absolute;
-    overflow:hidden;
-    top:0;
-    left:0;
-    opacity:0;
-    background-color:rgba(0,0,0,0.5);
-    -webkit-transition:all .4s ease-in-out;
-    transition:all .4s ease-in-out;
-    z-index: 1;
-  }
-  img {
-    display:block;
-    position:relative;
-    -webkit-transition:all .4s linear;
-    transition:all .4s linear;
-    width: 100%;
-  }
-  &:hover {
-    img {
-      -ms-transform:scale(1.2);
-      -webkit-transform:scale(1.2);
-      transform:scale(1.2);
-    }
-    .overlay {
-      opacity:1;
-      filter:alpha(opacity=100);
-    }
-  }
-}
 /* Module Index Entry - generated using the script npm run generate-index */
-export * from "./image.component";
+export * from "./profile-image.component";
@@ -10,7 +10,7 @@ export class ProfileImageEditorComponent {
     constructor(public picFile: any, public profile: noosfero.Profile, public profileService: ProfileService,
         public modalInstance: ng.ui.bootstrap.IModalServiceInstance) {
     }
-    
+
     uploadImage(dataUrl: any, name: any) {
         let base64ImageJson = this.getBase64ImageJson(dataUrl, name);
         this.profileService.uploadImage(this.profile, base64ImageJson).then((result: any) => {
@@ -0,0 +1,68 @@
+/**
+ * @ngdoc overview
+ * @name components.noosfero.profile-image.ProfileImageSpec
+ * @description
+ *  This file contains the tests for the {@link components.noosfero.profile-image.ProfileImage} component.
+ */
+import { ComponentTestHelper, createClass } from '../../../spec/component-test-helper';
+import { TestComponentBuilder, ComponentFixture } from 'ng-forward/cjs/testing/test-component-builder';
+import { Pipe, Input, provide, Component } from 'ng-forward';
+import { ProfileService } from "../../../lib/ng-noosfero-api/http/profile.service";
+
+import * as helpers from "../../../spec/helpers";
+
+import { ProfileImageComponent } from "./profile-image.component";
+
+const htmlTemplate: string = '<noosfero-profile-image [editable]="true" [edit-class]="editable-class" [profile]="ctrl.profile"></noosfero-profile-image>';
+
+describe("Components", () => {
+
+    describe("Profile Image Component", () => {
+
+        let helper: ComponentTestHelper<ProfileImageComponent>;
+
+        beforeEach(angular.mock.module("templates"));
+
+        beforeEach((done) => {
+            let scope = helpers.mocks.scopeWithEvents;
+            let profileService = jasmine.createSpyObj("profileService", ["upload"]);
+            let properties = { profile: { custom_footer: "footer" } };
+            let cls = createClass({
+                template: htmlTemplate,
+                directives: [ProfileImageComponent],
+                properties: properties,
+                providers: [
+                    helpers.createProviderToValue("ProfileService", profileService),
+                    helpers.createProviderToValue("$uibModal", helpers.mocks.$modal),
+                    helpers.createProviderToValue("$scope", scope)
+                ]
+            });
+            helper = new ComponentTestHelper<ProfileImageComponent>(cls, done);
+        });
+
+        it("set modal instance when select files modal", () => {
+            helper.component['$uibModal'].open = jasmine.createSpy("open");
+            helper.component.fileSelected("file", []);
+            expect(helper.component['$uibModal'].open).toHaveBeenCalled();
+        });
+
+
+        it("show community users image if profile is not Person", (done) => {
+            let profile = <noosfero.Profile>{ id: 1, identifier: "myprofile", type: "Community" };
+            helper.component.profile = profile;
+            helper.component.ngOnInit();
+            expect(helper.component.defaultIcon).toBe("fa-users", "The default icon should be community users");
+            done();
+
+        });
+
+        it("show Person image if profile is Person", (done) => {
+            let profile = <noosfero.Profile>{ id: 1, identifier: "myprofile", type: "Person" };
+            helper.component.profile = profile;
+            helper.component.ngOnInit();
+            expect(helper.component.defaultIcon).toEqual("fa-user", "The default icon should be person user");
+            done();
+        });
+
+    });
+});
@@ -0,0 +1,95 @@
+import { Inject, Input, Component, provide } from "ng-forward";
+import { ProfileService } from "../../../lib/ng-noosfero-api/http/profile.service";
+import { PermissionService } from "../../shared/services/permission.service";
+import { ProfileImageEditorComponent } from "./profile-image-editor.component";
+
+/**
+ * @ngdoc controller
+ * @name components.noosfero.profile-image.ProfileImage
+ * @description The component responsible for rendering the profile image
+ * @exports ProfileImage
+ */
+@Component({
+    selector: "noosfero-profile-image",
+    templateUrl: 'app/profile/image/profile-image.html',
+    providers: [provide('profileService', { useClass: ProfileService })]
+})
+@Inject(ProfileService, PermissionService, "$uibModal", "$scope")
+export class ProfileImageComponent {
+  
+    /**
+     * @ngdoc property
+     * @name profile
+     * @propertyOf components.noosfero.profile-image.ProfileImage
+     * @description
+     *  The Noosfero {@link models.Profile} holding the image.
+     */
+    @Input() profile: noosfero.Profile;
+    /**
+     * @ngdoc property
+     * @name defaultIcon
+     * @propertyOf components.noosfero.profile-image.ProfileImage
+     * @descritpion
+     *  The default icon used by this profile
+     */
+    defaultIcon: string;
+
+    @Input() editable: boolean;
+
+    @Input() editClass: string;
+
+    picFile: any;
+    croppedDataUrl: any;
+    modalInstance: any;
+
+    constructor(private profileService: ProfileService, private permissionService: PermissionService, private $uibModal: ng.ui.bootstrap.IModalService, private $scope: ng.IScope) {
+    }
+
+    fileSelected(file: any, errFiles: any) {
+        if (file) {
+            this.picFile = file;
+            this.modalInstance = this.$uibModal.open({
+                templateUrl: 'app/profile/image/profile-image-editor.html',
+                controller: ProfileImageEditorComponent,
+                controllerAs: 'ctrl',
+                scope: this.$scope,
+                bindToController: true,
+                backdrop: 'static',
+                resolve: {
+                    picFile: this.picFile,
+                    profile: this.profile,
+                    profileService: this.profileService
+                }
+            });
+        }
+    }
+
+    private _showCamera: boolean = false;
+
+    showChange(show: boolean) {
+        this._showCamera = show;
+    }
+
+    showCamera() {
+        return this._showCamera;
+    }
+
+    isEditable() {
+        return this.editable && this.permissionService.isAllowed(this.profile, 'allow_edit');
+    }
+
+    /**
+     * @ngdoc method
+     * @name ngOnInit
+     * @methodOf components.noosfero.profile-image.ProfileImage
+     * @description
+     *  Initializes the icon names to their corresponding values depending on the profile type passed to the controller
+     */
+    ngOnInit() {
+        this.defaultIcon = 'fa-users';
+        if (this.profile && this.profile.type === 'Person') {
+            this.defaultIcon = 'fa-user';
+        }
+    }
+
+}
@@ -0,0 +1,20 @@
+<div ng-if="ctrl.isEditable()" id="profile-image-container">
+  <div class="profile-image-wrap" title="{{ctrl.profile.name}}" ng-mouseenter="ctrl.showChange(true)" ng-mouseleave="ctrl.showChange(false)">
+    <div class="hovereffect   ">
+      <i ng-if="!ctrl.profile.image" class="fa {{ctrl.defaultIcon}} fa-5x profile-image"></i>
+      <img ng-if="ctrl.profile.image" ng-src="{{ctrl.profile.image.url}}" class="img-responsive profile-image">
+      <div class='container-camera'>
+        <a ngf-select="ctrl.fileSelected($file)"
+            ngf-pattern="'image/*'" ngf-accept="'image/*'"
+            ngf-max-size="20MB"
+            data-toggle="modal" data-target=".crop-dialog" href="#"><i class="fa fa-camera upload-camera" ></i>
+        </a>
+      </div>
+      <div class="overlay"></div>
+    </div>
+  </div>
+</div>
+<span ng-if="!ctrl.isEditable()" class="profile-image-wrap" title="{{ctrl.profile.name}}">
+  <img ng-if="ctrl.profile.image" ng-src="{{ctrl.profile.image.url}}" class="img-responsive profile-image">
+  <i ng-if="!ctrl.profile.image" class="fa {{ctrl.defaultIcon}} fa-5x profile-image"></i>
+</span>
@@ -0,0 +1,59 @@
+.hovereffect {
+  width:100%;
+  height:100%;
+  float:left;
+  overflow:hidden;
+  position:relative;
+  text-align:center;
+  cursor:default;  
+  .container-camera {
+      position: relative;
+      z-index: 2;
+      .upload-camera{
+        right: 0px;
+        left: 0px;
+        position: absolute;
+        font-size: 1.5em;
+        bottom: 2px;
+        text-shadow: 0px 0px 3px black;
+        color: white;
+        padding-top: 5px;
+        &:hover{
+          font-size: 1.5em;
+          background-color: rgba(0, 0, 0, 0.50);
+        }
+
+      }
+  }
+  .overlay {
+    width:100%;
+    height:100%;
+    position:absolute;
+    overflow:hidden;
+    top:0;
+    left:0;
+    opacity:0;
+    background-color:rgba(0,0,0,0.5);
+    -webkit-transition:all .4s ease-in-out;
+    transition:all .4s ease-in-out;
+    z-index: 1;
+  }
+  img {
+    display:block;
+    position:relative;
+    -webkit-transition:all .4s linear;
+    transition:all .4s linear;
+    width: 100%;
+  }
+  &:hover {
+    img {
+      -ms-transform:scale(1.2);
+      -webkit-transform:scale(1.2);
+      transform:scale(1.2);
+    }
+    .overlay {
+      opacity:1;
+      filter:alpha(opacity=100);
+    }
+  }
+}
1	import { Inject, Input, Component } from "ng-forward";	1	import { Inject, Input, Component } from "ng-forward";
2	-import { ProfileImageComponent } from "./../../../profile/image/image.component";	2	+import { ProfileImageComponent } from "./../../../profile/image/profile-image.component";
3	import { ProfileService } from "../../../../lib/ng-noosfero-api/http/profile.service";	3	import { ProfileService } from "../../../../lib/ng-noosfero-api/http/profile.service";
4	import { SessionService } from "./../../../login";	4	import { SessionService } from "./../../../login";
5	import { NotificationService } from "../../../shared/services/notification.service";	5	import { NotificationService } from "../../../shared/services/notification.service";
	@@ -1,75 +0,0 @@	@@ -1,75 +0,0 @@
1	-/**
2	- * @ngdoc overview
3	- * @name components.noosfero.profile-image.ProfileImageSpec
4	- * @description
5	- * This file contains the tests for the {@link components.noosfero.profile-image.ProfileImage} component.
6	- */
7	-import { ComponentTestHelper, createClass } from '../../../spec/component-test-helper';
8	-import { TestComponentBuilder, ComponentFixture } from 'ng-forward/cjs/testing/test-component-builder';
9	-import { Pipe, Input, provide, Component } from 'ng-forward';
10	-import { ProfileService } from "../../../lib/ng-noosfero-api/http/profile.service";
11	-
12	-import * as helpers from "../../../spec/helpers";
13	-
14	-import { ProfileImageComponent } from "./image.component";
15	-
16	-const htmlTemplate: string = '<noosfero-profile-image [editable]="true" [edit-class]="editable-class" [profile]="ctrl.profile"></noosfero-profile-image>';
17	-
18	-describe("Components", () => {
19	-
20	- describe("Profile Image Component", () => {
21	-
22	- let helper: ComponentTestHelper<ProfileImageComponent>;
23	-
24	- beforeEach(angular.mock.module("templates"));
25	-
26	- beforeEach((done) => {
27	- let scope = helpers.mocks.scopeWithEvents;
28	- let profileService = jasmine.createSpyObj("profileService", ["upload"]);
29	- let properties = { profile: { custom_footer: "footer" } };
30	- let cls = createClass({
31	- template: htmlTemplate,
32	- directives: [ProfileImageComponent],
33	- properties: properties,
34	- providers: [
35	- helpers.createProviderToValue("ProfileService", profileService),
36	- helpers.createProviderToValue("$uibModal", helpers.mocks.$modal),
37	- helpers.createProviderToValue("$scope", scope)
38	- ]
39	- });
40	- helper = new ComponentTestHelper<ProfileImageComponent>(cls, done);
41	- });
42	-
43	- it("set modal instance when select files modal", () => {
44	- helper.component['$uibModal'].open = jasmine.createSpy("open");
45	- helper.component.fileSelected("file", []);
46	- expect(helper.component['$uibModal'].open).toHaveBeenCalled();
47	- });
48	-
49	-
50	- it("show community users image if profile is not Person", (done) => {
51	-
52	- let profile = <noosfero.Profile>{ id: 1, identifier: "myprofile", type: "Community" };
53	- helper.component.profile = profile;
54	- helper.component.ngOnInit();
55	-
56	- // Check the attribute
57	- expect(helper.component.defaultIcon).toBe("fa-users", "The default icon should be community users");
58	- // var elProfile = fixture.debugElement.componentViewChildren[0];
59	- // expect(elProfile.query('div.profile-image-block').length).toEqual(1);
60	- done();
61	-
62	- });
63	-
64	- it("show Person image if profile is Person", (done) => {
65	-
66	- let profile = <noosfero.Profile>{ id: 1, identifier: "myprofile", type: "Person" };
67	- helper.component.profile = profile;
68	- helper.component.ngOnInit();
69	- // Check the attribute
70	- expect(helper.component.defaultIcon).toEqual("fa-user", "The default icon should be person user");
71	- done();
72	- });
73	-
74	- });
75	-});
	@@ -1,94 +0,0 @@	@@ -1,94 +0,0 @@
1	-import { Inject, Input, Component, provide } from "ng-forward";
2	-import { ProfileService } from "../../../lib/ng-noosfero-api/http/profile.service";
3	-import { PermissionService } from "../../shared/services/permission.service";
4	-import { ProfileImageEditorComponent } from "./profile-image-editor.component";
5	-
6	-/**
7	- * @ngdoc controller
8	- * @name components.noosfero.profile-image.ProfileImage
9	- * @description The component responsible for rendering the profile image
10	- * @exports ProfileImage
11	- */
12	-@Component({
13	- selector: "noosfero-profile-image",
14	- templateUrl: 'app/profile/image/image.html',
15	- providers: [provide('profileService', { useClass: ProfileService })]
16	-})
17	-@Inject(ProfileService, PermissionService, "$uibModal", "$scope")
18	-export class ProfileImageComponent {
19	- /**
20	- * @ngdoc property
21	- * @name profile
22	- * @propertyOf components.noosfero.profile-image.ProfileImage
23	- * @description
24	- * The Noosfero {@link models.Profile} holding the image.
25	- */
26	- @Input() profile: noosfero.Profile;
27	- /**
28	- * @ngdoc property
29	- * @name defaultIcon
30	- * @propertyOf components.noosfero.profile-image.ProfileImage
31	- * @descritpion
32	- * The default icon used by this profile
33	- */
34	- defaultIcon: string;
35	-
36	- @Input() editable: boolean;
37	-
38	- @Input() editClass: string;
39	-
40	- picFile: any;
41	- croppedDataUrl: any;
42	- modalInstance: any;
43	-
44	- constructor(private profileService: ProfileService, private permissionService: PermissionService, private $uibModal: ng.ui.bootstrap.IModalService, private $scope: ng.IScope) {
45	- }
46	-
47	- fileSelected(file: any, errFiles: any) {
48	- if (file) {
49	- this.picFile = file;
50	- this.modalInstance = this.$uibModal.open({
51	- templateUrl: 'app/profile/image/profile-image-editor.html',
52	- controller: ProfileImageEditorComponent,
53	- controllerAs: 'ctrl',
54	- scope: this.$scope,
55	- bindToController: true,
56	- backdrop: 'static',
57	- resolve: {
58	- picFile: this.picFile,
59	- profile: this.profile,
60	- profileService: this.profileService
61	- }
62	- });
63	- }
64	- }
65	-
66	- private _showCamera: boolean = false;
67	-
68	- showChange(show: boolean) {
69	- this._showCamera = show;
70	- }
71	-
72	- showCamera() {
73	- return this._showCamera;
74	- }
75	-
76	- isEditable() {
77	- return this.editable && this.permissionService.isAllowed(this.profile, 'allow_edit');
78	- }
79	-
80	- /**
81	- * @ngdoc method
82	- * @name ngOnInit
83	- * @methodOf components.noosfero.profile-image.ProfileImage
84	- * @description
85	- * Initializes the icon names to their corresponding values depending on the profile type passed to the controller
86	- */
87	- ngOnInit() {
88	- this.defaultIcon = 'fa-users';
89	- if (this.profile && this.profile.type === 'Person') {
90	- this.defaultIcon = 'fa-user';
91	- }
92	- }
93	-
94	-}
	@@ -1,20 +0,0 @@	@@ -1,20 +0,0 @@
1	-<div ng-if="ctrl.isEditable()" id="profile-image-container">
2	- <div class="profile-image-wrap" title="{{ctrl.profile.name}}" ng-mouseenter="ctrl.showChange(true)" ng-mouseleave="ctrl.showChange(false)">
3	- <div class="hovereffect ">
4	- <i ng-if="!ctrl.profile.image" class="fa {{ctrl.defaultIcon}} fa-5x profile-image"></i>
5	- <img ng-if="ctrl.profile.image" ng-src="{{ctrl.profile.image.url}}" class="img-responsive profile-image">
6	- <div class='container-camera'>
7	- <a ngf-select="ctrl.fileSelected($file)"
8	- ngf-pattern="'image/'" ngf-accept="'image/'"
9	- ngf-max-size="20MB"
10	- data-toggle="modal" data-target=".crop-dialog" href="#"><i class="fa fa-camera upload-camera" ></i>
11	- </a>
12	- </div>
13	- <div class="overlay"></div>
14	- </div>
15	- </div>
16	-</div>
17	-<span ng-if="!ctrl.isEditable()" class="profile-image-wrap" title="{{ctrl.profile.name}}">
18	- <img ng-if="ctrl.profile.image" ng-src="{{ctrl.profile.image.url}}" class="img-responsive profile-image">
19	- <i ng-if="!ctrl.profile.image" class="fa {{ctrl.defaultIcon}} fa-5x profile-image"></i>
20	-</span>
	@@ -1,59 +0,0 @@	@@ -1,59 +0,0 @@
1	-.hovereffect {
2	- width:100%;
3	- height:100%;
4	- float:left;
5	- overflow:hidden;
6	- position:relative;
7	- text-align:center;
8	- cursor:default;
9	- .container-camera {
10	- position: relative;
11	- z-index: 2;
12	- .upload-camera{
13	- right: 0px;
14	- left: 0px;
15	- position: absolute;
16	- font-size: 1.5em;
17	- bottom: 2px;
18	- text-shadow: 0px 0px 3px black;
19	- color: white;
20	- padding-top: 5px;
21	- &:hover{
22	- font-size: 1.5em;
23	- background-color: rgba(0, 0, 0, 0.50);
24	- }
25	-
26	- }
27	- }
28	- .overlay {
29	- width:100%;
30	- height:100%;
31	- position:absolute;
32	- overflow:hidden;
33	- top:0;
34	- left:0;
35	- opacity:0;
36	- background-color:rgba(0,0,0,0.5);
37	- -webkit-transition:all .4s ease-in-out;
38	- transition:all .4s ease-in-out;
39	- z-index: 1;
40	- }
41	- img {
42	- display:block;
43	- position:relative;
44	- -webkit-transition:all .4s linear;
45	- transition:all .4s linear;
46	- width: 100%;
47	- }
48	- &:hover {
49	- img {
50	- -ms-transform:scale(1.2);
51	- -webkit-transform:scale(1.2);
52	- transform:scale(1.2);
53	- }
54	- .overlay {
55	- opacity:1;
56	- filter:alpha(opacity=100);
57	- }
58	- }
59	-}
1	/* Module Index Entry - generated using the script npm run generate-index */	1	/* Module Index Entry - generated using the script npm run generate-index */
2	-export * from "./image.component";	2	+export * from "./profile-image.component";
	@@ -10,7 +10,7 @@ export class ProfileImageEditorComponent {		@@ -10,7 +10,7 @@ export class ProfileImageEditorComponent {
10	constructor(public picFile: any, public profile: noosfero.Profile, public profileService: ProfileService,	10	constructor(public picFile: any, public profile: noosfero.Profile, public profileService: ProfileService,
11	public modalInstance: ng.ui.bootstrap.IModalServiceInstance) {	11	public modalInstance: ng.ui.bootstrap.IModalServiceInstance) {
12	}	12	}
13	-	13	+
14	uploadImage(dataUrl: any, name: any) {	14	uploadImage(dataUrl: any, name: any) {
15	let base64ImageJson = this.getBase64ImageJson(dataUrl, name);	15	let base64ImageJson = this.getBase64ImageJson(dataUrl, name);
16	this.profileService.uploadImage(this.profile, base64ImageJson).then((result: any) => {	16	this.profileService.uploadImage(this.profile, base64ImageJson).then((result: any) => {
@@ -0,0 +1,68 @@		@@ -0,0 +1,68 @@
	1	+/**
	2	+ * @ngdoc overview
	3	+ * @name components.noosfero.profile-image.ProfileImageSpec
	4	+ * @description
	5	+ * This file contains the tests for the {@link components.noosfero.profile-image.ProfileImage} component.
	6	+ */
	7	+import { ComponentTestHelper, createClass } from '../../../spec/component-test-helper';
	8	+import { TestComponentBuilder, ComponentFixture } from 'ng-forward/cjs/testing/test-component-builder';
	9	+import { Pipe, Input, provide, Component } from 'ng-forward';
	10	+import { ProfileService } from "../../../lib/ng-noosfero-api/http/profile.service";
	11	+
	12	+import * as helpers from "../../../spec/helpers";
	13	+
	14	+import { ProfileImageComponent } from "./profile-image.component";
	15	+
	16	+const htmlTemplate: string = '<noosfero-profile-image [editable]="true" [edit-class]="editable-class" [profile]="ctrl.profile"></noosfero-profile-image>';
	17	+
	18	+describe("Components", () => {
	19	+
	20	+ describe("Profile Image Component", () => {
	21	+
	22	+ let helper: ComponentTestHelper<ProfileImageComponent>;
	23	+
	24	+ beforeEach(angular.mock.module("templates"));
	25	+
	26	+ beforeEach((done) => {
	27	+ let scope = helpers.mocks.scopeWithEvents;
	28	+ let profileService = jasmine.createSpyObj("profileService", ["upload"]);
	29	+ let properties = { profile: { custom_footer: "footer" } };
	30	+ let cls = createClass({
	31	+ template: htmlTemplate,
	32	+ directives: [ProfileImageComponent],
	33	+ properties: properties,
	34	+ providers: [
	35	+ helpers.createProviderToValue("ProfileService", profileService),
	36	+ helpers.createProviderToValue("$uibModal", helpers.mocks.$modal),
	37	+ helpers.createProviderToValue("$scope", scope)
	38	+ ]
	39	+ });
	40	+ helper = new ComponentTestHelper<ProfileImageComponent>(cls, done);
	41	+ });
	42	+
	43	+ it("set modal instance when select files modal", () => {
	44	+ helper.component['$uibModal'].open = jasmine.createSpy("open");
	45	+ helper.component.fileSelected("file", []);
	46	+ expect(helper.component['$uibModal'].open).toHaveBeenCalled();
	47	+ });
	48	+
	49	+
	50	+ it("show community users image if profile is not Person", (done) => {
	51	+ let profile = <noosfero.Profile>{ id: 1, identifier: "myprofile", type: "Community" };
	52	+ helper.component.profile = profile;
	53	+ helper.component.ngOnInit();
	54	+ expect(helper.component.defaultIcon).toBe("fa-users", "The default icon should be community users");
	55	+ done();
	56	+
	57	+ });
	58	+
	59	+ it("show Person image if profile is Person", (done) => {
	60	+ let profile = <noosfero.Profile>{ id: 1, identifier: "myprofile", type: "Person" };
	61	+ helper.component.profile = profile;
	62	+ helper.component.ngOnInit();
	63	+ expect(helper.component.defaultIcon).toEqual("fa-user", "The default icon should be person user");
	64	+ done();
	65	+ });
	66	+
	67	+ });
	68	+});
@@ -0,0 +1,95 @@		@@ -0,0 +1,95 @@
	1	+import { Inject, Input, Component, provide } from "ng-forward";
	2	+import { ProfileService } from "../../../lib/ng-noosfero-api/http/profile.service";
	3	+import { PermissionService } from "../../shared/services/permission.service";
	4	+import { ProfileImageEditorComponent } from "./profile-image-editor.component";
	5	+
	6	+/**
	7	+ * @ngdoc controller
	8	+ * @name components.noosfero.profile-image.ProfileImage
	9	+ * @description The component responsible for rendering the profile image
	10	+ * @exports ProfileImage
	11	+ */
	12	+@Component({
	13	+ selector: "noosfero-profile-image",
	14	+ templateUrl: 'app/profile/image/profile-image.html',
	15	+ providers: [provide('profileService', { useClass: ProfileService })]
	16	+})
	17	+@Inject(ProfileService, PermissionService, "$uibModal", "$scope")
	18	+export class ProfileImageComponent {
	19	+
	20	+ /**
	21	+ * @ngdoc property
	22	+ * @name profile
	23	+ * @propertyOf components.noosfero.profile-image.ProfileImage
	24	+ * @description
	25	+ * The Noosfero {@link models.Profile} holding the image.
	26	+ */
	27	+ @Input() profile: noosfero.Profile;
	28	+ /**
	29	+ * @ngdoc property
	30	+ * @name defaultIcon
	31	+ * @propertyOf components.noosfero.profile-image.ProfileImage
	32	+ * @descritpion
	33	+ * The default icon used by this profile
	34	+ */
	35	+ defaultIcon: string;
	36	+
	37	+ @Input() editable: boolean;
	38	+
	39	+ @Input() editClass: string;
	40	+
	41	+ picFile: any;
	42	+ croppedDataUrl: any;
	43	+ modalInstance: any;
	44	+
	45	+ constructor(private profileService: ProfileService, private permissionService: PermissionService, private $uibModal: ng.ui.bootstrap.IModalService, private $scope: ng.IScope) {
	46	+ }
	47	+
	48	+ fileSelected(file: any, errFiles: any) {
	49	+ if (file) {
	50	+ this.picFile = file;
	51	+ this.modalInstance = this.$uibModal.open({
	52	+ templateUrl: 'app/profile/image/profile-image-editor.html',
	53	+ controller: ProfileImageEditorComponent,
	54	+ controllerAs: 'ctrl',
	55	+ scope: this.$scope,
	56	+ bindToController: true,
	57	+ backdrop: 'static',
	58	+ resolve: {
	59	+ picFile: this.picFile,
	60	+ profile: this.profile,
	61	+ profileService: this.profileService
	62	+ }
	63	+ });
	64	+ }
	65	+ }
	66	+
	67	+ private _showCamera: boolean = false;
	68	+
	69	+ showChange(show: boolean) {
	70	+ this._showCamera = show;
	71	+ }
	72	+
	73	+ showCamera() {
	74	+ return this._showCamera;
	75	+ }
	76	+
	77	+ isEditable() {
	78	+ return this.editable && this.permissionService.isAllowed(this.profile, 'allow_edit');
	79	+ }
	80	+
	81	+ /**
	82	+ * @ngdoc method
	83	+ * @name ngOnInit
	84	+ * @methodOf components.noosfero.profile-image.ProfileImage
	85	+ * @description
	86	+ * Initializes the icon names to their corresponding values depending on the profile type passed to the controller
	87	+ */
	88	+ ngOnInit() {
	89	+ this.defaultIcon = 'fa-users';
	90	+ if (this.profile && this.profile.type === 'Person') {
	91	+ this.defaultIcon = 'fa-user';
	92	+ }
	93	+ }
	94	+
	95	+}
@@ -0,0 +1,20 @@		@@ -0,0 +1,20 @@
	1	+<div ng-if="ctrl.isEditable()" id="profile-image-container">
	2	+ <div class="profile-image-wrap" title="{{ctrl.profile.name}}" ng-mouseenter="ctrl.showChange(true)" ng-mouseleave="ctrl.showChange(false)">
	3	+ <div class="hovereffect ">
	4	+ <i ng-if="!ctrl.profile.image" class="fa {{ctrl.defaultIcon}} fa-5x profile-image"></i>
	5	+ <img ng-if="ctrl.profile.image" ng-src="{{ctrl.profile.image.url}}" class="img-responsive profile-image">
	6	+ <div class='container-camera'>
	7	+ <a ngf-select="ctrl.fileSelected($file)"
	8	+ ngf-pattern="'image/'" ngf-accept="'image/'"
	9	+ ngf-max-size="20MB"
	10	+ data-toggle="modal" data-target=".crop-dialog" href="#"><i class="fa fa-camera upload-camera" ></i>
	11	+ </a>
	12	+ </div>
	13	+ <div class="overlay"></div>
	14	+ </div>
	15	+ </div>
	16	+</div>
	17	+<span ng-if="!ctrl.isEditable()" class="profile-image-wrap" title="{{ctrl.profile.name}}">
	18	+ <img ng-if="ctrl.profile.image" ng-src="{{ctrl.profile.image.url}}" class="img-responsive profile-image">
	19	+ <i ng-if="!ctrl.profile.image" class="fa {{ctrl.defaultIcon}} fa-5x profile-image"></i>
	20	+</span>