Leandro Santos · Leandro Santos · Leandro Santos · Leandro Santos · Leandro Santos
Showing 13 changed files Show diff stats
src/app/index.scss
src/app/layout/blocks/block.scss
src/app/layout/blocks/communities/communities-block.component.spec.ts
src/app/layout/blocks/communities/communities-block.component.ts
src/app/layout/blocks/communities/communities-block.html
src/app/layout/blocks/communities/communities-block.scss
src/app/layout/blocks/people/people-block.html
src/app/layout/blocks/people/people-block.scss
src/app/layout/scss/skins/_whbl.scss
src/app/profile/image/profile-image.html
src/app/profile/image/profile-image.scss
src/languages/en.json
src/languages/pt.json
@@ -57,14 +57,6 @@ $break-xs-max: ($break-xs-min - 1);
   padding: 0.2em 0;
 }
  
-.thumbnail {
-  height: 200px;
-
-  img.pull-right {
-    width: 50px;
-  }
-}
-
 h1, h2, h3, h4, h5 {
   color: #237394;
 }
@@ -13,6 +13,15 @@
     .panel-heading {
       background-color: transparent;
       border: 0;
+      padding: 0.5em 1.2em 0 1em;
+      h3{
+        border-bottom: 3px solid #1E96D0;
+        padding: 1em;
+        padding-left: 0;
+      }
+    }
+    .panel-body{
+      padding-top: 0.5em;
     }
   }
   .block-actions {
 import {TestComponentBuilder} from 'ng-forward/cjs/testing/test-component-builder';
-import {Provider, Input, provide, Component} from 'ng-forward';
-
+import {Provider} from 'ng-forward';
+import {ComponentTestHelper, createClass} from './../../../../spec/component-test-helper';
+// import {providers} from 'ng-forward/cjs/testing/providers';
 import {CommunitiesBlockComponent} from './communities-block.component';
  
 const htmlTemplate: string = '<noosfero-communities-block [block]="ctrl.block" [owner]="ctrl.owner"></noosfero-communities-block>';
  
-const tcb = new TestComponentBuilder();
-
 describe("Components", () => {
-    describe("Communities Block Component", () => {
  
-        beforeEach(angular.mock.module("templates"));
+    describe("Community Block Component", () => {
+        let serviceMock = {
+            getByOwner: (owner: any, params: any): any => {
+                return Promise.resolve({ data: [{ identifier: "community1" }] });
+            }
+        };
  
-        let state = jasmine.createSpyObj("state", ["go"]);
-        let providers = [
-            new Provider('truncateFilter', { useValue: () => { } }),
-            new Provider('stripTagsFilter', { useValue: () => { } }),
-            new Provider('$state', { useValue: state }),
-            new Provider('CommunityService', {
-                useValue: {
-                    getByOwner: (owner: any, params: any): any => {
-                        return Promise.resolve({ data: [{ identifier: "community1" }] });
-                    }
-                }
-            }),
-        ];
-        @Component({ selector: 'test-container-component', template: htmlTemplate, directives: [CommunitiesBlockComponent], providers: providers })
-        class BlockContainerComponent {
-            block = { type: 'Block', settings: {} };
-            owner = { name: 'profile-name' };
-        }
-
-        it("get communities", done => {
-            tcb.createAsync(BlockContainerComponent).then(fixture => {
-                let block: CommunitiesBlockComponent = fixture.debugElement.componentViewChildren[0].componentInstance;
-                expect(block.profiles).toEqual([{ identifier: "community1" }]);
-                done();
+        let providers = [new Provider('CommunityService', { useValue: serviceMock })];
+
+        let helper: ComponentTestHelper<CommunitiesBlockComponent>;
+
+        beforeEach(angular.mock.module("templates"));
+        beforeEach((done) => {
+            let cls = createClass({
+                template: htmlTemplate,
+                directives: [CommunitiesBlockComponent],
+                providers: providers,
+                properties: {}
             });
+            helper = new ComponentTestHelper<CommunitiesBlockComponent>(cls, done);
         });
  
-        it("render the profile image for each community", done => {
-            tcb.createAsync(BlockContainerComponent).then(fixture => {
-                fixture.debugElement.getLocal("$rootScope").$apply();
-                expect(fixture.debugElement.queryAll("noosfero-profile-image").length).toEqual(1);
-                done();
-            });
+        it("get block with one community", done => {
+            expect(helper.component.profiles[0].identifier).toEqual("community1");
+            done();
+        });
+
+        it("render the profile image for each community", () => {
+            expect(helper.all("noosfero-profile-image").length).toEqual(1);
+        });
+
+        it("render the noosfero communities block", () => {
+            expect(helper.all(".media-list").length).toEqual(1);
         });
  
     });
@@ -16,7 +16,7 @@ export class CommunitiesBlockComponent {
     constructor(private communityService: CommunityService) { }
  
     ngOnInit() {
-        let limit: number = ((this.block && this.block.settings) ? this.block.settings.limit : null) || 5;
+        let limit: number = ((this.block && this.block.settings) ? this.block.settings.limit : null) || 4;
         this.communityService.getByOwner(this.owner, { limit: limit }).then((result: noosfero.RestResult<noosfero.Community[]>) => {
             this.profiles = result.data;
         });
-<div class="communities-block">
-  <a ng-repeat="profile in ctrl.profiles" ui-sref="main.profile.home({profile: profile.identifier})" class="profile">
-    <noosfero-profile-image [profile]="profile"></noosfero-profile-image>
-  </a>
-</div>
+<ul class="media-list">
+  <li ng-repeat="profile in ctrl.profiles" ui-sref="main.profile.home({profile: profile.identifier})" class="media">
+    <div class="media-left">
+      <noosfero-profile-image [profile]="profile"></noosfero-profile-image>
+    </div>
+    <div class="media-body">
+      <h4 class="media-heading">{{profile.name}}</h4>
+      {{"block.communities.members.count" | translate:{members: profile.members_count}:"messageformat"}}
+    </div>
+  </li>
+</ul>
-.communities-block {
-  .profile {
-    margin: 10px;
-    img, i.profile-image {
-      width: 60px;
-    }
-    img {
-      display: inline-block;
-      vertical-align: top;
-    }
-    i.profile-image {
-        text-align: center;
-        font-size: 4.5em;
-    }
-  }
+.media-list .media{
+  border-bottom: 1px solid #e0e0e0;
+  padding-bottom: 0.3em;
 }
 <div class="{{ctrl.type}}-block">
-  <a ng-repeat="person in ctrl.people" ui-sref="main.profile.home({profile: person.identifier})" class="person">
-    <noosfero-profile-image [profile]="person"></noosfero-profile-image>
-  </a>
+  <div ng-repeat="person in ctrl.people" class="item-avatar">
+    <a  ui-sref="main.profile.home({profile: person.identifier})">
+      <noosfero-profile-image [profile]="person"></noosfero-profile-image>
+    </a>
+  </div>
 </div>
@@ -1,17 +0,0 @@
-.members-block {
-  .member {
-    img, i.profile-image {
-      width: 60px;
-    }
-    img {
-      display: inline-block;
-      vertical-align: top;
-    }
-    i.profile-image {
-        text-align: center;
-        background-color: #889DB1;
-        color: #F1F1F1;
-        font-size: 4.5em;
-    }
-  }
-}
@@ -272,10 +272,7 @@ $whbl-font-color: #16191c;
 		border-bottom-color: $whbl-primary-color;
 		border-top-color: $whbl-primary-color;
 	}
-	.panel-default > .panel-heading,
-	.notifications-list .item-footer {
-		background-color: $whbl-primary-color;
-	}
+
 	.notifications-list .item-footer a:hover {
 		background-color: #2980b9;
 	}
@@ -14,7 +14,7 @@
     </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>
+<div 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="item-avatar-img">
+  <i ng-if="!ctrl.profile.image" class="fa {{ctrl.defaultIcon}} fa-5x item-avatar-img"></i>
+</div>
+.profile-image-wrap{
+  display: inherit;
+}
+.item-avatar-img{
+  width: 60px;
+  float: left;
+  margin: 2px 7px 5px 0;
+  font-size: 4.0em;
+}
+
 .hovereffect {
   width:100%;
   height:100%;
@@ -5,7 +15,7 @@
   overflow:hidden;
   position:relative;
   text-align:center;
-  cursor:default;  
+  cursor:default;
   .container-camera {
       position: relative;
       z-index: 2;
@@ -106,6 +106,7 @@
   "block.edition.display_user.logged": "Logged",
   "block.edition.display_user.not_logged": "Not logged",
   "block.edition.language.label": "Show for:",
+  "block.communities.members.count": "{members, plural, one{one member} other{# members}}",
   "activities.event.description": "Event on",
   "time.at": "at",
   "date.on": "On",
@@ -106,6 +106,7 @@
   "block.edition.display_user.logged": "Logados",
   "block.edition.display_user.not_logged": "Não logados",
   "block.edition.language.label": "Exibir para:",
+  "block.communities.members.count": "{members, plural, one{um membro} other{# membros}}",
   "activities.event.description": "Evento em",
   "time.at": "às",
   "date.on": "Em",
...	...	@@ -57,14 +57,6 @@ $break-xs-max: ($break-xs-min - 1);
57	57	padding: 0.2em 0;
58	58	}
59	59
60		-.thumbnail {
61		- height: 200px;
62		-
63		- img.pull-right {
64		- width: 50px;
65		- }
66		-}
67		-
68	60	h1, h2, h3, h4, h5 {
69	61	color: #237394;
70	62	}
...	...
...	...	@@ -13,6 +13,15 @@
13	13	.panel-heading {
14	14	background-color: transparent;
15	15	border: 0;
	16	+ padding: 0.5em 1.2em 0 1em;
	17	+ h3{
	18	+ border-bottom: 3px solid #1E96D0;
	19	+ padding: 1em;
	20	+ padding-left: 0;
	21	+ }
	22	+ }
	23	+ .panel-body{
	24	+ padding-top: 0.5em;
16	25	}
17	26	}
18	27	.block-actions {
...	...
1	1	import {TestComponentBuilder} from 'ng-forward/cjs/testing/test-component-builder';
2		-import {Provider, Input, provide, Component} from 'ng-forward';
3		-
	2	+import {Provider} from 'ng-forward';
	3	+import {ComponentTestHelper, createClass} from './../../../../spec/component-test-helper';
	4	+// import {providers} from 'ng-forward/cjs/testing/providers';
4	5	import {CommunitiesBlockComponent} from './communities-block.component';
5	6
6	7	const htmlTemplate: string = '<noosfero-communities-block [block]="ctrl.block" [owner]="ctrl.owner"></noosfero-communities-block>';
7	8
8		-const tcb = new TestComponentBuilder();
9		-
10	9	describe("Components", () => {
11		- describe("Communities Block Component", () => {
12	10
13		- beforeEach(angular.mock.module("templates"));
	11	+ describe("Community Block Component", () => {
	12	+ let serviceMock = {
	13	+ getByOwner: (owner: any, params: any): any => {
	14	+ return Promise.resolve({ data: [{ identifier: "community1" }] });
	15	+ }
	16	+ };
14	17
15		- let state = jasmine.createSpyObj("state", ["go"]);
16		- let providers = [
17		- new Provider('truncateFilter', { useValue: () => { } }),
18		- new Provider('stripTagsFilter', { useValue: () => { } }),
19		- new Provider('$state', { useValue: state }),
20		- new Provider('CommunityService', {
21		- useValue: {
22		- getByOwner: (owner: any, params: any): any => {
23		- return Promise.resolve({ data: [{ identifier: "community1" }] });
24		- }
25		- }
26		- }),
27		- ];
28		- @Component({ selector: 'test-container-component', template: htmlTemplate, directives: [CommunitiesBlockComponent], providers: providers })
29		- class BlockContainerComponent {
30		- block = { type: 'Block', settings: {} };
31		- owner = { name: 'profile-name' };
32		- }
33		-
34		- it("get communities", done => {
35		- tcb.createAsync(BlockContainerComponent).then(fixture => {
36		- let block: CommunitiesBlockComponent = fixture.debugElement.componentViewChildren[0].componentInstance;
37		- expect(block.profiles).toEqual([{ identifier: "community1" }]);
38		- done();
	18	+ let providers = [new Provider('CommunityService', { useValue: serviceMock })];
	19	+
	20	+ let helper: ComponentTestHelper<CommunitiesBlockComponent>;
	21	+
	22	+ beforeEach(angular.mock.module("templates"));
	23	+ beforeEach((done) => {
	24	+ let cls = createClass({
	25	+ template: htmlTemplate,
	26	+ directives: [CommunitiesBlockComponent],
	27	+ providers: providers,
	28	+ properties: {}
39	29	});
	30	+ helper = new ComponentTestHelper<CommunitiesBlockComponent>(cls, done);
40	31	});
41	32
42		- it("render the profile image for each community", done => {
43		- tcb.createAsync(BlockContainerComponent).then(fixture => {
44		- fixture.debugElement.getLocal("$rootScope").$apply();
45		- expect(fixture.debugElement.queryAll("noosfero-profile-image").length).toEqual(1);
46		- done();
47		- });
	33	+ it("get block with one community", done => {
	34	+ expect(helper.component.profiles[0].identifier).toEqual("community1");
	35	+ done();
	36	+ });
	37	+
	38	+ it("render the profile image for each community", () => {
	39	+ expect(helper.all("noosfero-profile-image").length).toEqual(1);
	40	+ });
	41	+
	42	+ it("render the noosfero communities block", () => {
	43	+ expect(helper.all(".media-list").length).toEqual(1);
48	44	});
49	45
50	46	});
...	...
...	...	@@ -16,7 +16,7 @@ export class CommunitiesBlockComponent {
16	16	constructor(private communityService: CommunityService) { }
17	17
18	18	ngOnInit() {
19		- let limit: number = ((this.block && this.block.settings) ? this.block.settings.limit : null) \|\| 5;
	19	+ let limit: number = ((this.block && this.block.settings) ? this.block.settings.limit : null) \|\| 4;
20	20	this.communityService.getByOwner(this.owner, { limit: limit }).then((result: noosfero.RestResult<noosfero.Community[]>) => {
21	21	this.profiles = result.data;
22	22	});
...	...
1		-<div class="communities-block">
2		- <a ng-repeat="profile in ctrl.profiles" ui-sref="main.profile.home({profile: profile.identifier})" class="profile">
3		- <noosfero-profile-image [profile]="profile"></noosfero-profile-image>
4		- </a>
5		-</div>
	1	+<ul class="media-list">
	2	+ <li ng-repeat="profile in ctrl.profiles" ui-sref="main.profile.home({profile: profile.identifier})" class="media">
	3	+ <div class="media-left">
	4	+ <noosfero-profile-image [profile]="profile"></noosfero-profile-image>
	5	+ </div>
	6	+ <div class="media-body">
	7	+ <h4 class="media-heading">{{profile.name}}</h4>
	8	+ {{"block.communities.members.count" \| translate:{members: profile.members_count}:"messageformat"}}
	9	+ </div>
	10	+ </li>
	11	+</ul>
...	...
1		-.communities-block {
2		- .profile {
3		- margin: 10px;
4		- img, i.profile-image {
5		- width: 60px;
6		- }
7		- img {
8		- display: inline-block;
9		- vertical-align: top;
10		- }
11		- i.profile-image {
12		- text-align: center;
13		- font-size: 4.5em;
14		- }
15		- }
	1	+.media-list .media{
	2	+ border-bottom: 1px solid #e0e0e0;
	3	+ padding-bottom: 0.3em;
16	4	}
...	...
1	1	<div class="{{ctrl.type}}-block">
2		- <a ng-repeat="person in ctrl.people" ui-sref="main.profile.home({profile: person.identifier})" class="person">
3		- <noosfero-profile-image [profile]="person"></noosfero-profile-image>
4		- </a>
	2	+ <div ng-repeat="person in ctrl.people" class="item-avatar">
	3	+ <a ui-sref="main.profile.home({profile: person.identifier})">
	4	+ <noosfero-profile-image [profile]="person"></noosfero-profile-image>
	5	+ </a>
	6	+ </div>
5	7	</div>
...	...
...	...	@@ -1,17 +0,0 @@
1		-.members-block {
2		- .member {
3		- img, i.profile-image {
4		- width: 60px;
5		- }
6		- img {
7		- display: inline-block;
8		- vertical-align: top;
9		- }
10		- i.profile-image {
11		- text-align: center;
12		- background-color: #889DB1;
13		- color: #F1F1F1;
14		- font-size: 4.5em;
15		- }
16		- }
17		-}
...	...	@@ -272,10 +272,7 @@ $whbl-font-color: #16191c;
272	272	border-bottom-color: $whbl-primary-color;
273	273	border-top-color: $whbl-primary-color;
274	274	}
275		- .panel-default > .panel-heading,
276		- .notifications-list .item-footer {
277		- background-color: $whbl-primary-color;
278		- }
	275	+
279	276	.notifications-list .item-footer a:hover {
280	277	background-color: #2980b9;
281	278	}
...	...
...	...	@@ -14,7 +14,7 @@
14	14	</div>
15	15	</div>
16	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>
	17	+<div 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="item-avatar-img">
	19	+ <i ng-if="!ctrl.profile.image" class="fa {{ctrl.defaultIcon}} fa-5x item-avatar-img"></i>
	20	+</div>
...	...