Merge branch 'master' into staging

Leandro Santos
2 parents a2b0d2b1 8784fe3c
Showing 43 changed files with 728 additions and 116 deletions Show diff stats
bower.json
gulp/conf.js
src/app/admin/layout-edit/designModeToggler.component.spec.ts
src/app/admin/layout-edit/designModeToggler.component.ts
src/app/admin/layout-edit/designModeToggler.html
src/app/admin/layout-edit/designModeToggler.scss
src/app/environment/environment.html
src/app/layout/blocks/recent-activities-plugin-activities/activities/add_member_in_community.html
src/app/layout/blocks/recent-activities-plugin-activities/activities/create_article.html
src/app/layout/blocks/recent-activities-plugin-activities/activities/event.html
src/app/layout/blocks/recent-activities-plugin-activities/activities/favorite_enterprise.html
src/app/layout/blocks/recent-activities-plugin-activities/activities/new_friendship.html
src/app/layout/blocks/recent-activities-plugin-activities/activities/upload_image.html
src/app/layout/blocks/recent-activities-plugin-activities/index.ts
src/app/layout/blocks/recent-activities-plugin-activities/recent-activities-plugin-activities-block.component.spec.ts
src/app/layout/blocks/recent-activities-plugin-activities/recent-activities-plugin-activities-block.component.ts
src/app/layout/blocks/recent-activities-plugin-activities/recent-activities-plugin-activities-block.html
src/app/layout/blocks/recent-activities-plugin-activities/recent-activities-plugin-activities-block.scss
src/app/layout/boxes/box.html
src/app/layout/boxes/boxes.component.spec.ts
@@ -38,8 +38,8 @@
     "angular-bind-html-compile": "^1.2.1",
     "angular-click-outside": "^2.7.1",
     "ng-ckeditor": "^0.2.1",
