Compare View
Commits (1)
-
Signed-off-by: Tallys Martins <tallysmartins@gmail.com>
Showing
10 changed files
Show diff stats
src/app/environment/environment.html
| 1 | <div class="environment-container"> | 1 | <div class="environment-container"> |
| 2 | <div class="row"> | 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 | </div> | 8 | </div> |
| 5 | </div> | 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}"> | 1 | +<div ng-class="box.position | setBoxLayout:ctrl.layout"> |
| 2 | + | ||
| 2 | <div ng-repeat="block in box.blocks | displayBlocks:ctrl.isHomepage:ctrl.currentUser | orderBy: 'position'" class="panel panel-default block {{block.type | lowercase}}" > | 3 | <div ng-repeat="block in box.blocks | displayBlocks:ctrl.isHomepage:ctrl.currentUser | orderBy: 'position'" class="panel panel-default block {{block.type | lowercase}}" > |
| 3 | <div class="panel-heading" ng-show="block.title"> | 4 | <div class="panel-heading" ng-show="block.title"> |
| 4 | <h3 class="panel-title">{{block.title}}</h3> | 5 | <h3 class="panel-title">{{block.title}}</h3> |
src/app/layout/boxes/boxes.component.spec.ts
| @@ -49,11 +49,6 @@ describe("Boxes Component", () => { | @@ -49,11 +49,6 @@ describe("Boxes Component", () => { | ||
| 49 | expect(helper.find('div.col-md-2-5').length).toEqual(1); | 49 | expect(helper.find('div.col-md-2-5').length).toEqual(1); |
| 50 | }); | 50 | }); |
| 51 | 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 | - | ||
| 57 | it("set isHomepage as false by default", () => { | 52 | it("set isHomepage as false by default", () => { |
| 58 | expect(helper.component.isHomepage).toBeFalsy(); | 53 | expect(helper.component.isHomepage).toBeFalsy(); |
| 59 | }); | 54 | }); |
src/app/layout/boxes/boxes.component.ts
| 1 | import {Input, Inject, Component} from 'ng-forward'; | 1 | import {Input, Inject, Component} from 'ng-forward'; |
| 2 | import {SessionService, AuthService, AuthEvents} from "../../login"; | 2 | import {SessionService, AuthService, AuthEvents} from "../../login"; |
| 3 | import {DisplayBlocks} from "./display-blocks.filter"; | 3 | import {DisplayBlocks} from "./display-blocks.filter"; |
| 4 | +import {DisplayBoxes} from "./display-boxes.filter"; | ||
| 5 | +import {SetBoxLayout} from "./set-box-layout.filter"; | ||
| 4 | 6 | ||
| 5 | @Component({ | 7 | @Component({ |
| 6 | selector: "noosfero-boxes", | 8 | selector: "noosfero-boxes", |
| 7 | templateUrl: "app/layout/boxes/boxes.html", | 9 | templateUrl: "app/layout/boxes/boxes.html", |
| 8 | - directives: [DisplayBlocks] | 10 | + directives: [DisplayBlocks, DisplayBoxes, SetBoxLayout] |
| 9 | }) | 11 | }) |
| 10 | @Inject("SessionService", 'AuthService', "$state", "$rootScope") | 12 | @Inject("SessionService", 'AuthService', "$state", "$rootScope") |
| 11 | export class BoxesComponent { | 13 | export class BoxesComponent { |
| 12 | 14 | ||
| 13 | @Input() boxes: noosfero.Box[]; | 15 | @Input() boxes: noosfero.Box[]; |
| 14 | @Input() owner: noosfero.Profile | noosfero.Environment; | 16 | @Input() owner: noosfero.Profile | noosfero.Environment; |
| 17 | + @Input() layout: string; | ||
| 15 | 18 | ||
| 16 | currentUser: noosfero.User; | 19 | currentUser: noosfero.User; |
| 17 | isHomepage = true; | 20 | isHomepage = true; |
| @@ -39,11 +42,6 @@ export class BoxesComponent { | @@ -39,11 +42,6 @@ export class BoxesComponent { | ||
| 39 | this.verifyHomepage(); | 42 | this.verifyHomepage(); |
| 40 | } | 43 | } |
| 41 | 44 | ||
| 42 | - boxesOrder(box: noosfero.Box) { | ||
| 43 | - if (box.position === 2) return 0; | ||
| 44 | - return box.position; | ||
| 45 | - } | ||
| 46 | - | ||
| 47 | private verifyHomepage() { | 45 | private verifyHomepage() { |
| 48 | if (this.owner && ["Profile", "Community", "Person"].indexOf((<any>this.owner)['type']) >= 0) { | 46 | if (this.owner && ["Profile", "Community", "Person"].indexOf((<any>this.owner)['type']) >= 0) { |
| 49 | let profile = <noosfero.Profile>this.owner; | 47 | let profile = <noosfero.Profile>this.owner; |
src/app/layout/boxes/boxes.html
| @@ -0,0 +1,39 @@ | @@ -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 @@ | @@ -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 | <div class="profile-container"> | 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 | <custom-content class="profile-footer" [label]="'profile.custom_footer.label'" [attribute]="'custom_footer'" [profile]="vm.profile"></custom-content> | 13 | <custom-content class="profile-footer" [label]="'profile.custom_footer.label'" [attribute]="'custom_footer'" [profile]="vm.profile"></custom-content> |
| 7 | </div> | 14 | </div> |
src/lib/ng-noosfero-api/interfaces/environment.ts
| @@ -15,5 +15,13 @@ namespace noosfero { | @@ -15,5 +15,13 @@ namespace noosfero { | ||
| 15 | */ | 15 | */ |
| 16 | id: number; | 16 | id: number; |
| 17 | settings: any | 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 | \ No newline at end of file | 27 | \ No newline at end of file |
| 28 | +} |
src/lib/ng-noosfero-api/interfaces/profile.ts
| @@ -78,5 +78,13 @@ namespace noosfero { | @@ -78,5 +78,13 @@ namespace noosfero { | ||
| 78 | * @returns {string} The Profile footer | 78 | * @returns {string} The Profile footer |
| 79 | */ | 79 | */ |
| 80 | custom_footer: string; | 80 | custom_footer: string; |
| 81 | + | ||
| 82 | + /** | ||
| 83 | + * @ngdoc property | ||
| 84 | + * @name layout_template | ||
| 85 | + * @propertyOf noofero.Profile | ||
| 86 | + * @returns {string} The Profile layout template (e.g.: "rightbar", "default") | ||
| 87 | + */ | ||
| 88 | + layout_template: string; | ||
| 81 | } | 89 | } |
| 82 | } | 90 | } |