1
Download as
Browse Code »

Commit 02560aeeb492e162a3fdbb95bafb1dd48296985c

Authored by Caio Almeida
2 parents 7f3632f7 886e0841
Exists in master and in 7 other branches cosmetic_changes_people_and_communities_block, forgot_password, profile-blocks-sass, profile_description_block_component, staging, translations, users_profile_page

Merge branch 'layout_support' into 'master' 

Layout support

See merge request !51
Showing 12 changed files with 198 additions and 21 deletions   Show diff stats
src/app/environment/environment.html
  Diff comments   View file @02560ae
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
  Diff comments   View file @02560ae
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 + <noosfero-block
  3 + ng-repeat="block in box.blocks | orderBy: 'position'"
  4 + [block]="block" [owner]="ctrl.owner">
  5 + </noosfero-block>
3 </div> 6 </div>
src/app/layout/boxes/boxes.component.spec.ts
  Diff comments   View file @02560ae
@@ -45,12 +45,7 @@ describe(&quot;Boxes Component&quot;, () =&gt; { @@ -45,12 +45,7 @@ describe(&quot;Boxes Component&quot;, () =&gt; {
45 state.current = { name: "" }; 45 state.current = { name: "" };
46 46
47 it("renders boxes into a container", () => { 47 it("renders boxes into a container", () => {
48 - expect(helper.find('div.col-md-7').length).toEqual(1);  
49 - expect(helper.find('div.col-md-2-5').length).toEqual(1);  
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); 48 + expect(helper.find('div.col-md-6').length).toEqual(1);
  49 + expect(helper.find('div.col-md-3').length).toEqual(1);
55 }); 50 });
56 }); 51 });
src/app/layout/boxes/boxes.component.ts
  Diff comments   View file @02560ae
1 import {Input, Component} from 'ng-forward'; 1 import {Input, Component} from 'ng-forward';
  2 +import {DisplayBoxes} from "./display-boxes.filter";
  3 +import {SetBoxLayout} from "./set-box-layout.filter";