-    "angular-bootstrap-toggle-switch": "^0.5.6",
-    "angular-tag-cloud": "^0.3.0"
+    "angular-tag-cloud": "^0.3.0",
+    "angular-ui-switch": "^0.1.1"
   },
   "devDependencies": {
     "angular-mocks": "~1.5.0"
@@ -55,12 +55,7 @@ exports.themeExists = function (path) {
 * @param skin The skin name passed by arg to gulp task
 */
 exports.skinExists = function (skin) {
-
-    //Skip skin verification on 'build' task
-    // if(exports.isBuild()){
-    //   return;
-    // }
-
+  
     var skinPath, prefixPath = '';
     var skinFile = skin+'.scss';
     if (/skin-/.test(skin)) {
 import {ComponentTestHelper, createClass} from '../../../spec/component-test-helper';
+import {INgForwardJQuery} from 'ng-forward/cjs/util/jqlite-extensions';
 import * as helpers from '../../../spec/helpers';
 import {DesignModeTogglerComponent} from './designModeToggler.component';
 import {DesignModeService} from './designMode.service';
 import {INoosferoLocalStorage} from "./../../shared/models/interfaces";
 describe('DesignModeToggler Component', () => {
-    const htmlTemplate: string = '<noosfero-design-toggler></noosfero-design-toggler>';
+    const htmlTemplate: string = '<design-toggler></design-toggler>';
     let helper: ComponentTestHelper<DesignModeTogglerComponent>;
     beforeEach(() => {
         angular.mock.module('templates');
         angular.mock.module('ngSanitize');
-        angular.mock.module('toggle-switch');
+        angular.mock.module('uiSwitch');
     });
     let designModeService: DesignModeService;
@@ -30,12 +31,12 @@ describe(&#39;DesignModeToggler Component&#39;, () =&gt; {
     });
     it('changes css classes representing the switch is on or off', () => {
-        expect(helper.debugElement.query('div.switch-animate').hasClass('switch-off')).toBeTruthy();
-        expect(helper.debugElement.query('div.switch-animate').hasClass('switch-on')).toBeFalsy();
+        let switchEl: INgForwardJQuery = helper.debugElement.query('span.switch');
+
+        expect(switchEl.hasClass('checked')).toBeFalsy();
         helper.component.inDesignMode = true;
         helper.detectChanges();
-        expect(helper.debugElement.query('div.switch-animate').hasClass('switch-on')).toBeTruthy();
-        expect(helper.debugElement.query('div.switch-animate').hasClass('switch-off')).toBeFalsy();
+        expect(switchEl.hasClass('checked')).toBeTruthy();
     });
     it('emits event with value "true" when changing inDesignMode to On', (done) => {
@@ -60,4 +61,4 @@ describe(&#39;DesignModeToggler Component&#39;, () =&gt; {
         helper.component.inDesignMode = false;
         helper.detectChanges();
     });
-});
 \ No newline at end of file
+});
-import {Component, Inject} from 'ng-forward';
+import {Component, Inject, Input} from 'ng-forward';
 import {DesignModeService} from './designMode.service';
 import {AuthService, AuthEvents} from '../../login';
 @Component({
-    selector: 'noosfero-design-toggler',
+    selector: 'design-toggler',
     templateUrl: 'app/admin/layout-edit/designModeToggler.html'
 })
-@Inject(DesignModeService, AuthService)
+@Inject(DesignModeService, AuthService, '$sce')
 export class DesignModeTogglerComponent {
-    icon: string = "&nbsp;<i class='glyphicon glyphicon-wrench'></i>&nbsp;";
+    private _inDesignMode: boolean = false;
-    constructor(private designModeService: DesignModeService, private authService: AuthService) {
+    constructor(private designModeService: DesignModeService, private authService: AuthService, private $sce: ng.ISCEService) {
         this.authService.subscribe(AuthEvents[AuthEvents.logoutSuccess], () => {
             this.designModeService.destroy();
         });
     }
-    private _inDesignMode: boolean = false;
-
     get inDesignMode(): boolean {
         return this.designModeService.isInDesignMode();
     };
-<toggle-switch
-    html="true"
-    ng-model="ctrl.inDesignMode"
-    on-label="{{'designMode.toggle.ON' | translate}}"
-    off-label="{{'designMode.toggle.OFF' | translate}}"
-    class="switch-small"
-    knob-label="{{ ctrl.icon + ('designMode.label' | translate) }}">
-</toggle-switch>
 \ No newline at end of file
+<switch id="enabled" name="enabled" ng-model="ctrl.inDesignMode" on="ON" off="OFF" class="green"></switch>
@@ -0,0 +1,55 @@
+$off-text: #949494;
+$off-color: #EFEFEF;
+$blue-color: #36B4F6;
+$red-color: #DF3B3A;
+
+body.noosfero-design-on {
+
+    div.content-wrapper {
+        opacity: 0.5;
+    }
+}
+
+.switch {
+  @include not-select();
+  background-color: $off-color;
+
+  &[on][off] {
+    width: 60px;
+  }
+
+  &:focus {
+    outline: none;
+  }
+
+  &.checked small {
+      left: initial;
+      right: 0px;
+  }
+
+  &.blue.checked {
+    background: $blue-color;
+    border-color: $blue-color;
+  }
+
+  &.red.checked {
+    background: $red-color;
+    border-color: $red-color;
+  }
+
+  %switch-label {
+    font-weight: bold;
+  }
+
+  .on {
+    @extend %switch-label;
+  }
+
+  .off {
+      @extend %switch-label;
+      right: 2px;
+      top: 25%;
+      color: $off-text;
+      text-align: center;
+  }
+}
 <div class="environment-container">
   <div class="row">
-    <noosfero-boxes ng-if="vm.boxes" [boxes]="vm.boxes" [owner]="vm.environment"></noosfero-boxes>
+    <noosfero-boxes ng-if="vm.boxes"
+                    [layout]="vm.environment.layout_template"
+                    [boxes]="vm.boxes"
+                    [owner]="vm.environment">
+    </noosfero-boxes>
   </div>
 </div>
@@ -0,0 +1 @@
+{{'joined the community' | translate}}
@@ -0,0 +1 @@
+{{'published an article:' | translate}} <a ng-href="{{ctrl.urlFor(activity.params.url)}}">{{activity.params.name}}</a>
@@ -0,0 +1,3 @@
+<img ng-src="{{activity.params.first_image}}" ng-attr-alt="{{activity.params.name}}" class="event-image" />
+<p class="event-description"><b>{{activity.params.name}}</b><br />{{activity.params.lead | stripTags}}</p>
+<br style="clear: both;" />
@@ -0,0 +1 @@
+{{'favorited an enterprise:' | translate}} <a ng-href="{{ctrl.urlFor(activity.params.enterprise_url)}}">{{activity.params.enterprise_name}}</a>
@@ -0,0 +1,6 @@
+{{'has made new friends:' | translate}}<br /> 
+<span ng-repeat="name in activity.params.friend_name">
+  <a ng-href="{{ctrl.urlFor(activity.params.friend_url[$index])}}" ng-attr-title="{{name}}">
+    <img ng-src="{{activity.params.friend_profile_custom_icon[$index]}}" ng-attr-alt="{{name}}" />
+  </a>
+</span>
@@ -0,0 +1,6 @@
+{{'uploaded images:' | translate}}<br /> 
+<span ng-repeat="path in activity.params.thumbnail_path">
+  <a class="upimg" ng-href="{{ctrl.urlFor(activity.params.view_url[$index])}}" ng-style="{'background-image':'url({{path}})'}">
+    <span>{{path}}</span>
+  </a>
+</span>
@@ -0,0 +1,2 @@
+/* Module Index Entry - generated using the script npm run generate-index */
+export * from "./recent-activities-plugin-activities-block.component";
@@ -0,0 +1,56 @@
+import {TestComponentBuilder} from 'ng-forward/cjs/testing/test-component-builder';
+import {Provider, Input, provide, Component} from 'ng-forward';
+import {provideFilters} from '../../../../spec/helpers';
+import {RecentActivitiesPluginActivitiesBlockComponent} from './recent-activities-plugin-activities-block.component';
+import * as helpers from "./../../../../spec/helpers";
+
+const htmlTemplate: string = '<noosfero-recent-activities-plugin-activities-block [block]="ctrl.block" [owner]="ctrl.owner"></noosfero-recent-activities-plugin-activities-block>';
+
+const tcb = new TestComponentBuilder();
+
+describe("Components", () => {
+    describe("Recent Activities Block Component", () => {
+
+        let settingsObj = {};
+        let person = <noosfero.Person>{ name: "Person" };
+        let mockedService = {
+            getApiContent: (block: noosfero.Block): any => {
+                return Promise.resolve({ activities: [{ verb: 'new_friendship' }], headers: (name: string) => { return name; } });
+            }
+        };
+        beforeEach(angular.mock.module("templates"));
+
+        let state = jasmine.createSpyObj("state", ["go"]);
+
+
+        function getProviders() {
+            return [
+                new Provider('$state', { useValue: state }),
+                new Provider('BlockService', {
+                    useValue: mockedService
+                })
+            ].concat(provideFilters("truncateFilter", "stripTagsFilter"));
+        }
+        let componentClass: any = null;
+
+        function getComponent() {
+            @Component({ selector: 'test-container-component', template: htmlTemplate, directives: [RecentActivitiesPluginActivitiesBlockComponent], providers: getProviders() })
+            class BlockContainerComponent {
+                block = { type: 'Block', settings: settingsObj };
+                owner = person;
+                constructor() {
+                }
+            }
+            return BlockContainerComponent;
+        }
+
+        it("get activities from block service", done => {
+            tcb.createAsync(getComponent()).then(fixture => {
+                let RecentActivitiesPluginActivitiesBlock: RecentActivitiesPluginActivitiesBlockComponent = fixture.debugElement.componentViewChildren[0].componentInstance;
+                expect(RecentActivitiesPluginActivitiesBlock.activities[0]['verb']).toEqual('new_friendship');
+                done();
+            });
+        });
+
+    });
+});
@@ -0,0 +1,48 @@
+import {Component, Inject, Input} from "ng-forward";
+import {BlockService} from "../../../../lib/ng-noosfero-api/http/block.service";
+import {Arrays} from "./../../../../lib/util/arrays";
+
+@Component({
+    selector: "noosfero-recent-activities-plugin-activities-block",
+    templateUrl: 'app/layout/blocks/recent-activities-plugin-activities/recent-activities-plugin-activities-block.html'
+})
+@Inject(BlockService, "$state")
+export class RecentActivitiesPluginActivitiesBlockComponent {
+
+    @Input() block: any;
+    @Input() owner: any;
+
+    profile: any;
+    activities: any;
+
+    constructor(private blockService: BlockService, private $state: any) { }
+
+    getActivityTemplate(activity: any) {
+        if (activity.label === 'events') {
+          return 'app/layout/blocks/recent-activities-plugin-activities/activities/event.html';
+        }
+        else {
+          return 'app/layout/blocks/recent-activities-plugin-activities/activities/' + activity.verb + '.html';
+        }
+    }
+
+    urlFor(params: any) {
+        let url = '//' + params.host;
+        if (params.port) {
+              url += ':' + params.port;
+        }
+        url += '/' + params.profile + '/';
+        if (params.page) {
+            url += params.page.join('/');
+        }
+        return url;
+    }
+
+    ngOnInit() {
+        this.profile = this.owner;
+        this.activities = [];
+        this.blockService.getApiContent(this.block).then((content: any) => {
+            this.activities = content.activities;
+        });
+    }
+}
@@ -0,0 +1,22 @@
+<div class="deckgrid recent-activities-block">
+  <div ng-repeat="activity in ctrl.activities" class="a-card panel media">
+
+    <div class="subheader">
+      <p ng-if="activity.label === 'events'">
+      {{ 'activities.event.description' | translate }} <b>{{ activity.start_date | date:longDate }}</b> {{ 'time.at' | translate }} {{ activity.start_date | date:'HH:mm' }} - <a ng-href="/{{activity.user.identifier}}">{{activity.user.name}}</a> <span class="activity-label">{{activity.label}}</span>
+      </p>
+
+      <p ng-if="activity.label !== 'events'">
+      {{ 'date.on' | translate }} <b>{{ activity.created_at | date:longDate }}</b> {{ 'time.at' | translate }} {{ activity.created_at | date:'HH:mm' }} - <a ng-href="/{{activity.user.identifier}}">{{activity.user.name}}</a> <span class="activity-label">{{activity.label}}</span>
+      </p>
+    </div>
+
+    <div class="header media-body">
+      <h5 class="title media-heading">
+        <ng-include src="ctrl.getActivityTemplate(activity)"></ng-include>
+      </h5>
+    </div>
+
+    <hr />
+  </div>
+</div>
@@ -0,0 +1,72 @@
+.col-md-2-5 .deckgrid[deckgrid]::before {
+  visibility: hidden;
+}
+
+.recent-activities-block {
+  img, .upimg {
+    padding: 1px;
+    border: 1px solid #ccc;
+    margin-right: 2px;
+    margin-top: 2px;
+  }
+
+  .upimg {
+    display: inline-block;
+    width: 20px;
+    height: 20px;
+    background-size: cover;
+
+    span {
+      display: none;
+    }
+  }
+
+  .panel {
+    margin-bottom: 15px;
+    box-shadow: none;
+    border-radius: 0;
+  }
+
+  h5 {
+    text-transform: capitalize;
+  }
+
+  .subheader {
+    p {
+      margin: 2px 0;
+      font-size: 11px;
+    }
+  }
+
+  hr {
+    border: 0;
+    height: 1px;
+    background: #ccc;
+    margin: 0;
+    margin-top: 15px;
+  }
+
+  .activity-label {
+    @include border-radius(2px);
+    font-size: 11px;
+    text-transform: capitalize;
+    background: #333;
+    color: #fff;
+    padding: 2px;
+    margin-left: 5px;
+    display: inline-block;
+  }
+
+  .event-image {
+    width: 15%;
+    height: auto;
+    float: left;
+  }
+
+  .event-description {
+    width: 83%;
+    margin: 2px 0 0 2px;
+    float: left;
+    display: block;
+  }
+}
-<div ng-class="{'col-md-2-5': box.position!=1, 'col-md-7': box.position==1}">
-  <noosfero-block ng-repeat="block in box.blocks | orderBy: 'position'" [block]="block" [owner]="ctrl.owner"></noosfero-block>
+<div ng-class="box.position | setBoxLayout:ctrl.layout">
+  <noosfero-block
+    ng-repeat="block in box.blocks | orderBy: 'position'"
+    [block]="block" [owner]="ctrl.owner">
+  </noosfero-block>
 </div>
@@ -45,12 +45,7 @@ describe(&quot;Boxes Component&quot;, () =&gt; {
     state.current = { name: "" };
     it("renders boxes into a container", () => {
-        expect(helper.find('div.col-md-7').length).toEqual(1);
-        expect(helper.find('div.col-md-2-5').length).toEqual(1);
-    });
-
-    it("check the boxes order", () => {
-        expect(helper.component.boxesOrder(properties['boxes'][0])).toEqual(1);
-        expect(helper.component.boxesOrder(properties['boxes'][1])).toEqual(0);
+        expect(helper.find('div.col-md-6').length).toEqual(1);
+        expect(helper.find('div.col-md-3').length).toEqual(1);
     });
 });
 import {Input, Component} from 'ng-forward';
+import {DisplayBoxes} from "./display-boxes.filter";
+import {SetBoxLayout} from "./set-box-layout.filter";
 @Component({
     selector: "noosfero-boxes",
-    templateUrl: "app/layout/boxes/boxes.html"
+    templateUrl: "app/layout/boxes/boxes.html",
+    directives: [DisplayBoxes, SetBoxLayout]
 })
 export class BoxesComponent {
     @Input() boxes: noosfero.Box[];
     @Input() owner: noosfero.Profile | noosfero.Environment;
+    @Input() layout: string;
-    boxesOrder(box: noosfero.Box) {
-        if (box.position === 2) return 0;
-        return box.position;
-    }
 }
-<ng-include ng-repeat="box in ctrl.boxes | orderBy: ctrl.boxesOrder" src="'app/layout/boxes/box.html'"></ng-include>
+<ng-include ng-repeat="box in ctrl.boxes | displayBoxes:ctrl.layout" src="'app/layout/boxes/box.html'"></ng-include>
@@ -0,0 +1,51 @@
+import {DisplayBoxes} from './display-boxes.filter';
+
+describe("Boxes Filters", () => {
+    describe("Display Boxes Filter", () => {
+
+        let boxes: noosfero.Box[] = [
+            {id: 1, position: 1 },
+            {id: 2, position: 2 },
+            {id: 3, position: 3 },
+            {id: 4, position: 4 }
+        ];
+
+        let expected_on_default: noosfero.Box[] = [
+            {id: 1, position: 1 },
+            {id: 2, position: 2 },
+            {id: 3, position: 3 },
+        ];
+
+        let expected_on_rightbar: noosfero.Box[] = [
+            {id: 1, position: 1 },
+            {id: 3, position: 3 },
+        ];
+
+        it("filter boxes when layout is set to default", done => {
+          let filter = new DisplayBoxes();
+
+          let filtered_boxes: noosfero.Box[] = filter.transform(boxes, "default");
+          expect(filtered_boxes.length).toEqual(3);
+          expect(filtered_boxes).toEqual(expected_on_default);
+          done();
+        });
+
+        it("filter boxes when layout is set to rightbar", done => {
+          let filter = new DisplayBoxes();
+
+          let filtered_boxes: noosfero.Box[] = filter.transform(boxes, "rightbar");
+          expect(filtered_boxes.length).toEqual(2);
+          expect(filtered_boxes).toEqual(expected_on_rightbar);
+          done();
+        });
+
+        it("filter boxes with default layout when invalid layout is given", done => {
+          let filter = new DisplayBoxes();
+
+          let filtered_boxes: noosfero.Box[] = filter.transform(boxes, "");
+          expect(filtered_boxes.length).toEqual(3);
+          expect(filtered_boxes).toEqual(expected_on_default);
+          done();
+        });
+    });
+});
@@ -0,0 +1,35 @@
+import {Pipe, Inject} from "ng-forward";
+
+@Pipe("displayBoxes")
+export class DisplayBoxes {
+
+    transform(boxes: noosfero.Box[], layout: string) {
+        let function_str: string = "visible_on" + layout;
+        let valid_boxes: number[] = [];
+        let selected: noosfero.Box[] = [];
+        boxes = boxes || [];
+
+        if (layout === "rightbar") {
+          valid_boxes = this.visible_on_right_bar();
+        }else {
+          valid_boxes = this.visible_on_default();
+        }
+
+        for (let box of boxes) {
+            if (valid_boxes.indexOf(box.position) !== -1) {
+              selected.push(box);
+            }
+        }
+        return selected;
+    }
+
+    private visible_on_default() {
+        return [1, 2, 3];
+    }
+
+    private visible_on_right_bar() {
+        return [1, 3];
+    }
+
+}
+
@@ -0,0 +1,34 @@
+import {SetBoxLayout} from './set-box-layout.filter';
+
+describe("Boxes Filters", () => {
+    describe("Set Box Layout Filter", () => {
+        let box_layout_filter = new SetBoxLayout();
+        describe("When layout is set to default", () =>  {
+            it("return style when box position is 1 ", done => {
+                expect(box_layout_filter.transform(1, "default")).toEqual("col-md-6 col-md-push-3");
+                done();
+            });
+            it("return style when box position is 2", done => {
+                expect(box_layout_filter.transform(2, "default")).toEqual("col-md-3 col-md-pull-6");
+                done();
+            });
+            it("return style when any other position is given", done => {
+                expect(box_layout_filter.transform(null, "default")).toEqual("col-md-3");
+                expect(box_layout_filter.transform(3, "default")).toEqual("col-md-3");
+                expect(box_layout_filter.transform(99, "default")).toEqual("col-md-3");
+                done();
+            });
+       });
+
+        describe("When layout is set to right_bar", () =>  {
+            it("return style when box position is 1 ", done => {
+                expect(box_layout_filter.transform(1, "rightbar")).toEqual("col-sm-12 col-md-8");
+                done();
+            });
+            it("return style when box other position is given", done => {
+                expect(box_layout_filter.transform(2, "rightbar")).toEqual("col-sm-12 col-md-4");
+                done();
+            });
+        });
+    });
+});
@@ -0,0 +1,32 @@
+import {Pipe, Inject} from "ng-forward";
+
+@Pipe("setBoxLayout")
+export class SetBoxLayout {
+
+    transform(pos: number, layout: string) {
+        if (layout === "rightbar") {
+          return this.right_bar(pos);
+        }else {
+          return this.default(pos);
+        }
+    }
+
+    private default(position: number) {
+        if (position === 1) {
+          return "col-md-6 col-md-push-3";
+        }else if (position === 2) {
+          return "col-md-3 col-md-pull-6";
+        }else {
+          return "col-md-3";
+        }
+    }
+
+    private right_bar(position: number) {
+        if (position === 1) {
+          return "col-sm-12 col-md-8";
+        }else {
+          return "col-sm-12 col-md-4";
+        }
+    }
+
+}
@@ -34,17 +34,4 @@
 	.main-box-body {
 		padding: 0 20px 20px 20px;
 	}
-}
-
-ul.nav > li.toggler-container {
-	position: relative;
-	padding-top: 12px;
-}
-
-.noosfero-main-toolbar {
-	padding: 5px;
-	@include make-row();
-	margin-left: 0px;
-	margin-right: 0px;
-	background-color: #edecec;
-}
+}
 \ No newline at end of file
@@ -4,6 +4,12 @@
 	background-clip: padding-box; /* stops bg color from leaking outside the border: */
 }
+@mixin box-shadow($args...) {
+	-webkit-box-shadow: $args;
+	-moz-box-shadow: $args;
+	box-shadow: $args;
+}
+
 @mixin checkbox-mark($width, $height, $top, $left, $bg, $border, $content: "", $cursor: pointer, $position: absolute) {
 	width: $width;
 	height: $height;
@@ -48,3 +54,31 @@
 		outline-width: $width;
 	}
 }
