Commit 32f715092a560034c4071133ded1800b43e1aa5e
1 parent
ae05af8e
Adds support for setting layout template from api
- Added support only to 'rightbar' and 'default' @TODO - Develop all layouts Signed-off-by: Tallys Martins <tallysmartins@gmail.com>
Showing
10 changed files
with
126 additions
and
20 deletions
Show diff stats
src/app/environment/environment.html
1 | 1 | <div class="environment-container"> |
2 | 2 | <div class="row"> |
3 | - <noosfero-boxes ng-if="vm.boxes" [boxes]="vm.boxes" [owner]="vm.environment"></noosfero-boxes> | |
3 | + <noosfero-boxes ng-if="vm.boxes" | |
4 | + [layout]="vm.environment.layout_template" | |
5 | + [boxes]="vm.boxes" | |
6 | + [owner]="vm.environment"> | |
7 | + </noosfero-boxes> | |
4 | 8 | </div> |
5 | 9 | </div> | ... | ... |
src/app/layout/boxes/box.html
1 | -<div ng-class="{'col-md-2-5': box.position!=1, 'col-md-7': box.position==1}"> | |
2 | - <noosfero-block ng-repeat="block in box.blocks | orderBy: 'position'" [block]="block" [owner]="ctrl.owner"></noosfero-block> | |
1 | +<div ng-class="box.position | setBoxLayout:ctrl.layout"> | |
2 | + | |
3 | + <div ng-repeat="block in box.blocks | orderBy: 'position'" class="panel panel-default block {{block.type | lowercase}}" > | |
4 | + <div class="panel-heading" ng-show="block.title"> | |
5 | + <h3 class="panel-title">{{block.title}}</h3> | |
6 | + </div> | |
7 | + <div class="panel-body {{block.type | lowercase}}" > | |
8 | + <noosfero-block [block]="block" [owner]="ctrl.owner"></noosfero-block> | |
9 | + </div> | |
10 | + </div> | |
3 | 11 | </div> | ... | ... |
src/app/layout/boxes/boxes.component.spec.ts
... | ... | @@ -48,9 +48,4 @@ describe("Boxes Component", () => { |
48 | 48 | expect(helper.find('div.col-md-7').length).toEqual(1); |
49 | 49 | expect(helper.find('div.col-md-2-5').length).toEqual(1); |
50 | 50 | }); |
51 | - | |
52 | - it("check the boxes order", () => { | |
53 | - expect(helper.component.boxesOrder(properties['boxes'][0])).toEqual(1); | |
54 | - expect(helper.component.boxesOrder(properties['boxes'][1])).toEqual(0); | |
55 | - }); | |
56 | 51 | }); | ... | ... |
src/app/layout/boxes/boxes.component.ts
1 | -import {Input, Component} from 'ng-forward'; | |
1 | +import {Input, Inject, Component} from 'ng-forward'; | |
2 | +import {DisplayBoxes} from "./display-boxes.filter"; | |
3 | +import {SetBoxLayout} from "./set-box-layout.filter"; | |
2 | 4 | |
3 | 5 | @Component({ |
4 | 6 | selector: "noosfero-boxes", |
5 | - templateUrl: "app/layout/boxes/boxes.html" | |
7 | + templateUrl: "app/layout/boxes/boxes.html", | |
8 | + directives: [DisplayBoxes, SetBoxLayout] | |
6 | 9 | }) |
7 | 10 | export class BoxesComponent { |
8 | 11 | |
9 | 12 | @Input() boxes: noosfero.Box[]; |
10 | 13 | @Input() owner: noosfero.Profile | noosfero.Environment; |
14 | + @Input() layout: string; | |
11 | 15 | |
12 | - boxesOrder(box: noosfero.Box) { | |
13 | - if (box.position === 2) return 0; | |
14 | - return box.position; | |
15 | - } | |
16 | 16 | } | ... | ... |
src/app/layout/boxes/boxes.html
... | ... | @@ -0,0 +1,39 @@ |
1 | +import {Pipe, Inject} from "ng-forward"; | |
2 | +import {TranslatorService} from "../../shared/services/translator.service"; | |
3 | + | |
4 | +@Pipe("displayBoxes") | |
5 | +@Inject(TranslatorService) | |
6 | +export class DisplayBoxes { | |
7 | + | |
8 | + constructor(private translatorService: TranslatorService) { } | |
9 | + | |
10 | + transform(boxes: noosfero.Box[], layout: string) { | |
11 | + let function_str: string = "visible_on" + layout; | |
12 | + let valid_boxes: number[] = []; | |
13 | + let selected: noosfero.Box[] = []; | |
14 | + boxes = boxes || []; | |
15 | + | |
16 | + if(layout == "rightbar") { | |
17 | + valid_boxes = this.visible_on_right_bar(); | |
18 | + }else { | |
19 | + valid_boxes = this.visible_on_default(); | |
20 | + } | |
21 | + | |
22 | + for (let box of boxes) { | |
23 | + if(valid_boxes.indexOf(box.position) != -1){ | |
24 | + selected.push(box); | |
25 | + } | |
26 | + } | |
27 | + return selected; | |
28 | + } | |
29 | + | |
30 | + private visible_on_default() { | |
31 | + return [1,2,3]; | |
32 | + } | |
33 | + | |
34 | + private visible_on_right_bar() { | |
35 | + return [1,3]; | |
36 | + } | |
37 | + | |
38 | +} | |
39 | + | ... | ... |
... | ... | @@ -0,0 +1,37 @@ |
1 | +import {Pipe, Inject} from "ng-forward"; | |
2 | +import {TranslatorService} from "../../shared/services/translator.service"; | |
3 | + | |
4 | +@Pipe("setBoxLayout") | |
5 | +@Inject(TranslatorService) | |
6 | +export class SetBoxLayout { | |
7 | + | |
8 | + constructor(private translatorService: TranslatorService) { } | |
9 | + | |
10 | + transform(pos: number, layout: string) { | |
11 | + console.log(layout) | |
12 | + if(layout == "rightbar") { | |
13 | + return this.right_bar(pos); | |
14 | + }else { | |
15 | + return this.default(pos); | |
16 | + } | |
17 | + } | |
18 | + | |
19 | + private default(position: number) { | |
20 | + if(position == 1) { | |
21 | + return "col-md-6 col-md-push-3"; | |
22 | + }else if(position == 2){ | |
23 | + return "col-md-3 col-md-pull-6"; | |
24 | + }else { | |
25 | + return "col-md-3"; | |
26 | + } | |
27 | + } | |
28 | + | |
29 | + private right_bar(position: number) { | |
30 | + if(position == 1) { | |
31 | + return "col-sm-6 col-sm-push-2"; | |
32 | + }else{ | |
33 | + return "col-sm-3 col-sm-push-2"; | |
34 | + } | |
35 | + } | |
36 | + | |
37 | +} | ... | ... |
src/app/profile/profile.html
1 | 1 | <div class="profile-container"> |
2 | - <custom-content class="profile-header" [label]="'profile.custom_header.label'" [attribute]="'custom_header'" [profile]="vm.profile"></custom-content> | |
3 | - <div class="row"> | |
4 | - <noosfero-boxes ng-if="vm.boxes" [boxes]="vm.boxes" [owner]="vm.profile"></noosfero-boxes> | |
5 | - </div> | |
2 | + <custom-content class="profile-header" | |
3 | + [label]="'profile.custom_header.label'" | |
4 | + [attribute]="'custom_header'" | |
5 | + [profile]="vm.profile"> | |
6 | + </custom-content> | |
7 | + <div class="row" ui-view="profile-info"></div> | |
8 | + <noosfero-boxes ng-if="vm.boxes" | |
9 | + [layout]="vm.profile.layout_template" | |
10 | + [boxes]="vm.boxes" | |
11 | + [owner]="vm.profile" class="row"> | |
12 | + </noosfero-boxes> | |
6 | 13 | <custom-content class="profile-footer" [label]="'profile.custom_footer.label'" [attribute]="'custom_footer'" [profile]="vm.profile"></custom-content> |
7 | 14 | </div> | ... | ... |
src/lib/ng-noosfero-api/interfaces/environment.ts
... | ... | @@ -15,5 +15,13 @@ namespace noosfero { |
15 | 15 | */ |
16 | 16 | id: number; |
17 | 17 | settings: any |
18 | + | |
19 | + /** | |
20 | + * @ngdoc property | |
21 | + * @name layout_template | |
22 | + * @propertyOf noofero.Environment | |
23 | + * @returns {string} The Environment layout (e.g. default, rightbar) | |
24 | + */ | |
25 | + layout_template: string; | |
18 | 26 | } |
19 | -} | |
20 | 27 | \ No newline at end of file |
28 | +} | ... | ... |
src/lib/ng-noosfero-api/interfaces/profile.ts
... | ... | @@ -80,5 +80,13 @@ namespace noosfero { |
80 | 80 | custom_footer: string; |
81 | 81 | |
82 | 82 | permissions: string[]; |
83 | + | |
84 | + /** | |
85 | + * @ngdoc property | |
86 | + * @name layout_template | |
87 | + * @propertyOf noofero.Profile | |
88 | + * @returns {string} The Profile layout template (e.g.: "rightbar", "default") | |
89 | + */ | |
90 | + layout_template: string; | |
83 | 91 | } |
84 | 92 | } | ... | ... |