2 4
3 @Component({ 5 @Component({
4 selector: "noosfero-boxes", 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 export class BoxesComponent { 10 export class BoxesComponent {
8 11
9 @Input() boxes: noosfero.Box[]; 12 @Input() boxes: noosfero.Box[];
10 @Input() owner: noosfero.Profile | noosfero.Environment; 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
  Diff comments   View file @02560ae
1 -<ng-include ng-repeat="box in ctrl.boxes | orderBy: ctrl.boxesOrder" src="'app/layout/boxes/box.html'"></ng-include> 1 +<ng-include ng-repeat="box in ctrl.boxes | displayBoxes:ctrl.layout" src="'app/layout/boxes/box.html'"></ng-include>
src/app/layout/boxes/display-boxes.filter.spec.ts 0 → 100644
  Diff comments   View file @02560ae
@@ -0,0 +1,51 @@ @@ -0,0 +1,51 @@
  1 +import {DisplayBoxes} from './display-boxes.filter';
  2 +
  3 +describe("Boxes Filters", () => {
  4 + describe("Display Boxes Filter", () => {
  5 +
  6 + let boxes: noosfero.Box[] = [
  7 + {id: 1, position: 1 },
  8 + {id: 2, position: 2 },
  9 + {id: 3, position: 3 },
  10 + {id: 4, position: 4 }
  11 + ];
  12 +
  13 + let expected_on_default: noosfero.Box[] = [
  14 + {id: 1, position: 1 },
  15 + {id: 2, position: 2 },
  16 + {id: 3, position: 3 },
  17 + ];
  18 +
  19 + let expected_on_rightbar: noosfero.Box[] = [
  20 + {id: 1, position: 1 },
  21 + {id: 3, position: 3 },
  22 + ];
  23 +
  24 + it("filter boxes when layout is set to default", done => {
  25 + let filter = new DisplayBoxes();
  26 +
  27 + let filtered_boxes: noosfero.Box[] = filter.transform(boxes, "default");
  28 + expect(filtered_boxes.length).toEqual(3);
  29 + expect(filtered_boxes).toEqual(expected_on_default);
  30 + done();
  31 + });
  32 +
  33 + it("filter boxes when layout is set to rightbar", done => {
  34 + let filter = new DisplayBoxes();
  35 +
  36 + let filtered_boxes: noosfero.Box[] = filter.transform(boxes, "rightbar");
  37 + expect(filtered_boxes.length).toEqual(2);
  38 + expect(filtered_boxes).toEqual(expected_on_rightbar);
  39 + done();
  40 + });
  41 +
  42 + it("filter boxes with default layout when invalid layout is given", done => {
  43 + let filter = new DisplayBoxes();
  44 +
  45 + let filtered_boxes: noosfero.Box[] = filter.transform(boxes, "");
  46 + expect(filtered_boxes.length).toEqual(3);
  47 + expect(filtered_boxes).toEqual(expected_on_default);
  48 + done();
  49 + });
  50 + });
  51 +});
src/app/layout/boxes/display-boxes.filter.ts 0 → 100644
  Diff comments   View file @02560ae
@@ -0,0 +1,35 @@ @@ -0,0 +1,35 @@
  1 +import {Pipe, Inject} from "ng-forward";
  2 +
  3 +@Pipe("displayBoxes")
  4 +export class DisplayBoxes {
  5 +
  6 + transform(boxes: noosfero.Box[], layout: string) {
  7 + let function_str: string = "visible_on" + layout;
  8 + let valid_boxes: number[] = [];
  9 + let selected: noosfero.Box[] = [];
  10 + boxes = boxes || [];
  11 +
  12 + if (layout === "rightbar") {
  13 + valid_boxes = this.visible_on_right_bar();
  14 + }else {
  15 + valid_boxes = this.visible_on_default();
  16 + }
  17 +
  18 + for (let box of boxes) {
  19 + if (valid_boxes.indexOf(box.position) !== -1) {
  20 + selected.push(box);
  21 + }
  22 + }
  23 + return selected;
  24 + }
  25 +
  26 + private visible_on_default() {
  27 + return [1, 2, 3];
  28 + }
  29 +
  30 + private visible_on_right_bar() {
  31 + return [1, 3];
  32 + }
  33 +
  34 +}
  35 +
src/app/layout/boxes/set-box-layout.filter.spec.ts 0 → 100644
  Diff comments   View file @02560ae
@@ -0,0 +1,34 @@ @@ -0,0 +1,34 @@
  1 +import {SetBoxLayout} from './set-box-layout.filter';
  2 +
  3 +describe("Boxes Filters", () => {
  4 + describe("Set Box Layout Filter", () => {
  5 + let box_layout_filter = new SetBoxLayout();
  6 + describe("When layout is set to default", () => {
  7 + it("return style when box position is 1 ", done => {
  8 + expect(box_layout_filter.transform(1, "default")).toEqual("col-md-6 col-md-push-3");
  9 + done();
  10 + });
  11 + it("return style when box position is 2", done => {
  12 + expect(box_layout_filter.transform(2, "default")).toEqual("col-md-3 col-md-pull-6");
  13 + done();
  14 + });
  15 + it("return style when any other position is given", done => {
  16 + expect(box_layout_filter.transform(null, "default")).toEqual("col-md-3");
  17 + expect(box_layout_filter.transform(3, "default")).toEqual("col-md-3");
  18 + expect(box_layout_filter.transform(99, "default")).toEqual("col-md-3");
  19 + done();
  20 + });
  21 + });
  22 +
  23 + describe("When layout is set to right_bar", () => {
  24 + it("return style when box position is 1 ", done => {
  25 + expect(box_layout_filter.transform(1, "rightbar")).toEqual("col-sm-12 col-md-8");
  26 + done();
  27 + });
  28 + it("return style when box other position is given", done => {
  29 + expect(box_layout_filter.transform(2, "rightbar")).toEqual("col-sm-12 col-md-4");
  30 + done();
  31 + });
  32 + });
  33 + });
  34 +});
src/app/layout/boxes/set-box-layout.filter.ts 0 → 100644
  Diff comments   View file @02560ae
@@ -0,0 +1,32 @@ @@ -0,0 +1,32 @@
  1 +import {Pipe, Inject} from "ng-forward";
  2 +
  3 +@Pipe("setBoxLayout")
  4 +export class SetBoxLayout {
  5 +
  6 + transform(pos: number, layout: string) {
  7 + if (layout === "rightbar") {
  8 + return this.right_bar(pos);
  9 + }else {
  10 + return this.default(pos);
  11 + }
  12 + }
  13 +
  14 + private default(position: number) {
  15 + if (position === 1) {
  16 + return "col-md-6 col-md-push-3";
  17 + }else if (position === 2) {
  18 + return "col-md-3 col-md-pull-6";
  19 + }else {
  20 + return "col-md-3";
  21 + }
  22 + }
  23 +
  24 + private right_bar(position: number) {
  25 + if (position === 1) {
  26 + return "col-sm-12 col-md-8";
  27 + }else {
  28 + return "col-sm-12 col-md-4";
  29 + }
  30 + }
  31 +
  32 +}
src/app/profile/profile.html
  Diff comments   View file @02560ae
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 + <noosfero-boxes ng-if="vm.boxes"
  8 + [layout]="vm.profile.layout_template"
  9 + [boxes]="vm.boxes"
  10 + [owner]="vm.profile" class="row">
  11 + </noosfero-boxes>
6 <custom-content class="profile-footer" [label]="'profile.custom_footer.label'" [attribute]="'custom_footer'" [profile]="vm.profile"></custom-content> 12 <custom-content class="profile-footer" [label]="'profile.custom_footer.label'" [attribute]="'custom_footer'" [profile]="vm.profile"></custom-content>
7 </div> 13 </div>
src/lib/ng-noosfero-api/interfaces/environment.ts
  Diff comments   View file @02560ae
@@ -15,5 +15,14 @@ namespace noosfero { @@ -15,5 +15,14 @@ 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 +}
  29 +
src/lib/ng-noosfero-api/interfaces/profile.ts
  Diff comments   View file @02560ae
@@ -80,5 +80,13 @@ namespace noosfero { @@ -80,5 +80,13 @@ namespace noosfero {
80 custom_footer: string; 80 custom_footer: string;
81 81
82 permissions: string[]; 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 }