+
+@mixin not-select() {
+  -webkit-touch-callout: none; /* iOS Safari */
+  -webkit-user-select: none;   /* Chrome/Safari/Opera */
+  -khtml-user-select: none;    /* Konqueror */
+  -moz-user-select: none;      /* Firefox */
+  -ms-user-select: none;       /* Internet Explorer/Edge */
+  user-select: none;           /* Non-prefixed version, currently
+                                  not supported by any browser */
+}
+
+@mixin keyframes($animation-name) {
+	@-webkit-keyframes #{$animation-name} {
+		@content;
+	}
+	@-moz-keyframes #{$animation-name} {
+		@content;
+	}
+	@-ms-keyframes #{$animation-name} {
+		@content;
+	}
+	@-o-keyframes #{$animation-name} {
+		@content;
+	}
+	@keyframes #{$animation-name} {
+		@content;
+	}
+}
@@ -291,11 +291,7 @@ $whbl-font-color: #16191c;
 		background-color: #fff;
 	}
-	noosfero-design-toggler .ats-switch .knob i {
-		color: #999999;
-	}
-
-	.ats-switch .knob {
+    .ats-switch .knob {
 		padding-right: 15px;
 	}
@@ -193,7 +193,6 @@ describe(&quot;BodyStateClasses Service&quot;, () =&gt; {
         service.start();
-        debugger;
         designModeService.setInDesignMode(true);
@@ -20,6 +20,7 @@ import {StatisticsBlockComponent} from &quot;../layout/blocks/statistics/statistics-b
 import {PersonTagsPluginInterestsBlockComponent} from "../layout/blocks/person-tags-plugin-interests/person-tags-plugin-interests-block.component";
 import {TagsBlockComponent} from "../layout/blocks/tags/tags-block.component";
 import {CustomContentComponent} from "../profile/custom-content/custom-content.component";
+import {RecentActivitiesPluginActivitiesBlockComponent} from "../layout/blocks/recent-activities-plugin-activities/recent-activities-plugin-activities-block.component";
 import {MembersBlockComponent} from "../layout/blocks/members/members-block.component";
 import {CommunitiesBlockComponent} from "../layout/blocks/communities/communities-block.component";
@@ -87,7 +88,7 @@ export class EnvironmentContent {
  * @name main.Main
  * @requires AuthService, Session, Notification, ArticleBlog, ArticleView, Boxes, Block, LinkListBlock,
  * MainBlock, RecentDocumentsBlock, Navbar, ProfileImageBlock, MembersBlock,
- * NoosferoTemplate, DateFormat, RawHTMLBlock, PersonTagsPluginInterestsBlock
+ * NoosferoTemplate, DateFormat, RawHTMLBlock, PersonTagsPluginInterestsBlock, RecentActivitiesPluginActivitiesBlock,
  * @description
  *  The Main controller for the Noosfero Angular Theme application.
  *
@@ -106,7 +107,7 @@ export class EnvironmentContent {
         MainBlockComponent, RecentDocumentsBlockComponent, Navbar, SidebarComponent, ProfileImageBlockComponent,
         MembersBlockComponent, NoosferoTemplate, DateFormat, RawHTMLBlockComponent, StatisticsBlockComponent,
         LoginBlockComponent, CustomContentComponent, PermissionDirective, SearchFormComponent, SearchComponent,
-        PersonTagsPluginInterestsBlockComponent, TagsBlockComponent, BlockComponent
+        PersonTagsPluginInterestsBlockComponent, TagsBlockComponent, RecentActivitiesPluginActivitiesBlockComponent, BlockComponent
     ].concat(plugins.mainComponents).concat(plugins.hotspots),
     providers: [AuthService, SessionService, NotificationService, BodyStateClassesService,
         "ngAnimate", "ngCookies", "ngStorage", "ngTouch",
@@ -115,7 +116,7 @@ export class EnvironmentContent {
         "angular-bind-html-compile", "angularMoment", "angular.filter", "akoenig.deckgrid",
         "angular-timeline", "duScroll", "oitozero.ngSweetAlert",
         "pascalprecht.translate", "tmh.dynamicLocale", "angularLoad",
-        "angular-click-outside", "toggle-switch", "ngTagCloud", "noosfero.init"]
+        "angular-click-outside", "ngTagCloud", "noosfero.init", "uiSwitch"]
 })
 @StateConfig([
     {
@@ -0,0 +1,21 @@
+import {Component, Inject, provide} from "ng-forward";
+import {ProfileService} from "../../lib/ng-noosfero-api/http/profile.service";
+
+@Component({
+    selector: "configbar",
+    templateUrl: "app/profile/configbar.html",
+    providers: [
+        provide('profileService', { useClass: ProfileService })
+    ]
+})
+@Inject(ProfileService)
+export class ConfigBarComponent {
+    profile: noosfero.Profile;
+    parentId: number;
+
+    constructor(profileService: ProfileService) {
+        profileService.getCurrentProfile().then((profile: noosfero.Profile) => {
+            this.profile = profile;
+        });
+    }
+}
@@ -0,0 +1,21 @@
+<div id="config-tool" ng-class="{'closed': !showConfig}">
+		<a id="config-tool-cog" ng-click="showConfig = !showConfig">
+			<i class="fa fa-cog" ng-class="{'anim-icon': showConfig}"></i>
+		</a>
+
+		<div id="config-tool-options">
+			<h4>{{ 'configbar.label' | translate }}</h4>
+      <div class="section-title">{{ 'configbar.section.layout' | translate }}</div>
+			<ul>
+        <li>
+          <label class="pull-left">
+            <i class="fa fa-th-large"></i>
+            <span class="item-label">{{ 'designMode.label' | translate }}</span>
+          </label>
+          <label class="pull-right">
+            <design-toggler></design-toggler>
+          </label>
+        </li>
+			</ul>
+		</div>
+</div>
@@ -0,0 +1,110 @@
+@import "../layout/scss/mixins";
+
+@include keyframes(rotating) {
+	from {
+		transform: rotate(0deg);
+	}
+	to {
+		transform: rotate(360deg);
+	}
+}
+
+/* CONFIG TOOLS */
+#config-tool {
+	@include transition(all 0.2s ease-in-out 0s);
+	@include box-shadow(0px 1px 4px rgba(0, 0, 0, 0.3));
+	position: fixed;
+	right: 0;
+	top: 120px;
+	min-width: 200px;
+	z-index: 1000;
+
+	#config-tool-cog {
+		@include border-radius($border-radius-base 0 0 $border-radius-base);
+		@include transition(all 0.1s ease-in-out 0s);
+		@include box-shadow(-3px 3px 3px -2px rgba(0, 0, 0, 0.1));
+		background: #fff;
+		cursor: pointer;
+		left: -50px;
+		padding: 10px;
+		position: absolute;
+		text-align: center;
+		width: 50px;
+		top: 0;
+
+		i {
+			font-size: 2.2em;
+		}
+
+		.anim-icon {
+			@include animation(rotating 0.7s ease-in-out 0s);
+		}
+	}
+
+	&.closed {
+		right: -280px;
+		box-shadow: none;
+
+		#config-tool-cog {
+			&:hover {
+				background-color: $primary-color;
+				color: #fff;
+			}
+		}
+	}
+
+	&.opened {
+		right: 0;
+	}
+
+	.section-title {
+	  margin: 30px 0 5px;
+		font: {
+			size: 15px;
+	  	weight: bold;
+		}
+
+	}
+
+	#config-tool-options {
+		@include box-shadow(-3px 3px 3px -2px rgba(0, 0, 0, 0.1));
+		background: #fff;
+		padding: 15px;
+
+		h4 {
+			margin: 0;
+			font-size: 1.3em;
+		}
+
+		ul {
+			list-style: none;
+			border-radius: 2px;
+		  padding: 0;
+
+		  background: {
+				clip: padding-box;
+		  	color: #f1f3f2;
+			}
+
+			li {
+			  padding: 10px;
+				width: 250px;
+			  min-height: 50px;
+				font: {
+					size: 13px;
+			  	weight: 300;
+				}
+
+				.checkbox {
+					margin: 0;
+				}
+
+				.pull-left {
+					margin-top: 8px;
+					font-weight: normal;
+				}
+
+			}
+		}
+	}
+}
@@ -1,21 +0,0 @@
-import {Component, Inject, provide} from "ng-forward";
-import {ProfileService} from "../../lib/ng-noosfero-api/http/profile.service";
-
-@Component({
-    selector: "profile-toolbar",
-    templateUrl: "app/profile/toolbar.html",
-    providers: [
-        provide('profileService', { useClass: ProfileService })
-    ]
-})
-@Inject(ProfileService)
-export class ProfileToolbarComponent {
-    profile: noosfero.Profile;
-    parentId: number;
-
-    constructor(profileService: ProfileService) {
-        profileService.getCurrentProfile().then((profile: noosfero.Profile) => {
-            this.profile = profile;
-        });
-    }
-}
@@ -10,7 +10,7 @@ import {ProfileService} from &quot;../../lib/ng-noosfero-api/http/profile.service&quot;;
 import {NotificationService} from "../shared/services/notification.service";
 import {MyProfileComponent} from "./myprofile.component";
 import {ProfileActionsComponent} from "./profile-actions.component";
-import {ProfileToolbarComponent} from "./profile-toolbar.component";
+import {ConfigBarComponent} from "./config-bar.component";
 /**
  * @ngdoc controller
  * @name profile.Profile
@@ -44,8 +44,8 @@ import {ProfileToolbarComponent} from &quot;./profile-toolbar.component&quot;;
                 controllerAs: "vm"
             },
             "toolbar@main": {
-                templateUrl: "app/profile/toolbar.html",
-                controller: ProfileToolbarComponent,
+                templateUrl: "app/profile/configbar.html",
+                controller: ConfigBarComponent,
                 controllerAs: "vm"
             }
         }
@@ -61,8 +61,8 @@ import {ProfileToolbarComponent} from &quot;./profile-toolbar.component&quot;;
                 controllerAs: "vm"
             },
             "toolbar@main": {
-                templateUrl: "app/profile/toolbar.html",
-                controller: ProfileToolbarComponent,
+                templateUrl: "app/profile/configbar.html",
+                controller: ConfigBarComponent,
                 controllerAs: "vm"
             }
         }
@@ -118,8 +118,8 @@ import {ProfileToolbarComponent} from &quot;./profile-toolbar.component&quot;;
                 controllerAs: "vm"
             },
             "toolbar@main": {
-                templateUrl: "app/profile/toolbar.html",
-                controller: ProfileToolbarComponent,
+                templateUrl: "app/profile/configbar.html",
+                controller: ConfigBarComponent,
                 controllerAs: "vm"
             }
         }
 <div class="profile-container">
-  <custom-content class="profile-header" [label]="'profile.custom_header.label'" [attribute]="'custom_header'" [profile]="vm.profile"></custom-content>
-  <div class="row">
-    <noosfero-boxes ng-if="vm.boxes" [boxes]="vm.boxes" [owner]="vm.profile"></noosfero-boxes>
-  </div>
+  <custom-content class="profile-header"
+                  [label]="'profile.custom_header.label'"
+                  [attribute]="'custom_header'"
+                  [profile]="vm.profile">
+  </custom-content>
+  <noosfero-boxes ng-if="vm.boxes"
+                  [layout]="vm.profile.layout_template"
+                  [boxes]="vm.boxes"
+                  [owner]="vm.profile" class="row">
+  </noosfero-boxes>
   <custom-content class="profile-footer" [label]="'profile.custom_footer.label'" [attribute]="'custom_footer'" [profile]="vm.profile"></custom-content>
 </div>
@@ -1,4 +0,0 @@
-<div class="noosfero-main-toolbar" permission="vm.profile.permissions" permission-action="allow_edit">
-    <noosfero-design-toggler class="pull-right"></noosfero-design-toggler>
-
-</div>
 \ No newline at end of file
@@ -6,6 +6,8 @@
   "navbar.logout": "Log Out",
   "navbar.login": "Login",
   "navbar.toggle_menu": "Toggle navigation",
+  "configbar.label": "Configuration",
+  "configbar.section.layout": "Layout",
   "language.all": "All languages",
   "language.en": "English",
   "language.pt": "Portuguese",
@@ -77,9 +79,7 @@
   "custom_content.title": "Edit content",
   "profile.custom_header.label": "Header",
   "profile.custom_footer.label": "Footer",
-  "designMode.label": "In Design",
-  "designMode.toggle.ON": "ON",
-  "designMode.toggle.OFF": "OFF",
+  "designMode.label": "Design mode",
   "search.results.summary": "{results, plural, one{result} other{# results}}",
   "search.results.query.label": "Search therm:",
   "search.label": "Search",
@@ -97,5 +97,8 @@
   "block.edition.display_user.all": "All users",
   "block.edition.display_user.logged": "Logged",
   "block.edition.display_user.not_logged": "Not logged",
-  "block.edition.language.label": "Show for:"
+  "block.edition.language.label": "Show for:",
+  "activities.event.description": "Event on",
+  "time.at": "at",
+  "date.on": "On"
 }
@@ -6,6 +6,8 @@
   "navbar.logout": "Sair",
   "navbar.login": "Login",
   "navbar.toggle_menu": "Abrir Menu",
+  "configbar.label": "Configurações",
+  "configbar.section.layout": "Visual",
   "language.all": "Todos os idiomas",
   "language.en": "Inglês",
   "language.pt": "Português",
@@ -29,7 +31,7 @@
   "navbar.content_viewer_actions.new_item": "Novo Item",
   "navbar.profile_actions.new_item": "Novo Item",
   "navbar.content_viewer_actions.new_post": "Novo Artigo",
-  "navbar.content_viewer_actions.new_discussion": "Nova Discussão",
+  "navbar.content_viewer_actions.new_discussion": "Nova Consulta",
   "navbar.profile_actions.new_discussion": "Nova Discussão",
   "notification.error.default.message": "Algo deu errado!",
   "notification.error.default.title": "Oops...",
@@ -77,9 +79,7 @@
   "custom_content.title": "Editar conteúdo",
   "profile.custom_header.label": "Cabeçalho",
   "profile.custom_footer.label": "Rodapé",
-  "designMode.label": "Modo de Edição",
-  "designMode.toggle.ON": "Ligado",
-  "designMode.toggle.OFF": "Desligado",
+  "designMode.label": "Alterar design",
   "search.results.summary": "{results, plural, one{# resultado} other{# resultados}}",
   "search.results.query.label": "Termo da busca:",
   "search.label": "Pesquisar",
@@ -97,5 +97,8 @@
   "block.edition.display_user.all": "Todos os usuários",
   "block.edition.display_user.logged": "Logados",
   "block.edition.display_user.not_logged": "Não logados",
-  "block.edition.language.label": "Exibir para:"
+  "block.edition.language.label": "Exibir para:",
+  "activities.event.description": "Evento em",
+  "time.at": "às",
+  "date.on": "Em"
 }
@@ -15,5 +15,14 @@ namespace noosfero {
          */
         id: number;
         settings: any
+
+        /**
+         * @ngdoc property
+         * @name layout_template
+         * @propertyOf noofero.Environment
+         * @returns {string} The Environment layout (e.g. default, rightbar)
+         */
+        layout_template: string;
     }
