Merge branch 'master' into staging

Victor Costa
2 parents 8382ef57 9d2ce382
Showing 86 changed files with 1323 additions and 323 deletions Show diff stats
README.md
bower.json
gulp/build.js
gulp/conf.js
gulp/inject.js
gulp/scripts.js
package.json
src/app/admin/layout-edit/designMode.service.spec.ts
src/app/admin/layout-edit/designMode.service.ts
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/article/article-default-view-component.spec.ts
src/app/article/article-default-view.component.ts
src/app/article/article.html
src/app/article/comment/comments.component.spec.ts
src/app/article/comment/comments.component.ts
src/app/article/content-viewer/content-viewer.component.ts
src/app/article/content-viewer/navbar-actions.html
src/app/article/types/blog/blog.component.ts
@@ -50,3 +50,31 @@ See some important folders bellow:
 1. Create an app folder inside custom-theme and add your custom scss files
 1. Put the templates that you want to override in the same structure from the main application source, e.g.:
 `src/app/profile/profile.html` will be overriden by `themes/custom-theme/app/profile/profile.html`
+
+## Change skin
+
+- Create a any scss file into your theme folder structure
+- Extend your skin css class from `%skin-base` scss placeholder selector. Something like this:
+
+```sass
+.skin-custom {
+  @extend %skin-base
+}
+```
+- Configure application to use the new theme, e.g.:
+`npm config set angular-theme:skin custom-skin`
+
+- Start the application with `npm start` scripts ou make a build
+
+## Development environment
+
+## Known Issues
+
+### Message Translation: angular-i18n
+
+ - Plural  Interpolation only working when current language is En (English)
+
+ `Plural Function not found for locale`
+
+ For some reason the messageformat installed on bower_component directory was an older version. Removing the bower_components directory
+and runing `bower install` solved the problem
@@ -35,9 +35,10 @@
     "angular-i18n": "^1.5.0",
     "angular-load": "^0.4.1",
     "angular-translate-interpolation-messageformat": "^2.10.0",
-  	"angular-bind-html-compile": "^1.2.1",
-	  "angular-click-outside": "^2.7.1",
-	  "ng-ckeditor": "^0.2.1"
+    "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"
   },
   "devDependencies": {
     "angular-mocks": "~1.5.0"
@@ -46,9 +47,7 @@
     "ng-ckeditor": {
       "main": [
         "ng-ckeditor.js",
-        "libs/ckeditor/lang",
-        "libs/ckeditor/ckeditor.js",
-        "libs/ckeditor/config.js"
+        "libs/ckeditor/ckeditor.js"
       ]
     },
     "bootstrap-sass": {
@@ -30,7 +30,8 @@ gulp.task(&#39;partials&#39;, function () {
         quotes: true
       }))
       .pipe($.angularTemplatecache('templateCacheHtml-'+partialPath+'.js', {
-        module: 'noosferoApp',
+        module: 'noosfero.templates.' + partialPath,
+        standalone: true,
         root: partialPath
       }))
       .pipe(gulp.dest(conf.paths.tmp + '/partials/')));
