Commit d3bba43c75e4873b4cb6ae3fc7a3b8ebea07c501
1 parent
26ff5335
Exists in
master
and in
7 other branches
Ticket #118: Profile images block
Showing
6 changed files
with
148 additions
and
2 deletions
Show diff stats
src/app/layout/blocks/profile-images-plugin-profile-images/index.ts
0 → 100644
src/app/layout/blocks/profile-images-plugin-profile-images/profile-images-plugin-profile-images-block.component.spec.ts
0 → 100644
... | ... | @@ -0,0 +1,65 @@ |
1 | +import {TestComponentBuilder} from 'ng-forward/cjs/testing/test-component-builder'; | |
2 | +import {Provider, Input, provide, Component} from 'ng-forward'; | |
3 | +import {provideFilters} from '../../../../spec/helpers'; | |
4 | +import {ProfileImagesPluginProfileImagesBlockComponent} from './profile-images-plugin-profile-images-block.component'; | |
5 | +import * as helpers from "./../../../../spec/helpers"; | |
6 | + | |
7 | +const htmlTemplate: string = '<noosfero-profile-images-plugin-profile-images-block [block]="ctrl.block" [owner]="ctrl.owner"></noosfero-profile-images-plugin-profile-images-block>'; | |
8 | + | |
9 | +const tcb = new TestComponentBuilder(); | |
10 | + | |
11 | +const images = [ | |
12 | + { | |
13 | + title: 'Test', | |
14 | + id: 1, | |
15 | + view_url: { host: 'localhost', page: ['image'] }, | |
16 | + path: '/articles/0000/0001/test.png' | |
17 | + } | |
18 | +]; | |
19 | + | |
20 | +describe("Components", () => { | |
21 | + describe("Profile Images Block Component", () => { | |
22 | + | |
23 | + let settingsObj = {}; | |
24 | + let person = <noosfero.Person>{ name: "Person" }; | |
25 | + let mockedService = { | |
26 | + getApiContent: (block: noosfero.Block): any => { | |
27 | + return Promise.resolve({ images: images, headers: (name: string) => { return name; } }); | |
28 | + } | |
29 | + }; | |
30 | + beforeEach(angular.mock.module("templates")); | |
31 | + | |
32 | + let state = jasmine.createSpyObj("state", ["go"]); | |
33 | + | |
34 | + | |
35 | + function getProviders() { | |
36 | + return [ | |
37 | + new Provider('$state', { useValue: state }), | |
38 | + new Provider('BlockService', { | |
39 | + useValue: mockedService | |
40 | + }) | |
41 | + ].concat(provideFilters("truncateFilter", "stripTagsFilter")); | |
42 | + } | |
43 | + let componentClass: any = null; | |
44 | + | |
45 | + function getComponent() { | |
46 | + @Component({ selector: 'test-container-component', template: htmlTemplate, directives: [ProfileImagesPluginProfileImagesBlockComponent], providers: getProviders() }) | |
47 | + class BlockContainerComponent { | |
48 | + block = { type: 'Block', settings: settingsObj }; | |
49 | + owner = person; | |
50 | + constructor() { | |
51 | + } | |
52 | + } | |
53 | + return BlockContainerComponent; | |
54 | + } | |
55 | + | |
56 | + it("get images from the block service", done => { | |
57 | + tcb.createAsync(getComponent()).then(fixture => { | |
58 | + let ProfileImagesPluginProfileImagesBlock: ProfileImagesPluginProfileImagesBlockComponent = fixture.debugElement.componentViewChildren[0].componentInstance; | |
59 | + expect(ProfileImagesPluginProfileImagesBlock.images).toEqual(images); | |
60 | + done(); | |
61 | + }); | |
62 | + }); | |
63 | + | |
64 | + }); | |
65 | +}); | ... | ... |
src/app/layout/blocks/profile-images-plugin-profile-images/profile-images-plugin-profile-images-block.component.ts
0 → 100644
... | ... | @@ -0,0 +1,39 @@ |
1 | +import {Component, Inject, Input} from "ng-forward"; | |
2 | +import {BlockService} from "./../../../../lib/ng-noosfero-api/http/block.service"; | |
3 | +import {Arrays} from "./../../../../lib/util/arrays"; | |
4 | + | |
5 | +@Component({ | |
6 | + selector: "noosfero-profile-images-plugin-profile-images-block", | |
7 | + templateUrl: 'app/layout/blocks/profile-images-plugin-profile-images/profile-images-plugin-profile-images-block.html' | |
8 | +}) | |
9 | +@Inject(BlockService, "$state") | |
10 | +export class ProfileImagesPluginProfileImagesBlockComponent { | |
11 | + | |
12 | + @Input() block: any; | |
13 | + @Input() owner: any; | |
14 | + | |
15 | + profile: any; | |
16 | + images: any; | |
17 | + | |
18 | + constructor(private blockService: BlockService, private $state: any) { } | |
19 | + | |
20 | + urlFor(params: any) { | |
21 | + let url = '//' + params.host; | |
22 | + if (params.port) { | |
23 | + url += ':' + params.port; | |
24 | + } | |
25 | + url += '/' + params.profile + '/'; | |
26 | + if (params.page) { | |
27 | + url += params.page.join('/'); | |
28 | + } | |
29 | + return url; | |
30 | + } | |
31 | + | |
32 | + ngOnInit() { | |
33 | + this.profile = this.owner; | |
34 | + this.images = []; | |
35 | + this.blockService.getApiContent(this.block).then((content: any) => { | |
36 | + this.images = content.images; | |
37 | + }); | |
38 | + } | |
39 | +} | ... | ... |
src/app/layout/blocks/profile-images-plugin-profile-images/profile-images-plugin-profile-images-block.html
0 → 100644
... | ... | @@ -0,0 +1,8 @@ |
1 | +<ul class="profile-images-plugin-profile-images"> | |
2 | + <li ng-repeat="image in ctrl.images"> | |
3 | + <a ng-href="{{ctrl.urlFor(image.view_url)}}" ng-style="{'background-image': 'url(' + image.path + ')'}"> | |
4 | + <span>{{image.title}}</span> | |
5 | + </a> | |
6 | + </li> | |
7 | +</ul> | |
8 | +<br style="clear: both;" /> | ... | ... |
src/app/layout/blocks/profile-images-plugin-profile-images/profile-images-plugin-profile-images-block.scss
0 → 100644
... | ... | @@ -0,0 +1,29 @@ |
1 | +.profile-images-plugin-profile-images { | |
2 | + padding: 0; | |
3 | + margin: 0; | |
4 | + display: block; | |
5 | + width: 100%; | |
6 | + | |
7 | + li { | |
8 | + list-style: none; | |
9 | + } | |
10 | + | |
11 | + a { | |
12 | + display: block; | |
13 | + width: 53px; | |
14 | + height: 53px; | |
15 | + float: left; | |
16 | + padding: 1px; | |
17 | + border: 1px solid #ccc; | |
18 | + margin: 4px; | |
19 | + background-size: cover; | |
20 | + | |
21 | + &:hover { | |
22 | + border: 1px solid #000; | |
23 | + } | |
24 | + | |
25 | + span { | |
26 | + display: none; | |
27 | + } | |
28 | + } | |
29 | +} | ... | ... |
src/app/main/main.component.ts
... | ... | @@ -21,6 +21,7 @@ import { PersonTagsPluginInterestsBlockComponent } from "../layout/blocks/person |
21 | 21 | import { TagsBlockComponent } from "../layout/blocks/tags/tags-block.component"; |
22 | 22 | import { CustomContentComponent } from "../profile/custom-content/custom-content.component"; |
23 | 23 | import { RecentActivitiesPluginActivitiesBlockComponent } from "../layout/blocks/recent-activities-plugin-activities/recent-activities-plugin-activities-block.component"; |
24 | +import { ProfileImagesPluginProfileImagesBlockComponent } from "../layout/blocks/profile-images-plugin-profile-images/profile-images-plugin-profile-images-block.component"; | |
24 | 25 | import { RegisterComponent } from "../account/register.component"; |
25 | 26 | |
26 | 27 | import { MembersBlockComponent } from "../layout/blocks/members/members-block.component"; |
... | ... | @@ -96,7 +97,8 @@ export class EnvironmentContent { |
96 | 97 | * @name main.Main |
97 | 98 | * @requires AuthService, Session, Notification, ArticleBlog, ArticleView, Boxes, Block, LinkListBlock, |
98 | 99 | * MainBlock, RecentDocumentsBlock, Navbar, ProfileImageBlock, MembersBlock, |
99 | - * NoosferoTemplate, DateFormat, RawHTMLBlock, PersonTagsPluginInterestsBlock, RecentActivitiesPluginActivitiesBlock, | |
100 | + * NoosferoTemplate, DateFormat, RawHTMLBlock, PersonTagsPluginInterestsBlock, | |
101 | + * RecentActivitiesPluginActivitiesBlock, ProfileImagesPluginProfileImages | |
100 | 102 | * @description |
101 | 103 | * The Main controller for the Noosfero Angular Theme application. |
102 | 104 | * |
... | ... | @@ -115,7 +117,8 @@ export class EnvironmentContent { |
115 | 117 | MainBlockComponent, RecentDocumentsBlockComponent, Navbar, SidebarComponent, ProfileImageBlockComponent, |
116 | 118 | MembersBlockComponent, NoosferoTemplate, DateFormat, RawHTMLBlockComponent, StatisticsBlockComponent, |
117 | 119 | LoginBlockComponent, CustomContentComponent, PermissionDirective, SearchFormComponent, SearchComponent, |
118 | - PersonTagsPluginInterestsBlockComponent, TagsBlockComponent, RecentActivitiesPluginActivitiesBlockComponent, BlockComponent, RegisterComponent | |
120 | + PersonTagsPluginInterestsBlockComponent, TagsBlockComponent, RecentActivitiesPluginActivitiesBlockComponent, | |
121 | + ProfileImagesPluginProfileImagesBlockComponent, BlockComponent, RegisterComponent | |
119 | 122 | ].concat(plugins.mainComponents).concat(plugins.hotspots), |
120 | 123 | providers: [AuthService, SessionService, NotificationService, BodyStateClassesService, RegisterService, |
121 | 124 | "ngAnimate", "ngCookies", "ngStorage", "ngTouch", | ... | ... |