-}
 \ No newline at end of file
+}
+
@@ -80,5 +80,13 @@ namespace noosfero {
         custom_footer: string;
         permissions: string[];
+
+        /**
+         * @ngdoc property
+         * @name layout_template
+         * @propertyOf noofero.Profile
+         * @returns {string} The Profile layout template (e.g.: "rightbar", "default")
+         */
+        layout_template: string;
     }
 }
+$yellow-hover: #f5b025;
+$yellow-base: #f9c404;
+
 .skin-yellow {
   @extend %skin-base;
@@ -49,7 +52,7 @@
   .container-fluid .navbar-header .navbar-toggle {
     &:hover, &:focus {
-      background-color: #f5b025;
+      background-color: $yellow-hover;
     }
   }
@@ -61,4 +64,26 @@
 		}
   }
+  #config-tool {
+
+    #config-tool-cog {
+      color: $yellow-hover;
+    }
+
+    #config-tool-options {
+      h4 {
+        color: #2c3e50;
+        font-weight: bold;
+      }
+    }
+
+    &.closed {
+      #config-tool-cog {
+        &:hover {
+          background-color: $yellow-hover;
+        }
+      }
+    }
+  }
+
 }
1	-<toggle-switch
2	- html="true"
3	- ng-model="ctrl.inDesignMode"
4	- on-label="{{'designMode.toggle.ON' \| translate}}"
5	- off-label="{{'designMode.toggle.OFF' \| translate}}"
6	- class="switch-small"
7	- knob-label="{{ ctrl.icon + ('designMode.label' \| translate) }}">
8	-</toggle-switch>
9	\ No newline at end of file	1	\ No newline at end of file
		2	+<switch id="enabled" name="enabled" ng-model="ctrl.inDesignMode" on="ON" off="OFF" class="green"></switch>
