make interface improvement in community and people block

Leandro Santos
1 parent 4e13e9c2
Showing 13 changed files with 79 additions and 94 deletions 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,14 +57,6 @@ $break-xs-max: ($break-xs-min - 1);
57	padding: 0.2em 0;	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	h1, h2, h3, h4, h5 {	60	h1, h2, h3, h4, h5 {
69	color: #237394;	61	color: #237394;
70	}	62	}
	@@ -13,6 +13,15 @@		@@ -13,6 +13,15 @@
13	.panel-heading {	13	.panel-heading {
14	background-color: transparent;	14	background-color: transparent;
15	border: 0;	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	.block-actions {	27	.block-actions {
	@@ -16,7 +16,7 @@ export class CommunitiesBlockComponent {		@@ -16,7 +16,7 @@ export class CommunitiesBlockComponent {
16	constructor(private communityService: CommunityService) { }	16	constructor(private communityService: CommunityService) { }
17		17
18	ngOnInit() {	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	this.communityService.getByOwner(this.owner, { limit: limit }).then((result: noosfero.RestResult<noosfero.Community[]>) => {	20	this.communityService.getByOwner(this.owner, { limit: limit }).then((result: noosfero.RestResult<noosfero.Community[]>) => {
21	this.profiles = result.data;	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,17 +0,0 @@	@@ -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	-}
		1	+.profile-image-wrap{
		2	+ display: inherit;
		3	+}
		4	+.item-avatar-img{
		5	+ width: 60px;
		6	+ float: left;
		7	+ margin: 2px 7px 5px 0;
		8	+ font-size: 4.0em;
		9	+}
		10	+
1	.hovereffect {	11	.hovereffect {
2	width:100%;	12	width:100%;
3	height:100%;	13	height:100%;
	@@ -5,7 +15,7 @@		@@ -5,7 +15,7 @@
5	overflow:hidden;	15	overflow:hidden;
6	position:relative;	16	position:relative;
7	text-align:center;	17	text-align:center;
8	- cursor:default;	18	+ cursor:default;
9	.container-camera {	19	.container-camera {
10	position: relative;	20	position: relative;
11	z-index: 2;	21	z-index: 2;