Download as
Browse Code »

Commit 6f977db8a92562108e0fa21472a7aae5ea20ead4

Authored by Leandro Santos
1 parent 4e13e9c2
Exists in master and in 3 other branches cosmetic_changes_people_and_communities_block, staging, translations

make interface improvement in community and people block

Showing 13 changed files with 79 additions and 94 deletions   Show diff stats
src/app/index.scss
  Diff comments   View file @6f977db
... ... @@ -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 }
... ...
src/app/layout/blocks/block.scss
  Diff comments   View file @6f977db
... ... @@ -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 {
... ...
src/app/layout/blocks/communities/communities-block.component.spec.ts
  Diff comments   View file @6f977db
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 });
... ...
src/app/layout/blocks/communities/communities-block.component.ts
  Diff comments   View file @6f977db
... ... @@ -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 });
... ...
src/app/layout/blocks/communities/communities-block.html
  Diff comments   View file @6f977db
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>
... ...
src/app/layout/blocks/communities/communities-block.scss
  Diff comments   View file @6f977db
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 }
... ...
src/app/layout/blocks/people/people-block.html
  Diff comments   View file @6f977db
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>
... ...
src/app/layout/blocks/people/people-block.scss
View file @4e13e9c
... ... @@ -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   -}
src/app/layout/scss/skins/_whbl.scss
  Diff comments   View file @6f977db
... ... @@ -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 }
... ...
src/app/profile/image/profile-image.html
  Diff comments   View file @6f977db
... ... @@ -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>
... ...
src/app/profile/image/profile-image.scss
  Diff comments   View file @6f977db
  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 11 .hovereffect {
2 12 width:100%;
3 13 height:100%;
... ... @@ -5,7 +15,7 @@
5 15 overflow:hidden;
6 16 position:relative;
7 17 text-align:center;
8   - cursor:default;
  18 + cursor:default;
9 19 .container-camera {
10 20 position: relative;
11 21 z-index: 2;
... ...
src/languages/en.json
  Diff comments   View file @6f977db
... ... @@ -106,6 +106,7 @@
106 106 "block.edition.display_user.logged": "Logged",
107 107 "block.edition.display_user.not_logged": "Not logged",
108 108 "block.edition.language.label": "Show for:",
  109 + "block.communities.members.count": "{members, plural, one{one member} other{# members}}",
109 110 "activities.event.description": "Event on",
110 111 "time.at": "at",
111 112 "date.on": "On",
... ...
src/languages/pt.json
  Diff comments   View file @6f977db
... ... @@ -106,6 +106,7 @@
106 106 "block.edition.display_user.logged": "Logados",
107 107 "block.edition.display_user.not_logged": "Não logados",
108 108 "block.edition.language.label": "Exibir para:",
  109 + "block.communities.members.count": "{members, plural, one{um membro} other{# membros}}",
109 110 "activities.event.description": "Evento em",
110 111 "time.at": "às",
111 112 "date.on": "Em",
... ...