@@ -0,0 +1,55 @@		@@ -0,0 +1,55 @@
	1	+$off-text: #949494;
	2	+$off-color: #EFEFEF;
	3	+$blue-color: #36B4F6;
	4	+$red-color: #DF3B3A;
	5	+
	6	+body.noosfero-design-on {
	7	+
	8	+ div.content-wrapper {
	9	+ opacity: 0.5;
	10	+ }
	11	+}
	12	+
	13	+.switch {
	14	+ @include not-select();
	15	+ background-color: $off-color;
	16	+
	17	+ &[on][off] {
	18	+ width: 60px;
	19	+ }
	20	+
	21	+ &:focus {
	22	+ outline: none;
	23	+ }
	24	+
	25	+ &.checked small {
	26	+ left: initial;
	27	+ right: 0px;
	28	+ }
	29	+
	30	+ &.blue.checked {
	31	+ background: $blue-color;
	32	+ border-color: $blue-color;
	33	+ }
	34	+
	35	+ &.red.checked {
	36	+ background: $red-color;
	37	+ border-color: $red-color;
	38	+ }
	39	+
	40	+ %switch-label {
	41	+ font-weight: bold;
	42	+ }
	43	+
	44	+ .on {
	45	+ @extend %switch-label;
	46	+ }
	47	+
	48	+ .off {
	49	+ @extend %switch-label;
	50	+ right: 2px;
	51	+ top: 25%;
	52	+ color: $off-text;
	53	+ text-align: center;
	54	+ }
	55	+}
	@@ -0,0 +1 @@		@@ -0,0 +1 @@
		1	+{{'joined the community' \| translate}}
	@@ -0,0 +1 @@		@@ -0,0 +1 @@
		1	+{{'published an article:' \| translate}} <a ng-href="{{ctrl.urlFor(activity.params.url)}}">{{activity.params.name}}</a>