@@ -81,7 +82,6 @@ gulp.task(&#39;html&#39;, [&#39;inject&#39;, &#39;partials&#39;], function () {
     .pipe($.revReplace({prefix: noosferoThemePrefix}))
     .pipe(htmlFilter)
     .pipe($.replace('/bower_components/ng-ckeditor/libs/ckeditor/', noosferoThemePrefix + 'ng-ckeditor/libs/ckeditor/'))
-    .pipe($.replace('/bower_components/ng-ckeditor/ng-ckeditor.min.js', noosferoThemePrefix + 'ng-ckeditor/ng-ckeditor.min.js'))
     .pipe($.minifyHtml({
       empty: true,
       spare: true,
@@ -103,7 +103,7 @@ gulp.task(&#39;fonts&#39;, function () {
 });
 gulp.task('ckeditor', function () {
-  conf.wiredep.exclude.push(/ckeditor/); // exclude ckeditor from build to improve performance
+  conf.wiredep.exclude.push(/bower_components\/ng-ckeditor\/libs\/ckeditor/); // exclude ckeditor from build to improve performance
   return gulp.src(['bower_components/ng-ckeditor/**/*']).pipe(gulp.dest(path.join(conf.paths.dist, '/ng-ckeditor')));
 });
@@ -27,6 +27,10 @@ exports.configTheme = function(theme) {
   exports.paths.theme = theme || "angular-default";
   exports.paths.allSources = [exports.paths.src, path.join(exports.paths.themes, exports.paths.theme)];
   exports.paths.dist = path.join("dist", exports.paths.theme);
+
+  if(argv.skin) {
+    exports.paths.skin = argv.skin;
+  }
 }
 exports.configTheme(argv.theme);
@@ -3,6 +3,8 @@
 var path = require('path');
 var gulp = require('gulp');
 var conf = require('./conf');
+var map  = require('map-stream');
+var transform = require('vinyl-transform');
 var $ = require('gulp-load-plugins')();
@@ -40,3 +42,34 @@ gulp.task(&#39;inject&#39;, [&#39;scripts&#39;, &#39;styles&#39;], function () {
     .pipe(wiredep(_.extend({}, conf.wiredep)))
     .pipe(gulp.dest(path.join(conf.paths.tmp, '/serve')));
 });
+
+/**
+* Replace the default theme skin to a npm config
+*
+* Uses "vinyl-transform" + "map-stream" to open the
+* js file and rewrite the source file into the same
+* destination
+*
+* @see https://www.npmjs.com/package/vinyl-transform
+* @see https://www.npmjs.com/package/map-stream
+*/
+gulp.task('inject-skin', function () {
+
+  if(conf.paths.skin) {
+
+    $.util.log('Configured theme skin:', conf.paths.skin);
+
+    var replaceSkin = transform(function(filename) {
+      return map(function(file, next) {
+        var contents = file.toString();
+        contents = contents.replace('skin-whbl', conf.paths.skin);
+        return next(null, contents);
+      });
+    });
+
+    gulp.src(path.join(conf.paths.src,'./noosfero.js'))
+        .pipe(replaceSkin)
+        .pipe(gulp.dest(conf.paths.src));
+  }
+
+});
@@ -9,7 +9,7 @@ var browserSync = require(&#39;browser-sync&#39;);
 var $ = require('gulp-load-plugins')();
-gulp.task('scripts-reload', function() {
+gulp.task('scripts-reload', ['inject-skin'], function() {
   return buildScripts()
     .pipe(browserSync.stream());
 });
@@ -8,10 +8,11 @@
     "ng-forward": "0.0.1-alpha.12"
   },
   "config": {
-    "theme": "angular-default"
+    "theme": "angular-default",
+    "skin": "skin-whbl"
   },
   "scripts": {
-    "build": "webpack; gulp clean && gulp --theme=$npm_package_config_theme build",
+    "build": "webpack; gulp clean && gulp --theme=$npm_package_config_theme --skin=$npm_package_config_skin build",
     "build-all": "gulp clean && for d in ./themes/* ; do (gulp --theme=`basename $d` build); done",
     "webpack": "webpack",
     "karma": "concurrently \"webpack -w\" \"karma start\"",
@@ -23,7 +24,7 @@
     "test": "webpack -w --test",
     "jenkins": "webpack && karma start --single-run",
     "postinstall": "bower install; typings install; cd dev-scripts; typings install; cd ../; npm run fix-jqlite",
-    "start": "concurrently \"webpack -w\" \"gulp --theme=$npm_package_config_theme serve\"",
+    "start": "concurrently \"webpack -w\" \"gulp --theme=$npm_package_config_theme --skin=$npm_package_config_skin serve\"",
     "generate-indexes": "ts-node --project ./dev-scripts ./dev-scripts/generate-index-modules.ts",
     "fix-jqlite": "ts-node --project ./dev-scripts dev-scripts/fix-jqlite.ts"
   },
@@ -46,8 +47,8 @@
     "gulp-eslint": "~1.0.0",
     "gulp-filter": "~3.0.1",
     "gulp-flatten": "~0.2.0",
-    "gulp-insert": "^0.5.0",
     "gulp-inject": "~3.0.0",
+    "gulp-insert": "^0.5.0",
     "gulp-load-plugins": "~0.10.0",
     "gulp-merge-json": "^0.4.0",
     "gulp-minify-css": "~1.2.1",
@@ -81,6 +82,7 @@
     "karma-webpack": "^1.7.0",
     "lodash": "~3.10.1",
     "main-bower-files": "~2.9.0",
+    "map-stream": "0.0.6",
     "merge-stream": "^1.0.0",
     "on-build-webpack": "^0.1.0",
     "phantomjs": "~1.9.18",
@@ -96,6 +98,7 @@
     "typescript": "^1.8.10",
     "typings": "^0.6.8",
     "uglify-save-license": "~0.4.1",
+    "vinyl-transform": "^1.0.0",
     "webpack": "^1.12.14",
     "wiredep": "~2.2.2",
     "wrench": "~1.5.8",
@@ -0,0 +1,31 @@
+import {DesignModeService} from './designMode.service';
+
+describe('DesignMode Service', () => {
+    let service: DesignModeService;
+
+    beforeEach(() => {
+        service = new DesignModeService();
+    });
+
+    it('has the designModeOn equals false as default', () => {
+        expect(service.isInDesignMode()).toBeFalsy();
+    });
+
+    it('allows set the designMode value', () => {
+        spyOn(service.onToggle, 'next').and.stub();
+        service.setInDesignMode(true);
+        expect(service.isInDesignMode).toBeTruthy();
+    });
+
+    it('emits the onToggle event when changing the designModeOn property', () => {
+        spyOn(service.onToggle, 'next').and.stub();
+        service.setInDesignMode(true);
+        expect(service.onToggle.next).toHaveBeenCalled();
+    });
+
+    it('does not emit onToggle event when there is no change on designModeOn property', () => {
+        spyOn(service.onToggle, 'next').and.stub();
+        service.setInDesignMode(false);
+        expect(service.onToggle.next).not.toHaveBeenCalled();
+    });
+});
 \ No newline at end of file
@@ -0,0 +1,23 @@
+import {Component, Injectable, Output, EventEmitter} from 'ng-forward';
+import {BodyStateClassesService} from '../../layout/services/body-state-classes.service';
+
+@Injectable()
+export class DesignModeService {
+    @Output() onToggle: EventEmitter<boolean> = new EventEmitter<boolean>();
+
+    private designModeOn: boolean = false;
+
+    isInDesignMode(): boolean {
+        return this.designModeOn;
+    }
+
+    setInDesignMode(value: boolean) {
+        if (this.designModeOn !== value) {
+            this.designModeOn = value;
+            this.onToggle.next(this.designModeOn);
+        }
+    }
+
+    constructor() {
+    }
+}
 \ No newline at end of file
@@ -0,0 +1,59 @@
+import {ComponentTestHelper, createClass} from '../../../spec/component-test-helper';
+import * as helpers from '../../../spec/helpers';
+import {DesignModeTogglerComponent} from './designModeToggler.component';
+import {DesignModeService} from './designMode.service';
+
+describe('DesignModeToggler Component', () => {
+    const htmlTemplate: string = '<noosfero-design-toggler></noosfero-design-toggler>';
+
+    let helper: ComponentTestHelper<DesignModeTogglerComponent>;
+    beforeEach(() => {
+        angular.mock.module('templates');
+        angular.mock.module('ngSanitize');
+        angular.mock.module('toggle-switch');
+    });
+
+    let designModeService: DesignModeService;
+    beforeEach((done) => {
+        designModeService = new DesignModeService();
+        let cls = createClass({
+            template: htmlTemplate,
+            directives: [DesignModeTogglerComponent],
+            providers: [
+                helpers.createProviderToValue('DesignModeService', designModeService)
+            ]
+        });
+        helper = new ComponentTestHelper<DesignModeTogglerComponent>(cls, done);
+    });
+
+    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();
+        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();
+    });
+
+    it('emits event with value "true" when changing inDesignMode to On', (done) => {
+        designModeService.onToggle.subscribe((designModeOn: boolean) => {
+            expect(designModeOn).toBeTruthy();
+            done();
+        });
+        helper.component.inDesignMode = true;
+        helper.detectChanges();
+    });
+
+    it('emits events with value "false" when changing inDesignMode to Off', (done) => {
+        helper.component.inDesignMode = true;
+        helper.detectChanges();
+
+        designModeService.onToggle.subscribe((designModeOn: boolean) => {
+            expect(designModeOn).toBeFalsy();
+            done();
+        });
+
+        helper.component.inDesignMode = false;
+        helper.detectChanges();
+    });
+});
 \ No newline at end of file
@@ -0,0 +1,24 @@
+import {Component, Inject} from 'ng-forward';
+import {DesignModeService} from './designMode.service';
+@Component({
+    selector: 'noosfero-design-toggler',
+    templateUrl: 'app/admin/layout-edit/designModeToggler.html'
+})
+@Inject(DesignModeService)
+export class DesignModeTogglerComponent {
+
+    icon: string = "&nbsp;<i class='glyphicon glyphicon-wrench'></i>&nbsp;";
+
+    constructor(private designModeService: DesignModeService) {
+    }
+
+    private _inDesignMode: boolean = false;
+
+    get inDesignMode(): boolean {
+        return this.designModeService.isInDesignMode();
+    };
+
+    set inDesignMode(value: boolean) {
+        this.designModeService.setInDesignMode(value);
+    };
+}
 \ No newline at end of file
@@ -0,0 +1,8 @@
+<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
@@ -65,16 +65,36 @@ describe(&quot;Components&quot;, () =&gt; {
             expect(state.transitionTo).toHaveBeenCalled();
         });
+        it("hide button to delete article when user doesn't have permission", () => {
+            expect(helper.find(".article-toolbar .delete-article").attr('style')).toEqual("display: none; ");
+        });
+
+        it("hide button to edit article when user doesn't have permission", () => {
+            expect(helper.find(".article-toolbar .edit-article").attr('style')).toEqual("display: none; ");
+        });
+
+        it("show button to edit article when user has permission", () => {
+            (<any>helper.component['article'])['permissions'] = ['allow_edit'];
+            helper.detectChanges();
+            expect(helper.find(".article-toolbar .edit-article").attr('style')).toEqual('');
+        });
+
+        it("show button to delete article when user has permission", () => {
+            (<any>helper.component['article'])['permissions'] = ['allow_delete'];
+            helper.detectChanges();
+            expect(helper.find(".article-toolbar .delete-article").attr('style')).toEqual('');
+        });
+
         /**
          * Execute the delete method on the target component
          */
         function doDeleteArticle() {
             // Create a mock for the notification service confirmation
-            spyOn(helper.component.notificationService, 'confirmation').and.callFake(function (params: Function) {
+            spyOn(helper.component.notificationService, 'confirmation').and.callFake(function(params: Function) {
             });
             // Create a mock for the ArticleService removeArticle method
-            spyOn(helper.component.articleService, 'remove').and.callFake(function (param: noosfero.Article) {
+            spyOn(helper.component.articleService, 'remove').and.callFake(function(param: noosfero.Article) {
                 return {
                     catch: () => { }
@@ -6,6 +6,7 @@ import {ArticleToolbarHotspotComponent} from &quot;../hotspot/article-toolbar-hotspot
 import {ArticleContentHotspotComponent} from "../hotspot/article-content-hotspot.component";
 import {ArticleService} from "./../../lib/ng-noosfero-api/http/article.service";
 import { NotificationService } from "./../shared/services/notification.service";
+import {PermissionDirective} from '../shared/components/permission/permission.directive';
 /**
  * @ngdoc controller
@@ -16,7 +17,8 @@ import { NotificationService } from &quot;./../shared/services/notification.service&quot;;
  */
 @Component({
     selector: 'noosfero-default-article',
-    templateUrl: 'app/article/article.html'
+    templateUrl: 'app/article/article.html',
+    directives: [PermissionDirective]
 })
 @Inject("$state", ArticleService, NotificationService)
 export class ArticleDefaultViewComponent {
@@ -4,13 +4,15 @@
   </div>
   <div class="sub-header clearfix">
-    <a href="#" class="btn btn-default btn-xs" ui-sref="main.cmsEdit({profile: ctrl.profile.identifier, id: ctrl.article.id})">
-      <i class="fa fa-pencil-square-o fa-fw fa-lg"></i> {{"article.actions.edit" | translate}}
-    </a>
-    <a href="#" class="btn btn-default btn-xs" ng-click="ctrl.delete()">
-      <i class="fa fa-trash-o fa-fw fa-lg" ng-click="ctrl.delete()"></i> {{"article.actions.delete" | translate}}
-    </a>    
-    <noosfero-hotspot-article-toolbar [article]="ctrl.article"></noosfero-hotspot-article-toolbar>
+    <div class="article-toolbar">
+      <a href="#" permission="ctrl.article.permissions" permission-action="allow_edit" class="btn btn-default btn-xs edit-article" ui-sref="main.cmsEdit({profile: ctrl.profile.identifier, id: ctrl.article.id})">
+        <i class="fa fa-pencil-square-o fa-fw fa-lg"></i> {{"article.actions.edit" | translate}}
+      </a>
+      <a href="#" permission="ctrl.article.permissions" permission-action="allow_delete" class="btn btn-default btn-xs delete-article" ng-click="ctrl.delete()">
+        <i class="fa fa-trash-o fa-fw fa-lg" ng-click="ctrl.delete()"></i> {{"article.actions.delete" | translate}}
+      </a>
+      <noosfero-hotspot-article-toolbar [article]="ctrl.article"></noosfero-hotspot-article-toolbar>
+    </div>
     <div class="page-info pull-right small text-muted">
       <span class="time">
         <i class="fa fa-clock-o"></i> <span am-time-ago="ctrl.article.created_at | dateFormat"></span>
@@ -19,7 +19,6 @@ describe(&quot;Components&quot;, () =&gt; {
         let properties = { article: { id: 1 }, parent: <any>null };
         function createComponent() {
-            // postCommentEventService = jasmine.createSpyObj("postCommentEventService", ["subscribe"]);
             let providers = [
                 helpers.createProviderToValue('CommentService', commentService),
                 helpers.createProviderToValue('NotificationService', helpers.mocks.notificationService),
@@ -9,7 +9,7 @@ import { CommentComponent } from &quot;./comment.component&quot;;
     directives: [PostCommentComponent, CommentComponent],
     outputs: ['commentAdded']
 })
-@Inject(CommentService, "$element")
+@Inject(CommentService, "$scope")
 export class CommentsComponent {
     comments: noosfero.CommentViewModel[] = [];
@@ -32,9 +32,22 @@ export class CommentsComponent {
         }
     }
-    commentAdded(comment: noosfero.Comment): void {
+    commentAdded(comment: noosfero.CommentViewModel): void {
+        comment.__show_reply = false;
+        if (comment.reply_of) {
+            this.comments.forEach((commentOnList) => {
+                if (commentOnList.id === comment.reply_of.id) {
+                    if (commentOnList.replies) {
+                        commentOnList.replies.push(comment);
+                    } else {
+                        commentOnList.replies = [comment];
+                    }
+                }
+            });
+        }
         this.comments.push(comment);
         this.resetShowReply();
+        this.$scope.$apply();
     }
     commentRemoved(comment: noosfero.Comment): void {
@@ -51,6 +64,7 @@ export class CommentsComponent {
         if (this.parent) {
             this.parent.__show_reply = false;
         }
+
     }
     loadComments() {
@@ -14,7 +14,7 @@ import {ProfileService} from &quot;../../../lib/ng-noosfero-api/http/profile.service&quot;
         provide('profileService', { useClass: ProfileService })
     ]
 })
-@Inject(ArticleService, ProfileService, "$log", "$stateParams")
+@Inject(ArticleService, ProfileService, "$stateParams")
 export class ContentViewerComponent {
     @Input()
@@ -23,7 +23,10 @@ export class ContentViewerComponent {
     @Input()
     profile: noosfero.Profile = null;
-    constructor(private articleService: ArticleService, private profileService: ProfileService, private $log: ng.ILogService, private $stateParams: angular.ui.IStateParamsService) {
+    constructor(
+        private articleService: ArticleService,
+        private profileService: ProfileService,
+        private $stateParams: angular.ui.IStateParamsService) {
         this.activate();
     }
-<ul class="nav navbar-nav">
+<ul class="nav navbar-nav" permission="vm.profile.permissions" permission-action="allow_edit">
     <li class="dropdown profile-menu" uib-dropdown>
         <a class="btn dropdown-toggle" data-toggle="dropdown" uib-dropdown-toggle>
             {{"navbar.content_viewer_actions.new_item" | translate}}
             <i class="fa fa-caret-down"></i>
         </a>
         <ul class="dropdown-menu" uib-dropdown-menu ng-show="vm.profile">
-            <li ng-show="vm.parentId">
+            <li>
                 <a href="#" ui-sref="main.cms({profile: vm.profile.identifier, parent_id: vm.parentId})">
                     <i class="fa fa-file fa-fw fa-lg"></i> {{"navbar.content_viewer_actions.new_post" | translate}}
                 </a>
@@ -17,6 +17,4 @@
             </li>
         </ul>
     </li>
-   
 </ul>
-
@@ -31,7 +31,7 @@ export class ArticleBlogComponent {
     loadPage() {
         let filters = {
-            content_type: "TinyMceArticle",
+            content_type: "TextArticle",
             per_page: this.perPage,
             page: this.currentPage
         };
@@ -17,8 +17,8 @@
     </div>
   </div>
-  <pagination ng-model="ctrl.currentPage" total-items="ctrl.totalPosts" class="pagination-sm center-block"
+  <uib-pagination ng-model="ctrl.currentPage" total-items="ctrl.totalPosts" class="pagination-sm center-block"
     boundary-links="true" items-per-page="ctrl.perPage" ng-change="ctrl.loadPage()"
     first-text="«" last-text="»" previous-text="‹" next-text="›">
-  </pagination>
+  </uib-pagination>
 </div>
@@ -22,7 +22,7 @@ export class EnvironmentHomeComponent {
     environment: noosfero.Environment;
     constructor(private environmentService: EnvironmentService, private $sce: ng.ISCEService) {
-        environmentService.getByIdentifier("default").then((result: noosfero.Environment) => {
+        environmentService.get().then((result: noosfero.Environment) => {
             this.environment = result;
         });
     }
@@ -9,6 +9,7 @@ describe(&quot;Components&quot;, () =&gt; {
         let environmentServiceMock: any;
         let notificationMock: any;
         let $state: any;
+        let defaultEnvironment = <any> {id: 1, name: 'Noosfero' };
         beforeEach(inject((_$rootScope_: ng.IRootScopeService, _$q_: ng.IQService) => {
             $rootScope = _$rootScope_;
@@ -17,44 +18,40 @@ describe(&quot;Components&quot;, () =&gt; {
         beforeEach(() => {
             $state = jasmine.createSpyObj("$state", ["transitionTo"]);
-            environmentServiceMock = jasmine.createSpyObj("environmentServiceMock", ["getByIdentifier", "getBoxes"]);
+            environmentServiceMock = jasmine.createSpyObj("environmentServiceMock", ["get", "getBoxes"]);
             notificationMock = jasmine.createSpyObj("notificationMock", ["error"]);
-            let environmentResponse = $q.defer();
-            environmentResponse.resolve({ id: 1 });
             let getBoxesResponse = $q.defer();
             getBoxesResponse.resolve({ data: { boxes: [{ id: 2 }] } });
-            environmentServiceMock.getByIdentifier = jasmine.createSpy('getByIdentifier').and.returnValue(environmentResponse.promise);
             environmentServiceMock.getBoxes = jasmine.createSpy("getBoxes").and.returnValue(getBoxesResponse.promise);
         });
         it("get the default environment", done => {
-            let component: EnvironmentComponent = new EnvironmentComponent(environmentServiceMock, $state, notificationMock);
+            let component: EnvironmentComponent = new EnvironmentComponent(environmentServiceMock, $state, notificationMock, defaultEnvironment);
             $rootScope.$apply();
-            expect(component.environment).toEqual({ id: 1 });
+            expect(component.environment).toEqual({ id: 1, name: 'Noosfero' });
             done();
         });
         it("get the environment boxes", done => {
-            let component: EnvironmentComponent = new EnvironmentComponent(environmentServiceMock, $state, notificationMock);
+            let component: EnvironmentComponent = new EnvironmentComponent(environmentServiceMock, $state, notificationMock, defaultEnvironment);
             $rootScope.$apply();
             expect(environmentServiceMock.getBoxes).toHaveBeenCalled();
             expect(component.boxes).toEqual({ data: { boxes: [{ id: 2 }] } });
             done();
         });
-        it("display notification error when the environment wasn't found", done => {
+        it("display notification error when does not find boxes to the environment", done => {
             let environmentResponse = $q.defer();
             environmentResponse.reject();
-            environmentServiceMock.getByIdentifier = jasmine.createSpy('getByIdentifier').and.returnValue(environmentResponse.promise);
+            environmentServiceMock.getBoxes = jasmine.createSpy('getBoxes').and.returnValue(environmentResponse.promise);
-            let component: EnvironmentComponent = new EnvironmentComponent(environmentServiceMock, $state, notificationMock);
+            let component: EnvironmentComponent = new EnvironmentComponent(environmentServiceMock, $state, notificationMock, defaultEnvironment);
             $rootScope.$apply();
             expect(notificationMock.error).toHaveBeenCalled();
-            expect(component.environment).toBeUndefined();
             done();
         });
@@ -2,6 +2,7 @@ import {StateConfig, Component, Inject, provide} from &#39;ng-forward&#39;;
 import {EnvironmentService} from "../../lib/ng-noosfero-api/http/environment.service";
 import {NotificationService} from "../shared/services/notification.service";
 import {EnvironmentHomeComponent} from "./environment-home.component";
+import {SearchComponent} from "../search/search.component";
 /**
  * @ngdoc controller
@@ -29,23 +30,37 @@ import {EnvironmentHomeComponent} from &quot;./environment-home.component&quot;;
                 controllerAs: "vm"
             }
         }
+    },
+    {
+        url: '^/search?query',
+        component: SearchComponent,
+        name: 'main.environment.search',
+        views: {
+            "mainBlockContent": {
+                templateUrl: "app/search/search.html",
+                controller: SearchComponent,
+                controllerAs: "ctrl"
+            }
+        }
     }
 ])
-@Inject(EnvironmentService, "$state")
+@Inject(EnvironmentService, "$state", "currentEnvironment")
 export class EnvironmentComponent {
     boxes: noosfero.Box[];
     environment: noosfero.Environment;
-    constructor(environmentService: EnvironmentService, $state: ng.ui.IStateService, notificationService: NotificationService) {
-        let boxesPromisse = environmentService.getByIdentifier("default").then((environment: noosfero.Environment) => {
-            this.environment = environment;
-            return environmentService.getBoxes(this.environment.id);
-        }).then((boxes: noosfero.Box[]) => {
-            this.boxes = boxes;
-        }).catch(() => {
-            $state.transitionTo('main');
-            notificationService.error({ message: "notification.environment.not_found" });
-        });
+    constructor(private environmentService: EnvironmentService, private $state: ng.ui.IStateService, private notificationService: NotificationService, currentEnvironment: noosfero.Environment) {
+        this.environment = currentEnvironment;
+
+        this.environmentService.getBoxes(this.environment.id)
+            .then((boxes: noosfero.Box[]) => {
+                this.boxes = boxes;
+            }).catch(() => {
+                this.$state.transitionTo('main');
+                this.notificationService.error({ message: "notification.environment.not_found" });
+            });
+
     }
+
 }
@@ -1,97 +0,0 @@
-
-/**
- * @ngdoc service
- * @name NoosferoApp
- * @description
- *  The main NoosferoApp module class. It provide helper static methods used by
- * the module to initialize the application.
- */
-export class NoosferoApp {
-
-    /**
-     * @ngdoc property
-     * @name appName
-     * @propertyOf NoosferoApp
-     * @returns {string} the name of this application ('noosferoApp')
-     */
-    static appName: string = "noosferoApp";
-
-    /**
-     * @ngdoc property
-     * @name angularModule
-     * @propertyOf NoosferoApp
-     * @returns {any} all the modules installed for this application
-     */
-    static angularModule: any;
-
-    /**
-     * @ngdoc method
-     * @name addConfig
-     * @methodOf NoosferoApp
-     * @param {Function} configFunc the configuration function to add  
-     * @descprition adds a configuration function to 
-     *  the {@link NoosferoApp#angularModule}
-     */
-    static addConfig(configFunc: Function) {
-        NoosferoApp.angularModule.config(configFunc);
-    }
-
-    /**
-     * @ngdoc method
-     * @name addConstants
-     * @methodOf NoosferoApp
-     * @param {string} constantName the constant name
-     * @param {any} value the constant value
-     * @description adds a constant to the {@link NoosferoApp#angularModule}
-     */
-    static addConstants(constantName: string, value: any) {
-        NoosferoApp.angularModule.constant(constantName, value);
-    }
-
-    /**
-     * @ngdoc method
-     * @name addService
-     * @methodOf NoosferoApp
-     * @param {string} serviceName the service name
-     * @param {any} value the service value
-     * @description adds a service to the {@link NoosferoApp#angularModule}
-     */
-    static addService(serviceName: string, value: any) {
-        NoosferoApp.angularModule.service(serviceName, value);
-    }
-
-    /**
-     * @ngdoc method
-     * @name addFactory
-     * @methodOf NoosferoApp
-     * @param {string} factoryName the factory name
-     * @param {any} value the factory value
-     * @description adds a factory to the {@link NoosferoApp#angularModule}
-     */
-    static addFactory(factoryName: string, value: any) {
-        NoosferoApp.angularModule.factory(factoryName, value);
-    }
-
-    /**
-     * @ngdoc method
-     * @name addController
-     * @methodOf NoosferoApp
-     * @param {string} controllerName the controller name
-     * @param {any} value the controller value
-     * @description adds a controller to the {@link NoosferoApp#angularModule}
-     */
-    static addController(controllerName: string, value: any) {
-        NoosferoApp.angularModule.controller(controllerName, value);
-    }
-
-    /**
-     * @ngdoc method
-     * @name run
-     * @methodOf NoosferoApp
-     * @param {Function} runFunction the function to execute
-     * @description runs a function using the {@link NoosferoApp#angularModule}
-     */
-    static run(runFunction: Function) {
-        NoosferoApp.angularModule.run(runFunction);
-    }
-}
-import {NoosferoApp} from "./index.module";
+import {bootstrap} from "ng-forward";
 import {noosferoModuleConfig} from "./index.config";
 import {noosferoAngularRunBlock} from "./index.run";
-
 import {MainComponent} from "./main/main.component";
-import {bootstrap, bundle} from "ng-forward";
-
 import {AuthEvents} from "./login/auth-events";
-import {AuthController} from "./login/auth.controller";
-
-import {Navbar} from "./layout/navbar/navbar";
 declare var moment: any;
-let noosferoApp: any = bundle("noosferoApp", MainComponent, ["ngAnimate", "ngCookies", "ngStorage", "ngTouch",
-    "ngSanitize", "ngMessages", "ngAria", "restangular",
-    "ui.router", "ui.bootstrap", "toastr", "ngCkeditor",
-    "angular-bind-html-compile", "angularMoment", "angular.filter", "akoenig.deckgrid",
-    "angular-timeline", "duScroll", "oitozero.ngSweetAlert",
-    "pascalprecht.translate", "tmh.dynamicLocale", "angularLoad",
-    "angular-click-outside"]).publish();
-
-NoosferoApp.angularModule = noosferoApp;
-
-
-NoosferoApp.addConstants("moment", moment);
-NoosferoApp.addConstants("AuthEvents", AuthEvents);
-
-NoosferoApp.addConfig(noosferoModuleConfig);
-NoosferoApp.run(noosferoAngularRunBlock);
+// FIXME see a better way to declare template modules for dev mode
+try {
+    angular.module('noosfero.templates.app');
+} catch (error) {
+    angular.module('noosfero.templates.app', []);
+}
+try {
+    angular.module('noosfero.templates.plugins');
+} catch (error) {
+    angular.module('noosfero.templates.plugins', []);
+}
+angular.module('noosfero.init', ['noosfero.templates.app', 'noosfero.templates.plugins']).
+    config(noosferoModuleConfig).
+    run(noosferoAngularRunBlock).
+    constant("moment", moment).
+    constant("AuthEvents", AuthEvents);
+bootstrap(MainComponent);
 import {TestComponentBuilder} from 'ng-forward/cjs/testing/test-component-builder';
 import {Input, provide, Component, StateConfig} from 'ng-forward';
-
 import {MainBlockComponent} from './main-block.component';
-import {NoosferoApp} from '../../../index.module';
+
 const tcb = new TestComponentBuilder();
@@ -37,4 +36,4 @@ describe(&quot;Components&quot;, () =&gt; {
             });
         });
     });
-});
 \ No newline at end of file
+});
 <nav class="navbar navbar-static-top navbar-inverse">
   <div class="container-fluid">
     <div class="navbar-header">
-      <button type="button" class="navbar-toggle collapsed" (click)="ctrl.toggleCollapse()" ng-show="ctrl.showHamburguer">
+      <button type="button" class="navbar-toggle collapsed" (click)="ctrl.toggleCollapse()" ng-show="ctrl.showHamburger">
         <span class="sr-only">{{"navbar.toggle_menu" | translate}}</span>
         <i class="fa fa-bars"></i>
       </button>
       <a class="navbar-brand" ui-sref="main.environment.home">
         <span class="noosfero-logo"> </span>
-        <span class="noosfero-name">{{"noosfero.name" | translate}}</span>
+        <span class="noosfero-name">{{ ctrl.currentEnvironment.name }}</span>
       </a>
     </div>
@@ -26,23 +26,29 @@
             <span ng-bind="ctrl.currentUser.person.name"></span> <b class="caret"></b>
           </a>
           <ul class="dropdown-menu" uib-dropdown-menu>
-              <li>
-                  <a ui-sref="main.profile.info({profile: ctrl.currentUser.person.identifier})"><i class="fa fa-fw fa-user"></i> {{"navbar.profile" | translate}}</a>
-              </li>
-              <li>
-                  <a target="_self" ui-sref="main.profile.settings({profile: ctrl.currentUser.person.identifier})"><i class="fa fa-fw fa-gear"></i> {{"navbar.settings" | translate}}</a>
-              </li>
-              <li class="divider"></li>
-              <li>
-                  <a href="#" ng-click="ctrl.logout()"><i class="fa fa-fw fa-power-off"></i> {{"navbar.logout" | translate}}</a>
-              </li>
+            <li>
+              <a ui-sref="main.profile.info({profile: ctrl.currentUser.person.identifier})"><i class="fa fa-fw fa-user"></i> {{"navbar.profile" | translate}}</a>
+            </li>
+            <li>
+              <a target="_self" ui-sref="main.profile.settings({profile: ctrl.currentUser.person.identifier})"><i class="fa fa-fw fa-gear"></i> {{"navbar.settings" | translate}}</a>
+            </li>
+            <li class="divider"></li>
+            <li>
+              <a href="#" ng-click="ctrl.logout()"><i class="fa fa-fw fa-power-off"></i> {{"navbar.logout" | translate}}</a>
+            </li>
           </ul>
         </li>
       </ul>
+
       <ul class="nav navbar-nav navbar-right">
         <language-selector class="nav navbar-nav navbar-right"></language-selector>
       </ul>
       <div ui-view="actions"></div>
+      <div class="nav navbar-nav search navbar-right">
+        <search-form></search-form>
+      </div>
     </div>
   </div>
 </nav>
+<div ui-view="toolbar">
+</div>
 \ No newline at end of file
@@ -34,6 +34,16 @@
       text-align: center;
   	}
+    .search {
+      .search-input {
+        height: 45px;
+        margin-top: 10px;
+      }
+      .input-group-btn {
+        padding-top: 10px;
+      }
+    }
+
     @media (max-width: $break-sm-max) {
     	.navbar-toggle .fa-bars{
     		font-size: 14pt;
@@ -69,6 +69,11 @@ describe(&quot;Components&quot;, () =&gt; {
                             AuthEvents
                         }
                     }),
+                    provide('EnvironmentService', {
+                        useValue: {
+                            getCurrentEnvironment: () => { return { id: 1, name: 'Nosofero' }; }
+                        }
+                    }),
                     provide('TranslatorService', {
                         useValue: helpers.mocks.translatorService
                     })
 import {Component, Inject, EventEmitter, Input} from "ng-forward";
 import {LanguageSelectorComponent} from "../language-selector/language-selector.component";
 import {SessionService, AuthService, AuthController, AuthEvents} from "./../../login";
+import {EnvironmentService} from "./../../../lib/ng-noosfero-api/http/environment.service";
 import {SidebarNotificationService} from "../sidebar/sidebar.notification.service";
 import {BodyStateClassesService} from '../services/body-state-classes.service';
+import {DesignModeTogglerComponent} from './../../admin/layout-edit/designModeToggler.component';
+import {BootstrapSwitcherComponent, BootstrapSwitcherItem} from './../../shared/components/bootstrap-switcher/bootstrap-switcher.component';
 @Component({
     selector: "acme-navbar",
     templateUrl: "app/layout/navbar/navbar.html",
-    directives: [LanguageSelectorComponent],
-    providers: [AuthService, SessionService, SidebarNotificationService]
+    directives: [LanguageSelectorComponent, DesignModeTogglerComponent, BootstrapSwitcherComponent],
+    providers: [AuthService, SessionService, SidebarNotificationService, EnvironmentService]
 })
-@Inject("$uibModal", AuthService, "SessionService", "$state", SidebarNotificationService, BodyStateClassesService)
+@Inject("$uibModal", AuthService, "SessionService", "$state", SidebarNotificationService, BodyStateClassesService, EnvironmentService)
 export class Navbar {
     private currentUser: noosfero.User;
     private modalInstance: any = null;
-
-    public showHamburguer: boolean = false;
-
+    public showHamburger: boolean = false;
+    public currentEnvironment: noosfero.Environment = <any>{ name: '' };
     /**
      *
      */
@@ -27,11 +29,13 @@ export class Navbar {
         private session: SessionService,
         private $state: ng.ui.IStateService,
         private sidebarNotificationService: SidebarNotificationService,
-        private bodyStateService: BodyStateClassesService
+        private bodyStateService: BodyStateClassesService,
+        private environmentService: EnvironmentService
     ) {
         this.currentUser = this.session.currentUser();
+        this.currentEnvironment = environmentService.getCurrentEnvironment();
-        this.showHamburguer = this.authService.isAuthenticated();
+        this.showHamburger = this.authService.isAuthenticated();
         this.bodyStateService.addContentClass(!this.sidebarNotificationService.sidebarVisible);
         this.authService.subscribe(AuthEvents[AuthEvents.loginSuccess], () => {
@@ -41,7 +45,7 @@ export class Navbar {
             }
             this.currentUser = this.session.currentUser();
-            this.showHamburguer = true;
+            this.showHamburger = true;
             this.$state.go(this.$state.current, {}, { reload: true });  // TODO move to auth
         });
@@ -35,3 +35,24 @@
 		padding: 0 20px 20px 20px;
 	}
 }
+
+
+body.noosfero-design-on {
+
+	div.content-wrapper {
+		opacity: 0.5;
+	}
+}
+
+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
@@ -3,7 +3,7 @@ $whbl-sidebar-linkColor: #484848;
 $whbl-primary-color: #1E96D0; //blue
 $whbl-font-color: #16191c;
-.skin-whbl {
+%skin-base {
 	#header-navbar {
 		background-color: $whbl-primary-color;
 	}
@@ -180,27 +180,19 @@ $whbl-font-color: #16191c;
 	}
 	.pagination {
 		> li {
-			> a,
-			> span,
-			> a:hover,
-			> span:hover,
-			> a:focus,
-			> span:focus,
-			> a:active,
-			> span:active {
-				color: $whbl-primary-color;
+			&.active {
+				a {
+					background-color: $whbl-primary-color;
+					color: #FFF;
+				}
 			}
-		}
-		> .active {
-			> a,
-			> span,
-			> a:hover,
-			> span:hover,
-			> a:focus,
-			> span:focus {
-				background-color: $whbl-primary-color;
-				border-color: $whbl-primary-color;
-				color: #fff;
+			> a {
+				&:hover {
+					background-color: $whbl-primary-color;
+					color: #FFF;
+				}
+				background-color: #FFF;
+				color: $whbl-primary-color;
 			}
 		}
 	}
@@ -289,6 +281,31 @@ $whbl-font-color: #16191c;
 	.pace .pace-progress {
 		background-color: #fff;
 	}
+
+	noosfero-design-toggler .ats-switch .knob i {
+		color: #999999;
+	}
+
+	.ats-switch .knob {
+		padding-right: 15px;
+	}
+
+	.ats-switch .glyphicon {
+		top: 2px;
+	}
+
+	.ats-switch .switch-left {
+		background-color: #41b941;
+		font-weight: bold;
+		color: white;
+	}
+
+	.ats-switch .switch-right {
+		background-color: #ce3b3b;
+		font-weight: bold;
+		color: white;
+	}
+
 }
 .rtl.skin-whbl #content-wrapper {
 	border-left: 0;
@@ -296,7 +313,7 @@ $whbl-font-color: #16191c;
 }
 @media (max-width: $break-sm-max) {
-	.skin-whbl {
+	%skin-base {
 		#logo.navbar-brand > img.normal-logo.logo-white {
 			display: block;
 		}
@@ -308,3 +325,7 @@ $whbl-font-color: #16191c;
 		}
 	}
 }
+
+.skin-whbl {
+	@extend %skin-base;
+}
@@ -4,7 +4,7 @@ import {AuthService} from &quot;./../../login/auth.service&quot;;
 import {AuthEvents} from "./../../login/auth-events";
 import {EventEmitter} from 'ng-forward';
-
+import {DesignModeService} from './../../admin/layout-edit/designMode.service';
 describe("BodyStateClasses Service", () => {
@@ -19,10 +19,13 @@ describe(&quot;BodyStateClasses Service&quot;, () =&gt; {
         },
         authService: any = helpers.mocks.authService,
         bodyEl: { className: string },
-        bodyElJq: any;
+        bodyElJq: any,
+        designModeService = new DesignModeService();
+
+
     let getService = (): BodyStateClassesService => {
-        return new BodyStateClassesService($rootScope, $document, $state, authService);
+        return new BodyStateClassesService($rootScope, $document, $state, authService, designModeService);
     };
     beforeEach(() => {
@@ -168,4 +171,30 @@ describe(&quot;BodyStateClasses Service&quot;, () =&gt; {
         expect(contentWrapperMock.removeClass).toHaveBeenCalledWith(BodyStateClassesService.CONTENT_WRAPPER_FULL);
     });
+
+    it("should add the class noosfero-design-on when designMode is changed to true", () => {
+        let fnOnToggle: Function = null;
+        designModeService.onToggle = <any> {
+            subscribe: (fn: Function) => {
+                fnOnToggle = fn;
+            },
+            next: (value: boolean) => {
+                fnOnToggle.apply(designModeService, [value]);
+            }
+        };
+
+        let service = getService();
+
+        bodyElJq.addClass = jasmine.createSpy("addClass");
+        bodyElJq.removeClass = jasmine.createSpy("removeClass");
+        service["bodyElement"] = bodyElJq;
+
+        service.start();
+
+        debugger;
+        designModeService.setInDesignMode(true);
+
+
+        expect(bodyElJq.addClass).toHaveBeenCalledWith(BodyStateClassesService.DESIGN_MODE_ON_CLASSNAME);
+    });
 });
@@ -3,6 +3,7 @@ import {AuthEvents} from &quot;../../login/auth-events&quot;;
 import {AuthService} from "./../../login/auth.service";
 import {HtmlUtils} from "../html-utils";
 import {INgForwardJQuery} from 'ng-forward/cjs/util/jqlite-extensions';
+import {DesignModeService} from './../../admin/layout-edit/designMode.service';
 export interface StartParams {
     skin?: string;
@@ -22,12 +23,13 @@ export interface StartParams {
  *         - full-content
  */
 @Injectable()
-@Inject("$rootScope", "$document", "$state", AuthService)
+@Inject("$rootScope", "$document", "$state", AuthService, DesignModeService)
 export class BodyStateClassesService {
     private started: boolean = false;
     private skin: string;
+    public static get DESIGN_MODE_ON_CLASSNAME(): string { return "noosfero-design-on"; }
     public static get USER_LOGGED_CLASSNAME(): string { return "noosfero-user-logged"; }
     public static get ROUTE_STATE_CLASSNAME_PREFIX(): string { return "noosfero-route-"; }
     public static get CONTENT_WRAPPER_FULL(): string { return "full-content"; }
@@ -38,16 +40,16 @@ export class BodyStateClassesService {
         private $rootScope: ng.IRootScopeService,
         private $document: ng.IDocumentService,
         private $state: ng.ui.IStateService,
-        private authService: AuthService
+        private authService: AuthService,
+        private designModeService: DesignModeService
     ) {
-
     }
     start(config?: StartParams) {
         if (!this.started) {
             this.setupUserLoggedClassToggle();
             this.setupStateClassToggle();
-
+            this.setupDesignModeClassToggle();
             if (config) {
                 this.setThemeSkin(config.skin);
             }
@@ -87,9 +89,19 @@ export class BodyStateClassesService {
     }
     /**
-     * Setup the initial class name on body element indicating the current route
-     * and adds event handler to swith this class when the current page/state changes
+     * setup the listeners to the desigModeService to add class on the Body Element
+     * indicating the user activated the designMode
      */
+    private setupDesignModeClassToggle() {
+        this.designModeService.onToggle.subscribe((designOn: boolean) => {
+            if (designOn) {
+                this.getBodyElement().addClass(BodyStateClassesService.DESIGN_MODE_ON_CLASSNAME);
+            } else {
+                this.getBodyElement().removeClass(BodyStateClassesService.DESIGN_MODE_ON_CLASSNAME);
+            }
+        });
+    }
+
     private setupStateClassToggle() {
         let bodyElement = this.getBodyElement();
         bodyElement.addClass(BodyStateClassesService.ROUTE_STATE_CLASSNAME_PREFIX + this.$state.current.name);
@@ -17,7 +17,7 @@ describe(&quot;Services&quot;, () =&gt; {
         let $rootScope: ng.IRootScopeService;
         let user: noosfero.User;
-        beforeEach(angular.mock.module("noosferoApp", ($translateProvider: angular.translate.ITranslateProvider) => {
+        beforeEach(angular.mock.module("main", ($translateProvider: angular.translate.ITranslateProvider) => {
             $translateProvider.translations('en', {});
         }));
@@ -0,0 +1,86 @@
+import { provide, Component, componentStore, bundleStore } from "ng-forward";
+import {MainComponent} from "./main.component";
+import {TestComponentBuilder, ComponentFixture} from "ng-forward/cjs/testing/test-component-builder";
+
+import {quickCreateComponent} from "../../spec/helpers";
+import {getAngularServiceFactory} from "../../spec/helpers";
+
+describe("MainComponent", function() {
+
+    let localFixture: ComponentFixture;
+    let $state: angular.ui.IStateService;
+    let $q: ng.IQService;
+    let $httpBackend: ng.IHttpBackendService;
+    let authService: any = jasmine.createSpyObj("authService", ["loginFromCookie", "isAuthenticated", "subscribe"]);
+    let environmentService: any = jasmine.createSpyObj("environmentService", ["get", "getCurrentEnvironment"]);
+
+    beforeEach(angular.mock.module("ui.router"));
+    beforeEach(angular.mock.module("templates"));
+    beforeEach(angular.mock.module("pascalprecht.translate", ($translateProvider: angular.translate.ITranslateProvider) => {
+        $translateProvider.translations('en', {});
+    }));
+
+    @Component({
+        selector: "parent",
+        template: "<main></main>",
+        directives: [MainComponent],
+        providers: [
+            provide("AuthService",
+                {
+                    useValue: authService
+                }),
+
+            provide("EnvironmentService",
+                {
+                    useValue: environmentService
+                }),
+        ]
+    })
+    class MainComponentParent {
+        constructor() {
+
+        }
+    }
+
+    beforeEach(() => {
+        authService.loginFromCookie = jasmine.createSpy("loginFromCookie").and.returnValue({ id: 1, name: "user1" });
+        environmentService.get = jasmine.createSpy("get").and.returnValue({ id: 1, name: "Noosfero Default Environment" });
+    });
+
+    it("renders the main component only when the login and environment were resolved", (done) => {
+        quickCreateComponent({ directives: [MainComponentParent], template: "<parent></parent>" })
+            .then((fixture) => {
+                fixture.debugElement.getLocal("$httpBackend").expectGET("/api/v1/environments/1/boxes").respond(200, {});
+                localFixture = fixture;
+                // get the $state service to navigate between routes
+                $state = fixture.debugElement.getLocal("$state");
+                // navigates to the environment home
+                $state.go("main.environment.home");
+                localFixture.detectChanges();
+                // after changes were detected it checks the current $state route 
+                expect($state.current.name).toEqual("main.environment.home");
+                done();
+            });
+
+    });
+
+    it("does not render the main component when get error loading the environment", (done) => {
+        quickCreateComponent({ directives: [MainComponentParent], template: "<parent></parent>" })
+            .then((fixture) => {
+                localFixture = fixture;
+                // get the $state service to navigate between routes
+                $state = fixture.debugElement.getLocal("$state");
+                // get the $q service to create a rejected promise
+                $q = fixture.debugElement.getLocal("$q");
+                // mock the environmentService to force a rejected promise
+                environmentService.get = jasmine.createSpy("get").and.returnValue($q.reject("Error simulated"));
+                // tries to navigate to the environment home
+                $state.go("main.environment.home");
+                localFixture.detectChanges();
+                // after the changes were detected the state remains '' because the environment could not be loaded
+                expect($state.current.name).toEqual("");
+                done();
+            });
+
+    });
+});
@@ -28,7 +28,7 @@ import {DateFormat} from &quot;../shared/pipes/date-format.filter&quot;;
 import {AuthService} from "../login/auth.service";
 import {SessionService} from "../login/session.service";
-
+import {EnvironmentService} from "./../../lib/ng-noosfero-api/http/environment.service";
 import {NotificationService} from "../shared/services/notification.service";
 import {BodyStateClassesService} from "./../layout/services/body-state-classes.service";
@@ -39,7 +39,9 @@ import {SidebarComponent} from &quot;../layout/sidebar/sidebar.component&quot;;
 import {MainBlockComponent} from "../layout/blocks/main/main-block.component";
 import {HtmlEditorComponent} from "../shared/components/html-editor/html-editor.component";
-
+import {PermissionDirective} from "../shared/components/permission/permission.directive";
+import {SearchComponent} from "../search/search.component";
+import {SearchFormComponent} from "../search/search-form/search-form.component";
 /**
  * @ngdoc controller
@@ -93,17 +95,23 @@ export class EnvironmentContent {
  */
 @Component({
     selector: 'main',
-    template: '<div ng-view></div>',
+    template: '<ui-view></ui-view>',
     directives: [
         ArticleBlogComponent, ArticleViewComponent, BoxesComponent, BlockComponent,
         EnvironmentComponent, PeopleBlockComponent, DisplayContentBlockComponent,
-        LinkListBlockComponent, CommunitiesBlockComponent, HtmlEditorComponent,
+        LinkListBlockComponent, CommunitiesBlockComponent, HtmlEditorComponent, ProfileComponent,
         MainBlockComponent, RecentDocumentsBlockComponent, Navbar, SidebarComponent, ProfileImageBlockComponent,
         MembersBlockComponent, NoosferoTemplate, DateFormat, RawHTMLBlockComponent, StatisticsBlockComponent,
-        LoginBlockComponent, CustomContentComponent
+        LoginBlockComponent, CustomContentComponent, PermissionDirective, SearchFormComponent, SearchComponent
     ].concat(plugins.mainComponents).concat(plugins.hotspots),
-
-    providers: [AuthService, SessionService, NotificationService, BodyStateClassesService]
+    providers: [AuthService, SessionService, NotificationService, BodyStateClassesService,
+        "ngAnimate", "ngCookies", "ngStorage", "ngTouch",
+        "ngSanitize", "ngMessages", "ngAria", "restangular",
+        "ui.router", "ui.bootstrap", "toastr", "ngCkeditor",
+        "angular-bind-html-compile", "angularMoment", "angular.filter", "akoenig.deckgrid",
+        "angular-timeline", "duScroll", "oitozero.ngSweetAlert",
+        "pascalprecht.translate", "tmh.dynamicLocale", "angularLoad",
+        "angular-click-outside", "toggle-switch", "noosfero.init"]
 })
 @StateConfig([
     {
@@ -114,6 +122,9 @@ export class EnvironmentContent {
         resolve: {
             currentUser: function(AuthService: AuthService) {
                 return AuthService.loginFromCookie();
+            },
+            currentEnvironment: function(EnvironmentService: EnvironmentService) {
+                return EnvironmentService.get();
             }
         }
     },
@@ -144,5 +155,4 @@ export class EnvironmentContent {
         }
     }
 ])
-export class MainComponent {
-}
+export class MainComponent { }
@@ -73,5 +73,16 @@ describe(&quot;Components&quot;, () =&gt; {
             helper.component.save();
             expect(helper.component['notificationService'].success).toHaveBeenCalled();
         });
+
+        it("hide button to edit content when user doesn't have the permission", () => {
+            helper.detectChanges();
+            expect(helper.find(".actions").attr('style')).toEqual('display: none; ');
+        });
+
+        it("show button to edit content when user has the permission", () => {
+            (<any>helper.component['profile'])['permissions'] = ['allow_edit'];
+            helper.detectChanges();
+            expect(helper.find(".actions").attr('style')).toEqual('');
+        });
     });
 });
 import {Component, Input, Inject} from 'ng-forward';
 import {ProfileService} from '../../../lib/ng-noosfero-api/http/profile.service';
 import {NotificationService} from '../../shared/services/notification.service';
+import {PermissionDirective} from '../../shared/components/permission/permission.directive';
 @Component({
     selector: 'custom-content',
     templateUrl: "app/profile/custom-content/custom-content.html",
+    directives: [PermissionDirective]
 })
 @Inject("$uibModal", "$scope", ProfileService, NotificationService)
 export class CustomContentComponent {
 <div class="custom-content">
-  <div class="actions">
+  <div class="actions" permission="ctrl.profile.permissions" permission-action="allow_edit">
     <button type="submit" class="btn btn-xs btn-default" ng-click="ctrl.openEdit()"><i class="fa fa-edit fa-fw"></i> {{ctrl.label | translate}}</button>
   </div>
   <div class="content" ng-bind-html="ctrl.content"></div>
@@ -0,0 +1,21 @@
+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";
 /**
  * @ngdoc controller
  * @name profile.Profile
@@ -42,6 +42,11 @@ import {ProfileActionsComponent} from &quot;./profile-actions.component&quot;;
                 templateUrl: "app/profile/navbar-actions.html",
                 controller: ProfileActionsComponent,
                 controllerAs: "vm"
+            },
+            "toolbar@main": {
+                templateUrl: "app/profile/toolbar.html",
+                controller: ProfileToolbarComponent,
+                controllerAs: "vm"
             }
         }
     },
@@ -54,6 +59,11 @@ import {ProfileActionsComponent} from &quot;./profile-actions.component&quot;;
                 templateUrl: "app/profile/navbar-actions.html",
                 controller: ProfileActionsComponent,
                 controllerAs: "vm"
+            },
+            "toolbar@main": {
+                templateUrl: "app/profile/toolbar.html",
+                controller: ProfileToolbarComponent,
+                controllerAs: "vm"
             }
         }
     },
@@ -106,6 +116,11 @@ import {ProfileActionsComponent} from &quot;./profile-actions.component&quot;;
                 templateUrl: "app/article/content-viewer/navbar-actions.html",
                 controller: ContentViewerActionsComponent,
                 controllerAs: "vm"
+            },
+            "toolbar@main": {
+                templateUrl: "app/profile/toolbar.html",
+                controller: ProfileToolbarComponent,
+                controllerAs: "vm"
             }
         }
     }
@@ -0,0 +1,4 @@
+<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
@@ -0,0 +1,34 @@
+import {ComponentTestHelper, createClass} from "../../../spec/component-test-helper";
+import {SearchFormComponent} from "./search-form.component";
+import * as helpers from "../../../spec/helpers";
+
+const htmlTemplate: string = '<search-form></search-form>';
+
+describe("Components", () => {
+    describe("Search Form Component", () => {
+
+        let helper: ComponentTestHelper<SearchFormComponent>;
+        let stateMock = jasmine.createSpyObj("$state", ["go"]);
+
+        beforeEach(angular.mock.module("templates"));
+
+        beforeEach((done) => {
+            let cls = createClass({
+                template: htmlTemplate,
+                directives: [SearchFormComponent],
+                providers: [helpers.createProviderToValue("$state", stateMock)]
+            });
+            helper = new ComponentTestHelper<SearchFormComponent>(cls, done);
+        });
+
+        it("render a input for search query", () => {
+            expect(helper.find(".search-input").length).toEqual(1);
+        });
+
+        it("go to search page when click on search button", () => {
+            helper.component.query = 'query';
+            helper.component.search();
+            expect(stateMock.go).toHaveBeenCalledWith('main.environment.search', { query: 'query' });
+        });
+    });
+});
@@ -0,0 +1,26 @@
+import {Component, Inject} from "ng-forward";
+
+@Component({
+    selector: 'search-form',
+    templateUrl: 'app/search/search-form/search-form.html'
+})
+@Inject("$state")
+export class SearchFormComponent {
+
+    query: string;
+
+    constructor(private $state: ng.ui.IStateService) {
+    }
+
+    ngOnInit() {
+        this.query = this.$state.params['query'];
+    }
+
+    search() {
+        this.$state.go('main.environment.search', { query: this.query });
+    }
+
+    isSearchPage() {
+        return "main.environment.search" === this.$state.current.name;
+    }
+}
@@ -0,0 +1,8 @@
+<form class="navbar-form search-form" role="search" ng-if="!ctrl.isSearchPage()">
+  <div class="input-group">
+    <input type="text" class="search-input form-control" placeholder="Search" name="q" ng-model="ctrl.query">
+    <div class="input-group-btn">
+      <button class="btn btn-default" type="submit" (click)="ctrl.search()"><i class="fa fa-search fa-fw"></i></button>
+    </div>
+  </div>
+</form>
@@ -0,0 +1,38 @@
+import {ComponentTestHelper, createClass} from "../../spec/component-test-helper";
+import {SearchComponent} from "./search.component";
+import * as helpers from "../../spec/helpers";
+
+const htmlTemplate: string = '<search></search>';
+
+describe("Components", () => {
+    describe("Search Component", () => {
+
+        let helper: ComponentTestHelper<SearchComponent>;
+        let stateParams = { query: 'query' };
+        let articleService = jasmine.createSpyObj("ArticleService", ["search"]);
+        let result = Promise.resolve({ data: [{ id: 1 }], headers: (param: string) => { return 1; } });
+        articleService.search = jasmine.createSpy("search").and.returnValue(result);
+
+        beforeEach(angular.mock.module("templates"));
+
+        beforeEach((done) => {
+            let cls = createClass({
+                template: htmlTemplate,
+                directives: [SearchComponent],
+                providers: [
+                    helpers.createProviderToValue("$stateParams", stateParams),
+                    helpers.createProviderToValue("ArticleService", articleService)
+                ].concat(helpers.provideFilters("truncateFilter", "stripTagsFilter"))
+            });
+            helper = new ComponentTestHelper<SearchComponent>(cls, done);
+        });
+
+        it("load first page with search results", () => {
+            expect(articleService.search).toHaveBeenCalledWith({ query: 'query', per_page: 10, page: 0 });
+        });
+
+        it("display search results", () => {
+            expect(helper.all(".result").length).toEqual(1);
+        });
+    });
+});
@@ -0,0 +1,40 @@
+import {Component, Inject} from "ng-forward";
+import {ArticleService} from "./../../lib/ng-noosfero-api/http/article.service";
+
+import {SearchFormComponent} from "./search-form/search-form.component";
+
+@Component({
+    selector: 'search',
+    templateUrl: 'app/search/search.html',
+    directives: [SearchFormComponent]
+})
+@Inject(ArticleService, "$stateParams", "$state")
+export class SearchComponent {
+
+    articles: noosfero.Article[];
+    query: string;
+    totalResults = 0;
+    perPage = 10;
+    currentPage: number = 0;
+
+    constructor(private articleService: ArticleService, private $stateParams: ng.ui.IStateParamsService, private $state: ng.ui.IStateService) {
+        this.query = this.$stateParams['query'];
+        this.loadPage();
+    }
+
+    search() {
+         this.$state.go('main.environment.search', { query: this.query });
+    }
+
+    loadPage() {
+        let filters = {
+            query: this.query,
+            per_page: this.perPage,
+            page: this.currentPage
+        };
+        this.articleService.search(filters).then((result: noosfero.RestResult<noosfero.Article[]>) => {
+            this.totalResults = <number>result.headers("total");
+            this.articles = result.data;
+        });
+    }
+}
@@ -0,0 +1,28 @@
+<form ng-submit="ctrl.search()">
+<label for="query" ng-bind-html="'search.results.query.label' | translate"></label>
+<input id="query" placeholder="{{'search.results.query.placeholder' | translate}}" type="search" class="search-box-title" ng-model="ctrl.query">
+</form>
+<div class="search-results">
+  <div class="summary">
+    {{"search.results.summary" | translate:{results: ctrl.totalResults}:"messageformat"}}
+  </div>
+  <div ng-repeat="article in ctrl.articles | orderBy: 'created_at':true" class="result">
+    <a class="title" ui-sref="main.profile.page({profile: article.profile.identifier, page: article.path})">
+      <h4 ng-bind="article.title"></h4>
+    </a>
+    <div class="info">
+      <a class="profile" ui-sref="main.profile.home({profile: article.profile.identifier})">
+        {{article.profile.name}}
+      </a>
+      <span class="bullet-separator">•</span>
+      <span class="time">
+        <span am-time-ago="article.created_at | dateFormat"></span>
+      </span>
+    </div>
+    <div class="post-lead" ng-bind-html="article.body | stripTags | truncate: 250: '...': true"></div>
+  </div>
+  <uib-pagination ng-model="ctrl.currentPage" total-items="ctrl.totalResults" class="pagination-sm center-block"
+    boundary-links="true" items-per-page="ctrl.perPage" ng-change="ctrl.loadPage()"
+    first-text="«" last-text="»" previous-text="‹" next-text="›">
+  </uib-pagination>
+</div>
@@ -0,0 +1,48 @@
+.search-results {
+  .summary {
+    color: #bbbbbb;
+    font-size: 13px;
+    border-top: 1px solid #ececec;
+  }
+  .result {
+    margin: 25px 0;
+
+    .title {
+      h4 {
+        margin: 0;
+      }
+    }
+    .info {
+      .profile {
+        color: #6e9e7b;
+      }
+      .time {
+        color: #6e9e7b;
+        font-size: 12px;
+      }
+      .bullet-separator {
+        margin: 0 2px;
+        font-size: 10px;
+        color: #afd6ba;
+      }
+    }
+  }
+}
+
+.search-box-title {
+    border: 0;
+    border-bottom: 1px solid rgba(0,0,0,.15);
+    border-radius: 0;
+    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;
+    letter-spacing: 0;
+    font-weight: 300;
+    font-style: normal;
+    font-size: 50px;
+    height: 80px;
+    padding: 0;
+    width: 100%;
+}
+
+.search-box-title:focus {
+  outline: none;
+}
 \ No newline at end of file
@@ -0,0 +1,51 @@
+import {Component, Input, Output, EventEmitter} from 'ng-forward';
+
+
+export interface BootstrapSwitcherItem {
+    value: any;
+    label: string;
+}
+@Component({
+    selector: 'noosfero-bootstrap-switcher',
+    template: `
+        <span class="switcher-label" ng-bind="ctrl.label | translate"></span>
+        <div class="btn-group switcher">
+            <button ng-repeat="option in ctrl.options track by $index"
+                   (click)="ctrl.switcherClick(option)"
+                   ng-class="ctrl.getCssClassForItem(option)"
+                   class="btn btn-xs" ng-bind="option.label | translate">
+             </button>
+        </div>
+    `,
+    inputs: ['activeClass', 'defaultClass', 'label', 'options', 'defaultOption'],
+    outputs: ['onSwitch']
+})
+export class BootstrapSwitcherComponent {
+    @Input() activeClass: string = 'active btn-danger';
+    @Input() defaultClass: string = 'btn-default';
+    @Input() label: string;
+    @Input() options: BootstrapSwitcherItem[];
+    @Input() defaultOption: BootstrapSwitcherItem;
+    @Output() onSwitch: EventEmitter<BootstrapSwitcherItem> = new EventEmitter<BootstrapSwitcherItem>();
+
+    selectedOption: BootstrapSwitcherItem = null;
+
+    constructor() { }
+
+    ngOnInit() {
+        this.selectedOption = this.defaultOption;
+    }
+
+    isSelectedOption(value: BootstrapSwitcherItem): boolean {
+        return this.selectedOption === value;
+    }
+
+    getCssClassForItem(value: BootstrapSwitcherItem): string {
+        return this.isSelectedOption(value) ? this.activeClass : this.defaultClass;
+    }
+
+    switcherClick(value: BootstrapSwitcherItem) {
+        this.selectedOption = value;
+        this.onSwitch.next(value);
+    }
+}
 \ No newline at end of file
@@ -0,0 +1,5 @@
+
+
+export interface IComponentWithPermissions {
+    permissions: () => string[];
+}
 \ No newline at end of file
@@ -0,0 +1,27 @@
+import {Input, provide, Component} from 'ng-forward';
+import {PermissionDirective} from "./permission.directive";
+import * as helpers from "../../../../spec/helpers";
+
+const htmlTemplate: string = '<div permission="ctrl.permissions" permission-action="action"></div>';
+
+describe("Permission directive", () => {
+
+    let element = jasmine.createSpyObj("$element", ["css"]);
+    let scope = jasmine.createSpyObj("$scope", ["$watch", "$eval"]);
+    scope.$watch = (param: string, f: Function) => { f(); };
+    scope.$eval = (param: any) => { return param; };
+
+    it("hide element when there is no permission action in the permissions array", (done: Function) => {
+        let attrs: any = { permission: [], permissionAction: 'action' };
+        let directive = new PermissionDirective(<any>attrs, scope, element);
+        expect(element.css).toHaveBeenCalledWith('display', 'none');
+        done();
+    });
+
+    it("show element when the permission action exists in the permissions array", (done: Function) => {
+        let attrs = { permission: ['action'], permissionAction: 'action' };
+        let directive = new PermissionDirective(<any>attrs, scope, element);
+        expect(element.css).toHaveBeenCalledWith('display', '');
+        done();
+    });
+});
@@ -0,0 +1,20 @@
+import {Directive, Inject, Input} from "ng-forward";
+
+@Directive({
+    selector: '[permission]'
+})
+@Inject('$attrs', '$scope', '$element')
+export class PermissionDirective {
+
+    constructor($attrs: ng.IAttributes, $scope: ng.IScope, $element: ng.IAugmentedJQuery) {
+        $scope.$watch($attrs['permission'], () => {
+            let permissions = $scope.$eval($attrs['permission']);
+            let permissionAction = $attrs['permissionAction'];
+            if (!permissions || permissions.indexOf(permissionAction) < 0) {
+                $element.css("display", "none");
+            } else {
+                $element.css("display", "");
+            }
+        });
+    }
+}
 <!doctype html>
-<html ng-app="noosferoApp">
+<html>
   <head>
     <base href="/">
     <meta charset="utf-8">
@@ -25,11 +25,12 @@
       <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
     <![endif]-->
-    <div ui-view></div>
+    <main></main>
     <script>
       CKEDITOR_BASEPATH='/bower_components/ng-ckeditor/libs/ckeditor/';
     </script>
+    <script src="/bower_components/ng-ckeditor/libs/ckeditor/ckeditor.js"></script>
     <!-- build:js(src) scripts/vendor.js -->
     <!-- bower:js -->
@@ -38,15 +39,12 @@
     <!-- endbuild -->
     <!-- build:js({.tmp/serve,.tmp/partials,src}) scripts/app.js -->
-    <script src="commons.js"></script>
-    <script src="vendor.bundle.js"></script>
-    <script src="noosfero.js"></script>  
     <!-- inject:partials -->
     <!-- angular templates will be automatically converted in js and inserted here -->
     <!-- endinject -->
+    <script src="commons.js"></script>
+    <script src="vendor.bundle.js"></script>
+    <script src="noosfero.js"></script>
     <!-- endbuild -->
-
-    <script src="/bower_components/ng-ckeditor/libs/ckeditor/ckeditor.js"></script>
-    <script src="/bower_components/ng-ckeditor/ng-ckeditor.min.js"></script>
   </body>
 </html>
@@ -27,7 +27,6 @@
   "navbar.content_viewer_actions.new_item": "New Item",
   "navbar.profile_actions.new_item": "New Item",
   "navbar.content_viewer_actions.new_post": "New Post",
-  "//TODO": "Create a way to load plugin translatios - Move plugins translations to the plugins translations files",
   "navbar.content_viewer_actions.new_discussion": "New Discussion",
   "navbar.profile_actions.new_discussion": "New Discussion",
   "notification.error.default.message": "Something went wrong!",
@@ -75,5 +74,11 @@
   "profile.content.success.message": "Profile saved!",
   "custom_content.title": "Edit content",
   "profile.custom_header.label": "Header",
-  "profile.custom_footer.label": "Footer"
+  "profile.custom_footer.label": "Footer",
+  "designMode.label": "In Design",
+  "designMode.toggle.ON": "ON",
+  "designMode.toggle.OFF": "OFF",
+  "search.results.summary": "{results, plural, one{result} other{# results}}",
+  "search.results.query.label": "Search for:",
+  "search.results.query.placeholder": "Search"
 }
@@ -25,8 +25,10 @@
   "auth.form.password": "Senha",
   "auth.form.login_button": "Login",
   "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.profile_actions.new_discussion": "Nova Discussão",
   "notification.error.default.message": "Algo deu errado!",
   "notification.error.default.title": "Oops...",
   "notification.profile.not_found": "Página não encontrada",
@@ -56,7 +58,7 @@
   "article.remove.success.title": "Bom trabalho!",
   "article.remove.success.message": "Artigo removido!",
   "article.remove.confirmation.title": "Tem certeza?",
-  "article.remove.confirmation.message": "Não será possível recuperar este artigo!",  
+  "article.remove.confirmation.message": "Não será possível recuperar este artigo!",
   "article.basic_editor.visibility": "Visibilidade",
   "article.basic_editor.visibility.public": "Público",
   "article.basic_editor.visibility.private": "Privado",
@@ -72,5 +74,11 @@
   "profile.content.success.message": "Perfil salvo!",
   "custom_content.title": "Editar conteúdo",
   "profile.custom_header.label": "Cabeçalho",
-  "profile.custom_footer.label": "Rodapé"
+  "profile.custom_footer.label": "Rodapé",
+  "designMode.label": "Modo de Edição",
+  "designMode.toggle.ON": "Ligado",
+  "designMode.toggle.OFF": "Desligado",
+  "search.results.summary": "{results, plural, one{# resultado} other{# resultados}}",
+  "search.results.query.label": "Buscar:",
+  "search.results.query.placeholder": "Informe aqui sua busca"
 }
@@ -8,7 +8,7 @@ describe(&quot;Services&quot;, () =&gt; {
         let $httpBackend: ng.IHttpBackendService;
         let articleService: ArticleService;
-        beforeEach(angular.mock.module("noosferoApp", ($translateProvider: angular.translate.ITranslateProvider) => {
+        beforeEach(angular.mock.module("main", ($translateProvider: angular.translate.ITranslateProvider) => {
             $translateProvider.translations('en', {});
         }));
@@ -23,7 +23,7 @@ describe(&quot;Services&quot;, () =&gt; {
             it("should remove article", (done) => {
                 let articleId = 1;
                 $httpBackend.expectDELETE(`/api/v1/articles/${articleId}`).respond(200, { success: "true" });
-                articleService.remove(<noosfero.Article>{id: articleId});
+                articleService.remove(<noosfero.Article>{ id: articleId });
                 $httpBackend.flush();
                 $httpBackend.verifyNoOutstandingExpectation();
                 done();
@@ -32,7 +32,7 @@ describe(&quot;Services&quot;, () =&gt; {
             it("should return article children", (done) => {
                 let articleId = 1;
                 $httpBackend.expectGET(`/api/v1/articles/${articleId}/children`).respond(200, { articles: [{ name: "article1" }] });
-                articleService.getChildren(<noosfero.Article>{id: articleId}).then((result: noosfero.RestResult<noosfero.Article[]>) => {
+                articleService.getChildren(<noosfero.Article>{ id: articleId }).then((result: noosfero.RestResult<noosfero.Article[]>) => {
                     expect(result.data).toEqual([{ name: "article1" }]);
                     done();
                 });
@@ -42,7 +42,7 @@ describe(&quot;Services&quot;, () =&gt; {
             it("should get articles by profile", (done) => {
                 let profileId = 1;
                 $httpBackend.expectGET(`/api/v1/profiles/${profileId}/articles`).respond(200, { articles: [{ name: "article1" }] });
-                articleService.getByProfile(<noosfero.Profile>{id: profileId}).then((result: noosfero.RestResult<noosfero.Article[]>) => {
+                articleService.getByProfile(<noosfero.Profile>{ id: profileId }).then((result: noosfero.RestResult<noosfero.Article[]>) => {
                     expect(result.data).toEqual([{ name: "article1" }]);
                     done();
                 });
@@ -52,7 +52,7 @@ describe(&quot;Services&quot;, () =&gt; {
             it("should get articles by profile with additional filters", (done) => {
                 let profileId = 1;
                 $httpBackend.expectGET(`/api/v1/profiles/${profileId}/articles?path=test`).respond(200, { articles: [{ name: "article1" }] });
-                articleService.getByProfile(<noosfero.Profile>{id: profileId}, { path: 'test' }).then((result: noosfero.RestResult<noosfero.Article[]>) => {
+                articleService.getByProfile(<noosfero.Profile>{ id: profileId }, { path: 'test' }).then((result: noosfero.RestResult<noosfero.Article[]>) => {
                     expect(result.data).toEqual([{ name: "article1" }]);
                     done();
                 });
@@ -62,7 +62,7 @@ describe(&quot;Services&quot;, () =&gt; {
             it("should get article children with additional filters", (done) => {
                 let articleId = 1;
                 $httpBackend.expectGET(`/api/v1/articles/${articleId}/children?path=test`).respond(200, { articles: [{ name: "article1" }] });
-                articleService.getChildren(<noosfero.Article>{id: articleId}, { path: 'test' }).then((result: noosfero.RestResult<noosfero.Article[]>) => {
+                articleService.getChildren(<noosfero.Article>{ id: articleId }, { path: 'test' }).then((result: noosfero.RestResult<noosfero.Article[]>) => {
                     expect(result.data).toEqual([{ name: "article1" }]);
                     done();
                 });
@@ -71,14 +71,25 @@ describe(&quot;Services&quot;, () =&gt; {
             it("should create an article in a profile", (done) => {
                 let profileId = 1;
-                let article: noosfero.Article = <any>{ id: null};
-                $httpBackend.expectPOST(`/api/v1/profiles/${profileId}/articles`, { article: article }).respond(200, {article: {  id: 2  }});
-                articleService.createInProfile(<noosfero.Profile>{id:  profileId}, article).then((result: noosfero.RestResult<noosfero.Article>) => {
+                let article: noosfero.Article = <any>{ id: null };
+                $httpBackend.expectPOST(`/api/v1/profiles/${profileId}/articles`, { article: article }).respond(200, { article: { id: 2 } });
+                articleService.createInProfile(<noosfero.Profile>{ id: profileId }, article).then((result: noosfero.RestResult<noosfero.Article>) => {
                     expect(result.data).toEqual({ id: 2 });
                     done();
                 });
                 $httpBackend.flush();
             });
+
+            it("should search for articles in environment", (done) => {
+                let profileId = 1;
+                let article: noosfero.Article = <any>{ id: null };
+                $httpBackend.expectGET(`/api/v1/search/article?query=query`).respond(200, { articles: [{ id: 2 }] });
+                articleService.search({ query: 'query' }).then((result: noosfero.RestResult<noosfero.Article[]>) => {
+                    expect(result.data).toEqual([{ id: 2 }]);
+                    done();
+                });
+                $httpBackend.flush();
+            });
         });
@@ -118,6 +118,11 @@ export class ArticleService extends RestangularService&lt;noosfero.Article&gt; {
         return this.listSubElements(<noosfero.Article>articleElement, "children", params);
     }
+    search(params: any): ng.IPromise<noosfero.RestResult<noosfero.Article[]>> {
+        let deferred = this.$q.defer<noosfero.RestResult<noosfero.Article[]>>();
+        let restRequest = this.restangularService.all("search").customGET('article', params);
+        restRequest.then(this.getHandleSuccessFunction(deferred)).catch(this.getHandleErrorFunction(deferred));
+        return deferred.promise;
+    }
 }
-
@@ -8,7 +8,7 @@ describe(&quot;Services&quot;, () =&gt; {
         let $httpBackend: ng.IHttpBackendService;
         let blockService: BlockService;
-        beforeEach(angular.mock.module("noosferoApp", ($translateProvider: angular.translate.ITranslateProvider) => {
+        beforeEach(angular.mock.module("main", ($translateProvider: angular.translate.ITranslateProvider) => {
             $translateProvider.translations('en', {});
         }));
@@ -8,7 +8,7 @@ describe(&quot;Services&quot;, () =&gt; {
         let $httpBackend: ng.IHttpBackendService;
         let commentService: CommentService;
-        beforeEach(angular.mock.module("noosferoApp", ($translateProvider: angular.translate.ITranslateProvider) => {
+        beforeEach(angular.mock.module("main", ($translateProvider: angular.translate.ITranslateProvider) => {
             $translateProvider.translations('en', {});
         }));
@@ -8,7 +8,7 @@ describe(&quot;Services&quot;, () =&gt; {
         let $httpBackend: ng.IHttpBackendService;
         let communityService: CommunityService;
-        beforeEach(angular.mock.module("noosferoApp", ($translateProvider: angular.translate.ITranslateProvider) => {
+        beforeEach(angular.mock.module("main", ($translateProvider: angular.translate.ITranslateProvider) => {
             $translateProvider.translations('en', {});
         }));
@@ -4,12 +4,17 @@ import { Injectable, Inject } from &quot;ng-forward&quot;;
 @Inject("Restangular", "$q")
 export class EnvironmentService {
-    private _currentEnvironmentPromise: ng.IDeferred<noosfero.Environment>;
+    private currentEnvironment: noosfero.Environment = null;
     constructor(private restangular: restangular.IService, private $q: ng.IQService) {
     }
+    getCurrentEnvironment(): noosfero.Environment {
+        return this.currentEnvironment;
+    }
+
+
     getEnvironmentPeople(params: any): ng.IPromise<noosfero.Person[]> {
         let p = this.restangular.one('people').get(params);
         let deferred = this.$q.defer<noosfero.Person[]>();
@@ -18,10 +23,19 @@ export class EnvironmentService {
         return deferred.promise;
     }
-    getByIdentifier(identifier: string): ng.IPromise<noosfero.Environment> {
+    get(identifier: string = 'default'): ng.IPromise<noosfero.Environment> {
         let p = this.restangular.one('environment').customGET(identifier);
         let deferred = this.$q.defer<noosfero.Environment>();
-        p.then(this.getHandleSuccessFunction<noosfero.Environment>(deferred));
+        if (identifier === 'default') {
+            p.then((response) => {
+                let data = this.restangular.stripRestangular(response.data);
+                this.currentEnvironment = data;
+                this.getHandleSuccessFunction<noosfero.Environment>(deferred).bind(this)(response);
+            });
+        } else {
+            p.then(this.getHandleSuccessFunction<noosfero.Environment>(deferred));
+        }
+
         p.catch(this.getHandleErrorFunction<noosfero.Environment>(deferred));
         return deferred.promise;
     }
@@ -36,8 +50,8 @@ export class EnvironmentService {
     /** TODO - Please, use the base class RestangularService
      * (description)
-     * 
-     * @template T
+     *
+     * @template T_currentEnvironmentPromise
      * @param {ng.IDeferred<T>} deferred (description)
      * @returns {(response: restangular.IResponse) => void} (description)
      */
@@ -45,7 +59,7 @@ export class EnvironmentService {
         let self = this;
         /**
          * (description)
-         * 
+         *
          * @param {restangular.IResponse} response (description)
          */
         let errorFunction = (response: restangular.IResponse): void => {
@@ -62,7 +76,7 @@ export class EnvironmentService {
         /**
          * (description)
-         * 
+         *
          * @param {restangular.IResponse} response (description)
          */
         let successFunction = (response: restangular.IResponse): void => {
@@ -80,7 +94,7 @@ export class EnvironmentService {
         /**
          * (description)
-         * 
+         *
          * @param {restangular.IResponse} response (description)
          */
         let successFunction = (response: restangular.IResponse): void => {
@@ -8,7 +8,7 @@ describe(&quot;Services&quot;, () =&gt; {
         let profileService: ProfileService;
         let $rootScope: ng.IRootScopeService;
-        beforeEach(angular.mock.module("noosferoApp", ($translateProvider: angular.translate.ITranslateProvider) => {
+        beforeEach(angular.mock.module("main", ($translateProvider: angular.translate.ITranslateProvider) => {
             $translateProvider.translations('en', {});
         }));
@@ -22,7 +22,7 @@ export class ProfileService {
         this._currentProfilePromise.resolve(profile);
     }
-    setCurrentProfileByIdentifier(identifier: string) {
+    setCurrentProfileByIdentifier(identifier: string): ng.IPromise<noosfero.Profile> {
         this.resetCurrentProfile();
         return this.getByIdentifier(identifier).then((profile: noosfero.Profile) => {
             this.setCurrentProfile(profile);
@@ -40,7 +40,7 @@ describe(&quot;Restangular Service - base Class&quot;, () =&gt; {
     let objectRestService: ObjectRestService;
     let rootObjectRestService: RootObjectRestService;
-    beforeEach(angular.mock.module("noosferoApp", ($translateProvider: angular.translate.ITranslateProvider) => {
+    beforeEach(angular.mock.module("main", ($translateProvider: angular.translate.ITranslateProvider) => {
         $translateProvider.translations('en', {});
     }));
@@ -223,7 +223,7 @@ export abstract class RestangularService&lt;T extends noosfero.RestModel&gt; {
         restRequest = restangularObj.remove(queryParams, headers);
         restRequest
-            .then(this.getHandleSuccessFunction(deferred, this.modelRemovedEventEmitter))
+            .then(this.getHandleSuccessFunction(deferred, this.modelRemovedEventEmitter, obj))
             .catch(this.getHandleErrorFunction(deferred));
         return deferred.promise;
@@ -311,7 +311,7 @@ export abstract class RestangularService&lt;T extends noosfero.RestModel&gt; {
     }
     /** HANDLERS */
-    protected getHandleSuccessFunction<C>(deferred: ng.IDeferred<noosfero.RestResult<C | T | any>>, successEmitter: EventEmitter<T> = null): (response: restangular.IResponse) => void {
+    protected getHandleSuccessFunction<C>(deferred: ng.IDeferred<noosfero.RestResult<C | T | any>>, successEmitter: EventEmitter<T> = null, currentModel: T = null): (response: restangular.IResponse) => void {
         let self = this;
         /**
@@ -328,7 +328,11 @@ export abstract class RestangularService&lt;T extends noosfero.RestModel&gt; {
             deferred.resolve(resultModel);
             // emits the event if a successEmiter was provided in the successEmitter parameter
             if (successEmitter !== null) {
-                successEmitter.next(resultModel);
+                if (successEmitter !== this.modelRemovedEventEmitter) {
+                    successEmitter.next(resultModel.data);
+                } else {
+                    successEmitter.next(currentModel !== null ? currentModel : resultModel.data);
+                }
             }
         };
         return successFunction;
@@ -14,5 +14,7 @@ namespace noosfero {
         start_date: string;
         end_date: string;
         accept_comments: boolean;
+
+        permissions: string[];
     }
 }
 namespace noosfero {
     export interface Comment extends RestModel {
+        source_id: number;
         reply_of_id: number;
         reply_of: Comment;
         replies: Comment[];
@@ -0,0 +1,5 @@
+namespace noosfero {
+    export interface ModelWithPermissions {
+        permissions: string[];
+    }
+}
 \ No newline at end of file
@@ -78,5 +78,7 @@ namespace noosfero {
          * @returns {string} The Profile footer
          */
         custom_footer: string;
+
+        permissions: string[];
     }
 }
@@ -3,7 +3,6 @@ import {ComponentTestHelper, createClass} from &#39;../../../spec/component-test-hel
 import * as helpers from "../../../spec/helpers";
 import {Provider} from 'ng-forward';
 import {ComponentFixture} from 'ng-forward/cjs/testing/test-component-builder';
-
 let htmlTemplate = '<comment-paragraph-plugin-allow-comment [content]="ctrl.content" [paragraph-uuid]="ctrl.paragraphUuid" [article]="ctrl.article"></comment-paragraph-plugin-allow-comment>';
 describe("Components", () => {
@@ -23,6 +22,7 @@ describe(&quot;Components&quot;, () =&gt; {
         };
         let providers = [
+            new Provider('CommentService', { useValue: helpers.mocks.commentService } ),
             new Provider('CommentParagraphService', { useValue: serviceMock }),
             new Provider('CommentParagraphEventService', { useValue: eventServiceMock })
         ];
@@ -2,24 +2,27 @@ import {Component, Input, Inject} from &quot;ng-forward&quot;;
 import {SideCommentsComponent} from "../side-comments/side-comments.component";
 import {CommentParagraphEventService} from "../events/comment-paragraph-event.service";
 import {CommentParagraphService} from "../http/comment-paragraph.service";
+import {CommentService} from "./../../../lib/ng-noosfero-api/http/comment.service";
 @Component({
     selector: "comment-paragraph-plugin-allow-comment",
     templateUrl: "plugins/comment_paragraph/allow-comment/allow-comment.html",
     directives: [SideCommentsComponent]
 })
-@Inject("$scope", CommentParagraphEventService, CommentParagraphService)
+@Inject("$scope", CommentParagraphEventService, CommentParagraphService, CommentService)
 export class AllowCommentComponent {
     @Input() content: string;
     @Input() paragraphUuid: string;
     @Input() article: noosfero.Article;
-    commentsCount: number;
+    commentsCount: number = 0;
     display = false;
     constructor(private $scope: ng.IScope,
         private commentParagraphEventService: CommentParagraphEventService,
-        private commentParagraphService: CommentParagraphService) { }
+        private commentParagraphService: CommentParagraphService,
+        private commentService: CommentService
+    ) { }
     ngOnInit() {
         this.commentParagraphEventService.subscribeToggleCommentParagraph((article: noosfero.Article) => {
@@ -27,7 +30,19 @@ export class AllowCommentComponent {
             this.$scope.$apply();
         });
         this.commentParagraphService.commentParagraphCount(this.article, this.paragraphUuid).then((count: number) => {
-            this.commentsCount = count;
+            this.commentsCount = count ? count : 0;
+        });
+
+        this.commentService.subscribeToModelAdded((comment: noosfero.CommentParagraph) => {
+            if (comment.paragraph_uuid === this.paragraphUuid) {
+                this.commentsCount += 1;
+            };
+        });
+
+        this.commentService.subscribeToModelRemoved((comment: noosfero.CommentParagraph) => {
+            if (comment.paragraph_uuid === this.paragraphUuid) {
+                this.commentsCount -= (comment.replies) ? 1 + comment.replies.length : 1;
+            };
         });
     }
@@ -0,0 +1,58 @@
+import {ExportCommentButtonHotspotComponent} from "./export-comment-button.component";
+import {ComponentTestHelper, createClass} from '../../../spec/component-test-helper';
+import * as helpers from "../../../spec/helpers";
+import {Provider} from 'ng-forward';
+import {ComponentFixture} from 'ng-forward/cjs/testing/test-component-builder';
+import {PermissionDirective} from '../../../app/shared/components/permission/permission.directive';
+
+let htmlTemplate = '<export-comment-button-hotspot [article]="ctrl.article"></export-comment-button-hotspot>';
+
+describe("Components", () => {
+    describe("Export Comment Button Hotspot Component", () => {
+
+        let serviceMock = jasmine.createSpyObj("CommentParagraphService", ["getArticle"]);
+
+        let providers = [new Provider('CommentParagraphService', { useValue: serviceMock })]
+            .concat(helpers.provideFilters('translateFilter'));
+        let helper: ComponentTestHelper<ExportCommentButtonHotspotComponent>;
+
+        beforeEach(angular.mock.module("templates"));
+
+        beforeEach((done) => {
+            let cls = createClass({
+                template: htmlTemplate,
+                directives: [ExportCommentButtonHotspotComponent, PermissionDirective],
+                providers: providers,
+                properties: {
+                    article: {}
+                }
+            });
+            helper = new ComponentTestHelper<ExportCommentButtonHotspotComponent>(cls, done);
+        });
+
+        it('return true when comment paragraph is active', () => {
+            helper.component.article = <noosfero.Article>{ setting: { comment_paragraph_plugin_activate: true } };
+            helper.detectChanges();
+            expect(helper.component.isActivated()).toBeTruthy();
+            expect(helper.all('.export-comment-button').length).toEqual(1);
+        });
+
+        it('return false when comment paragraph is not active', () => {
+            expect(helper.component.isActivated()).toBeFalsy();
+            expect(helper.all('.export-comment-button').length).toEqual(0);
+        });
+
+        it('return false when article has no setting attribute', () => {
+            helper.component.article = <noosfero.Article>{};
+            helper.detectChanges();
+            expect(helper.component.isActivated()).toBeFalsy();
+            expect(helper.all('.export-comment-button').length).toEqual(0);
+        });
+
+        it('not display export comment button when user does not have permission', () => {
+            helper.component.article = <noosfero.Article>{ setting: { comment_paragraph_plugin_activate: true } };
+            helper.detectChanges();
+            expect(helper.find('.export-comment-button').attr('style')).toEqual("display: none; ");
+        });
+    });
+});
@@ -0,0 +1,23 @@
+import { Input, Inject, Component } from "ng-forward";
+import {Hotspot} from "../../../app/hotspot/hotspot.decorator";
+import {CommentParagraphService} from "../http/comment-paragraph.service";
+
+@Component({
+    selector: "export-comment-button-hotspot",
+    templateUrl: "plugins/comment_paragraph/hotspot/export-comment-button.html",
+})
+@Inject(CommentParagraphService)
+@Hotspot("article_extra_toolbar_buttons")
+export class ExportCommentButtonHotspotComponent {
+
+    @Input() article: noosfero.Article;
+    exportCommentPath: any;
+
+    constructor(private commentParagraphService: CommentParagraphService) { }
+
+    isActivated() {
+        this.exportCommentPath = ["/api/v1/articles/", this.article.id, "/comment_paragraph_plugin/export"].join("");
+        return this.article && this.article.setting && this.article.setting.comment_paragraph_plugin_activate;
+    }
+
+}
@@ -0,0 +1,5 @@
+<a href='{{ctrl.exportCommentPath}}' target="_self" 
+    class="btn btn-default btn-xs export-comment-button" ng-if="ctrl.isActivated()"
+    permission="ctrl.article.permissions" permission-action="allow_edit">
+  <i class="fa fa-fw fa-download"></i> {{"comment-paragraph-plugin.export" | translate}}
+</a>
@@ -8,7 +8,7 @@ describe(&quot;Services&quot;, () =&gt; {
         let $httpBackend: ng.IHttpBackendService;
         let commentParagraphService: CommentParagraphService;
-        beforeEach(angular.mock.module("noosferoApp", ($translateProvider: angular.translate.ITranslateProvider) => {
+        beforeEach(angular.mock.module("main", ($translateProvider: angular.translate.ITranslateProvider) => {
             $translateProvider.translations('en', {});
         }));
 import {AllowCommentComponent} from "./allow-comment/allow-comment.component";
+import {ExportCommentButtonHotspotComponent} from "./hotspot/export-comment-button.component";
 import {CommentParagraphFormHotspotComponent} from "./hotspot/comment-paragraph-form.component";
 import {DiscussionEditorComponent} from "./article/cms/discussion-editor/discussion-editor.component";
 import {CommentParagraphArticleContentHotspotComponent} from "./hotspot/article-content/article-content.component";
 import {DiscussionBlockComponent} from "./block/discussion/discussion-block.component";
 export let mainComponents: any = [AllowCommentComponent, DiscussionEditorComponent, DiscussionBlockComponent];
-export let hotspots: any = [CommentParagraphFormHotspotComponent, CommentParagraphArticleContentHotspotComponent];
+export let hotspots: any = [ExportCommentButtonHotspotComponent, CommentParagraphFormHotspotComponent, CommentParagraphArticleContentHotspotComponent];
 {
   "comment-paragraph-plugin.title": "Paragraph Comments",
+  "comment-paragraph-plugin.export": "Export Comments",
   "comment-paragraph-plugin.discussion.editor.start_date.label": "From",
   "comment-paragraph-plugin.discussion.editor.end_date.label": "To",
   "comment-paragraph-plugin.discussion.header": "Open for comments",
 {
   "comment-paragraph-plugin.title": "Comentários por Parágrafo",
+  "comment-paragraph-plugin.export": "Exportar Comentários",
   "comment-paragraph-plugin.discussion.editor.start_date.label": "De",
   "comment-paragraph-plugin.discussion.editor.end_date.label": "Até",
   "comment-paragraph-plugin.discussion.header": "Aberto para comentários",
@@ -0,0 +1,5 @@
+namespace noosfero {
+    export interface CommentParagraph extends noosfero.Comment {
+        paragraph_uuid?: string;
+    }
+}
 \ No newline at end of file
@@ -85,24 +85,24 @@ export var mocks: any = {
             mocks.articleService.articleAddedFn = fn;
         },
         modelRemovedEventEmitter:
-            {
-                subscribe: (fn: Function) => {
-                    mocks.articleService.articleRemovedFn = fn;
-                },
-                next: (param: any) => {
-                    mocks.articleService.articleRemovedFn(param);
-                }
+        {
+            subscribe: (fn: Function) => {
+                mocks.articleService.articleRemovedFn = fn;
+            },
+            next: (param: any) => {
+                mocks.articleService.articleRemovedFn(param);
             }
+        }
         ,
         modelAddedEventEmitter:
-            {
-                subscribe: (fn: Function) => {
-                    mocks.articleService.articleAddedFn = fn;
-                },
-                next: (param: any) => {
-                    mocks.articleService.articleAddedFn(param);
-                }
+        {
+            subscribe: (fn: Function) => {
+                mocks.articleService.articleAddedFn = fn;
+            },
+            next: (param: any) => {
+                mocks.articleService.articleAddedFn(param);
             }
+        }
         ,
         remove: (article: noosfero.Article) => {
             return {
@@ -156,6 +156,34 @@ export var mocks: any = {
         instant: () => { }
     },
     commentService: {
+        commentRemovedFn: null,
+        commentAddedFn: null,
+        subscribeToModelRemoved: (fn: Function) => {
+            mocks.commentService.commentRemovedFn = fn;
+        },
+        subscribeToModelAdded: (fn: Function) => {
+            mocks.commentService.commentAddedFn = fn;
+        },
+        modelRemovedEventEmitter:
+        {
+            subscribe: (fn: Function) => {
+                mocks.commentService.commentRemovedFn = fn;
+            },
+            next: (param: any) => {
+                mocks.commentService.commentRemovedFn(param);
+            }
+        }
+        ,
+        modelAddedEventEmitter:
+        {
+            subscribe: (fn: Function) => {
+                mocks.articleService.commentAddedFn = fn;
+            },
+            next: (param: any) => {
+                mocks.articleService.commentAddedFn(param);
+            }
+        }
+        ,
         getByArticle: (article: noosfero.Article) => {
             return Promise.resolve({ data: {} });
         }
+%panel-head-theme {
+  border: none;
+  border-radius: 3px 3px 0 0;
+  font-family: "Ubuntu Medium";
+  font-size: 15px;
+  font-variant: normal;
+  font-weight: normal;
+  line-height: 30px;
+  padding: 15px 15px 15px 15px;
+  text-transform: capitalize;
+  background-size: 30px 30px;
+  background: #DAE1C4 !important;
+  color: #4F9CAC;
+}
+
 .block-head-with-icon {
   padding: 15px 15px 15px 55px;
 }
+.content-wrapper .block .panel-heading,
+.content-wrapper .side-options .panel-heading {
+  @extend %panel-head-theme;
+}
+
 .content-wrapper .block {
-  .panel-heading {
-    border: none;
-    border-radius: 3px 3px 0 0;
-    font-family: "Ubuntu Medium";
-    font-size: 15px;
-    font-variant: normal;
-    font-weight: normal;
-    line-height: 30px;
-    padding: 15px 15px 15px 15px;
-    text-transform: capitalize;
-    background-size: 30px 30px;
-    background: #DAE1C4;
-    color: #4F9CAC;
-  }
   &.membersblock {
     .panel-heading {
+.skin-yellow {
+  .navbar-inverse .navbar-toggle {
+    border-color: #D49F18;
+  }
+
+  .container-fluid .navbar-header .navbar-toggle {
+    &:hover, &:focus {
+      background-color: #f5b025;
+    }
+  }
+}
+
 .navbar {
   min-height: 123px;
   background-color: #f9c404;
+$selected-color: #f6c445;
+
 @font-face {
   font-family: 'Ubuntu';
   font-weight: 300;
@@ -19,9 +21,51 @@
   src: url('../assets/fonts/participa-consulta/Ubuntu-RI.ttf');
 }
-.skin-whbl .notifications-list .item-footer {
-  background: #DAE1C4;
-  color: #4F9CAC;
+.skin-yellow {
+  @extend %skin-base;
+
+  .notifications-list .item-footer {
+    background: #DAE1C4;
+    color: #4F9CAC;
+  }
+
+  .navbar-nav .open > a,
+  .navbar-nav .open > a:hover,
+  .navbar-nav .open > a:focus {
+    background-color: $selected-color;
+    color: #000;
+  }
+
+  .nav .open > a,
+  .nav .open > a:hover,
+  .nav .open > a:focus {
+    border: none;
+  }
+
+  .dropdown-menu {
+     li > a:hover {
+      color: #555;
+      background-color: #F7F7F7;
+    }
+
+    .active > a,
+    .active > a:hover,
+    .active > a:focus {
+      color: #000;
+      background-color: #CCC;
+    }
+  }
+
+  .nav .caret {
+    border-bottom-color: #fff !important;
+    border-top-color: #fff !important;
+  }
+
+  .nav .open .caret {
+    border-bottom-color: #000 !important;
+    border-top-color: #000 !important;
+  }
+
 }
 .profile-header, .profile-footer{
@@ -33,3 +77,8 @@
     background-color: #7E7E7E;
   }
 }
+
+.ats-switch {
+  border: 0px;
+  border-color: transparent;
+}
	@@ -50,3 +50,31 @@ See some important folders bellow:		@@ -50,3 +50,31 @@ See some important folders bellow:
50	1. Create an app folder inside custom-theme and add your custom scss files	50	1. Create an app folder inside custom-theme and add your custom scss files
51	1. Put the templates that you want to override in the same structure from the main application source, e.g.:	51	1. Put the templates that you want to override in the same structure from the main application source, e.g.:
52	`src/app/profile/profile.html` will be overriden by `themes/custom-theme/app/profile/profile.html`	52	`src/app/profile/profile.html` will be overriden by `themes/custom-theme/app/profile/profile.html`
		53	+
		54	+## Change skin
		55	+
		56	+- Create a any scss file into your theme folder structure
		57	+- Extend your skin css class from `%skin-base` scss placeholder selector. Something like this:
		58	+
		59	+```sass
		60	+.skin-custom {
		61	+ @extend %skin-base
		62	+}
		63	+```
		64	+- Configure application to use the new theme, e.g.:
		65	+`npm config set angular-theme:skin custom-skin`
		66	+
		67	+- Start the application with `npm start` scripts ou make a build
		68	+
		69	+## Development environment
		70	+
		71	+## Known Issues
		72	+
		73	+### Message Translation: angular-i18n
		74	+
		75	+ - Plural Interpolation only working when current language is En (English)
		76	+
		77	+ `Plural Function not found for locale`
		78	+
		79	+ For some reason the messageformat installed on bower_component directory was an older version. Removing the bower_components directory
		80	+and runing `bower install` solved the problem
	@@ -3,6 +3,8 @@		@@ -3,6 +3,8 @@
3	var path = require('path');	3	var path = require('path');
4	var gulp = require('gulp');	4	var gulp = require('gulp');
5	var conf = require('./conf');	5	var conf = require('./conf');
		6	+var map = require('map-stream');
		7	+var transform = require('vinyl-transform');
6		8
7	var $ = require('gulp-load-plugins')();	9	var $ = require('gulp-load-plugins')();
8		10
	@@ -40,3 +42,34 @@ gulp.task('inject', ['scripts', 'styles'], function () {		@@ -40,3 +42,34 @@ gulp.task('inject', ['scripts', 'styles'], function () {
40	.pipe(wiredep(_.extend({}, conf.wiredep)))	42	.pipe(wiredep(_.extend({}, conf.wiredep)))
41	.pipe(gulp.dest(path.join(conf.paths.tmp, '/serve')));	43	.pipe(gulp.dest(path.join(conf.paths.tmp, '/serve')));
42	});	44	});
		45	+
		46	+/**
		47	+* Replace the default theme skin to a npm config
		48	+*
		49	+* Uses "vinyl-transform" + "map-stream" to open the
		50	+* js file and rewrite the source file into the same
		51	+* destination
		52	+*
		53	+* @see https://www.npmjs.com/package/vinyl-transform
		54	+* @see https://www.npmjs.com/package/map-stream
		55	+*/
		56	+gulp.task('inject-skin', function () {
		57	+
		58	+ if(conf.paths.skin) {
		59	+
		60	+ $.util.log('Configured theme skin:', conf.paths.skin);
		61	+
		62	+ var replaceSkin = transform(function(filename) {
		63	+ return map(function(file, next) {
		64	+ var contents = file.toString();
		65	+ contents = contents.replace('skin-whbl', conf.paths.skin);
		66	+ return next(null, contents);
		67	+ });
		68	+ });
		69	+
		70	+ gulp.src(path.join(conf.paths.src,'./noosfero.js'))
		71	+ .pipe(replaceSkin)
		72	+ .pipe(gulp.dest(conf.paths.src));
		73	+ }
		74	+
		75	+});
	@@ -9,7 +9,7 @@ var browserSync = require('browser-sync');		@@ -9,7 +9,7 @@ var browserSync = require('browser-sync');
9	var $ = require('gulp-load-plugins')();	9	var $ = require('gulp-load-plugins')();
10		10
11		11
12	-gulp.task('scripts-reload', function() {	12	+gulp.task('scripts-reload', ['inject-skin'], function() {
13	return buildScripts()	13	return buildScripts()
14	.pipe(browserSync.stream());	14	.pipe(browserSync.stream());
15	});	15	});
	@@ -0,0 +1,31 @@		@@ -0,0 +1,31 @@
		1	+import {DesignModeService} from './designMode.service';
		2	+
		3	+describe('DesignMode Service', () => {
		4	+ let service: DesignModeService;
		5	+
		6	+ beforeEach(() => {
		7	+ service = new DesignModeService();
		8	+ });
		9	+
		10	+ it('has the designModeOn equals false as default', () => {
		11	+ expect(service.isInDesignMode()).toBeFalsy();
		12	+ });
		13	+
		14	+ it('allows set the designMode value', () => {
		15	+ spyOn(service.onToggle, 'next').and.stub();
		16	+ service.setInDesignMode(true);
		17	+ expect(service.isInDesignMode).toBeTruthy();
		18	+ });
		19	+
		20	+ it('emits the onToggle event when changing the designModeOn property', () => {
		21	+ spyOn(service.onToggle, 'next').and.stub();
		22	+ service.setInDesignMode(true);
		23	+ expect(service.onToggle.next).toHaveBeenCalled();
		24	+ });
		25	+
		26	+ it('does not emit onToggle event when there is no change on designModeOn property', () => {
		27	+ spyOn(service.onToggle, 'next').and.stub();
		28	+ service.setInDesignMode(false);
		29	+ expect(service.onToggle.next).not.toHaveBeenCalled();
		30	+ });
		31	+});
0	\ No newline at end of file	32	\ No newline at end of file
	@@ -0,0 +1,23 @@		@@ -0,0 +1,23 @@
		1	+import {Component, Injectable, Output, EventEmitter} from 'ng-forward';
		2	+import {BodyStateClassesService} from '../../layout/services/body-state-classes.service';
		3	+
		4	+@Injectable()
		5	+export class DesignModeService {
		6	+ @Output() onToggle: EventEmitter<boolean> = new EventEmitter<boolean>();
		7	+
		8	+ private designModeOn: boolean = false;
		9	+
		10	+ isInDesignMode(): boolean {
		11	+ return this.designModeOn;
		12	+ }
		13	+
		14	+ setInDesignMode(value: boolean) {
		15	+ if (this.designModeOn !== value) {
		16	+ this.designModeOn = value;
		17	+ this.onToggle.next(this.designModeOn);
		18	+ }
		19	+ }
		20	+
		21	+ constructor() {
		22	+ }
		23	+}
0	\ No newline at end of file	24	\ No newline at end of file
	@@ -0,0 +1,59 @@		@@ -0,0 +1,59 @@
		1	+import {ComponentTestHelper, createClass} from '../../../spec/component-test-helper';
		2	+import * as helpers from '../../../spec/helpers';
		3	+import {DesignModeTogglerComponent} from './designModeToggler.component';
		4	+import {DesignModeService} from './designMode.service';
		5	+
		6	+describe('DesignModeToggler Component', () => {
		7	+ const htmlTemplate: string = '<noosfero-design-toggler></noosfero-design-toggler>';
		8	+
		9	+ let helper: ComponentTestHelper<DesignModeTogglerComponent>;
		10	+ beforeEach(() => {
		11	+ angular.mock.module('templates');
		12	+ angular.mock.module('ngSanitize');
		13	+ angular.mock.module('toggle-switch');
		14	+ });
		15	+
		16	+ let designModeService: DesignModeService;
		17	+ beforeEach((done) => {
		18	+ designModeService = new DesignModeService();
		19	+ let cls = createClass({
		20	+ template: htmlTemplate,
		21	+ directives: [DesignModeTogglerComponent],
		22	+ providers: [
		23	+ helpers.createProviderToValue('DesignModeService', designModeService)
		24	+ ]
		25	+ });
		26	+ helper = new ComponentTestHelper<DesignModeTogglerComponent>(cls, done);
		27	+ });
		28	+
		29	+ it('changes css classes representing the switch is on or off', () => {
		30	+ expect(helper.debugElement.query('div.switch-animate').hasClass('switch-off')).toBeTruthy();
		31	+ expect(helper.debugElement.query('div.switch-animate').hasClass('switch-on')).toBeFalsy();
		32	+ helper.component.inDesignMode = true;
		33	+ helper.detectChanges();
		34	+ expect(helper.debugElement.query('div.switch-animate').hasClass('switch-on')).toBeTruthy();
		35	+ expect(helper.debugElement.query('div.switch-animate').hasClass('switch-off')).toBeFalsy();
		36	+ });
		37	+
		38	+ it('emits event with value "true" when changing inDesignMode to On', (done) => {
		39	+ designModeService.onToggle.subscribe((designModeOn: boolean) => {
		40	+ expect(designModeOn).toBeTruthy();
		41	+ done();
		42	+ });
		43	+ helper.component.inDesignMode = true;
		44	+ helper.detectChanges();
		45	+ });
		46	+
		47	+ it('emits events with value "false" when changing inDesignMode to Off', (done) => {
		48	+ helper.component.inDesignMode = true;
		49	+ helper.detectChanges();
		50	+
		51	+ designModeService.onToggle.subscribe((designModeOn: boolean) => {
		52	+ expect(designModeOn).toBeFalsy();
		53	+ done();
		54	+ });
		55	+
		56	+ helper.component.inDesignMode = false;
		57	+ helper.detectChanges();
		58	+ });
		59	+});
0	\ No newline at end of file	60	\ No newline at end of file
	@@ -0,0 +1,24 @@		@@ -0,0 +1,24 @@
		1	+import {Component, Inject} from 'ng-forward';
		2	+import {DesignModeService} from './designMode.service';
		3	+@Component({
		4	+ selector: 'noosfero-design-toggler',
		5	+ templateUrl: 'app/admin/layout-edit/designModeToggler.html'
		6	+})
		7	+@Inject(DesignModeService)
		8	+export class DesignModeTogglerComponent {
		9	+
		10	+ icon: string = " <i class='glyphicon glyphicon-wrench'></i> ";
		11	+
		12	+ constructor(private designModeService: DesignModeService) {
		13	+ }
		14	+
		15	+ private _inDesignMode: boolean = false;
		16	+
		17	+ get inDesignMode(): boolean {
		18	+ return this.designModeService.isInDesignMode();
		19	+ };
		20	+
		21	+ set inDesignMode(value: boolean) {
		22	+ this.designModeService.setInDesignMode(value);
		23	+ };
		24	+}
0	\ No newline at end of file	25	\ No newline at end of file
	@@ -0,0 +1,8 @@		@@ -0,0 +1,8 @@
		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>
0	\ No newline at end of file	9	\ No newline at end of file
	@@ -65,16 +65,36 @@ describe("Components", () => {		@@ -65,16 +65,36 @@ describe("Components", () => {
65	expect(state.transitionTo).toHaveBeenCalled();	65	expect(state.transitionTo).toHaveBeenCalled();
66	});	66	});
67		67
		68	+ it("hide button to delete article when user doesn't have permission", () => {
		69	+ expect(helper.find(".article-toolbar .delete-article").attr('style')).toEqual("display: none; ");
		70	+ });
		71	+
		72	+ it("hide button to edit article when user doesn't have permission", () => {
		73	+ expect(helper.find(".article-toolbar .edit-article").attr('style')).toEqual("display: none; ");
		74	+ });
		75	+
		76	+ it("show button to edit article when user has permission", () => {
		77	+ (<any>helper.component['article'])['permissions'] = ['allow_edit'];
		78	+ helper.detectChanges();
		79	+ expect(helper.find(".article-toolbar .edit-article").attr('style')).toEqual('');
		80	+ });
		81	+
		82	+ it("show button to delete article when user has permission", () => {
		83	+ (<any>helper.component['article'])['permissions'] = ['allow_delete'];
		84	+ helper.detectChanges();
		85	+ expect(helper.find(".article-toolbar .delete-article").attr('style')).toEqual('');
		86	+ });
		87	+
68	/**	88	/**
69	* Execute the delete method on the target component	89	* Execute the delete method on the target component
70	*/	90	*/
71	function doDeleteArticle() {	91	function doDeleteArticle() {
72	// Create a mock for the notification service confirmation	92	// Create a mock for the notification service confirmation
73	- spyOn(helper.component.notificationService, 'confirmation').and.callFake(function (params: Function) {	93	+ spyOn(helper.component.notificationService, 'confirmation').and.callFake(function(params: Function) {
74		94
75	});	95	});
76	// Create a mock for the ArticleService removeArticle method	96	// Create a mock for the ArticleService removeArticle method
77	- spyOn(helper.component.articleService, 'remove').and.callFake(function (param: noosfero.Article) {	97	+ spyOn(helper.component.articleService, 'remove').and.callFake(function(param: noosfero.Article) {
78		98
79	return {	99	return {
80	catch: () => { }	100	catch: () => { }
	@@ -19,7 +19,6 @@ describe("Components", () => {		@@ -19,7 +19,6 @@ describe("Components", () => {
19		19
20	let properties = { article: { id: 1 }, parent: <any>null };	20	let properties = { article: { id: 1 }, parent: <any>null };
21	function createComponent() {	21	function createComponent() {
22	- // postCommentEventService = jasmine.createSpyObj("postCommentEventService", ["subscribe"]);
23	let providers = [	22	let providers = [
24	helpers.createProviderToValue('CommentService', commentService),	23	helpers.createProviderToValue('CommentService', commentService),
25	helpers.createProviderToValue('NotificationService', helpers.mocks.notificationService),	24	helpers.createProviderToValue('NotificationService', helpers.mocks.notificationService),