@@ -0,0 +1,3 @@		@@ -0,0 +1,3 @@
	1	+<img ng-src="{{activity.params.first_image}}" ng-attr-alt="{{activity.params.name}}" class="event-image" />
	2	+<p class="event-description"><b>{{activity.params.name}}</b><br />{{activity.params.lead \| stripTags}}</p>
	3	+<br style="clear: both;" />
	@@ -0,0 +1 @@		@@ -0,0 +1 @@
		1	+{{'favorited an enterprise:' \| translate}} <a ng-href="{{ctrl.urlFor(activity.params.enterprise_url)}}">{{activity.params.enterprise_name}}</a>
@@ -0,0 +1,6 @@		@@ -0,0 +1,6 @@
	1	+{{'has made new friends:' \| translate}}<br />
	2	+<span ng-repeat="name in activity.params.friend_name">
	3	+ <a ng-href="{{ctrl.urlFor(activity.params.friend_url[$index])}}" ng-attr-title="{{name}}">
	4	+ <img ng-src="{{activity.params.friend_profile_custom_icon[$index]}}" ng-attr-alt="{{name}}" />
	5	+ </a>
	6	+</span>
@@ -0,0 +1,6 @@		@@ -0,0 +1,6 @@
	1	+{{'uploaded images:' \| translate}}<br />
	2	+<span ng-repeat="path in activity.params.thumbnail_path">
	3	+ <a class="upimg" ng-href="{{ctrl.urlFor(activity.params.view_url[$index])}}" ng-style="{'background-image':'url({{path}})'}">
	4	+ <span>{{path}}</span>
	5	+ </a>
	6	+</span>
@@ -0,0 +1,2 @@		@@ -0,0 +1,2 @@
	1	+/* Module Index Entry - generated using the script npm run generate-index */
	2	+export * from "./recent-activities-plugin-activities-block.component";
@@ -0,0 +1,56 @@		@@ -0,0 +1,56 @@
	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 {RecentActivitiesPluginActivitiesBlockComponent} from './recent-activities-plugin-activities-block.component';
	5	+import * as helpers from "./../../../../spec/helpers";
	6	+
	7	+const htmlTemplate: string = '<noosfero-recent-activities-plugin-activities-block [block]="ctrl.block" [owner]="ctrl.owner"></noosfero-recent-activities-plugin-activities-block>';
	8	+
	9	+const tcb = new TestComponentBuilder();
	10	+
	11	+describe("Components", () => {
	12	+ describe("Recent Activities Block Component", () => {
	13	+
	14	+ let settingsObj = {};
	15	+ let person = <noosfero.Person>{ name: "Person" };
	16	+ let mockedService = {
	17	+ getApiContent: (block: noosfero.Block): any => {
	18	+ return Promise.resolve({ activities: [{ verb: 'new_friendship' }], headers: (name: string) => { return name; } });
	19	+ }
	20	+ };
	21	+ beforeEach(angular.mock.module("templates"));
	22	+
	23	+ let state = jasmine.createSpyObj("state", ["go"]);
	24	+
	25	+
	26	+ function getProviders() {
	27	+ return [
	28	+ new Provider('$state', { useValue: state }),
	29	+ new Provider('BlockService', {
	30	+ useValue: mockedService
	31	+ })
	32	+ ].concat(provideFilters("truncateFilter", "stripTagsFilter"));
	33	+ }
	34	+ let componentClass: any = null;
	35	+
	36	+ function getComponent() {
	37	+ @Component({ selector: 'test-container-component', template: htmlTemplate, directives: [RecentActivitiesPluginActivitiesBlockComponent], providers: getProviders() })
	38	+ class BlockContainerComponent {
	39	+ block = { type: 'Block', settings: settingsObj };
	40	+ owner = person;
	41	+ constructor() {
	42	+ }
	43	+ }
	44	+ return BlockContainerComponent;
	45	+ }
	46	+
	47	+ it("get activities from block service", done => {
	48	+ tcb.createAsync(getComponent()).then(fixture => {
	49	+ let RecentActivitiesPluginActivitiesBlock: RecentActivitiesPluginActivitiesBlockComponent = fixture.debugElement.componentViewChildren[0].componentInstance;
	50	+ expect(RecentActivitiesPluginActivitiesBlock.activities[0]['verb']).toEqual('new_friendship');
	51	+ done();
	52	+ });
	53	+ });
	54	+
	55	+ });
	56	+});