Merging with master

Merge remote-tracking branch 'origin/master' into login-block

Merging with master
Merge remote-tracking branch 'origin/master' into login-block
Carlos Purificação
2 parents b420f699 ab10b960
Showing 204 changed files with 4245 additions and 1182 deletions Show diff stats
bower.json
gulp/build.js
gulp/conf.js
gulp/languages.js
gulp/server.js
gulp/styles.js
gulp/watch.js
karma.conf.js
layouts/angular-layout.html.erb
package.json
src/app/article/article-default-view.component.ts
src/app/article/article.html
src/app/article/basic-editor.component.spec.ts
src/app/article/basic-editor.component.ts
src/app/article/basic-editor.html
src/app/article/cms/article-editor/article-editor.component.ts
src/app/article/cms/basic-editor/basic-editor.component.ts
src/app/article/cms/basic-editor/basic-editor.html
src/app/article/cms/basic-editor/basic-editor.scss
src/app/article/cms/basic-options/basic-options.component.ts
@@ -34,10 +34,14 @@
     "angular-dynamic-locale": "^0.1.30",
     "angular-i18n": "^1.5.0",
     "angular-load": "^0.4.1",
-    "angular-translate-interpolation-messageformat": "^2.10.0"
+    "angular-translate-interpolation-messageformat": "^2.10.0",
+  	"angular-bind-html-compile": "^1.2.1",
+	  "angular-click-outside": "^2.7.1"
   },
   "devDependencies": {
-    "angular-mocks": "~1.5.0"
+    "angular-mocks": "~1.5.0",
+    "ng-ckeditor": "^0.2.1",
+    "ckeditor": "^4.5.8"
   },
   "overrides": {
     "bootstrap-sass": {
@@ -6,6 +6,7 @@ var rename = require(&#39;gulp-rename&#39;);
 var insert = require('gulp-insert');
 var merge = require('merge-stream');
 var conf = require('./conf');
+var languages = require('./languages');
  
 var themeName = conf.paths.theme.replace('-', ' ');
 themeName = themeName.charAt(0).toUpperCase() + themeName.slice(1);
@@ -16,25 +17,31 @@ var $ = require(&#39;gulp-load-plugins&#39;)({
 });
  
 gulp.task('partials', function () {
-  var srcPaths = [path.join(conf.paths.tmp, '/serve/app/**/*.html')];
-  conf.paths.allSources.forEach(function(src) {
-    srcPaths.push(path.join(src, '/app/**/*.html'));
+  var merged = merge();
+  ['app', conf.paths.plugins].forEach(function(partialPath) {
+    var srcPaths = [path.join(conf.paths.tmp, '/serve/app/**/*.html')];
+    conf.paths.allSources.forEach(function(src) {
+      srcPaths.push(path.join(src, partialPath, '/**/*.html'));
+    });
+    merged.add(gulp.src(srcPaths)
+      .pipe($.minifyHtml({
+        empty: true,
+        spare: true,
+        quotes: true
+      }))
+      .pipe($.angularTemplatecache('templateCacheHtml-'+partialPath+'.js', {
+        module: 'noosferoApp',
+        root: partialPath
+      }))
+      .pipe(gulp.dest(conf.paths.tmp + '/partials/')));
   });
-  return gulp.src(srcPaths)
-    .pipe($.minifyHtml({
-      empty: true,
-      spare: true,
-      quotes: true
-    }))
-    .pipe($.angularTemplatecache('templateCacheHtml.js', {
-      module: 'noosferoApp',
-      root: 'app'
-    }))
-    .pipe(gulp.dest(conf.paths.tmp + '/partials/'));
+  return merged;
 });
  
 gulp.task('html', ['inject', 'partials'], function () {
-  var partialsInjectFile = gulp.src(path.join(conf.paths.tmp, '/partials/templateCacheHtml.js'), { read: false });
+  var partialsInjectFile = gulp.src([
+    path.join(conf.paths.tmp, '/partials/templateCacheHtml-app.js'),
+    path.join(conf.paths.tmp, '/partials/templateCacheHtml-plugins.js')], { read: false });
   var partialsInjectOptions = {
     starttag: '<!-- inject:partials -->',
     ignorePath: path.join(conf.paths.tmp, '/partials'),
@@ -73,6 +80,8 @@ gulp.task(&#39;html&#39;, [&#39;inject&#39;, &#39;partials&#39;], function () {
     .pipe($.useref())
     .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,
@@ -93,6 +102,10 @@ gulp.task(&#39;fonts&#39;, function () {
     .pipe(gulp.dest(path.join(conf.paths.dist, '/fonts/')));
 });
  
+gulp.task('ckeditor', function () {
+  return gulp.src(['bower_components/ng-ckeditor/**/*']).pipe(gulp.dest(path.join(conf.paths.dist, '/ng-ckeditor')));
+});
+
 gulp.task('locale', function () {
   return gulp.src([
     path.join("bower_components/angular-i18n", '*.js'),
@@ -124,6 +137,10 @@ gulp.task(&#39;clean-docs&#39;, [], function() {
     return $.del([path.join(conf.paths.docs, '/')]);
 });
  
+gulp.task('plugin-languages', ['locale'], function() {
+  return languages.pluginLanguages(conf.paths.dist);
+});
+
 gulp.task('noosfero', ['html'], function () {
     var layouts = gulp.src('layouts/**/*')
       .pipe(gulp.dest(path.join(conf.paths.dist, "layouts")));
@@ -136,4 +153,4 @@ gulp.task(&#39;noosfero&#39;, [&#39;html&#39;], function () {
     return merge(layouts, theme, index);
 });
  
-gulp.task('build', ['html', 'fonts', 'other', 'locale', 'noosfero']);
+gulp.task('build', ['html', 'fonts', 'other', 'locale', 'ckeditor', 'plugin-languages', 'noosfero']);
@@ -15,11 +15,13 @@ var path = require(&#39;path&#39;);
  */
 exports.paths = {
   src: 'src',
+  plugins: 'plugins',
   dist: 'dist',
   tmp: '.tmp',
   e2e: 'e2e',
   docs: 'docs',
-  themes: 'themes'
+  themes: 'themes',
+  languages: 'languages'
 };
 exports.configTheme = function(theme) {
   exports.paths.theme = theme || "angular-default";
@@ -34,7 +36,7 @@ exports.configTheme(argv.theme);
  *  to inject css preprocessor deps and js files in karma
  */
 exports.wiredep = {
-  exclude: [/jquery/, /\/bootstrap\.js$/, /\/bootstrap-sass\/.*\.js/, /\/bootstrap\.css/],
+  exclude: [/jquery/, /\/bootstrap\.js$/, /\/bootstrap-sass\/.*\.js/, /\/bootstrap\.css/, /ckeditor/],
   directory: 'bower_components'
 };
  
@@ -0,0 +1,29 @@
+'use strict';
+
+var path = require('path');
+var gulp = require('gulp');
+var merge = require('merge-stream');
+var conf = require('./conf');
+var mergeJson = require('gulp-merge-json');
+var glob = require("glob");
+
+exports.pluginLanguages = function(dest) {
+  var merged = merge();
+  glob(path.join(conf.paths.src, conf.paths.languages, "*.json"), function (er, files) {
+    files.forEach(function(file) {
+      merged.add(exports.pluginLanguage(file, dest));
+    });
+  });
+  return merged;
+}
+
+exports.pluginLanguage = function(file, dest) {
+  var language = file.split('/').pop().replace('\.json','');
+  return gulp.src(path.join(conf.paths.src, '**', conf.paths.languages, language+'.json'))
+    .pipe(mergeJson(path.join(conf.paths.languages, language+'.json')))
+    .pipe(gulp.dest(dest))
+}
+
+gulp.task('serve-languages', function() {
+  return exports.pluginLanguages(path.join(conf.paths.tmp, '/serve'));
+});
@@ -45,7 +45,7 @@ browserSync.use(browserSyncSpa({
   selector: '[ng-app]'// Only needed for angular apps
 }));
  
-gulp.task('serve', ['watch'], function () {
+gulp.task('serve', ['serve-languages', 'watch'], function () {
   var srcPaths = [path.join(conf.paths.tmp, '/serve')];
   conf.paths.allSources.reverse().forEach(function(src) {
     srcPaths.push(src);
@@ -31,6 +31,7 @@ var buildStyles = function() {
   ];
   conf.paths.allSources.forEach(function(src) {
     srcPaths.push(path.join(src, '/app/**/*.scss'));
+    srcPaths.push(path.join(src, conf.paths.plugins, '/**/*.scss'));
   });
   var injectFiles = gulp.src(srcPaths, { read: false });
  
@@ -3,6 +3,7 @@
 var path = require('path');
 var gulp = require('gulp');
 var conf = require('./conf');
+var languages = require('./languages');
  
 var browserSync = require('browser-sync');
  
@@ -16,7 +17,8 @@ gulp.task(&#39;watch&#39;, [&#39;inject&#39;], function () {
  
   gulp.watch([
     path.join(conf.paths.src, '/app/**/*.css'),
-    path.join(conf.paths.src, '/app/**/*.scss')
+    path.join(conf.paths.src, '/app/**/*.scss'),
+    path.join(conf.paths.src, conf.paths.plugins, '/**/*.scss')
   ], function(event) {
     if(isOnlyChange(event)) {
       gulp.start('styles-reload');
@@ -33,9 +35,14 @@ gulp.task(&#39;watch&#39;, [&#39;inject&#39;], function () {
     }
   });
  
+  gulp.watch(path.join(conf.paths.src, '**', conf.paths.languages, '*.json'), function(event) {
+      languages.pluginLanguage(event.path, path.join(conf.paths.tmp, '/serve'));
+  });
+
   var watchPaths = [];
   conf.paths.allSources.forEach(function(src) {
     watchPaths.push(path.join(src, '/app/**/*.html'));
+    watchPaths.push(path.join(src, conf.paths.plugins, '/**/*.html'));
   });
   gulp.watch(watchPaths, function(event) {
     browserSync.reload(event.path);
@@ -49,7 +49,7 @@ var _ = require(&#39;lodash&#39;);
 var wiredep = require('wiredep');
  
 var pathSrcHtml = [
-    path.join('./src/app/**/*.html')
+    path.join('./src/**/*.html')
 ];
  
 var glob = require("glob");
-<% if params[:angular_theme_old] || request.fullpath.start_with?('/myprofile') %>
+<% if params[:angular_theme_old] %>
   <%= render file: Rails.root.join("app/views/layouts/application-ng.html.erb"), use_full_path: false %>
 <% else %>
   <%= from_theme_include(current_theme, "index") %>
@@ -49,6 +49,7 @@
     "gulp-insert": "^0.5.0",
     "gulp-inject": "~3.0.0",
     "gulp-load-plugins": "~0.10.0",
+    "gulp-merge-json": "^0.4.0",
     "gulp-minify-css": "~1.2.1",
     "gulp-minify-html": "~1.0.4",
     "gulp-ng-annotate": "~1.1.0",
 import { bundle, Input, Inject, Component, Directive } from 'ng-forward';
 import {ArticleBlogComponent} from "./types/blog/blog.component";
 import {CommentsComponent} from "./comment/comments.component";
+import {MacroDirective} from "./macro/macro.directive";
+import {ArticleToolbarHotspotComponent} from "../hotspot/article-toolbar-hotspot.component";
+import {ArticleContentHotspotComponent} from "../hotspot/article-content-hotspot.component";
  
 /**
  * @ngdoc controller
@@ -30,7 +33,9 @@ export class ArticleDefaultViewComponent {
 @Component({
     selector: 'noosfero-article',
     template: 'not-used',
-    directives: [ArticleDefaultViewComponent, ArticleBlogComponent, CommentsComponent]
+    directives: [ArticleDefaultViewComponent, ArticleBlogComponent,
+        CommentsComponent, MacroDirective, ArticleToolbarHotspotComponent,
+        ArticleContentHotspotComponent]
 })
 @Inject("$element", "$scope", "$injector", "$compile")
 export class ArticleViewComponent {
@@ -40,7 +45,8 @@ export class ArticleViewComponent {
     directiveName: string;
  
     ngOnInit() {
-        let specificDirective = 'noosfero' + this.article.type;
+        let articleType = this.article.type.replace(/::/, '');
+        let specificDirective = 'noosfero' + articleType;
         this.directiveName = "noosfero-default-article";
         if (this.$injector.has(specificDirective + 'Directive')) {
             this.directiveName = specificDirective.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
@@ -53,6 +59,5 @@ export class ArticleViewComponent {
         private $scope: ng.IScope,
         private $injector: ng.auto.IInjectorService,
         private $compile: ng.ICompileService) {
-
     }
 }
@@ -4,6 +4,10 @@
   </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>
+    <noosfero-hotspot-article-toolbar [article]="ctrl.article"></noosfero-hotspot-article-toolbar>
     <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>
@@ -16,9 +20,9 @@
       </span>
     </div>
   </div>
-
+  <noosfero-hotspot-article-content [article]="ctrl.article"></noosfero-hotspot-article-content>
   <div class="page-body">
-    <div ng-bind-html="ctrl.article.body"></div>
+    <div bind-html-compile="ctrl.article.body"></div>
   </div>
  
   <noosfero-comments [article]="ctrl.article"></noosfero-comments>
@@ -1,55 +0,0 @@
-import {quickCreateComponent} from "../../spec/helpers";
-import {BasicEditorComponent} from "./basic-editor.component";
-
-
-describe("Article BasicEditor", () => {
-
-    let $rootScope: ng.IRootScopeService;
-    let $q: ng.IQService;
-    let articleServiceMock: any;
-    let profileServiceMock: any;
-    let $state: any;
-    let profile = { id: 1 };
-    let notification: any;
-
-
-    beforeEach(inject((_$rootScope_: ng.IRootScopeService, _$q_: ng.IQService) => {
-        $rootScope = _$rootScope_;
-        $q = _$q_;
-    }));
-
-    beforeEach(() => {
-        $state = jasmine.createSpyObj("$state", ["transitionTo"]);
-        notification = jasmine.createSpyObj("notification", ["success"]);
-        profileServiceMock = jasmine.createSpyObj("profileServiceMock", ["getCurrentProfile"]);
-        articleServiceMock = jasmine.createSpyObj("articleServiceMock", ["createInProfile"]);
-
-        let getCurrentProfileResponse = $q.defer();
-        getCurrentProfileResponse.resolve(profile);
-
-        let articleCreate = $q.defer();
-        articleCreate.resolve({ data: { path: "path", profile: { identifier: "profile" } } });
-
-        profileServiceMock.getCurrentProfile = jasmine.createSpy("getCurrentProfile").and.returnValue(getCurrentProfileResponse.promise);
-        articleServiceMock.createInProfile = jasmine.createSpy("createInProfile").and.returnValue(articleCreate.promise);
-    });
-
-    it("create an article in the current profile when save", done => {
-        let component: BasicEditorComponent = new BasicEditorComponent(articleServiceMock, profileServiceMock, $state, notification);
-        component.save();
-        $rootScope.$apply();
-        expect(profileServiceMock.getCurrentProfile).toHaveBeenCalled();
-        expect(articleServiceMock.createInProfile).toHaveBeenCalledWith(profile, component.article);
-        done();
-    });
-
-    it("got to the new article page and display an alert when saving sucessfully", done => {
-        let component: BasicEditorComponent = new BasicEditorComponent(articleServiceMock, profileServiceMock, $state, notification);
-        component.save();
-        $rootScope.$apply();
-        expect($state.transitionTo).toHaveBeenCalledWith("main.profile.page", { page: "path", profile: "profile" });
-        expect(notification.success).toHaveBeenCalled();
-        done();
-    });
-
-});
@@ -1,35 +0,0 @@
-import {StateConfig, Component, Inject, provide} from 'ng-forward';
-import {ArticleService} from "../../lib/ng-noosfero-api/http/article.service";
-import {ProfileService} from "../../lib/ng-noosfero-api/http/profile.service";
-import {NotificationService} from "../shared/services/notification.service.ts";
-
-@Component({
-    selector: 'article-basic-editor',
-    templateUrl: "app/article/basic-editor.html",
-    providers: [
-        provide('articleService', { useClass: ArticleService }),
-        provide('profileService', { useClass: ProfileService }),
-        provide('notification', { useClass: NotificationService })
-    ]
-})
-@Inject(ArticleService, ProfileService, "$state", NotificationService)
-export class BasicEditorComponent {
-
-    article: noosfero.Article = <noosfero.Article>{};
-
-    constructor(private articleService: ArticleService,
-        private profileService: ProfileService,
-        private $state: ng.ui.IStateService,
-        private notification: NotificationService) { }
-
-    save() {
-        this.profileService.getCurrentProfile().then((profile: noosfero.Profile) => {
-            return this.articleService.createInProfile(profile, this.article);
-        }).then((response: noosfero.RestResult<noosfero.Article>) => {
-            let article = (<noosfero.Article>response.data);
-            this.$state.transitionTo('main.profile.page', { page: article.path, profile: article.profile.identifier });
-            this.notification.success({ title: "Good job!", message: "Article saved!" });
-        });
-    }
-
-}
@@ -1,11 +0,0 @@
-<form>
-  <div class="form-group">
-    <label for="titleInput">Title</label>
-    <input type="text" class="form-control" id="titleInput" placeholder="title" ng-model="vm.article.name">
-  </div>
-  <div class="form-group">
-    <label for="bodyInput">Text</label>
-    <textarea class="form-control" id="bodyInput" rows="10" ng-model="vm.article.body"></textarea>
-  </div>
-  <button type="submit" class="btn btn-default" ng-click="vm.save()">Save</button>
-</form>
@@ -0,0 +1,27 @@
+import {Component, Input, Inject} from 'ng-forward';
+
+@Component({
+    selector: 'article-editor',
+    template: "not-used"
+})
+@Inject("$element", "$scope", "$injector", "$compile")
+export class ArticleEditorComponent {
+
+    @Input() article: noosfero.Article;
+
+    constructor(
+        private $element: any,
+        private $scope: ng.IScope,
+        private $injector: ng.auto.IInjectorService,
+        private $compile: ng.ICompileService) { }
+
+    ngOnInit() {
+        let articleType = this.article.type.replace(/::/, '');
+        let specificDirective = `${articleType.charAt(0).toLowerCase()}${articleType.substring(1)}Editor`;
+        let directiveName = "article-basic-editor";
+        if (this.$injector.has(specificDirective + 'Directive')) {
+            directiveName = specificDirective.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
+        }
+        this.$element.replaceWith(this.$compile('<' + directiveName + ' [article]="ctrl.article"></' + directiveName + '>')(this.$scope));
+    }
+}
@@ -0,0 +1,10 @@
+import {Component, Input} from 'ng-forward';
+
+@Component({
+    selector: 'article-basic-editor',
+    templateUrl: "app/article/cms/basic-editor/basic-editor.html"
+})
+export class BasicEditorComponent {
+
+    @Input() article: noosfero.Article;
+}
@@ -0,0 +1,10 @@
+<form>
+  <div class="form-group">
+    <label for="titleInput">{{"article.basic_editor.title" | translate}}</label>
+    <input type="text" class="form-control" id="titleInput" placeholder="{{'article.basic_editor.title' | translate}}" ng-model="ctrl.article.name">
+  </div>
+  <div class="form-group">
+    <label for="bodyInput">{{"article.basic_editor.body" | translate}}</label>
+    <html-editor [(value)]="ctrl.article.body"></html-editor>
+  </div>
+</form>
@@ -0,0 +1,11 @@
+import {Component, Input} from 'ng-forward';
+
+@Component({
+    selector: 'article-basic-options',
+    templateUrl: "app/article/cms/basic-options/basic-options.html"
+})
+export class BasicOptionsComponent {
+
+    @Input() article: noosfero.Article;
+
+}
@@ -0,0 +1,15 @@
+<div class="side-options">
+  <div class="visibility panel panel-default">
+    <div class="panel-heading">{{"article.basic_editor.visibility" | translate}}</div>
+    <div class="panel-body">
+      <div>
+        <input type="radio" ng-model="ctrl.article.published" ng-value="true"> 
+        <i class="fa fa-unlock fa-fw"></i> {{"article.basic_editor.visibility.public" | translate}}
+      </div>
+      <div>
+        <input type="radio" ng-model="ctrl.article.published" ng-value="false">
+        <i class="fa fa-lock fa-fw"></i> {{"article.basic_editor.visibility.private" | translate}}
+      </div>
+    </div>
+  </div>
+</div>
@@ -0,0 +1,15 @@
+.side-options {
+  margin-top: 25px;
+
+  .visibility {
+    .panel-heading {
+      background-color: transparent;
+      font-weight: bold;
+    }
+    .panel-body {
+      i {
+        color: #A5A5A5;
+      }
+    }
+  }
+}
@@ -0,0 +1,84 @@
+import {quickCreateComponent} from "../../../spec/helpers";
+import {CmsComponent} from "./cms.component";
+
+
+describe("Article Cms", () => {
+
+    let $rootScope: ng.IRootScopeService;
+    let $q: ng.IQService;
+    let articleServiceMock: any;
+    let profileServiceMock: any;
+    let $state: any;
+    let $stateParams: any;
+    let $window: any;
+    let profile = { id: 1 };
+    let notification: any;
+
+
+    beforeEach(inject((_$rootScope_: ng.IRootScopeService, _$q_: ng.IQService) => {
+        $rootScope = _$rootScope_;
+        $q = _$q_;
+    }));
+
+    beforeEach(() => {
+        $window = jasmine.createSpyObj("$window", ["back"]);
+        $state = jasmine.createSpyObj("$state", ["go"]);
+        notification = jasmine.createSpyObj("notification", ["success"]);
+        profileServiceMock = jasmine.createSpyObj("profileServiceMock", ["setCurrentProfileByIdentifier"]);
+        articleServiceMock = jasmine.createSpyObj("articleServiceMock", ["createInParent", "updateArticle", "get"]);
+
+        $stateParams = { profile: "profile" };
+
+        let setCurrentProfileByIdentifierResponse = $q.defer();
+        setCurrentProfileByIdentifierResponse.resolve(profile);
+
+        let articleCreate = $q.defer();
+        articleCreate.resolve({ data: { path: "path", profile: { identifier: "profile" } } });
+
+        let articleGet = $q.defer();
+        articleGet.resolve({ data: { path: "parent-path", profile: { identifier: "profile" } } });
+
+        profileServiceMock.setCurrentProfileByIdentifier = jasmine.createSpy("setCurrentProfileByIdentifier").and.returnValue(setCurrentProfileByIdentifierResponse.promise);
+        articleServiceMock.createInParent = jasmine.createSpy("createInParent").and.returnValue(articleCreate.promise);
+        articleServiceMock.updateArticle = jasmine.createSpy("updateArticle").and.returnValue(articleCreate.promise);
+        articleServiceMock.get = jasmine.createSpy("get").and.returnValue(articleGet.promise);
+    });
+
+    it("create an article in the current profile when save", done => {
+        $stateParams['parent_id'] = 1;
+        let component: CmsComponent = new CmsComponent(articleServiceMock, profileServiceMock, $state, notification, $stateParams, $window);
+        component.save();
+        $rootScope.$apply();
+        expect(profileServiceMock.setCurrentProfileByIdentifier).toHaveBeenCalled();
+        expect(articleServiceMock.createInParent).toHaveBeenCalledWith(1, component.article);
+        done();
+    });
+
+    it("got to the new article page and display an alert when saving sucessfully", done => {
+        let component: CmsComponent = new CmsComponent(articleServiceMock, profileServiceMock, $state, notification, $stateParams, $window);
+        component.save();
+        $rootScope.$apply();
+        expect($state.go).toHaveBeenCalledWith("main.profile.page", { page: "path", profile: "profile" });
+        expect(notification.success).toHaveBeenCalled();
+        done();
+    });
+
+    it("go back when cancel article edition", done => {
+        let component: CmsComponent = new CmsComponent(articleServiceMock, profileServiceMock, $state, notification, $stateParams, $window);
+        $window.history = { back: jasmine.createSpy('back') };
+        component.cancel();
+        expect($window.history.back).toHaveBeenCalled();
+        done();
+    });
+
+    it("edit existing article when save", done => {
+        $stateParams['parent_id'] = null;
+        $stateParams['id'] = 2;
+        let component: CmsComponent = new CmsComponent(articleServiceMock, profileServiceMock, $state, notification, $stateParams, $window);
+        component.save();
+        $rootScope.$apply();
+        expect(articleServiceMock.updateArticle).toHaveBeenCalledWith(component.article);
+        done();
+    });
+
+});
@@ -0,0 +1,77 @@
+import {StateConfig, Component, Inject, provide} from 'ng-forward';
+import {ArticleService} from "../../../lib/ng-noosfero-api/http/article.service";
+import {ProfileService} from "../../../lib/ng-noosfero-api/http/profile.service";
+import {NotificationService} from "../../shared/services/notification.service.ts";
+import {BasicOptionsComponent} from './basic-options/basic-options.component';
+import {BasicEditorComponent} from './basic-editor/basic-editor.component';
+import {ArticleEditorComponent} from './article-editor/article-editor.component';
+
+@Component({
+    selector: 'article-cms',
+    templateUrl: "app/article/cms/cms.html",
+    providers: [
+        provide('articleService', { useClass: ArticleService }),
+        provide('profileService', { useClass: ProfileService }),
+        provide('notification', { useClass: NotificationService })
+    ],
+    directives: [ArticleEditorComponent, BasicOptionsComponent, BasicEditorComponent]
+})
+@Inject(ArticleService, ProfileService, "$state", NotificationService, "$stateParams", "$window")
+export class CmsComponent {
+
+    article: noosfero.Article;
+    parent: noosfero.Article = <noosfero.Article>{};
+
+    id: number;
+    parentId: number;
+    profileIdentifier: string;
+
+    constructor(private articleService: ArticleService,
+        private profileService: ProfileService,
+        private $state: ng.ui.IStateService,
+        private notification: NotificationService,
+        private $stateParams: ng.ui.IStateParamsService,
+        private $window: ng.IWindowService) {
+
+        this.parentId = this.$stateParams['parent_id'];
+        this.profileIdentifier = this.$stateParams["profile"];
+        this.id = this.$stateParams['id'];
+
+        if (this.parentId) {
+            this.articleService.get(this.parentId).then((result: noosfero.RestResult<noosfero.Article>) => {
+                this.parent = result.data;
+            });
+        }
+        if (this.id) {
+            this.articleService.get(this.id).then((result: noosfero.RestResult<noosfero.Article>) => {
+                this.article = result.data;
+                this.article.name = this.article.title; // FIXME
+            });
+        } else {
+            this.article = <noosfero.Article>{ type: this.$stateParams['type'] || "TextArticle", published: true };
+        }
+    }
+
+    save() {
+        this.profileService.setCurrentProfileByIdentifier(this.profileIdentifier).then((profile: noosfero.Profile) => {
+            if (this.id) {
+                return this.articleService.updateArticle(this.article);
+            } else if (this.parentId) {
+                return this.articleService.createInParent(this.parentId, this.article);
+            } else {
+                return this.articleService.createInProfile(profile, this.article);
+            }
+        }).then((response: noosfero.RestResult<noosfero.Article>) => {
+            let article = (<noosfero.Article>response.data);
+            this.$state.go('main.profile.page', { page: article.path, profile: article.profile.identifier });
+            this.notification.success({ title: "article.basic_editor.success.title", message: "article.basic_editor.success.message" });
+        }).catch(() => {
+            this.notification.error({ message: "article.basic_editor.save.failed" });
+        });
+    }
+
+    cancel() {
+        this.$window.history.back();
+    }
+
+}
@@ -0,0 +1,18 @@
+<div class="cms">
+  <div class="row">
+    <div class="col-md-1"></div>
+    <div class="col-md-8">
+      <article-editor ng-if="vm.article" [article]="vm.article"></article-editor>
+    </div>
+    <div class="col-md-3">
+      <article-basic-options ng-if="vm.article" [article]="vm.article"></article-basic-options>
+    </div>
+  </div>
+  <div class="row">
+    <div class="col-md-1"></div>
+    <div class="col-md-8">
+      <button type="submit" class="btn btn-default" ng-click="vm.save()">{{"article.basic_editor.save" | translate}}</button>
+      <button type="button" class="btn btn-danger" ng-click="vm.cancel()">{{"article.basic_editor.cancel" | translate}}</button>
+    </div>
+  </div>
+</div>
@@ -0,0 +1,4 @@
+.cms {
+  @extend .container-fluid;
+  padding: 0 1%;
+}
@@ -0,0 +1,3 @@
+<div class="reply-tooltip">
+  <noosfero-comment [comment]="ctrl.comment.reply_of" [article]="ctrl.article" [display-actions]="false" [display-replies]="false"></noosfero-comment>
+</div>
@@ -9,6 +9,8 @@ export class CommentComponent {
  
     @Input() comment: noosfero.CommentViewModel;
     @Input() article: noosfero.Article;
+    @Input() displayActions = true;
+    @Input() displayReplies = true;
  
     showReply() {
         return this.comment && this.comment.__show_reply === true;
@@ -9,13 +9,19 @@
       <a class="pull-left" ui-sref="main.profile.home({profile: ctrl.comment.author.identifier})">
         <h4 class="media-heading">{{ctrl.comment.author.name}}</h4>
       </a>
+      <span class="reply-of" ng-if="ctrl.comment.reply_of" uib-tooltip-template="'app/article/comment/comment-reply-tooltip.html'">
+        <i class="fa fa-fw fa-mail-forward"></i>
+        <span class="author">{{ctrl.comment.reply_of.author.name}}</span>
+      </span>
       <span class="date" am-time-ago="ctrl.comment.created_at | dateFormat"></span>
     </div>
     <div class="title">{{ctrl.comment.title}}</div>
     <div class="body">{{ctrl.comment.body}}</div>
-    <a href="#" (click)="ctrl.reply()" class="small text-muted">
-      {{"comment.reply" | translate}}
-    </a>
+    <div class="actions" ng-if="ctrl.displayActions">
+      <a href="#" (click)="ctrl.reply()" class="small text-muted" ng-if="ctrl.article.accept_comments">
+        {{"comment.reply" | translate}}
+      </a>
+    </div>
   </div>
-  <noosfero-comments [show-form]="ctrl.showReply()" [article]="ctrl.article" [parent]="ctrl.comment"></noosfero-comments>
+  <noosfero-comments [show-form]="ctrl.showReply()" [article]="ctrl.article" [parent]="ctrl.comment" ng-if="ctrl.displayReplies"></noosfero-comments>
 </div>
@@ -5,6 +5,7 @@
       @extend .text-muted;
       @extend .small;
       margin-left: 8px;
+      font-size: 12px;
     }
     .title {
       font-weight: bold;
@@ -13,7 +14,18 @@
       min-width: 40px;
     }
     .media-body {
-      padding: 0 10px 10px 10px;
+      padding: 0 10px 10px 0;
+      .reply-of {
+        font-size: 12px;
+        color: #B5B5B5;
+        margin-left: 5px;
+        i {
+          font-size: 10px;
+        }
+      }
+      h4 {
+        font-size: 16px;
+      }
     }
     noosfero-profile-image {
       img {
@@ -27,8 +39,24 @@
         font-size: 1.7em;
       }
     }
+    // Limit identation of replies
     .comments {
       margin-left: 30px;
+      .comments .comments {
+        margin-left: 0px;
+        .comment {
+          margin-left: 0px;
+        }
+      }
+    }
+    .tooltip-inner {
+      max-width: 350px;
+      text-align: left;
+      .reply-tooltip {
+        .comment {
+          margin: 5px;
+        }
+      }
     }
   }
 }
-import { Inject, Input, Output, Component, provide, EventEmitter } from 'ng-forward';
-import {INgForwardJQuery} from "ng-forward/cjs/util/jqlite-extensions";
-
-
+import { Inject, Input, Component, provide } from 'ng-forward';
 import { PostCommentComponent } from "./post-comment/post-comment.component";
 import { CommentService } from "../../../lib/ng-noosfero-api/http/comment.service";
 import { CommentComponent } from "./comment.component";
@@ -19,12 +16,13 @@ export class CommentsComponent {
     @Input() showForm = true;
     @Input() article: noosfero.Article;
     @Input() parent: noosfero.CommentViewModel;
-
     protected page = 1;
     protected perPage = 5;
     protected total = 0;
  
-    constructor(protected commentService: CommentService) { }
+    newComment = <noosfero.Comment>{};
+
+    constructor(protected commentService: CommentService, private $scope: ng.IScope) { }
  
     ngOnInit() {
         if (this.parent) {
@@ -43,7 +41,7 @@ export class CommentsComponent {
         this.comments.forEach((comment: noosfero.CommentViewModel) => {
             comment.__show_reply = false;
         });
-        if  (this.parent) {
+        if (this.parent) {
             this.parent.__show_reply = false;
         }
     }
 <div class="comments">
-  <noosfero-post-comment (comment-saved)="ctrl.commentAdded($event.detail)" ng-if="ctrl.showForm" [article]="ctrl.article" [parent]="ctrl.parent"></noosfero-post-comment>
+  <noosfero-post-comment (comment-saved)="ctrl.commentAdded($event.detail)" ng-if="ctrl.showForm" [article]="ctrl.article" [parent]="ctrl.parent" [comment]="ctrl.newComment"></noosfero-post-comment>
  
   <div class="comments-list">
     <noosfero-comment ng-repeat="comment in ctrl.comments | orderBy: 'created_at':true" [comment]="comment" [article]="ctrl.article"></noosfero-comment>
@@ -0,0 +1,6 @@
+.comments {
+  border-top: 2px solid #F3F3F3;
+  .comments {
+    border-top: 0;
+  }
+}
@@ -7,6 +7,8 @@ const htmlTemplate: string = &#39;&lt;noosfero-post-comment [article]=&quot;ctrl.article&quot; [r
 describe("Components", () => {
     describe("Post Comment Component", () => {
  
+        let properties = { article: { id: 1, accept_comments: true } };
+
         beforeEach(angular.mock.module("templates"));
  
         let commentService = jasmine.createSpyObj("commentService", ["createInArticle"]);
@@ -19,7 +21,7 @@ describe(&quot;Components&quot;, () =&gt; {
  
         @Component({ selector: 'test-container-component', directives: [PostCommentComponent], template: htmlTemplate, providers: providers })
         class ContainerComponent {
-            article = { id: 1 };
+            article = properties['article'];
             comment = { id: 2 };
         }
  
@@ -30,6 +32,14 @@ describe(&quot;Components&quot;, () =&gt; {
             });
         });
  
+        it("not render the post comment form when article doesn't accept comments", done => {
+            properties['article'].accept_comments = false;
+            helpers.createComponentFromClass(ContainerComponent).then(fixture => {
+                expect(fixture.debugElement.queryAll("form").length).toEqual(0);
+                done();
+            });
+        });
+
         it("emit an event when create comment", done => {
             helpers.createComponentFromClass(ContainerComponent).then(fixture => {
                 let component: PostCommentComponent = fixture.debugElement.componentViewChildren[0].componentInstance;
@@ -2,20 +2,23 @@ import { Inject, Input, Output, EventEmitter, Component } from &#39;ng-forward&#39;;
 import { CommentService } from "../../../../lib/ng-noosfero-api/http/comment.service";
 import { NotificationService } from "../../../shared/services/notification.service";
 import { SessionService } from "../../../login";
+import { CommentFormHotspotComponent } from "../../../hotspot/comment-form-hotspot.component";
  
 @Component({
     selector: 'noosfero-post-comment',
     templateUrl: 'app/article/comment/post-comment/post-comment.html',
-    outputs: ['commentSaved']
+    outputs: ['commentSaved'],
+    directives: [CommentFormHotspotComponent]
 })
 @Inject(CommentService, NotificationService, SessionService)
 export class PostCommentComponent {
  
+    public static EVENT_COMMENT_RECEIVED = "comment.received";
+
     @Input() article: noosfero.Article;
     @Input() parent: noosfero.Comment;
     @Output() commentSaved: EventEmitter<Comment> = new EventEmitter<Comment>();
-
-    comment = <noosfero.Comment>{};
+    @Input() comment = <noosfero.Comment>{};
     private currentUser: noosfero.User;
  
     constructor(private commentService: CommentService,
-<form class="clearfix post-comment">
+<form class="clearfix post-comment" ng-if="ctrl.article.accept_comments">
   <div class="form-group">
     <div class="comment media">
       <div class="media-left">
@@ -8,6 +8,7 @@
       </div>
       <div class="media-body">
         <textarea class="form-control custom-control" rows="1" ng-model="ctrl.comment.body" placeholder="{{'comment.post.placeholder' | translate}}"></textarea>
+        <noosfero-hotspot-comment-form [comment]="ctrl.comment" [parent]="ctrl.parent"></noosfero-hotspot-comment-form>
         <button ng-show="ctrl.comment.body" type="submit" class="btn btn-default pull-right ng-hide" ng-click="ctrl.save()">{{"comment.post" | translate}}</button>
       </div>
     </div>
 .comments {
   .post-comment {
     .media {
-      border-top: 2px solid #F3F3F3;
       padding-top: 10px;
       .media-left {
         padding: 10px 0;
-import {providers} from 'ng-forward/cjs/testing/providers';
-
 import {Input, Component, provide} from 'ng-forward';
  
 import * as helpers from "../../../spec/helpers";
-
-import {ComponentFixture} from 'ng-forward/cjs/testing/test-component-builder';
+import {ComponentTestHelper, createClass} from '../../../spec/component-test-helper';
 import {ContentViewerActionsComponent} from './content-viewer-actions.component';
  
 // this htmlTemplate will be re-used between the container components in this spec file
@@ -12,56 +9,57 @@ const htmlTemplate: string = &#39;&lt;content-viewer-actions [article]=&quot;ctrl.article&quot; [
  
 describe('Content Viewer Actions Component', () => {
  
-    beforeEach(() => {
+    let helper: ComponentTestHelper<ContentViewerActionsComponent>;
  
-        angular.mock.module("templates");
+    beforeEach(angular.mock.module("templates"));
  
-        providers((provide: any) => {
-            return <any>[
-                provide('ProfileService', {
-                    useValue: helpers.mocks.profileService
-                })
-            ];
-        });
-    });
+    let providers = [
+        provide('ProfileService', {
+            useValue: helpers.mocks.profileService
+        }),
+        provide('ArticleService', {
+            useValue: helpers.mocks.articleService
+        })
+    ].concat(helpers.provideFilters("translateFilter"));
  
-    let buildComponent = (): Promise<ComponentFixture> => {
-        return helpers.quickCreateComponent({
-            providers: [
-                helpers.provideEmptyObjects('Restangular'),
-                helpers.provideFilters('translateFilter')
-            ],
+    beforeEach((done) => {
+        let cls = createClass({
+            template: htmlTemplate,
             directives: [ContentViewerActionsComponent],
-            template: htmlTemplate
+            providers: providers
         });
-    };
+        helper = new ComponentTestHelper<ContentViewerActionsComponent>(cls, done);
+    });
  
-    it('renders content viewer actions directive', (done: Function) => {
-        buildComponent().then((fixture: ComponentFixture) => {
-            expect(fixture.debugElement.query('content-viewer-actions').length).toEqual(1);
+    it('renders content viewer actions directive', () => {
+        expect(helper.all("content-viewer-actions").length).toEqual(1);
+    });
  
-            done();
-        });
+    it('return article parent as container when it is not a folder', () => {
+        let article = <noosfero.Article>({ id: 1, type: 'TextArticle', parent: { id: 2 } });
+        expect(helper.component.getArticleContainer(article)).toEqual(2);
+    });
+
+    it('return article as container when it is a folder', () => {
+        let article = <noosfero.Article>({ id: 1, type: 'Folder' });
+        expect(helper.component.getArticleContainer(article)).toEqual(1);
     });
  
-    it('check if profile was loaded', (done: Function) => {
+    it('return article as container when it is a blog', () => {
+        let article = <noosfero.Article>({ id: 1, type: 'Blog' });
+        expect(helper.component.getArticleContainer(article)).toEqual(1);
+    });
+
+    it('check if profile was loaded', () => {
         let profile: any = {
             id: 1,
             identifier: 'the-profile-test',
             type: 'Person'
         };
-
         helpers.mocks.profileService.getCurrentProfile = () => {
             return helpers.mocks.promiseResultTemplate(profile);
         };
-
-        buildComponent().then((fixture: ComponentFixture) => {
-            let contentViewerComp: ContentViewerActionsComponent = fixture.debugElement.componentViewChildren[0].componentInstance;
-
-            expect(contentViewerComp.profile).toEqual(jasmine.objectContaining(profile));
-
-            done();
-        });
+        let component = new ContentViewerActionsComponent(<any>helpers.mocks.profileService, <any>helpers.mocks.articleService);
+        expect(component.profile).toEqual(jasmine.objectContaining(profile));
     });
-
 });
 import {Component, Inject, provide} from "ng-forward";
 import {ProfileService} from "../../../lib/ng-noosfero-api/http/profile.service";
+import {ArticleService} from "../../../lib/ng-noosfero-api/http/article.service";
  
 @Component({
     selector: "content-viewer-actions",
     templateUrl: "app/article/content-viewer/navbar-actions.html",
-    providers: [provide('profileService', { useClass: ProfileService })]
+    providers: [
+        provide('profileService', { useClass: ProfileService }),
+        provide('articleService', { useClass: ArticleService })
+    ]
 })
-@Inject(ProfileService)
+@Inject(ProfileService, ArticleService)
 export class ContentViewerActionsComponent {
  
     article: noosfero.Article;
     profile: noosfero.Profile;
+    parentId: number;
  
-    constructor(profileService: ProfileService) {
+    constructor(profileService: ProfileService, articleService: ArticleService) {
         profileService.getCurrentProfile().then((profile: noosfero.Profile) => {
             this.profile = profile;
+            return articleService.getCurrent();
+        }).then((article: noosfero.Article) => {
+            this.article = article;
+            this.parentId = this.getArticleContainer(article);
         });
     }
+
+    getArticleContainer(article: noosfero.Article) {
+        // FIXME get folder types from api
+        if (article.type === "Blog" || article.type === "Folder") {
+            return article.id;
+        } else if (article.parent) {
+            return article.parent.id;
+        }
+    }
 }
@@ -28,11 +28,12 @@ export class ContentViewerComponent {
     }
  
     activate() {
-       this.profileService.getCurrentProfile().then((profile: noosfero.Profile) => {
+        this.profileService.getCurrentProfile().then((profile: noosfero.Profile) => {
             this.profile = profile;
             return this.articleService.getArticleByProfileAndPath(this.profile, this.$stateParams["page"]);
         }).then((result: noosfero.RestResult<any>) => {
             this.article = <noosfero.Article>result.data;
+            this.articleService.setCurrent(this.article);
         });
     }
 }
 <ul class="nav navbar-nav">
   <li ng-show="vm.profile">
-    <a href="#" role="button" ui-sref="main.profile.cms({profile: vm.profile.identifier})">
+    <a ng-show="vm.parentId" href="#" role="button" 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>
+  </li>
+  <li ng-show="vm.profile">
+    <a href="#" role="button" ui-sref="main.cms({profile: vm.profile.identifier, parent_id: vm.parentId, type: 'CommentParagraphPlugin::Discussion'})">
       <i class="fa fa-file fa-fw fa-lg"></i> {{"navbar.content_viewer_actions.new_post" | translate}}
     </a>
   </li>
 /* Module Index Entry - generated using the script npm run generate-index */
 export * from "./article-default-view.component";
-export * from "./basic-editor.component";
@@ -0,0 +1,25 @@
+import {Input, provide, Component} from 'ng-forward';
+import {MacroDirective} from "./macro.directive";
+
+import * as helpers from "../../../spec/helpers";
+
+const htmlTemplate: string = '<div data-macro="macro_component" data-macro-custom="custom"></div>';
+
+describe("Directives", () => {
+
+    describe("Macro directive", () => {
+        it("renders a macro component using the name passed in data-macro", (done: Function) => {
+            helpers.quickCreateComponent({ template: htmlTemplate, directives: [MacroDirective] }).then((fixture) => {
+                expect(fixture.debugElement.queryAll('macro-component').length).toEqual(1);
+                done();
+            });
+        });
+
+        it("extract custom attributes from macro", (done: Function) => {
+            helpers.quickCreateComponent({ template: htmlTemplate, directives: [MacroDirective] }).then((fixture) => {
+                expect(fixture.debugElement.query('macro-component').attr("custom")).toEqual("custom");
+                done();
+            });
+        });
+    });
+});
@@ -0,0 +1,34 @@
+import {Directive, Inject} from "ng-forward";
+
+@Directive({
+    selector: '[macro]',
+    providers: []
+})
+@Inject('$element', '$scope', '$compile')
+export class MacroDirective {
+
+    private macroPrefix = "data-macro";
+
+    constructor(private $element: any, private $scope: ng.IScope, private $compile: ng.ICompileService) {
+        let macro = $element[0].attributes[this.macroPrefix].value;
+        let componentName = this.normalizeName(macro);
+        let content = $element.html().replace(/"/g, '&quot;');
+        let customAttributes = this.extractCustomAttributes($element[0].attributes);
+        $element.replaceWith($compile(`<${componentName} [article]="ctrl.article" content="${content}" ${customAttributes}></${componentName}>`)($scope));
+    }
+
+    extractCustomAttributes(attributes: any) {
+        let customAttributes = "";
+        for (let attr of attributes) {
+            if (attr.name.startsWith(this.macroPrefix + '-')) {
+                let name = this.normalizeName(attr.name.replace(this.macroPrefix + '-', ''));
+                customAttributes += ` ${name}='${attr.value}'`;
+            }
+        }
+        return customAttributes;
+    }
+
+    normalizeName(name: string) {
+        return name.replace(/[_\/]/g, '-').toLowerCase();
+    }
+}
@@ -0,0 +1,25 @@
+import {Component, Input, Inject} from "ng-forward";
+import * as plugins from "../../plugins";
+import {dasherize} from "ng-forward/cjs/util/helpers";
+import {PluginHotspot} from "./plugin-hotspot";
+
+@Component({
+    selector: "noosfero-hotspot-article-content",
+    template: "<span></span>"
+})
+@Inject("$element", "$scope", "$compile")
+export class ArticleContentHotspotComponent extends PluginHotspot {
+
+    @Input() article: noosfero.Article;
+
+    constructor(
+        private $element: any,
+        private $scope: ng.IScope,
+        private $compile: ng.ICompileService) {
+        super("article_extra_content");
+    }
+
+    addHotspot(directiveName: string) {
+        this.$element.append(this.$compile('<' + directiveName + ' [article]="ctrl.article"></' + directiveName + '>')(this.$scope));
+    }
+}
@@ -0,0 +1,25 @@
+import {Component, Input, Inject} from "ng-forward";
+import * as plugins from "../../plugins";
+import {dasherize} from "ng-forward/cjs/util/helpers";
+import {PluginHotspot} from "./plugin-hotspot";
+
+@Component({
+    selector: "noosfero-hotspot-article-toolbar",
+    template: "<span></span>"
+})
+@Inject("$element", "$scope", "$compile")
+export class ArticleToolbarHotspotComponent extends PluginHotspot {
+
+    @Input() article: noosfero.Article;
+
+    constructor(
+        private $element: any,
+        private $scope: ng.IScope,
+        private $compile: ng.ICompileService) {
+        super("article_extra_toolbar_buttons");
+    }
+
+    addHotspot(directiveName: string) {
+        this.$element.append(this.$compile('<' + directiveName + ' [article]="ctrl.article"></' + directiveName + '>')(this.$scope));
+    }
+}
@@ -0,0 +1,26 @@
+import {Component, Input, Inject} from "ng-forward";
+import * as plugins from "../../plugins";
+import {dasherize} from "ng-forward/cjs/util/helpers";
+import {PluginHotspot} from "./plugin-hotspot";
+
+@Component({
+    selector: "noosfero-hotspot-comment-form",
+    template: "<span></span>"
+})
+@Inject("$element", "$scope", "$compile")
+export class CommentFormHotspotComponent extends PluginHotspot {
+
+    @Input() comment: noosfero.Comment;
+    @Input() parent: noosfero.Comment;
+
+    constructor(
+        private $element: any,
+        private $scope: ng.IScope,
+        private $compile: ng.ICompileService) {
+        super("comment_form_extra_contents");
+    }
+
+    addHotspot(directiveName: string) {
+        this.$element.append(this.$compile('<' + directiveName + ' [comment]="ctrl.comment" [parent]="ctrl.parent"></' + directiveName + '>')(this.$scope));
+    }
+}
@@ -0,0 +1,5 @@
+export function Hotspot(hotspotName: string) {
+    return (target: any) => {
+        target['hotspot'] = hotspotName;
+    };
+}
@@ -0,0 +1,19 @@
+import {Component, Input, Inject} from "ng-forward";
+import * as plugins from "../../plugins";
+import {dasherize} from "ng-forward/cjs/util/helpers";
+
+export abstract class PluginHotspot {
+
+    constructor(protected hotspot: string) { }
+
+    ngOnInit() {
+        for (let component of plugins.hotspots) {
+            if (component.hotspot === this.hotspot) {
+                let directiveName = dasherize(component.name.replace('Component', ''));
+                this.addHotspot(directiveName);
+            }
+        }
+    }
+
+    abstract addHotspot(directiveName: string): any;
+}
@@ -28,12 +28,16 @@ $primary-color-dark: #0288d1;
 $default-bg-hover-color: #f8f8f8;
 $red-color: #e84e40;
 $red-color-dark: #dd191d;
+$green-color: #8bc34a;
+$green-color-dark: #689f38;
  
 //GRID - media queries breakpoints
 $break-xxs-min: 420px;
 $break-xs-min: 768px;
+$break-sm-min: 992px;
  
 $break-xxs-max: ($break-xxs-min - 1);
+$break-sm-max: ($break-sm-min - 1);
 $break-xs-max: ($break-xs-min - 1);
  
  
@@ -76,4 +80,5 @@ h1, h2, h3, h4, h5 {
 @import "layout/scss/mixins";
 @import "layout/scss/bootstrap-overrides";
 @import "layout/scss/layout";
+@import "layout/scss/sidebar";
 @import "layout/scss/tables";
@@ -5,7 +5,7 @@ import {noosferoAngularRunBlock} from &quot;./index.run&quot;;
 import {MainComponent} from "./main/main.component";
 import {bootstrap, bundle} from "ng-forward";
  
-import {AUTH_EVENTS} from "./login/auth-events";
+import {AuthEvents} from "./login/auth-events";
 import {AuthController} from "./login/auth.controller";
  
 import {Navbar} from "./layout/navbar/navbar";
@@ -14,16 +14,17 @@ declare var moment: any;
  
 let noosferoApp: any = bundle("noosferoApp", MainComponent, ["ngAnimate", "ngCookies", "ngStorage", "ngTouch",
     "ngSanitize", "ngMessages", "ngAria", "restangular",
-    "ui.router", "ui.bootstrap", "toastr",
-    "angularMoment", "angular.filter", "akoenig.deckgrid",
+    "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"]).publish();
+    "pascalprecht.translate", "tmh.dynamicLocale", "angularLoad",
+    "angular-click-outside"]).publish();
  
 NoosferoApp.angularModule = noosferoApp;
  
  
 NoosferoApp.addConstants("moment", moment);
-NoosferoApp.addConstants("AUTH_EVENTS", AUTH_EVENTS);
+NoosferoApp.addConstants("AuthEvents", AuthEvents);
  
 NoosferoApp.addConfig(noosferoModuleConfig);
 NoosferoApp.run(noosferoAngularRunBlock);
@@ -11,7 +11,7 @@ export class BlockComponent {
     @Input() owner: any;
  
     ngOnInit() {
-        let blockName = (this.block && this.block.type) ? this.block.type.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase() : "default-block";
+        let blockName = (this.block && this.block.type) ? this.block.type.replace(/::/, '').replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase() : "default-block";
         this.$element.replaceWith(this.$compile('<noosfero-' + blockName + ' [block]="ctrl.block" [owner]="ctrl.owner"></noosfero-' + blockName + '>')(this.$scope));
     }
  
@@ -1,51 +0,0 @@
-import {TestComponentBuilder} from 'ng-forward/cjs/testing/test-component-builder';
-import {Provider, Input, provide, Component} from 'ng-forward';
-
-import {CommunitiesBlockComponent} from './communities-block.component';
-
-const htmlTemplate: string = '<noosfero-communities-block [block]="ctrl.block" [owner]="ctrl.owner"></noosfero-communities-block>';
-
-const tcb = new TestComponentBuilder();
-
-describe("Components", () => {
-    describe("Communities Block Component", () => {
-
-        beforeEach(angular.mock.module("templates"));
-
-        let state = jasmine.createSpyObj("state", ["go"]);
-        let providers = [
-            new Provider('truncateFilter', { useValue: () => { } }),
-            new Provider('stripTagsFilter', { useValue: () => { } }),
-            new Provider('$state', { useValue: state }),
-            new Provider('CommunityService', {
-                useValue: {
-                    getByOwner: (owner: any, params: any): any => {
-                        return Promise.resolve({ data: [{ identifier: "community1" }] });
-                    }
-                }
-            }),
-        ];
-        @Component({ selector: 'test-container-component', template: htmlTemplate, directives: [CommunitiesBlockComponent], providers: providers })
-        class BlockContainerComponent {
-            block = { type: 'Block', settings: {} };
-            owner = { name: 'profile-name' };
-        }
-
-        it("get communities", done => {
-            tcb.createAsync(BlockContainerComponent).then(fixture => {
-                let block: CommunitiesBlockComponent = fixture.debugElement.componentViewChildren[0].componentInstance;
-                expect(block.profiles).toEqual([{ identifier: "community1" }]);
-                done();
-            });
-        });
-
-        it("render the profile image for each community", done => {
-            tcb.createAsync(BlockContainerComponent).then(fixture => {
-                fixture.debugElement.getLocal("$rootScope").$apply();
-                expect(fixture.debugElement.queryAll("noosfero-profile-image").length).toEqual(1);
-                done();
-            });
-        });
-
-    });
-});
@@ -1,24 +0,0 @@
-import {Input, Inject, Component} from "ng-forward";
-import {CommunityService} from "../../../../lib/ng-noosfero-api/http/community.service";
-
-@Component({
-    selector: "noosfero-communities-block",
-    templateUrl: 'app/layout/blocks/communities-block/communities-block.html',
-})
-@Inject(CommunityService)
-export class CommunitiesBlockComponent {
-
-    @Input() block: noosfero.Block;
-    @Input() owner: noosfero.Profile;
-
-    profiles: any = [];
-
-    constructor(private communityService: CommunityService) { }
-
-    ngOnInit() {
-        let limit: number = ((this.block && this.block.settings) ? this.block.settings.limit : null) || 5;
-        this.communityService.getByOwner(this.owner, { limit: limit }).then((result: noosfero.RestResult<noosfero.Community[]>) => {
-            this.profiles = result.data;
-        });
-    }
-}
@@ -1,5 +0,0 @@
-<div class="communities-block">
-  <a ng-repeat="profile in ctrl.profiles" ui-sref="main.profile.home({profile: profile.identifier})" class="profile">
-    <noosfero-profile-image [profile]="profile"></noosfero-profile-image>
-  </a>
-</div>
@@ -1,16 +0,0 @@
-.communities-block {
-  .profile {
-    margin: 10px;
-    img, i.profile-image {
-      width: 60px;
-    }
-    img {
-      display: inline-block;
-      vertical-align: top;
-    }
-    i.profile-image {
-        text-align: center;
-        font-size: 4.5em;
-    }
-  }
-}
@@ -0,0 +1,51 @@
+import {TestComponentBuilder} from 'ng-forward/cjs/testing/test-component-builder';
+import {Provider, Input, provide, Component} from 'ng-forward';
+
+import {CommunitiesBlockComponent} from './communities-block.component';
+
+const htmlTemplate: string = '<noosfero-communities-block [block]="ctrl.block" [owner]="ctrl.owner"></noosfero-communities-block>';
+
+const tcb = new TestComponentBuilder();
+
+describe("Components", () => {
+    describe("Communities Block Component", () => {
+
+        beforeEach(angular.mock.module("templates"));
+
+        let state = jasmine.createSpyObj("state", ["go"]);
+        let providers = [
+            new Provider('truncateFilter', { useValue: () => { } }),
+            new Provider('stripTagsFilter', { useValue: () => { } }),
+            new Provider('$state', { useValue: state }),
+            new Provider('CommunityService', {
+                useValue: {
+                    getByOwner: (owner: any, params: any): any => {
+                        return Promise.resolve({ data: [{ identifier: "community1" }] });
+                    }
+                }
+            }),
+        ];
+        @Component({ selector: 'test-container-component', template: htmlTemplate, directives: [CommunitiesBlockComponent], providers: providers })
+        class BlockContainerComponent {
+            block = { type: 'Block', settings: {} };
+            owner = { name: 'profile-name' };
+        }
+
+        it("get communities", done => {
+            tcb.createAsync(BlockContainerComponent).then(fixture => {
+                let block: CommunitiesBlockComponent = fixture.debugElement.componentViewChildren[0].componentInstance;
+                expect(block.profiles).toEqual([{ identifier: "community1" }]);
+                done();
+            });
+        });
+
+        it("render the profile image for each community", done => {
+            tcb.createAsync(BlockContainerComponent).then(fixture => {
+                fixture.debugElement.getLocal("$rootScope").$apply();
+                expect(fixture.debugElement.queryAll("noosfero-profile-image").length).toEqual(1);
+                done();
+            });
+        });
+
+    });
+});
@@ -0,0 +1,24 @@
+import {Input, Inject, Component} from "ng-forward";
+import {CommunityService} from "../../../../lib/ng-noosfero-api/http/community.service";
+
+@Component({
+    selector: "noosfero-communities-block",
+    templateUrl: 'app/layout/blocks/communities/communities-block.html',
+})
+@Inject(CommunityService)
+export class CommunitiesBlockComponent {
+
+    @Input() block: noosfero.Block;
+    @Input() owner: noosfero.Profile;
+
+    profiles: any = [];
+
+    constructor(private communityService: CommunityService) { }
+
+    ngOnInit() {
+        let limit: number = ((this.block && this.block.settings) ? this.block.settings.limit : null) || 5;
+        this.communityService.getByOwner(this.owner, { limit: limit }).then((result: noosfero.RestResult<noosfero.Community[]>) => {
+            this.profiles = result.data;
+        });
+    }
+}
@@ -0,0 +1,5 @@
+<div class="communities-block">
+  <a ng-repeat="profile in ctrl.profiles" ui-sref="main.profile.home({profile: profile.identifier})" class="profile">
+    <noosfero-profile-image [profile]="profile"></noosfero-profile-image>
+  </a>
+</div>
@@ -0,0 +1,16 @@
+.communities-block {
+  .profile {
+    margin: 10px;
+    img, i.profile-image {
+      width: 60px;
+    }
+    img {
+      display: inline-block;
+      vertical-align: top;
+    }
+    i.profile-image {
+        text-align: center;
+        font-size: 4.5em;
+    }
+  }
+}
@@ -0,0 +1,2 @@
+/* Module Index Entry - generated using the script npm run generate-index */
+export * from "./communities-block.component";
 /* Module Index Entry - generated using the script npm run generate-index */
-export * from "./link-list.component";
+export * from "./link-list-block.component";
@@ -0,0 +1,65 @@
+import {TestComponentBuilder} from 'ng-forward/cjs/testing/test-component-builder';
+import {Pipe, Input, provide, Component} from 'ng-forward';
+import {provideFilters} from '../../../../spec/helpers';
+
+import {LinkListBlockComponent} from './link-list-block.component';
+
+const tcb = new TestComponentBuilder();
+
+const htmlTemplate: string = '<noosfero-link-list-block [block]="ctrl.block" [owner]="ctrl.owner"></noosfero-link-list-block>';
+
+
+describe("Components", () => {
+
+    describe("Link List Block Component", () => {
+
+        beforeEach(angular.mock.module("templates"));
+
+        it("receives the block and the owner as inputs", done => {
+
+            // Creating a container component (BlockContainerComponent) to include
+            // the component under test (Block)
+            @Component({ selector: 'test-container-component', template: htmlTemplate, directives: [LinkListBlockComponent] })
+            class BlockContainerComponent {
+                block = { type: 'Block' };
+                owner = { name: 'profile-name' };
+                constructor() {
+                }
+            }
+
+            // uses the TestComponentBuilder instance to initialize the component
+            // .overrideView(LinkListBlock, { template: 'asdasdasd', pipes: [NoosferoTemplate] })
+            tcb.createAsync(BlockContainerComponent).then(fixture => {
+                // and here we can inspect and run the test assertions
+                let myComponent: LinkListBlockComponent = fixture.componentInstance;
+
+                // assure the block object inside the Block matches
+                // the provided through the parent component
+                expect(myComponent.block.type).toEqual("Block");
+                expect(myComponent.owner.name).toEqual("profile-name");
+                done();
+            });
+        });
+
+
+        it("display links stored in block settings", done => {
+
+            @Component({
+                selector: 'test-container-component',
+                template: htmlTemplate,
+                directives: [LinkListBlockComponent],
+                providers: provideFilters("noosferoTemplateFilter")
+            })
+            class CustomBlockType {
+                block: any = { settings: { links: [{ name: 'link1', address: 'address1' }, { name: 'link2', address: 'address2' }] } };
+                owner: any = { name: 'profile-name' };
+            }
+            tcb.createAsync(CustomBlockType).then(fixture => {
+                expect(fixture.debugElement.queryAll(".link-list-block a").length).toEqual(2);
+                done();
+            });
+        });
+
+    });
+
+});
@@ -0,0 +1,20 @@
+import {Component, Input} from "ng-forward";
+
+@Component({
+    selector: "noosfero-link-list-block",
+    templateUrl: "app/layout/blocks/link-list/link-list-block.html"
+})
+export class LinkListBlockComponent {
+
+    @Input() block: any;
+    @Input() owner: any;
+
+    links: any;
+
+    ngOnInit() {
+        if (this.block && this.block.settings) {
+            this.links = this.block.settings.links;
+        }
+    }
+
+}
@@ -0,0 +1,7 @@
+<div class="link-list-block">
+  <div ng-repeat="link in ctrl.links">
+    <a ng-href="{{link.address | noosferoTemplate:{profile: ctrl.owner.identifier} }}">
+      <i class="fa fa-fw icon-{{link.icon}}"></i> <span>{{link.name}}</span>
+    </a>
+  </div>
+</div>
@@ -0,0 +1,34 @@
+.icon-event {
+  @extend .fa-calendar;
+}
+.icon-photos {
+  @extend .fa-photo;
+}
+.icon-edit {
+  @extend .fa-edit;
+}
+.icon-ok {
+  @extend .fa-check;
+}
+.icon-send {
+  @extend .fa-send-o;
+}
+.icon-menu-people {
+  @extend .fa-user;
+}
+.icon-forum {
+  @extend .fa-users;
+}
+.icon-new {
+  @extend .fa-file-o;
+}
+.icon-save {
+  @extend .fa-save;
+}
+
+.link-list-block {
+  a i {
+    line-height: 25px;
+    color: #949494;
+  }
+}
@@ -1,65 +0,0 @@
-import {TestComponentBuilder} from 'ng-forward/cjs/testing/test-component-builder';
-import {Pipe, Input, provide, Component} from 'ng-forward';
-import {provideFilters} from '../../../../spec/helpers';
-
-import {LinkListBlockComponent} from './link-list.component';
-
-const tcb = new TestComponentBuilder();
-
-const htmlTemplate: string = '<noosfero-link-list-block [block]="ctrl.block" [owner]="ctrl.owner"></noosfero-link-list-block>';
-
-
-describe("Components", () => {
-
-    describe("Link List Block Component", () => {
-
-        beforeEach(angular.mock.module("templates"));
-
-        it("receives the block and the owner as inputs", done => {
-
-            // Creating a container component (BlockContainerComponent) to include
-            // the component under test (Block)
-            @Component({ selector: 'test-container-component', template: htmlTemplate, directives: [LinkListBlockComponent] })
-            class BlockContainerComponent {
-                block = { type: 'Block' };
-                owner = { name: 'profile-name' };
-                constructor() {
-                }
-            }
-
-            // uses the TestComponentBuilder instance to initialize the component
-            // .overrideView(LinkListBlock, { template: 'asdasdasd', pipes: [NoosferoTemplate] })
-            tcb.createAsync(BlockContainerComponent).then(fixture => {
-                // and here we can inspect and run the test assertions
-                let myComponent: LinkListBlockComponent = fixture.componentInstance;
-
-                // assure the block object inside the Block matches
-                // the provided through the parent component
-                expect(myComponent.block.type).toEqual("Block");
-                expect(myComponent.owner.name).toEqual("profile-name");
-                done();
-            });
-        });
-
-
-        it("display links stored in block settings", done => {
-
-            @Component({
-                selector: 'test-container-component',
-                template: htmlTemplate,
-                directives: [LinkListBlockComponent],
-                providers: provideFilters("noosferoTemplateFilter")
-            })
-            class CustomBlockType {
-                block: any = { settings: { links: [{ name: 'link1', address: 'address1' }, { name: 'link2', address: 'address2' }] } };
-                owner: any = { name: 'profile-name' };
-            }
-            tcb.createAsync(CustomBlockType).then(fixture => {
-                expect(fixture.debugElement.queryAll(".link-list-block a").length).toEqual(2);
-                done();
-            });
-        });
-
-    });
-
-});
 \ No newline at end of file
@@ -1,20 +0,0 @@
-import {Component, Input} from "ng-forward";
-
-@Component({
-    selector: "noosfero-link-list-block",
-    templateUrl: "app/layout/blocks/link-list/link-list.html"
-})
-export class LinkListBlockComponent {
-
-    @Input() block: any;
-    @Input() owner: any;
-
-    links: any;
-
-    ngOnInit() {
-        if (this.block && this.block.settings) {
-            this.links = this.block.settings.links;
-        }
-    }
-
-}
@@ -1,7 +0,0 @@
-<div class="link-list-block">
-  <div ng-repeat="link in ctrl.links">
-    <a ng-href="{{link.address | noosferoTemplate:{profile: ctrl.owner.identifier} }}">
-      <i class="fa fa-fw icon-{{link.icon}}"></i> <span>{{link.name}}</span>
-    </a>
-  </div>
-</div>
@@ -1,34 +0,0 @@
-.icon-event {
-  @extend .fa-calendar;
-}
-.icon-photos {
-  @extend .fa-photo;
-}
-.icon-edit {
-  @extend .fa-edit;
-}
-.icon-ok {
-  @extend .fa-check;
-}
-.icon-send {
-  @extend .fa-send-o;
-}
-.icon-menu-people {
-  @extend .fa-user;
-}
-.icon-forum {
-  @extend .fa-users;
-}
-.icon-new {
-  @extend .fa-file-o;
-}
-.icon-save {
-  @extend .fa-save;
-}
-
-.link-list-block {
-  a i {
-    line-height: 25px;
-    color: #949494;
-  }
-}
@@ -1,2 +0,0 @@
-/* Module Index Entry - generated using the script npm run generate-index */
-export * from "./main-block.component";
@@ -1,40 +0,0 @@
-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();
-
-const htmlTemplate: string = '<noosfero-main-block [block]="ctrl.block" [owner]="ctrl.owner"></noosfero-main-block>';
-
-describe("Components", () => {
-    describe("Main Block Component", () => {
-
-        // the karma preprocessor html2js transform the templates html into js files which put
-        // the templates to the templateCache into the module templates
-        // we need to load the module templates here as the template for the
-        // component Block will be load on our tests
-        beforeEach(angular.mock.module("templates"));
-
-        it("check if the main block has a tag with ui-view attribute", done => {
-
-            // Creating a container component (BlockContainerComponent) to include
-            // the component under test (Block)
-            @Component({ selector: 'test-container-component', template: htmlTemplate, directives: [MainBlockComponent] })
-            class BlockContainerComponent {
-            }
-
-            // uses the TestComponentBuilder instance to initialize the component
-            tcb.createAsync(BlockContainerComponent).then(fixture => {
-                // and here we can inspect and run the test assertions
-                // let myComponent: MainBlockComponent = fixture.componentInstance;
-
-                // assure the block object inside the Block matches
-                // the provided through the parent component
-                expect(fixture.debugElement.queryAll('[ui-view="mainBlockContent"]').length).toEqual(1);
-                done();
-            });
-        });
-    });
-});
 \ No newline at end of file
@@ -1,10 +0,0 @@
-import {Component, Input} from 'ng-forward';
-import {BlockComponent} from '../block.component';
-
-@Component({
-    selector: 'noosfero-main-block',
-    templateUrl: 'app/layout/blocks/main-block/main-block.html'
-})
-export class MainBlockComponent {
-
-}
@@ -1 +0,0 @@
-<div ui-view="mainBlockContent" autoscroll></div>
@@ -0,0 +1,2 @@
+/* Module Index Entry - generated using the script npm run generate-index */
+export * from "./main-block.component";
@@ -0,0 +1,40 @@
+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();
+
+const htmlTemplate: string = '<noosfero-main-block [block]="ctrl.block" [owner]="ctrl.owner"></noosfero-main-block>';
+
+describe("Components", () => {
+    describe("Main Block Component", () => {
+
+        // the karma preprocessor html2js transform the templates html into js files which put
+        // the templates to the templateCache into the module templates
+        // we need to load the module templates here as the template for the
+        // component Block will be load on our tests
+        beforeEach(angular.mock.module("templates"));
+
+        it("check if the main block has a tag with ui-view attribute", done => {
+
+            // Creating a container component (BlockContainerComponent) to include
+            // the component under test (Block)
+            @Component({ selector: 'test-container-component', template: htmlTemplate, directives: [MainBlockComponent] })
+            class BlockContainerComponent {
+            }
+
+            // uses the TestComponentBuilder instance to initialize the component
+            tcb.createAsync(BlockContainerComponent).then(fixture => {
+                // and here we can inspect and run the test assertions
+                // let myComponent: MainBlockComponent = fixture.componentInstance;
+
+                // assure the block object inside the Block matches
+                // the provided through the parent component
+                expect(fixture.debugElement.queryAll('[ui-view="mainBlockContent"]').length).toEqual(1);
+                done();
+            });
+        });
+    });
+});
 \ No newline at end of file
@@ -0,0 +1,10 @@
+import {Component, Input} from 'ng-forward';
+import {BlockComponent} from '../block.component';
+
+@Component({
+    selector: 'noosfero-main-block',
+    templateUrl: 'app/layout/blocks/main/main-block.html'
+})
+export class MainBlockComponent {
+
+}
@@ -0,0 +1 @@
+<div ui-view="mainBlockContent" autoscroll></div>
@@ -1,2 +0,0 @@
-/* Module Index Entry - generated using the script npm run generate-index */
-export * from "./members-block.component";
@@ -1,49 +0,0 @@
-import {TestComponentBuilder} from 'ng-forward/cjs/testing/test-component-builder';
-import {Provider, Input, provide, Component} from 'ng-forward';
-import {MembersBlockComponent} from './members-block.component';
-import {ComponentTestHelper, createClass} from './../../../../spec/component-test-helper';
-
-const htmlTemplate: string = '<noosfero-members-block [block]="ctrl.block" [owner]="ctrl.owner"></noosfero-members-block>';
-
-const tcb = new TestComponentBuilder();
-
-describe("Components", () => {
-    describe("Members Block Component", () => {
-
-        let helper: ComponentTestHelper;
-
-        let providers = [
-            new Provider('ProfileService', {
-                useValue: {
-                    getProfileMembers: (profileId: number, filters: any): any => {
-                        return Promise.resolve({ data: { people: [{ identifier: "person1" }] } });
-                    }
-                }
-            }),
-        ];
-
-        beforeEach(angular.mock.module("templates"));
-
-        beforeEach( (done) => {
-            // Custom properties for the component
-            let properties = { owner: { id: 1 } };
-            // Create the component bed for the test.
-            let cls = createClass({
-                template: htmlTemplate,
-                directives: [MembersBlockComponent],
-                providers: providers,
-                properties: properties
-            });
-            helper = new ComponentTestHelper(cls, done);
-        });
-
-        it("get members of the block owner", () => {
-            expect(helper.component.members[0].identifier).toEqual("person1");
-        });
-
-        it("render the profile image for each member", () => {
-            expect(helper.all("noosfero-profile-image").length).toEqual(1);
-        });
-
-    });
-});
 \ No newline at end of file
@@ -1,25 +0,0 @@
-import {Input, Inject, Component} from "ng-forward";
-import {ProfileService} from "../../../../lib/ng-noosfero-api/http/profile.service";
-
-@Component({
-    selector: "noosfero-members-block",
-    templateUrl: 'app/layout/blocks/members-block/members-block.html',
-})
-@Inject(ProfileService)
-export class MembersBlockComponent {
-
-    @Input() block: noosfero.Block;
-    @Input() owner: noosfero.Profile;
-
-    members: any = [];
-
-    constructor(private profileService: ProfileService) {
-
-    }
-
-    ngOnInit() {
-        this.profileService.getProfileMembers(this.owner.id, { per_page: 6 }).then((response: any) => {
-            this.members = response.data.people;
-        });
-    }
-}
@@ -1,5 +0,0 @@
-<div class="members-block">
-  <a ng-repeat="member in ctrl.members" ui-sref="main.profile.home({profile: member.identifier})" class="member">
-    <noosfero-profile-image [profile]="member"></noosfero-profile-image>
-  </a>
-</div>
@@ -1,17 +0,0 @@
-.members-block {
-  .member {
-    img, i.profile-image {
-      width: 60px;
-    }
-    img {
-      display: inline-block;
-      vertical-align: top;
-    }
-    i.profile-image {
-        text-align: center;
-        background-color: #889DB1;
-        color: #F1F1F1;
-        font-size: 4.5em;
-    }
-  }
-}
@@ -0,0 +1,2 @@
+/* Module Index Entry - generated using the script npm run generate-index */
+export * from "./members-block.component";
@@ -0,0 +1,49 @@
+import {TestComponentBuilder} from 'ng-forward/cjs/testing/test-component-builder';
+import {Provider, Input, provide, Component} from 'ng-forward';
+import {MembersBlockComponent} from './members-block.component';
+import {ComponentTestHelper, createClass} from './../../../../spec/component-test-helper';
+
+const htmlTemplate: string = '<noosfero-members-block [block]="ctrl.block" [owner]="ctrl.owner"></noosfero-members-block>';
+
+const tcb = new TestComponentBuilder();
+
+describe("Components", () => {
+    describe("Members Block Component", () => {
+
+        let helper: ComponentTestHelper<MembersBlockComponent>;
+
+        let providers = [
+            new Provider('ProfileService', {
+                useValue: {
+                    getProfileMembers: (profileId: number, filters: any): any => {
+                        return Promise.resolve({ data: { people: [{ identifier: "person1" }] } });
+                    }
+                }
+            }),
+        ];
+
+        beforeEach(angular.mock.module("templates"));
+
+        beforeEach((done) => {
+            // Custom properties for the component
+            let properties = { owner: { id: 1 } };
+            // Create the component bed for the test.
+            let cls = createClass({
+                template: htmlTemplate,
+                directives: [MembersBlockComponent],
+                providers: providers,
+                properties: properties
+            });
+            helper = new ComponentTestHelper<MembersBlockComponent>(cls, done);
+        });
+
+        it("get members of the block owner", () => {
+            expect(helper.component.members[0].identifier).toEqual("person1");
+        });
+
+        it("render the profile image for each member", () => {
+            expect(helper.all("noosfero-profile-image").length).toEqual(1);
+        });
+
+    });
+});
@@ -0,0 +1,25 @@
+import {Input, Inject, Component} from "ng-forward";
+import {ProfileService} from "../../../../lib/ng-noosfero-api/http/profile.service";
+
+@Component({
+    selector: "noosfero-members-block",
+    templateUrl: 'app/layout/blocks/members/members-block.html',
+})
+@Inject(ProfileService)
+export class MembersBlockComponent {
+
+    @Input() block: noosfero.Block;
+    @Input() owner: noosfero.Profile;
+
+    members: any = [];
+
+    constructor(private profileService: ProfileService) {
+
+    }
+
+    ngOnInit() {
+        this.profileService.getProfileMembers(this.owner.id, { per_page: 6 }).then((response: any) => {
+            this.members = response.data.people;
+        });
+    }
+}
@@ -0,0 +1,5 @@
+<div class="members-block">
+  <a ng-repeat="member in ctrl.members" ui-sref="main.profile.home({profile: member.identifier})" class="member">
+    <noosfero-profile-image [profile]="member"></noosfero-profile-image>
+  </a>
+</div>
@@ -0,0 +1,17 @@
+.members-block {
+  .member {
+    img, i.profile-image {
+      width: 60px;
+    }
+    img {
+      display: inline-block;
+      vertical-align: top;
+    }
+    i.profile-image {
+        text-align: center;
+        background-color: #889DB1;
+        color: #F1F1F1;
+        font-size: 4.5em;
+    }
+  }
+}
@@ -1,2 +0,0 @@
-/* Module Index Entry - generated using the script npm run generate-index */
-export * from "./people-block.component";
@@ -1,72 +0,0 @@
-import {TestComponentBuilder} from 'ng-forward/cjs/testing/test-component-builder';
-import {Provider} from 'ng-forward';
-import {ComponentTestHelper, createClass} from './../../../../spec/component-test-helper';
-import {providers} from 'ng-forward/cjs/testing/providers';
-import {PeopleBlockComponent} from './people-block.component';
-
-const htmlTemplate: string = '<noosfero-people-block [block]="ctrl.block" [owner]="ctrl.owner"></noosfero-people-block>';
-
-describe("Components", () => {
-
-    describe("People Block Component", () => {
-        let serviceMock = {
-                    getEnvironmentPeople: (filters: any): any => {
-                        return Promise.resolve([{ identifier: "person1" }]);
-                    }
-                };
-        let providers = [new Provider('EnvironmentService', { useValue: serviceMock })];
-
-        let helper: ComponentTestHelper;
-
-        beforeEach( angular.mock.module("templates") );
-
-        /**
-         * The beforeEach procedure will initialize the helper and parse
-         * the component according to the given providers. Unfortunetly, in
-         * this mode, the providers and properties given to the construtor
-         * can't be overriden.
-        */
-        beforeEach( (done) => {
-            // Create the component bed for the test. Optionally, this could be done
-            // in each test if one needs customization of these parameters per test
-            let cls = createClass({
-                template: htmlTemplate,
-                directives: [PeopleBlockComponent],
-                providers: providers,
-                properties: {}
-            });
-            helper = new ComponentTestHelper(cls, done);
-        });
-
-        /**
-         * By default the helper will have the component, with all properties 
-         * ready to be used. Here the mock provider 'EnvironmentService' will 
-         * return the given array with one person.
-         */
-        it("get block with one people", () => {
-            expect(helper.component.people[0].identifier).toEqual("person1");
-        });
-
-        /**
-         * There are helper functions to access the JQuery DOM like this.
-         */
-        it("render the profile image for each person", () => {
-            expect(helper.all("noosfero-profile-image").length).toEqual(1);
-        });
-
-        /**
-         * The main debugElement element is also available
-         */
-        it("render the main noosfero people block", () => {
-            expect(helper.debugElement.children().length).toEqual(1, "The people-block should have a div children");
-        });
-
-        /**
-         * Just another example of a JQuery DOM helper function
-         */
-        it("render the noosfero people block div", () => {
-            let div = helper.findChildren("noosfero-people-block", "div");
-            expect(div.className).toBe('people-block', "The class should be people-block");
-        });
-    });
-});
 \ No newline at end of file
@@ -1,26 +0,0 @@
-import {Input, Inject, Component} from "ng-forward";
-import {EnvironmentService} from "../../../../lib/ng-noosfero-api/http/environment.service";
-
-@Component({
-    selector: "noosfero-people-block",
-    templateUrl: 'app/layout/blocks/people-block/people-block.html',
-})
-@Inject(EnvironmentService)
-export class PeopleBlockComponent {
-
-    @Input() block: noosfero.Block;
-    @Input() owner: noosfero.Environment;
-    private type: string = "people";
-
-    people: noosfero.Person[] = [];
-
-    constructor(private environmentService: EnvironmentService) {
-    }
-
-    ngOnInit() {
-        this.environmentService.getEnvironmentPeople({ limit: '6' }).then((people: noosfero.Person[]) => {
-            this.people = people;
-        });
-    }
-
-}
@@ -1,5 +0,0 @@
-<div class="{{ctrl.type}}-block">
-  <a ng-repeat="person in ctrl.people" ui-sref="main.profile.home({profile: person.identifier})" class="person">
-    <noosfero-profile-image [profile]="person"></noosfero-profile-image>
-  </a>
-</div>
@@ -1,17 +0,0 @@
-.members-block {
-  .member {
-    img, i.profile-image {
-      width: 60px;
-    }
-    img {
-      display: inline-block;
-      vertical-align: top;
-    }
-    i.profile-image {
-        text-align: center;
-        background-color: #889DB1;
-        color: #F1F1F1;
-        font-size: 4.5em;
-    }
-  }
-}
@@ -0,0 +1,2 @@
+/* Module Index Entry - generated using the script npm run generate-index */
+export * from "./people-block.component";
@@ -0,0 +1,72 @@
+import {TestComponentBuilder} from 'ng-forward/cjs/testing/test-component-builder';
+import {Provider} from 'ng-forward';
+import {ComponentTestHelper, createClass} from './../../../../spec/component-test-helper';
+import {providers} from 'ng-forward/cjs/testing/providers';
+import {PeopleBlockComponent} from './people-block.component';
+
+const htmlTemplate: string = '<noosfero-people-block [block]="ctrl.block" [owner]="ctrl.owner"></noosfero-people-block>';
+
+describe("Components", () => {
+
+    describe("People Block Component", () => {
+        let serviceMock = {
+            getEnvironmentPeople: (filters: any): any => {
+                return Promise.resolve([{ identifier: "person1" }]);
+            }
+        };
+        let providers = [new Provider('EnvironmentService', { useValue: serviceMock })];
+
+        let helper: ComponentTestHelper<PeopleBlockComponent>;
+
+        beforeEach(angular.mock.module("templates"));
+
+        /**
+         * The beforeEach procedure will initialize the helper and parse
+         * the component according to the given providers. Unfortunetly, in
+         * this mode, the providers and properties given to the construtor
+         * can't be overriden.
+        */
+        beforeEach((done) => {
+            // Create the component bed for the test. Optionally, this could be done
+            // in each test if one needs customization of these parameters per test
+            let cls = createClass({
+                template: htmlTemplate,
+                directives: [PeopleBlockComponent],
+                providers: providers,
+                properties: {}
+            });
+            helper = new ComponentTestHelper<PeopleBlockComponent>(cls, done);
+        });
+
+        /**
+         * By default the helper will have the component, with all properties
+         * ready to be used. Here the mock provider 'EnvironmentService' will
+         * return the given array with one person.
+         */
+        it("get block with one people", () => {
+            expect(helper.component.people[0].identifier).toEqual("person1");
+        });
+
+        /**
+         * There are helper functions to access the JQuery DOM like this.
+         */
+        it("render the profile image for each person", () => {
+            expect(helper.all("noosfero-profile-image").length).toEqual(1);
+        });
+
+        /**
+         * The main debugElement element is also available
+         */
+        it("render the main noosfero people block", () => {
+            expect(helper.debugElement.children().length).toEqual(1, "The people-block should have a div children");
+        });
+
+        /**
+         * Just another example of a JQuery DOM helper function
+         */
+        it("render the noosfero people block div", () => {
+            let div = helper.findChildren("noosfero-people-block", "div");
+            expect(div.className).toBe('people-block', "The class should be people-block");
+        });
+    });
+});
@@ -0,0 +1,26 @@
+import {Input, Inject, Component} from "ng-forward";
+import {EnvironmentService} from "../../../../lib/ng-noosfero-api/http/environment.service";
+
+@Component({
+    selector: "noosfero-people-block",
+    templateUrl: 'app/layout/blocks/people/people-block.html',
+})
+@Inject(EnvironmentService)
+export class PeopleBlockComponent {
+
+    @Input() block: noosfero.Block;
+    @Input() owner: noosfero.Environment;
+    private type: string = "people";
+
+    people: noosfero.Person[] = [];
+
+    constructor(private environmentService: EnvironmentService) {
+    }
+
+    ngOnInit() {
+        this.environmentService.getEnvironmentPeople({ limit: '6' }).then((people: noosfero.Person[]) => {
+            this.people = people;
+        });
+    }
+
+}
@@ -0,0 +1,5 @@
+<div class="{{ctrl.type}}-block">
+  <a ng-repeat="person in ctrl.people" ui-sref="main.profile.home({profile: person.identifier})" class="person">
+    <noosfero-profile-image [profile]="person"></noosfero-profile-image>
+  </a>
+</div>
@@ -0,0 +1,17 @@
+.members-block {
+  .member {
+    img, i.profile-image {
+      width: 60px;
+    }
+    img {
+      display: inline-block;
+      vertical-align: top;
+    }
+    i.profile-image {
+        text-align: center;
+        background-color: #889DB1;
+        color: #F1F1F1;
+        font-size: 4.5em;
+    }
+  }
+}
@@ -1,2 +0,0 @@
-/* Module Index Entry - generated using the script npm run generate-index */
-export * from "./profile-image-block.component";
@@ -1,46 +0,0 @@
-import {TestComponentBuilder, ComponentFixture} from 'ng-forward/cjs/testing/test-component-builder';
-import {Pipe, Input, provide, Component} from 'ng-forward';
-
-import {ProfileImageBlockComponent} from './profile-image-block.component';
-
-import * as helpers from "./../../../../spec/helpers";
-
-const tcb = new TestComponentBuilder();
-
-const htmlTemplate: string = '<noosfero-profile-image-block  [block]="ctrl.block" [owner]="ctrl.owner"></noosfero-profile-image-block>';
-
-describe("Components", () => {
-
-    describe("Profile Image Block Component", () => {
-
-        beforeEach(angular.mock.module("templates"));
-
-        @Component({
-            selector: 'test-container-component',
-            template: htmlTemplate,
-            directives: [ProfileImageBlockComponent],
-            providers: helpers.provideFilters("translateFilter")
-        })
-        class BlockContainerComponent {
-            block = { type: 'Block' };
-            owner = { name: 'profile-name' };
-            constructor() {
-            }
-        }
-
-        it("show image if present", () => {
-            helpers.tcb.createAsync(BlockContainerComponent).then(fixture => {
-                let elProfile = fixture.debugElement.componentViewChildren[0];
-                expect(elProfile.query('div.profile-image-block').length).toEqual(1);
-            });
-        });
-
-        it("has link to the profile", () => {
-            helpers.tcb.createAsync(BlockContainerComponent).then(fixture => {
-                let elProfile = fixture.debugElement.componentViewChildren[0];
-                expect(elProfile.query('a.settings-link').length).toEqual(1);
-            });
-        });
-
-    });
-});
@@ -1,14 +0,0 @@
-import {Inject, Input, Component} from "ng-forward";
-import {ProfileImageComponent} from "./../../../profile/image/image.component";
-
-@Component({
-    selector: "noosfero-profile-image-block",
-    templateUrl: 'app/layout/blocks/profile-image-block/profile-image-block.html',
-    directives: [ProfileImageComponent]
-})
-export class ProfileImageBlockComponent {
-
-    @Input() block: noosfero.Block;
-    @Input() owner: noosfero.Profile;
-
-}
@@ -1,6 +0,0 @@
-<div class="center-block text-center profile-image-block">
-  <a ui-sref="main.profile.info({profile: ctrl.owner.identifier})">
-    <noosfero-profile-image [profile]="ctrl.owner"></noosfero-profile-image>
-  </a>
-  <a class="settings-link" target="_self" ui-sref="main.profile.settings({profile: ctrl.owner.identifier})">{{"blocks.profile_image.control_panel" | translate}}</a>
-</div>
@@ -1,5 +0,0 @@
-.profile-image-block {
-  .settings-link {
-    display: block;
-  }
-}
@@ -0,0 +1,2 @@
+/* Module Index Entry - generated using the script npm run generate-index */
+export * from "./profile-image-block.component";
@@ -0,0 +1,46 @@
+import {TestComponentBuilder, ComponentFixture} from 'ng-forward/cjs/testing/test-component-builder';
+import {Pipe, Input, provide, Component} from 'ng-forward';
+
+import {ProfileImageBlockComponent} from './profile-image-block.component';
+
+import * as helpers from "./../../../../spec/helpers";
+
+const tcb = new TestComponentBuilder();
+
+const htmlTemplate: string = '<noosfero-profile-image-block  [block]="ctrl.block" [owner]="ctrl.owner"></noosfero-profile-image-block>';
+
+describe("Components", () => {
+
+    describe("Profile Image Block Component", () => {
+
+        beforeEach(angular.mock.module("templates"));
+
+        @Component({
+            selector: 'test-container-component',
+            template: htmlTemplate,
+            directives: [ProfileImageBlockComponent],
+            providers: helpers.provideFilters("translateFilter")
+        })
+        class BlockContainerComponent {
+            block = { type: 'Block' };
+            owner = { name: 'profile-name' };
+            constructor() {
+            }
+        }
+
+        it("show image if present", () => {
+            helpers.tcb.createAsync(BlockContainerComponent).then(fixture => {
+                let elProfile = fixture.debugElement.componentViewChildren[0];
+                expect(elProfile.query('div.profile-image-block').length).toEqual(1);
+            });
+        });
+
+        it("has link to the profile", () => {
+            helpers.tcb.createAsync(BlockContainerComponent).then(fixture => {
+                let elProfile = fixture.debugElement.componentViewChildren[0];
+                expect(elProfile.query('a.settings-link').length).toEqual(1);
+            });
+        });
+
+    });
+});
@@ -0,0 +1,14 @@
+import {Inject, Input, Component} from "ng-forward";
+import {ProfileImageComponent} from "./../../../profile/image/image.component";
+
+@Component({
+    selector: "noosfero-profile-image-block",
+    templateUrl: 'app/layout/blocks/profile-image/profile-image-block.html',
+    directives: [ProfileImageComponent]
+})
+export class ProfileImageBlockComponent {
+
+    @Input() block: noosfero.Block;
+    @Input() owner: noosfero.Profile;
+
+}
@@ -0,0 +1,6 @@
+<div class="center-block text-center profile-image-block">
+  <a ui-sref="main.profile.info({profile: ctrl.owner.identifier})">
+    <noosfero-profile-image [profile]="ctrl.owner"></noosfero-profile-image>
+  </a>
+  <a class="settings-link" target="_self" ui-sref="main.profile.settings({profile: ctrl.owner.identifier})">{{"blocks.profile_image.control_panel" | translate}}</a>
+</div>
@@ -0,0 +1,5 @@
+.profile-image-block {
+  .settings-link {
+    display: block;
+  }
+}
 /* Module Index Entry - generated using the script npm run generate-index */
-export * from "./raw-html.component";
+export * from "./raw-html-block.component";
@@ -0,0 +1,36 @@
+import {TestComponentBuilder} from 'ng-forward/cjs/testing/test-component-builder';
+import {Component} from 'ng-forward';
+
+import {RawHTMLBlockComponent} from './raw-html-block.component';
+
+const tcb = new TestComponentBuilder();
+
+const htmlTemplate: string = '<noosfero-raw-html-block [block]="ctrl.block" [owner]="ctrl.owner"></noosfero-raw-html-block>';
+
+describe("Components", () => {
+
+    describe("Raw Html Block Component", () => {
+
+        beforeEach(angular.mock.module("templates"));
+        beforeEach(angular.mock.module("ngSanitize"));
+
+        it("display html stored in block settings", done => {
+
+            @Component({
+                selector: 'test-container-component',
+                template: htmlTemplate,
+                directives: [RawHTMLBlockComponent],
+            })
+            class CustomBlockType {
+                block: any = { settings: { html: '<em>block content</em>' } };
+                owner: any = { name: 'profile-name' };
+            }
+            tcb.createAsync(CustomBlockType).then(fixture => {
+                expect(fixture.debugElement.query(".raw-html-block em").text().trim()).toEqual('block content');
+                done();
+            });
+        });
+
+    });
+
+});
@@ -0,0 +1,18 @@
+import {Component, Input} from "ng-forward";
+
+@Component({
+    selector: "noosfero-raw-html-block",
+    templateUrl: 'app/layout/blocks/raw-html/raw-html-block.html'
+})
+
+export class RawHTMLBlockComponent {
+
+    @Input() block: any;
+    @Input() owner: any;
+
+    html: string;
+
+    ngOnInit() {
+        this.html = this.block.settings.html;
+    }
+}
@@ -0,0 +1,2 @@
+<div class="raw-html-block" ng-bind-html="ctrl.html">
+</div>
@@ -1,36 +0,0 @@
-import {TestComponentBuilder} from 'ng-forward/cjs/testing/test-component-builder';
-import {Component} from 'ng-forward';
-
-import {RawHTMLBlockComponent} from './raw-html.component';
-
-const tcb = new TestComponentBuilder();
-
-const htmlTemplate: string = '<noosfero-raw-htmlblock [block]="ctrl.block" [owner]="ctrl.owner"></noosfero-raw-htmlblock>';
-
-describe("Components", () => {
-
-    describe("Raw Html Block Component", () => {
-
-        beforeEach(angular.mock.module("templates"));
-        beforeEach(angular.mock.module("ngSanitize"));
-
-        it("display html stored in block settings", done => {
-
-            @Component({
-                selector: 'test-container-component',
-                template: htmlTemplate,
-                directives: [RawHTMLBlockComponent],
-            })
-            class CustomBlockType {
-                block: any = { settings: { html: '<em>block content</em>' } };
-                owner: any = { name: 'profile-name' };
-            }
-            tcb.createAsync(CustomBlockType).then(fixture => {
-                expect(fixture.debugElement.query(".raw-html-block em").text().trim()).toEqual('block content');
-                done();
-            });
-        });
-
-    });
-
-});
@@ -1,18 +0,0 @@
-import {Component, Input} from "ng-forward";
-
-@Component({
-    selector: "noosfero-raw-htmlblock",
-    templateUrl: 'app/layout/blocks/raw-html/raw-html.html'
-})
-
-export class RawHTMLBlockComponent {
-
-    @Input() block: any;
-    @Input() owner: any;
-
-    html: string;
-
-    ngOnInit() {
-        this.html = this.block.settings.html;
-    }
-}
@@ -1,2 +0,0 @@
-<div class="raw-html-block" ng-bind-html="ctrl.html">
-</div>
 /* Module Index Entry - generated using the script npm run generate-index */
-export * from "./recent-documents.component";
+export * from "./recent-documents-block.component";
@@ -0,0 +1,80 @@
+import {TestComponentBuilder} from 'ng-forward/cjs/testing/test-component-builder';
+import {Provider, Input, provide, Component} from 'ng-forward';
+import {provideFilters} from '../../../../spec/helpers';
+import {RecentDocumentsBlockComponent} from './recent-documents-block.component';
+
+const htmlTemplate: string = '<noosfero-recent-documents-block [block]="ctrl.block" [owner]="ctrl.owner"></noosfero-recent-documents-block>';
+
+const tcb = new TestComponentBuilder();
+
+describe("Components", () => {
+    describe("Recent Documents Block Component", () => {
+
+        let settingsObj = {};
+        let mockedArticleService = {
+            getByProfile: (profile: noosfero.Profile, filters: any): any => {
+                return Promise.resolve({ data: [{ name: "article1" }], headers: (name: string) => { return name; } });
+            }
+        };
+        let profile = { name: 'profile-name' };
+        beforeEach(angular.mock.module("templates"));
+
+        let state = jasmine.createSpyObj("state", ["go"]);
+
+
+        function getProviders() {
+            return [
+                new Provider('$state', { useValue: state }),
+                new Provider('ArticleService', {
+                    useValue: mockedArticleService
+                }),
+            ].concat(provideFilters("truncateFilter", "stripTagsFilter"));
+        }
+        let componentClass: any = null;
+
+        function getComponent() {
+            @Component({ selector: 'test-container-component', template: htmlTemplate, directives: [RecentDocumentsBlockComponent], providers: getProviders() })
+            class BlockContainerComponent {
+                block = { type: 'Block', settings: settingsObj };
+                owner = profile;
+                constructor() {
+                }
+            }
+            return BlockContainerComponent;
+        }
+
+
+        it("get recent documents from the article service", done => {
+            tcb.createAsync(getComponent()).then(fixture => {
+                let recentDocumentsBlock: RecentDocumentsBlockComponent = fixture.debugElement.componentViewChildren[0].componentInstance;
+                expect(recentDocumentsBlock.documents).toEqual([{ name: "article1" }]);
+                done();
+            });
+        });
+
+        it("go to article page when open a document", done => {
+            tcb.createAsync(getComponent()).then(fixture => {
+                let recentDocumentsBlock: RecentDocumentsBlockComponent = fixture.debugElement.componentViewChildren[0].componentInstance;
+                recentDocumentsBlock.openDocument({ path: "path", profile: { identifier: "identifier" } });
+                expect(state.go).toHaveBeenCalledWith("main.profile.page", { page: "path", profile: "identifier" });
+                done();
+            });
+        });
+
+        it("it uses default limit 5 if not defined on block", done => {
+            settingsObj = null;
+            mockedArticleService = jasmine.createSpyObj("mockedArticleService", ["getByProfile"]);
+            (<any>mockedArticleService).mocked = true;
+            let thenMocked = jasmine.createSpy("then");
+            mockedArticleService.getByProfile = jasmine.createSpy("getByProfile").and.returnValue({then: thenMocked});
+            let getByProfileFunct = mockedArticleService.getByProfile;
+            tcb.createAsync(getComponent()).then(fixture => {
+                let recentDocumentsBlock: RecentDocumentsBlockComponent = fixture.debugElement.componentViewChildren[0].componentInstance;
+                recentDocumentsBlock.openDocument({ path: "path", profile: { identifier: "identifier" } });
+                expect(getByProfileFunct).toHaveBeenCalledWith(profile, { content_type: 'TinyMceArticle', per_page: 5 });
+                done();
+            });
+        });
+
+    });
+});
@@ -0,0 +1,41 @@
+import {Component, Inject, Input} from "ng-forward";
+import {ArticleService} from "../../../../lib/ng-noosfero-api/http/article.service";
+
+@Component({
+    selector: "noosfero-recent-documents-block",
+    templateUrl: 'app/layout/blocks/recent-documents/recent-documents-block.html'
+})
+@Inject(ArticleService, "$state")
+export class RecentDocumentsBlockComponent {
+
+    @Input() block: any;
+    @Input() owner: any;
+
+    profile: any;
+    documents: any;
+
+    documentsLoaded: boolean = false;
+
+    constructor(private articleService: ArticleService, private $state: any) {
+    }
+
+    ngOnInit() {
+        this.profile = this.owner;
+        this.documents = [];
+
+        let limit = ((this.block && this.block.settings) ? this.block.settings.limit : null) || 5;
+        // FIXME get all text articles
+        // FIXME make the getByProfile a generic method where we tell the type passing a class TinyMceArticle
+        //       and the promise should be of type TinyMceArticle[], per example
+        this.articleService.getByProfile(this.profile, { content_type: 'TinyMceArticle', per_page: limit })
+        .then((result: noosfero.RestResult<noosfero.Article[]>) => {
+            this.documents = <noosfero.Article[]>result.data;
+            this.documentsLoaded = true;
+        });
+    }
+
+    openDocument(article: any) {
+        this.$state.go("main.profile.page", { page: article.path, profile: article.profile.identifier });
+    }
+
+}
@@ -0,0 +1,18 @@
+<div deckgrid source="ctrl.documents" class="deckgrid">
+  <div class="a-card panel media" ng-click="mother.ctrl.openDocument(card);">
+      <div class="author media-left" ng-show="card.author.image">
+        <img ng-src="{{card.author.image.url}}" class="img-circle">
+      </div>
+      <div class="header media-body">
+        <h5 class="title media-heading" ng-bind="card.title"></h5>
+
+        <div class="subheader">
+          <span class="time">
+            <i class="fa fa-clock-o"></i> <span am-time-ago="card.created_at | dateFormat"></span>
+          </span>
+        </div>
+      </div>
+      <img ng-show="card.image" ng-src="{{card.image.url}}" class="img-responsive article-image">
+      <div class="post-lead" ng-bind-html="card.body | stripTags | truncate: 100: '...': true"></div>
+  </div>
+</div>
@@ -0,0 +1,65 @@
+.block.recentdocumentsblock {
+  .deckgrid[deckgrid]::before {
+    font-size: 0; /* See https://github.com/akoenig/angular-deckgrid/issues/14#issuecomment-35728861 */
+    visibility: hidden;
+  }
+  .author {
+    img {
+      width: 30px;
+      height: 30px;
+    }
+  }
+  .header {
+    .subheader {
+      color: #C1C1C1;
+      font-size: 10px;
+    }
+  }
+  .post-lead {
+    color: #8E8E8E;
+    font-size: 14px;
+  }
+  .article-image {
+    margin: 10px 0;
+  }
+}
+
+.col-md-2-5 {
+  .deckgrid[deckgrid]::before {
+    content: '1 .deck-column';
+  }
+}
+
+.col-md-7 {
+  .block.recentdocumentsblock {
+    background-color: transparent;
+    border: 0;
+
+    .deckgrid[deckgrid]::before {
+        content: '3 .deck-column';
+    }
+
+    .panel-heading {
+      display: none;
+    }
+    .panel-body {
+      padding: 0;
+    }
+
+    .deckgrid {
+      .column {
+        float: left;
+      }
+
+      .deck-column {
+        @extend .col-md-4;
+        padding: 0;
+
+        .a-card {
+          padding: 10px;
+          margin: 3px;
+        }
+      }
+    }
+  }
+}
@@ -1,80 +0,0 @@
-import {TestComponentBuilder} from 'ng-forward/cjs/testing/test-component-builder';
-import {Provider, Input, provide, Component} from 'ng-forward';
-import {provideFilters} from '../../../../spec/helpers';
-import {RecentDocumentsBlockComponent} from './recent-documents.component';
-
-const htmlTemplate: string = '<noosfero-recent-documents-block [block]="ctrl.block" [owner]="ctrl.owner"></noosfero-recent-documents-block>';
-
-const tcb = new TestComponentBuilder();
-
-describe("Components", () => {
-    describe("Recent Documents Block Component", () => {
-
-        let settingsObj = {};
-        let mockedArticleService = {
-            getByProfile: (profile: noosfero.Profile, filters: any): any => {
-                return Promise.resolve({ data: [{ name: "article1" }], headers: (name: string) => { return name; } });
-            }
-        };
-        let profile = { name: 'profile-name' };
-        beforeEach(angular.mock.module("templates"));
-
-        let state = jasmine.createSpyObj("state", ["go"]);
-
-
-        function getProviders() {
-            return [
-                new Provider('$state', { useValue: state }),
-                new Provider('ArticleService', {
-                    useValue: mockedArticleService
-                }),
-            ].concat(provideFilters("truncateFilter", "stripTagsFilter"));
-        }
-        let componentClass: any = null;
-
-        function getComponent() {
-            @Component({ selector: 'test-container-component', template: htmlTemplate, directives: [RecentDocumentsBlockComponent], providers: getProviders() })
-            class BlockContainerComponent {
-                block = { type: 'Block', settings: settingsObj };
-                owner = profile;
-                constructor() {
-                }
-            }
-            return BlockContainerComponent;
-        }
-
-
-        it("get recent documents from the article service", done => {
-            tcb.createAsync(getComponent()).then(fixture => {
-                let recentDocumentsBlock: RecentDocumentsBlockComponent = fixture.debugElement.componentViewChildren[0].componentInstance;
-                expect(recentDocumentsBlock.documents).toEqual([{ name: "article1" }]);
-                done();
-            });
-        });
-
-        it("go to article page when open a document", done => {
-            tcb.createAsync(getComponent()).then(fixture => {
-                let recentDocumentsBlock: RecentDocumentsBlockComponent = fixture.debugElement.componentViewChildren[0].componentInstance;
-                recentDocumentsBlock.openDocument({ path: "path", profile: { identifier: "identifier" } });
-                expect(state.go).toHaveBeenCalledWith("main.profile.page", { page: "path", profile: "identifier" });
-                done();
-            });
-        });
-
-        it("it uses default limit 5 if not defined on block", done => {
-            settingsObj = null;
-            mockedArticleService = jasmine.createSpyObj("mockedArticleService", ["getByProfile"]);
-            (<any>mockedArticleService).mocked = true;
-            let thenMocked = jasmine.createSpy("then");
-            mockedArticleService.getByProfile = jasmine.createSpy("getByProfile").and.returnValue({then: thenMocked});
-            let getByProfileFunct = mockedArticleService.getByProfile;
-            tcb.createAsync(getComponent()).then(fixture => {
-                let recentDocumentsBlock: RecentDocumentsBlockComponent = fixture.debugElement.componentViewChildren[0].componentInstance;
-                recentDocumentsBlock.openDocument({ path: "path", profile: { identifier: "identifier" } });
-                expect(getByProfileFunct).toHaveBeenCalledWith(profile, { content_type: 'TinyMceArticle', per_page: 5 });
-                done();
-            });
-        });
-
-    });
-});
 \ No newline at end of file
@@ -1,41 +0,0 @@
-import {Component, Inject, Input} from "ng-forward";
-import {ArticleService} from "../../../../lib/ng-noosfero-api/http/article.service";
-
-@Component({
-    selector: "noosfero-recent-documents-block",
-    templateUrl: 'app/layout/blocks/recent-documents/recent-documents.html'
-})
-@Inject(ArticleService, "$state")
-export class RecentDocumentsBlockComponent {
-
-    @Input() block: any;
-    @Input() owner: any;
-
-    profile: any;
-    documents: any;
-
-    documentsLoaded: boolean = false;
-
-    constructor(private articleService: ArticleService, private $state: any) {
-    }
-
-    ngOnInit() {
-        this.profile = this.owner;
-        this.documents = [];
-
-        let limit = ((this.block && this.block.settings) ? this.block.settings.limit : null) || 5;
-        // FIXME get all text articles
-        // FIXME make the getByProfile a generic method where we tell the type passing a class TinyMceArticle
-        //       and the promise should be of type TinyMceArticle[], per example
-        this.articleService.getByProfile(this.profile, { content_type: 'TinyMceArticle', per_page: limit })
-        .then((result: noosfero.RestResult<noosfero.Article[]>) => {
-            this.documents = <noosfero.Article[]>result.data;
-            this.documentsLoaded = true;
-        });
-    }
-
-    openDocument(article: any) {
-        this.$state.go("main.profile.page", { page: article.path, profile: article.profile.identifier });
-    }
-
-}
@@ -1,18 +0,0 @@
-<div deckgrid source="ctrl.documents" class="deckgrid">
-  <div class="a-card panel media" ng-click="mother.ctrl.openDocument(card);">
-      <div class="author media-left" ng-show="card.author.image">
-        <img ng-src="{{card.author.image.url}}" class="img-circle">
-      </div>
-      <div class="header media-body">
-        <h5 class="title media-heading" ng-bind="card.title"></h5>
-
-        <div class="subheader">
-          <span class="time">
-            <i class="fa fa-clock-o"></i> <span am-time-ago="card.created_at | dateFormat"></span>
-          </span>
-        </div>
-      </div>
-      <img ng-show="card.image" ng-src="{{card.image.url}}" class="img-responsive article-image">
-      <div class="post-lead" ng-bind-html="card.body | stripTags | truncate: 100: '...': true"></div>
-  </div>
-</div>
@@ -1,65 +0,0 @@
-.block.recentdocumentsblock {
-  .deckgrid[deckgrid]::before {
-    font-size: 0; /* See https://github.com/akoenig/angular-deckgrid/issues/14#issuecomment-35728861 */
-    visibility: hidden;
-  }
-  .author {
-    img {
-      width: 30px;
-      height: 30px;
-    }
-  }
-  .header {
-    .subheader {
-      color: #C1C1C1;
-      font-size: 10px;
-    }
-  }
-  .post-lead {
-    color: #8E8E8E;
-    font-size: 14px;
-  }
-  .article-image {
-    margin: 10px 0;
-  }
-}
-
-.col-md-2-5 {
-  .deckgrid[deckgrid]::before {
-    content: '1 .deck-column';
-  }
-}
-
-.col-md-7 {
-  .block.recentdocumentsblock {
-    background-color: transparent;
-    border: 0;
-
-    .deckgrid[deckgrid]::before {
-        content: '3 .deck-column';
-    }
-
-    .panel-heading {
-      display: none;
-    }
-    .panel-body {
-      padding: 0;
-    }
-
-    .deckgrid {
-      .column {
-        float: left;
-      }
-
-      .deck-column {
-        @extend .col-md-4;
-        padding: 0;
-
-        .a-card {
-          padding: 10px;
-          margin: 3px;
-        }
-      }
-    }
-  }
-}
@@ -0,0 +1,2 @@
+/* Module Index Entry - generated using the script npm run generate-index */
+export * from "./statistics-block.component";
@@ -0,0 +1,53 @@
+import {ComponentTestHelper, createClass} from './../../../../spec/component-test-helper';
+import {StatisticsBlockComponent} from './statistics-block.component';
+import * as helpers from "../../../../spec/helpers";
+
+const htmlTemplate: string = '<noosfero-statistics-block [block]="ctrl.block" [owner]="ctrl.owner"></noosfero-statistics-block>';
+
+describe("Components", () => {
+
+    describe("Statistics Block Component", () => {
+        let helper: ComponentTestHelper<StatisticsBlockComponent>;
+        beforeEach(angular.mock.module("templates"));
+
+        beforeEach((done) => {
+            let cls = createClass({
+                template: htmlTemplate,
+                directives: [StatisticsBlockComponent],
+                providers: helpers.provideFilters("translateFilter"),
+                properties: {
+                    block: {
+                        statistics: [
+                            {
+                                name: "users",
+                                display: true,
+                                quantity: 10
+                            },
+                            {
+                                name: "communities",
+                                display: true,
+                                quantity: 20
+                            },
+                            {
+                                name: "hits",
+                                display: false,
+                                quantity: null
+                            }
+                        ]
+                    }
+                }
+            });
+            helper = new ComponentTestHelper<StatisticsBlockComponent>(cls, done);
+        });
+
+        it("shows statistics marked with display equals 'true'", () => {
+            expect(helper.debugElement.queryAll("li.statistic").length).toEqual(2);
+            expect(helper.debugElement.query("span.users").text()).toEqual("10");
+            expect(helper.debugElement.query("span.communities").text()).toEqual("20");
+        });
+
+        it("does not shows statistics marked with display equals 'false'", () => {
+            expect(helper.debugElement.queryAll("span.hits").length).toEqual(0);
+        });
+    });
+});
@@ -0,0 +1,11 @@
+import {Input, Inject, Component} from "ng-forward";
+
+@Component({
+    selector: "noosfero-statistics-block",
+    templateUrl: 'app/layout/blocks/statistics/statistics-block.html'
+})
+
+export class StatisticsBlockComponent {
+    @Input() block: noosfero.StatisticsBlock;
+    @Input() owner: any;
+}
@@ -0,0 +1,9 @@
+<div class="statistics-block">
+  <ul class="list-group">
+    <li  ng-repeat="counter in ctrl.block.statistics" class="list-group-item statistic {{counter.name}}"  ng-if="counter.display" >
+      <span class="badge {{counter.name}}">{{counter.quantity}}</span>
+      {{"statistics." + counter.name | translate}}
+    </li>
+
+  </ul>
+</div>
@@ -0,0 +1,3 @@
+.statistics-block {
+//  background-color: blue;
+}
@@ -7,7 +7,6 @@ import {
     quickCreateComponent,
     provideEmptyObjects,
     createProviderToValue,
-    getAngularServiceFactory,
     provideFilters
 } from "../../../spec/helpers";
  
 <nav class="navbar navbar-static-top navbar-inverse">
   <div class="container-fluid">
     <div class="navbar-header">
-      <button type="button" class="navbar-toggle collapsed" ng-click="isCollapsed = !isCollapsed">
+      <button type="button" class="navbar-toggle collapsed" (click)="ctrl.toggleCollapse()" ng-show="ctrl.showHamburguer">
         <span class="sr-only">{{"navbar.toggle_menu" | translate}}</span>
-        <span class="icon-bar"></span>
-        <span class="icon-bar"></span>
-        <span class="icon-bar"></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-logo"> </span>
         <span class="noosfero-name">{{"noosfero.name" | translate}}</span>
       </a>
     </div>
 .navbar {
  
+  margin-bottom: 0px;
+
   .container-fluid {
-    padding-right: 12%;
-    padding-left: 12%;
-    @media (max-width: 978px) {
-      padding-right: 2%;
-      padding-left: 2%;
-    }
  
     .navbar-brand {
       .noosfero-logo {
-        background:url("../assets/images/logo-noosfero.png") no-repeat;
+        background: url("../assets/images/logo-noosfero.png") no-repeat;
         padding: 0px 62px 64px 15px;
       }
     }
@@ -28,5 +24,19 @@
         }
       }
     }
+
+    .navbar-toggle {
+  		display: block;
+      color: #fff;
+      padding: 4px 12px;
+      margin: 10px 10px;
+      text-align: center;
+  	}
+
+    @media (max-width: $break-sm-max) {
+    	.navbar-toggle .fa-bars{
+    		font-size: 14pt;
+    	}
+    }
   }
 }
 import * as helpers from "./../../../spec/helpers";
 import {Navbar} from "./navbar";
  
-import {Injectable, Provider, provide} from "ng-forward";
+import {Injectable, Provider, provide, EventEmitter} from "ng-forward";
  
 import {ComponentFixture} from 'ng-forward/cjs/testing/test-component-builder';
  
-import {SessionService, AuthService, AuthController, IAuthEvents, AUTH_EVENTS} from "./../../login";
+import {SessionService, AuthService, AuthController, AuthEvents} from "./../../login";
  
+import events from 'ng-forward/cjs/events/events';
  
 describe("Components", () => {
  
@@ -53,22 +54,19 @@ describe(&quot;Components&quot;, () =&gt; {
                     provide('$uibModal', {
                         useValue: $modal
                     }),
-                    provide('AuthService', {
+                    provide(AuthService, {
                         useValue: authService
                     }),
                     helpers.provideEmptyObjects('moment'),
                     provide('$state', {
                         useValue: stateService
                     }),
-                    provide("$scope", {
-                        useValue: scope
-                    }),
                     provide('SessionService', {
                         useValue: sessionService
                     }),
-                    provide('AUTH_EVENTS', {
+                    provide('AuthEvents', {
                         useValue: {
-                            AUTH_EVENTS
+                            AuthEvents
                         }
                     }),
                     provide('TranslatorService', {
@@ -146,7 +144,7 @@ describe(&quot;Components&quot;, () =&gt; {
  
  
         it('closes the modal after login', (done: Function) => {
-            modalInstance = jasmine.createSpyObj("modalInstance", ["close"]);
+            modalInstance = {};
             modalInstance.close = jasmine.createSpy("close");
  
             $modal.open = () => {
@@ -155,19 +153,21 @@ describe(&quot;Components&quot;, () =&gt; {
  
             buildComponent().then((fixture: ComponentFixture) => {
                 let navbarComp: Navbar = <Navbar>fixture.debugElement.componentViewChildren[0].componentInstance;
-                let localScope: ng.IScope = navbarComp["$scope"];
  
                 navbarComp.openLogin();
-                localScope.$emit(AUTH_EVENTS.loginSuccess);
+                let successEvent: string = AuthEvents[AuthEvents.loginSuccess];
+
+                (<any>navbarComp.authService)[successEvent].next(user);
+
                 expect(modalInstance.close).toHaveBeenCalled();
                 done();
             });
+
         });
  
         it('updates current user on logout', (done: Function) => {
             buildComponent().then((fixture: ComponentFixture) => {
                 let navbarComp: Navbar = <Navbar>fixture.debugElement.componentViewChildren[0].componentInstance;
-                let localScope: ng.IScope = navbarComp["$scope"];
  
                 // init navbar  currentUser with some user
                 navbarComp["currentUser"] = user;
@@ -176,12 +176,14 @@ describe(&quot;Components&quot;, () =&gt; {
                 // and emmit the 'logoutSuccess' event
                 // just what happens when user logsout
                 sessionService.currentUser = () => { return null; };
-                localScope.$emit(AUTH_EVENTS.logoutSuccess);
-                expect(navbarComp["currentUser"]).toBeNull();
+                let successEvent: string = AuthEvents[AuthEvents.logoutSuccess];
+
+                (<any>navbarComp.authService)[successEvent].next(user);
+
                 done();
+                expect(navbarComp["currentUser"]).toBeNull();
+
             });
         });
-
-
     });
 });
-import {Component, Inject} from "ng-forward";
+import {Component, Inject, EventEmitter, Input} from "ng-forward";
 import {LanguageSelectorComponent} from "../language-selector/language-selector.component";
-
-
-import {SessionService, AuthService, AuthController, IAuthEvents, AUTH_EVENTS} from "./../../login";
+import {SessionService, AuthService, AuthController, AuthEvents} from "./../../login";
+import {SidebarNotificationService} from "../sidebar/sidebar.notification.service";
+import {BodyStateClassesService} from '../services/body-state-classes.service';
  
 @Component({
     selector: "acme-navbar",
     templateUrl: "app/layout/navbar/navbar.html",
     directives: [LanguageSelectorComponent],
-    providers: [AuthService, SessionService]
+    providers: [AuthService, SessionService, SidebarNotificationService]
 })
-@Inject("$uibModal", AuthService, "SessionService", "$scope", "$state")
+@Inject("$uibModal", AuthService, "SessionService", "$state", SidebarNotificationService, BodyStateClassesService)
 export class Navbar {
  
     private currentUser: noosfero.User;
     private modalInstance: any = null;
+
+    public showHamburguer: boolean = false;
+
     /**
      *
      */
     constructor(
         private $uibModal: any,
-        private authService: AuthService,
+        public authService: AuthService,
         private session: SessionService,
-        private $scope: ng.IScope,
-        private $state: ng.ui.IStateService
+        private $state: ng.ui.IStateService,
+        private sidebarNotificationService: SidebarNotificationService,
+        private bodyStateService: BodyStateClassesService
     ) {
         this.currentUser = this.session.currentUser();
  
-        this.$scope.$on(AUTH_EVENTS.loginSuccess, () => {
+        this.showHamburguer = this.authService.isAuthenticated();
+        this.bodyStateService.addContentClass(!this.sidebarNotificationService.sidebarVisible);
+
+        this.authService.subscribe(AuthEvents[AuthEvents.loginSuccess], () => {
             if (this.modalInstance) {
                 this.modalInstance.close();
                 this.modalInstance = null;
             }
  
-            this.$state.go(this.$state.current, {}, { reload: true }); // TODO move to auth
+            this.currentUser = this.session.currentUser();
+            this.showHamburguer = true;
+
+            this.$state.go(this.$state.current, {}, { reload: true });  // TODO move to auth
         });
  
-        this.$scope.$on(AUTH_EVENTS.logoutSuccess, () => {
+        this.authService.subscribe(AuthEvents[AuthEvents.logoutSuccess], () => {
             this.currentUser = this.session.currentUser();
         });
+
+    }
+
+    public toggleCollapse() {
+        this.sidebarNotificationService.alternateVisibility();
+
+        this.bodyStateService.addContentClass(!this.sidebarNotificationService.sidebarVisible);
     }
  
     openLogin() {
@@ -55,8 +72,6 @@ export class Navbar {
         this.$state.go(this.$state.current, {}, { reload: true });  // TODO move to auth
     };
  
-
-
     activate() {
         if (!this.currentUser) {
             this.openLogin();
@@ -54,3 +54,19 @@
 .tabs-wrapper.tabs-no-header .tab-content {
 	padding: 0 20px 20px;
 }
+
+/* LABELS */
+.label {
+	@include border-radius($border-radius-base);
+	font-size: 0.875em;
+	font-weight: 600;
+}
+.label-default,
+.label.label-large {
+	font-size: 1em;
+	padding: 0.4em 0.8em 0.5em;
+}
+.label.label-circle {
+	@include border-radius(50%);
+	padding: 4px !important;
+}
@@ -0,0 +1,311 @@
+#col-left {
+    position: relative;
+    color: #003940;
+    height: 100%;
+
+	a {
+		color: #e1e1e1;
+	}
+	a:hover,
+	.nav-active a.nav-link,
+	a.active {
+		color: #fff;
+	}
+	* {
+		outline: none;
+	}
+}
+#nav-col {
+	padding: 0;
+	z-index: 100;
+	position: absolute;
+	background: #2c3e50;
+	width: 220px;
+  border-right: 2px solid #e7ebee;
+  height: 200%;
+
+	@media (max-width: $break-sm-max) {
+		position: relative;
+		width: auto;
+	}
+}
+#sidebar-nav {
+	max-height: 100%;
+	padding-left: 0;
+	padding-right: 0;
+
+	.nav {
+		> li {
+			margin: 0;
+
+			&.nav-header {
+				color: lighten(#2c3e50, 40%);
+				font-size: 0.8em;
+				padding: 12px 15px 6px 14px;
+				border-top: 2px solid darken(#2c3e50, 4%);
+
+				&.nav-header-first {
+					padding-top: 4px;
+					border-top: 0;
+				}
+			}
+
+			> a {
+				color: #fff;
+				height: 44px;
+			    line-height: 28px;
+			    @include transition(border-color 0.1s ease-in-out 0s, background-color 0.1s ease-in-out 0s, box-shadow 0.1s ease-in-out 0s);
+			    overflow: hidden;
+			    padding: 8px 15px 8px 20px;
+			    border-left: 0 solid transparent;
+
+				&:hover {
+					border-left-color: $primary-color;
+				}
+				> i {
+					position: absolute;
+					margin-top: 6px;
+				}
+				> span {
+				    margin-left: 35px;
+				    font-size: 0.875em;
+				    font-weight: 700;
+
+					&.label {
+						font-size: 0.75em;
+						margin: 5px 0 0 0;
+					    padding: 4px 0.6em;
+					}
+					&.label.label-circle {
+						margin-right: 5px;
+					}
+				}
+			}
+			&.open > a {
+				border-bottom-color: #252525;
+				outline: none;
+				text-decoration: none;
+			}
+			&.active > .submenu > li.active > .submenu {
+				display: block;
+			}
+		}
+		li {
+			@import "sidebar/submenu";
+
+			&.active > .submenu {
+				display: block;
+			}
+		}
+	}
+}
+.navbar-nav .open .dropdown-menu {
+	background-color: #FFFFFF;
+	border: none;
+	box-shadow: 0 6px 12px rgba(0, 0, 0, 0.176);
+	position: absolute;
+}
+#user-left-box {
+	padding: 20px 15px 20px 25px;
+
+	img {
+		@include border-radius(18%);
+		border: 3px solid #fff;
+	    float: left;
+	    width: 70px;
+	}
+	.user-box {
+		color: #fff;
+	    float: left;
+	    padding-left: 15px;
+	    padding-top: 18px;
+
+		> .name {
+			display: block;
+		    font-size: 1em;
+		    font-weight: 600;
+		    line-height: 1.2;
+
+		    > a {
+		    	color: #fff;
+
+		    	&:hover,
+		    	&:focus {
+		    		color: #E1E1E1;
+		    		text-decoration: none;
+		    	}
+		    }
+		}
+		> .status {
+			display: block;
+		    font-size: 0.75em;
+		    padding-top: 3px;
+		}
+		> .status > i {
+			color: $green-color;
+			margin-right: 4px;
+		}
+	}
+	&.dropdown {
+		.dropdown-menu {
+			top: 55px;
+			left: 30px;
+
+			a {
+				color: #707070;
+				font-size: 0.875em;
+
+				&:hover {
+					background-color: #f6f6f6;
+					color: #707070;
+				}
+			}
+		}
+	}
+}
+@media (min-width: $break-sm-min) {
+	.nav-small {
+		#nav-col {
+			width: 64px;
+		}
+		#content-wrapper {
+			margin-left: 64px;
+		}
+		#nav-col {
+			#user-left-box {
+				display: none;
+			}
+			#sidebar-nav {
+				.nav > li > a {
+					padding-left: 15px !important;
+					padding-right: 15px;
+					text-align: center;
+
+					> i {
+						position: relative;
+						font-size: 1.25em;
+					}
+					> span {
+						display: none;
+					}
+				}
+				.nav > li.nav-header {
+					display: none;
+				}
+				.nav li > a.dropdown-toggle > .drop-icon {
+					display: none;
+				}
+				.nav .submenu > li > a.dropdown-toggle > .drop-icon {
+					display: block;
+				}
+				.nav li .submenu {
+					  left: 64px;
+				    position: absolute;
+				    top: 0;
+				    width: 210px;
+
+				    > li > a {
+						padding-left: 28px;
+					}
+				}
+				.nav > .active > .submenu > li > .submenu {
+					left: auto;
+				    position: relative;
+				    top: auto;
+				    width: 100%;
+
+				    a {
+				    	padding-left: 48px
+				    }
+				}
+			}
+		}
+
+		#nav-col-submenu {
+			@import "sidebar/submenu";
+
+			.submenu {
+				position: absolute;
+				top: 60px;
+				left: 64px;
+				width: 210px;
+
+			    > li > a {
+					padding-left: 28px;
+
+					&.dropdown-toggle > .drop-icon {
+						display: block;
+					}
+				}
+			}
+			> .submenu {
+				display: block !important;
+			}
+			.submenu > li > .submenu,
+			.submenu > li > .submenu {
+				left: auto;
+			    position: relative;
+			    top: auto;
+			    width: 100%;
+
+			    a {
+			    	padding-left: 48px
+			    }
+			}
+		}
+	}
+}
+@media (max-width: $break-sm-max) {
+
+	#sidebar-nav.navbar-collapse {
+		max-height: 336px;
+	}
+}
+
+/* Extracted from original _header.scss */
+#sidebar-nav .nav a {
+  > i {
+  	font-size: 1.125em;
+  }
+  > .open > &, .open > &:focus {
+    background: inherit;
+  }
+  &:hover, .open > &:hover {
+    background: darken(#2c3e50, 4%);
+    color: #fff;
+    outline: none;
+  }
+}
+
+#sidebar-nav .nav-pills > li.active > a,
+#sidebar-nav .nav-pills > li.active > a:hover,
+#sidebar-nav .nav-pills > li.active > a:focus,
+.nav-pills > li.open > a,
+.nav-pills > li.open > a:hover,
+.nav-pills > li.open > a:focus,
+#sidebar-nav .nav-pills > li.open > a,
+#sidebar-nav .nav-pills > li.open > a:hover,
+#sidebar-nav .nav-pills > li > a:focus,
+.nav-small #nav-col #sidebar-nav .nav-pills > li.open > a {
+	background-color: darken(#2c3e50, 4%);
+	color: #fff;
+	border-left-color: $primary-color;
+}
+
+#user-left-box {
+  .profile-image-wrap {
+    float:left;
+    width: 70px;
+    height: 70px;
+  }
+  i.profile-image {
+    border-radius: 18%;
+    border: 3px solid #fff;
+    background-color: #fff;
+    text-align: center;
+  }
+}
+
+.submenu-count {
+	margin-right: 20px !important;
+}
@@ -0,0 +1,52 @@
+a.dropdown-toggle > .drop-icon {
+		color: #868b98;
+    font-size: 12px;
+    margin-top: -6px;
+    position: absolute;
+    right: 25px;
+    top: 50%;
+    @include transition(transform 0.2s ease-in-out 0.1s);
+}
+&.open a.dropdown-toggle > .drop-icon,
+&.active > a.dropdown-toggle > .drop-icon {
+	color: #fff;
+	transform:rotate(90deg);
+}
+
+.submenu {
+	background: darken(#2c3e50, 4%);
+	padding-left: 0;
+	margin: 0;
+	list-style: none;
+
+	li {
+		position: relative;
+
+		> a {
+		    display: block;
+		    font-size: 0.875em;
+		    line-height: 38px;
+		    padding-left: 60px;
+		    color: #fff;
+		    outline: none;
+		    text-decoration: none;
+		    @include transition(border-color 0.1s ease-in-out 0s, background-color 0.1s ease-in-out 0s, box-shadow 0.1s ease-in-out 0s);
+
+				&:hover {
+					background-color: #1f2c39;
+				}
+		}
+		&:first-of-type > a {
+			border-top: 0;
+		}
+		> a:hover,
+		> a:focus,
+		> a.active,
+		&.active > a,
+		&.open > a {
+			text-decoration: none;
+			color: #fff;
+			background-color: darken(#2c3e50, 7%);
+		}
+	}
+}
@@ -0,0 +1,310 @@
+$whbl-nav-col-bg: #ffffff; //f3f5f6
+$whbl-sidebar-linkColor: #484848;
+$whbl-primary-color: #1E96D0; //blue
+$whbl-font-color: #16191c;
+
+.skin-whbl {
+	#header-navbar {
+		background-color: $whbl-primary-color;
+	}
+	.navbar > .container .navbar-brand {
+		background-color: transparent;
+		width: 221px;
+	}
+	#nav-col,
+	#page-wrapper {
+		background-color: $whbl-nav-col-bg;
+	}
+	#sidebar-nav .nav > li > a {
+		color: $whbl-sidebar-linkColor;
+		/* border-bottom: 1px solid #e7ebee; */
+	}
+	#sidebar-nav .nav > .open > .submenu > li > .submenu,
+	#sidebar-nav .nav > .active > .submenu > li > .submenu,
+	#sidebar-nav .nav li .submenu > li.open a,
+	#nav-col-submenu .submenu > li > .submenu,
+	#nav-col-submenu li .submenu > li.open > a {
+	    background-color: darken($whbl-nav-col-bg, 8%);
+	}
+	.nav-pills > li.active > a,
+	.nav-pills > li.active > a:hover,
+	.nav-pills > li.active > a:focus,
+	#sidebar-nav .nav-pills > li.active > a,
+	#sidebar-nav .nav-pills > li.active > a:hover,
+	#sidebar-nav .nav-pills > li.active > a:focus,
+	.nav-pills > li.open > a,
+	.nav-pills > li.open > a:hover,
+	.nav-pills > li.open > a:focus,
+	#sidebar-nav .nav-pills > li.open > a,
+	#sidebar-nav .nav-pills > li.open > a:hover,
+	#sidebar-nav .nav-pills > li.open > a:focus,
+	#sidebar-nav .nav-pills > li > a:focus {
+		background-color: darken($whbl-nav-col-bg, 4%);
+		border-color: $whbl-primary-color;
+		border-bottom-color: #e7ebee;
+		color: $whbl-sidebar-linkColor;
+	}
+	#sidebar-nav .nav-pills > li.active > a > i {
+		color: #2980b9;
+	}
+	#sidebar-nav .nav > li > a:hover {
+		background-color: darken($whbl-nav-col-bg, 4%);
+		border-color: $whbl-primary-color;
+		border-bottom-color: #e7ebee;
+		color: $whbl-sidebar-linkColor;
+	}
+
+	#sidebar-nav .nav > li .submenu li > a:hover {
+		color: $whbl-font-color;
+		font-weight: bold;
+	}
+	#header-navbar .nav > li > a {
+		color: #fff;
+	}
+	#header-navbar .nav > li > a:hover,
+	#header-navbar .nav > li > a:focus,
+	#header-navbar .nav .open > a,
+	#header-navbar .nav .open > a:hover,
+	#header-navbar .nav .open > a:focus {
+		background-color: #2980b9;
+	}
+	#sidebar-nav .nav li .submenu,
+	#nav-col-submenu .submenu {
+		background-color: darken($whbl-nav-col-bg, 4%);
+	}
+	#sidebar-nav .nav li .submenu > li > a,
+	.nav-small #nav-col-submenu .submenu > li > a {
+		color: $whbl-font-color;
+	}
+	#sidebar-nav .nav > .open > .submenu > .open > a,
+	#sidebar-nav .nav > .active > .submenu > .open > a,
+	#sidebar-nav .nav > .active > .submenu > .active > a,
+	#nav-col-submenu .submenu > .open > a,
+	#nav-col-submenu .submenu > .active > a {
+		border-bottom-color: transparent;
+	    box-shadow: 0 -1px 0 transparent inset;
+	}
+	#sidebar-nav .nav > .open > .submenu > .open > a {
+	    border-bottom-color: #dcdfe6;
+		box-shadow: none;
+	}
+	#sidebar-nav .nav li.open > a.dropdown-toggle > .drop-icon,
+	#sidebar-nav .nav li.active > a.dropdown-toggle > .drop-icon {
+		color: $whbl-font-color;
+	}
+	#sidebar-nav .nav li .submenu > li > a:hover,
+	#sidebar-nav .nav li .submenu > li > a.active,
+	#sidebar-nav .nav li .submenu > li.active > a {
+		background-color: darken($whbl-nav-col-bg, 8%);
+	}
+	.navbar > .container .navbar-brand {
+		color: #fff;
+	}
+	.navbar-toggle {
+		color: #fff;
+	}
+	.graph-box {
+		background-color: $whbl-primary-color !important;
+	}
+	.content-wrapper {
+		background-color: #f9f9f9;
+	  height: 100%;
+	  margin-top: 0;
+	  margin-bottom: 0;
+	  position: relative;
+	  min-height: 1200px;
+	  padding: 15px 15px 35px 15px;
+	  margin-left: 220px;
+		// border-left: 2px solid #e7ebee;
+	}
+	#user-left-box {
+
+		.user-box {
+			color: $whbl-font-color;
+			> a {
+				color: $whbl-font-color;
+			}
+			> .name {
+				> a {
+					color: $whbl-font-color;
+
+					&:hover, &:focus {
+						color: $whbl-font-color;
+					}
+				}
+			}
+		}
+		.user-box a:hover,
+		.user-box a:focus {
+			color: darken($whbl-font-color, 20%);
+		}
+	}
+	#sidebar-nav .nav > li.nav-header {
+		border-top-color: #e7ebee;
+		color: darken($whbl-nav-col-bg, 35%);
+	}
+	.nav-tabs {
+		background-color: #f9f9f9;
+	}
+	h1 {
+		color: $whbl-primary-color;
+	}
+	#header-navbar .nav > li > a:hover,
+	#header-navbar .nav > li > a:focus,
+	#header-navbar .nav .open > a,
+	#header-navbar .nav .open > a:hover,
+	#header-navbar .nav .open > a:focus,
+	.navbar-toggle:hover,
+	.navbar-toggle:focus,
+	.mobile-search.active > .btn {
+		background-color: #2980b9;
+	}
+	.main-box {
+		border: 1px solid $main-bg-color;
+	}
+	a,
+	.fc-state-default,
+	.jvectormap-zoomin,
+	.jvectormap-zoomout,
+	#user-profile .profile-details ul > li > span {
+		color: $whbl-primary-color;
+	}
+	a:hover,
+	a:focus,
+	.widget-users li > .details > .name > a:hover,
+	.widget-todo .actions > a:hover {
+		color: $whbl-primary-color;
+	}
+	.table a.table-link:hover {
+		color: #2980b9;
+	}
+	.pagination {
+		> li {
+			> a,
+			> span,
+			> a:hover,
+			> span:hover,
+			> a:focus,
+			> span:focus,
+			> a:active,
+			> span:active {
+				color: $whbl-primary-color;
+			}
+		}
+		> .active {
+			> a,
+			> span,
+			> a:hover,
+			> span:hover,
+			> a:focus,
+			> span:focus {
+				background-color: $whbl-primary-color;
+				border-color: $whbl-primary-color;
+				color: #fff;
+			}
+		}
+	}
+	.notifications-list {
+		.item-footer {
+			background-color: #272d33;
+
+			a:hover {
+				background-color: #0f1114;
+			}
+		}
+	}
+	.btn-primary,
+	.btn-default,
+	.btn-info,
+	.btn-success,
+	.btn-warning,
+	.btn-danger,
+	.btn-primary:hover,
+	.btn-default:hover,
+	.btn-info:hover,
+	.btn-success:hover,
+	.btn-warning:hover,
+	.btn-danger:hover {
+		color: #fff;
+	}
+	.btn-primary {
+		background-color: $whbl-primary-color;
+		border-color: #2980b9;
+	}
+	.btn-primary:hover,
+	.btn-primary:focus,
+	.btn-primary:active,
+	.btn-primary.active,
+	.open .dropdown-toggle.btn-primary {
+		background-color: #2980b9;
+		border-color: #216897;
+	}
+	.btn-success {
+		background-color: $whbl-primary-color;
+		border-color: #2980b9;
+	}
+	.btn-success:hover,
+	.btn-success:focus,
+	.btn-success:active,
+	.btn-success.active,
+	.open .dropdown-toggle.btn-success {
+		background-color: #2980b9;
+		border-color: #1c5c87;
+	}
+	h1 {
+		color: $whbl-primary-color;
+	}
+	.widget-users li > .details > .time {
+		color: $whbl-primary-color;
+	}
+	blockquote,
+	blockquote.pull-right {
+		border-color: $whbl-primary-color;
+	}
+	a.list-group-item.active,
+	a.list-group-item.active:hover,
+	a.list-group-item.active:focus {
+		background-color: $whbl-primary-color;
+		border-color: $whbl-primary-color;
+	}
+	.nav .caret {
+		border-bottom-color: $whbl-primary-color;
+		border-top-color: $whbl-primary-color;
+	}
+	.panel-default > .panel-heading,
+	.notifications-list .item-footer {
+		background-color: $whbl-primary-color;
+	}
+	.notifications-list .item-footer a:hover {
+		background-color: #2980b9;
+	}
+	#invoice-companies .invoice-dates .invoice-number > span,
+	.notifications-list .item a .time {
+		color: $whbl-primary-color;
+	}
+	.table thead > tr > th > a:hover span {
+		color: $whbl-primary-color;
+		border-color: $whbl-primary-color;
+	}
+	.pace .pace-progress {
+		background-color: #fff;
+	}
+}
+.rtl.skin-whbl #content-wrapper {
+	border-left: 0;
+	border-right: 2px solid #e7ebee;
+}
+
+@media (max-width: $break-sm-max) {
+	.skin-whbl {
+		#logo.navbar-brand > img.normal-logo.logo-white {
+			display: block;
+		}
+		#logo.navbar-brand > img.normal-logo.logo-black {
+			display: none;
+		}
+		.navbar > .container .navbar-brand {
+			background-color: $whbl-primary-color;
+		}
+	}
+}
 import * as helpers from '../../../spec/helpers';
 import {BodyStateClassesService} from "./body-state-classes.service";
 import {AuthService} from "./../../login/auth.service";
-import {AUTH_EVENTS} from "./../../login/auth-events";
+import {AuthEvents} from "./../../login/auth-events";
+
+import {EventEmitter} from 'ng-forward';
+
  
 describe("BodyStateClasses Service", () => {
+
     let currentStateName = "main";
     let bodyStateClasseService: BodyStateClassesService;
     let $rootScope: ng.IRootScopeService = <any>{},
@@ -13,17 +17,15 @@ describe(&quot;BodyStateClasses Service&quot;, () =&gt; {
                 name: currentStateName
             }
         },
-        authService: AuthService,
+        authService: any = helpers.mocks.authService,
         bodyEl: { className: string },
         bodyElJq: any;
  
-
     let getService = (): BodyStateClassesService => {
         return new BodyStateClassesService($rootScope, $document, $state, authService);
     };
  
     beforeEach(() => {
-        authService = <any>{};
         authService.isAuthenticated = jasmine.createSpy("isAuthenticated").and.returnValue(true);
         bodyEl = { className: "" };
         bodyElJq = [bodyEl];
@@ -58,8 +60,9 @@ describe(&quot;BodyStateClasses Service&quot;, () =&gt; {
  
     it("should capture loginSuccess event and add noosfero-user-logged class to the body element", () => {
         let userLoggedClassName = BodyStateClassesService.USER_LOGGED_CLASSNAME;
-        $rootScope = <any>helpers.mocks.scopeWithEvents();
+
         bodyElJq.addClass = jasmine.createSpy("addClass");
+        bodyElJq.removeClass = jasmine.createSpy("removeClass");
         authService.isAuthenticated = jasmine.createSpy("isAuthenticated").and.returnValue(false);
         let service = getService();
  
@@ -68,11 +71,11 @@ describe(&quot;BodyStateClasses Service&quot;, () =&gt; {
         // triggers the service start
         service.start();
         // check if the the body element addClass was not called yet,
-        // because the user is not authenticated  
+        // because the user is not authenticated
         expect(bodyElJq.addClass).not.toHaveBeenCalledWith(userLoggedClassName);
  
         // emit the event loginSuccess
-        $rootScope.$emit(AUTH_EVENTS.loginSuccess);
+        authService.loginSuccess.next(null);
  
         // and check now if the addClass was called passing the userLogged class
         // to the body Element
@@ -83,7 +86,6 @@ describe(&quot;BodyStateClasses Service&quot;, () =&gt; {
         let userLoggedClassName = BodyStateClassesService.USER_LOGGED_CLASSNAME;
  
         authService.isAuthenticated = jasmine.createSpy("isAuthenticated").and.returnValue(true);
-        $rootScope = <any>helpers.mocks.scopeWithEvents();
  
         bodyElJq.addClass = jasmine.createSpy("addClass");
         bodyElJq.removeClass = jasmine.createSpy("removeClass");
@@ -95,11 +97,11 @@ describe(&quot;BodyStateClasses Service&quot;, () =&gt; {
         service.start();
  
         // check if the the body element addClass was called
-        // because the user is already authenticated  
+        // because the user is already authenticated
         expect(bodyElJq.addClass).toHaveBeenCalledWith(userLoggedClassName);
  
         // emit the event logoutSuccess
-        $rootScope.$emit(AUTH_EVENTS.logoutSuccess);
+        authService.logoutSuccess.next(null);
  
         // and check now if the removeClass was called passing the userLogged class
         // to the body Element
@@ -126,9 +128,44 @@ describe(&quot;BodyStateClasses Service&quot;, () =&gt; {
         expect(bodyEl.className).toEqual(BodyStateClassesService.ROUTE_STATE_CLASSNAME_PREFIX + currentStateName);
  
         // emit the event $stateChangeSuccess
-        $rootScope.$emit("$stateChangeSuccess", null, {name: "new-route"});
+        $rootScope.$emit("$stateChangeSuccess", null, { name: "new-route" });
  
         // and check now if the bodyEl has a class indicating the new state route
         expect(bodyEl.className).toEqual(BodyStateClassesService.ROUTE_STATE_CLASSNAME_PREFIX + "new-route");
     });
-});
 \ No newline at end of file
+
+    it("add a css class theme skin to body element", () => {
+        let service = getService();
+        let skinClass: string = 'skin-test';
+
+        bodyElJq.addClass = jasmine.createSpy("addClass");
+        bodyElJq.removeClass = jasmine.createSpy("removeClass");
+        service["bodyElement"] = bodyElJq;
+
+        service.start({
+            skin: skinClass
+        });
+
+        expect(bodyElJq.addClass).toHaveBeenCalledWith(skinClass);
+    });
+
+    it("add a css class to content wrapper element", () => {
+        let service = getService();
+
+        let contentWrapperMock = jasmine.createSpyObj("contentWrapperMock", ["addClass", "removeClass"]);
+        service["getContentWrapper"] = jasmine.createSpy("getContentWrapper").and.returnValue(contentWrapperMock);
+        service.addContentClass(true);
+
+        expect(contentWrapperMock.addClass).toHaveBeenCalledWith(BodyStateClassesService.CONTENT_WRAPPER_FULL);
+    });
+
+    it("remove a css class from content wrapper element", () => {
+        let service = getService();
+
+        let contentWrapperMock = jasmine.createSpyObj("contentWrapperMock", ["addClass", "removeClass"]);
+        service["getContentWrapper"] = jasmine.createSpy("getContentWrapper").and.returnValue(contentWrapperMock);
+        service.addContentClass(false);
+
+        expect(contentWrapperMock.removeClass).toHaveBeenCalledWith(BodyStateClassesService.CONTENT_WRAPPER_FULL);
+    });
+});
 import {Directive, Inject, Injectable} from "ng-forward";
-import {AUTH_EVENTS} from "./../../login/auth-events";
+import {AuthEvents} from "./../../login/auth-events";
 import {AuthService} from "./../../login/auth.service";
 import {HtmlUtils} from "../html-utils";
+import {INgForwardJQuery} from 'ng-forward/cjs/util/jqlite-extensions';
+
+export interface StartParams {
+    skin?: string;
+}
  
 /**
  * This is a service which adds classes to the body element
@@ -9,18 +14,23 @@ import {HtmlUtils} from &quot;../html-utils&quot;;
  * eg:
  *    User Logged:
  *         - noosfero-user-logged
- *    Route States: 
+ *    Route States:
  *         - noosfero-route-main
  *         - noosfero-route-main.profile.info
+ *
+ *    Show the all content in full mode:
+ *         - full-content
  */
 @Injectable()
 @Inject("$rootScope", "$document", "$state", AuthService)
 export class BodyStateClassesService {
  
     private started: boolean = false;
+    private skin: string;
  
     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"; }
  
     private bodyElement: ng.IAugmentedJQuery = null;
  
@@ -33,14 +43,37 @@ export class BodyStateClassesService {
  
     }
  
-    start() {
+    start(config?: StartParams) {
         if (!this.started) {
             this.setupUserLoggedClassToggle();
             this.setupStateClassToggle();
+
+            if (config) {
+                this.setThemeSkin(config.skin);
+            }
             this.started = true;
         }
     }
  
+    setThemeSkin(skin: string) {
+        this.getBodyElement().addClass(skin);
+    }
+
+    addContentClass(addClass: boolean, className?: string): BodyStateClassesService {
+
+        let fullContentClass: string = className || BodyStateClassesService.CONTENT_WRAPPER_FULL;
+        let contentWrapper = this.getContentWrapper();
+
+        if (contentWrapper) {
+            if (addClass) {
+                contentWrapper.addClass(fullContentClass);
+            } else {
+                contentWrapper.removeClass(fullContentClass);
+            }
+        }
+        return this;
+    }
+
     private getStateChangeSuccessHandlerFunction(bodyElement: ng.IAugmentedJQuery): (event: ng.IAngularEvent, toState: ng.ui.IState) => void {
         let self = this;
         return (event: ng.IAngularEvent, toState: ng.ui.IState) => {
@@ -65,7 +98,7 @@ export class BodyStateClassesService {
  
     /**
      * Setup the initial state of the user-logged css class
-     * and adds events handlers to switch this class when the login events happens 
+     * and adds events handlers to switch this class when the login events happens
      */
     private setupUserLoggedClassToggle() {
         let bodyElement = this.getBodyElement();
@@ -76,18 +109,18 @@ export class BodyStateClassesService {
             bodyElement.addClass(BodyStateClassesService.USER_LOGGED_CLASSNAME);
         }
  
-        // listen to the AUTH_EVENTS.loginSuccess and AUTH_EVENTS.logoutSuccess
-        // to switch the css class which indicates user logged in 
-        this.$rootScope.$on(AUTH_EVENTS.loginSuccess, () => {
+        // to switch the css class which indicates user logged in
+        this.authService.subscribe(AuthEvents[AuthEvents.loginSuccess], () => {
             bodyElement.addClass(BodyStateClassesService.USER_LOGGED_CLASSNAME);
         });
-        this.$rootScope.$on(AUTH_EVENTS.logoutSuccess, () => {
+
+        this.authService.subscribe(AuthEvents[AuthEvents.logoutSuccess], () => {
             bodyElement.removeClass(BodyStateClassesService.USER_LOGGED_CLASSNAME);
         });
     }
  
     /**
-     * Returns the user 'body' html Element  
+     * Returns the user 'body' html Element
      */
     private getBodyElement(): ng.IAugmentedJQuery {
         if (this.bodyElement === null) {
@@ -95,4 +128,9 @@ export class BodyStateClassesService {
         }
         return this.bodyElement;
     }
-}
 \ No newline at end of file
+
+    private getContentWrapper(selector?: string): INgForwardJQuery {
+        let doc = <INgForwardJQuery>angular.element(this.$document);
+        return doc.query(selector || '.content-wrapper');
+    }
+}
@@ -0,0 +1,126 @@
+import {Component, Input} from "ng-forward";
+
+@Component({
+    selector: 'sidebar-section',
+    templateUrl: 'app/layout/sidebar/sidebar-section.html'
+})
+/**
+ * @ngdoc object
+ * @name sidebar.SidebarSectionComponent
+ * @description
+ *  This is a widget to render sections to
+ *  SidebarComponent.
+ *
+ * <b>Usage example:</b>
+ * @example
+ * <pre>
+ * let section: SidebarSectionComponent = new SidebarSectionComponent('MySection');
+ * section.addItem({
+ *    title: 'Friends',
+ *    count: 0,
+ *    url: '#',
+ *    className: 'active',
+ *    icon: 'fa-users', //A font-awesome icon class
+ *    subitems: [
+ *      { title: 'Example' }
+ *   ]
+ * });
+ * </pre>
+ */
+export class SidebarSectionComponent {
+
+    /**
+     * @ngdoc property
+     * @name name
+     * @propertyOf sidebar.SidebarComponent
+     * @description
+     *  The name of the section
+     */
+    @Input()
+    public name: string;
+
+    /**
+     * @ngdoc property
+     * @name items
+     * @propertyOf sidebar.SidebarComponent
+     * @description
+     *  Array of items to render into this sidebar menu
+     */
+    @Input()
+    public items: any[] = [
+        {
+            title: 'Friends',
+            count: 0,
+            url: '#',
+            className: 'active',
+            icon: 'fa-users'
+        }
+    ];
+
+    /**
+     * @ngdoc method
+     * @name constructor
+     * @methodOf sidebar.SidebarSectionComponent
+     * @param {string} name The name of the section (optional)
+     * @description
+     *  The constructor for this component. The name of section
+     *  can be assigned here, optionally
+     */
+    constructor(name?: string) {
+        this.name = name;
+    }
+
+    /**
+     * @ngdoc method
+     * @name addItem
+     * @methodOf sidebar.SidebarSectionComponent
+     * @param {Object} item Literal object with properties to render a menu item
+     * @returns {SidebarSectionComponent} This own component type, using the "Fluent Interface" pattern
+     * @description
+     *  Use this method to add new items for a section instance
+     *
+     * <b>Usage example:</b>
+     * @example
+     * <pre>
+     * section.addItem({
+     *    title: 'Friends',
+     *    count: 0,
+     *    url: '#',
+     *    className: 'active',
+     *    icon: 'fa-users', //A font-awesome icon class
+     *    subitems: [
+     *      { title: 'Example' } //A subitem literal object
+     *   ]
+     * });
+     * </pre>
+     */
+    addItem(item: any): SidebarSectionComponent {
+        this.items.push(item);
+        return this;
+    }
+
+    /**
+     * @ngdoc method
+     * @name setName
+     * @methodOf sidebar.SidebarSectionComponent
+     * @param {string} name The name of the section
+     * @returns {SidebarSectionComponent} This own component type, using the "Fluent Interface" pattern
+     * @description
+     *  Change the name of the section assigned on constructor
+     *
+     * <b>Usage example:</b>
+     * @example
+     * <pre>
+     * section.setName('MyAnotherSection')
+     *        .addItem({
+     *              //Item here
+     *              ...
+     *          });
+     * </pre>
+     */
+    setName(name: string): SidebarSectionComponent {
+        this.name = name;
+        return this;
+    }
+
+}
@@ -0,0 +1,21 @@
+<ul class="nav nav-pills nav-stacked">
+    <li class="nav-header nav-header-first hidden-sm hidden-xs">
+      {{ctrl.name}}
+    </li>
+
+    <li ng-click="widgetExpanded = !widgetExpanded" ng-repeat="item in ctrl.items" class="{{item.className}}">
+      <a href="{{item.url}}" class="dropdown-toggle">
+        <i class="fa {{item.icon}}"></i>
+        <span>{{item.title}}</span>
+        <span class="label label-primary label-circle pull-right" ng-class="{'submenu-count': item.subitems}" ng-show="item.count != undefined">{{item.count}}</span>
+        <i class="fa fa-angle-right drop-icon" ng-show="item.subitems"></i>
+      </a>
+      <ul class="submenu" ng-show="widgetExpanded && item.subitems">
+        <li ng-repeat="subitem in item.subitems">
+          <a href="{{subitem.url}}">
+            {{subitem.title}}
+          </a>
+        </li>
+      </ul>
+    </li>
+</ul>
@@ -0,0 +1,86 @@
+import {provide} from 'ng-forward';
+import {ComponentTestHelper, createClass} from '../../../spec/component-test-helper';
+import {providers} from 'ng-forward/cjs/testing/providers';
+import {SidebarComponent} from './sidebar.component';
+import {SidebarSectionComponent} from './sidebar-section.component';
+import * as helpers from '../../../spec/helpers';
+
+const htmlTemplate: string = '<sidebar [visible]="false"></sidebar>';
+
+describe('Sidebar Component', () => {
+
+    let helper: ComponentTestHelper<SidebarComponent>;
+    let notifyService: any = {
+        event: Function,
+        subscribe: (fn: (visible: boolean) => void) => {
+            notifyService.event = fn;
+        },
+        next: (value: any) => {
+            notifyService.event(value);
+        },
+        setVisibility: (visible: boolean) => {
+            notifyService.event(visible);
+        }
+    };
+
+    let sessionService: any = {
+        currentUser: (): any => {
+            return {
+                person: { name: 'test' }
+            };
+        }
+    };
+
+
+    beforeEach(angular.mock.module("templates"));
+
+    beforeEach((done: Function) => {
+        providers((provide: any) => {
+            return <any>[
+                provide('SidebarNotificationService', {
+                    useValue: notifyService
+                }),
+                provide('SessionService', {
+                    useValue: sessionService
+                }),
+                provide('SidebarSectionComponent', {
+                    useValue: SidebarSectionComponent
+                })
+            ];
+        });
+
+        let cls = createClass({
+            template: htmlTemplate,
+            directives: [SidebarComponent],
+            properties: {
+                visible: false
+            }
+        });
+
+        helper = new ComponentTestHelper<SidebarComponent>(cls, done);
+    });
+
+    it('render the sidebar html content', () => {
+        expect(helper.all('div#nav-col').length).toEqual(1);
+    });
+
+    it('show sidebar only if a service emit a visibility event', () => {
+
+        notifyService.setVisibility(true);
+        expect(helper.component.isVisible()).toBeTruthy();
+    });
+
+    it('show user name into sidebar', () => {
+
+        notifyService.setVisibility(true);
+        expect(helper.component.user.name).toEqual(sessionService.currentUser().person.name);
+        expect(helper.debugElement.query('div.user-box .name a').text()).toMatch(sessionService.currentUser().person.name);
+    });
+
+    it('show sidebar section with a menu itens', () => {
+
+        notifyService.setVisibility(true);
+        expect(helper.debugElement.query('li.active a span').text()).toMatch('Friends');
+    });
+
+});
@@ -0,0 +1,104 @@
+import {Component, Inject, Input} from "ng-forward";
+import {SidebarNotificationService} from "./sidebar.notification.service";
+import {SessionService} from '../../login/session.service';
+import {SidebarSectionComponent} from './sidebar-section.component';
+
+@Component({
+    selector: 'sidebar',
+    templateUrl: 'app/layout/sidebar/sidebar.html',
+    directives: [SidebarSectionComponent]
+})
+@Inject(SidebarNotificationService, SessionService)
+/**
+ * @ngdoc object
+ * @name sidebar.SidebarComponent
+ * @requires [SidebarNotificationService, SessionService]
+ * @description
+ *  This is a widget to a sidebar with visible control.
+ *  Needs a SidebarSectionComponent to show sections/items/subitems
+ *  menu
+ *
+ * <b>Usage example:</b>
+ * @example
+ * <pre>
+ * let sidebar: SidebarComponent = new SidebarComponent(SidebarNotificationService, SessionService);
+ * sidebar.visible = true;
+ * </pre>
+ */
+export class SidebarComponent {
+
+    /**
+     * @ngdoc property
+     * @name visible
+     * @propertyOf sidebar.SidebarComponent
+     * @description
+     *  Controls if this component is show/hide
+     */
+    @Input()
+    private visible: boolean = false;
+
+    /**
+     * @ngdoc property
+     * @name showStatus
+     * @propertyOf sidebar.SidebarComponent
+     * @description
+     *  Controls the show/hide state of the circle user status
+     */
+    @Input('showstatus')
+    public showStatus: boolean = false;
+
+    /**
+     * @ngdoc property
+     * @name user
+     * @propertyOf sidebar.SidebarComponent
+     * @description
+     *  The user data to show into sidebar
+     */
+    @Input()
+    public user: { name: string } = {
+        name: ''
+    };
+
+    /**
+     * @ngdoc method
+     * @name constructor
+     * @methodOf sidebar.SidebarComponent
+     * @param {SidebarNotificationService} notificationService The service that emmits events to show/hide this component
+     * @param {SessionService} session The service that loads the user data when user is logged
+     * @description
+     *  The constructor for this component. Loads the dependencies services
+     */
+    constructor(private notificationService: SidebarNotificationService, private session: SessionService) { }
+
+    /**
+     * @ngdoc method
+     * @name ngOnInit
+     * @methodOf sidebar.SidebarComponent
+     * @description
+     *  Check the initial visibility when this component is loaded
+     */
+    ngOnInit() {
+
+        let userData: any = this.session.currentUser();
+        if (userData) {
+            this.user = userData.person;
+        }
+
+        this.notificationService.setVisibility(this.visible);
+        this.notificationService.subscribe((visible: boolean) => {
+            this.visible = visible;
+        });
+    }
+
+    /**
+     * @ngdoc method
+     * @name isVisible
+     * @methodOf sidebar.SidebarComponent
+     * @returns {boolean} True, whether this component is visible, otherwise returns false
+     * @description
+     *  Verify whether sidebar is visible or not
+     */
+    isVisible(): boolean {
+        return <boolean>this.visible;
+    }
+}
@@ -0,0 +1,23 @@
+<div id="nav-col" ng-show="ctrl.isVisible()" ng-class="{'sidebar-hide':!ctrl.isVisible()}">
+    <section id="col-left" class="col-left-nano">
+      <div id="col-left-inner" class="col-left-nano-content">
+        <div id="user-left-box" class="clearfix hidden-sm hidden-xs dropdown profile2-dropdown">
+          <noosfero-profile-image [profile]="ctrl.user"></noosfero-profile-image>
+          <div class="user-box">
+            <span class="name">
+              <a href="#" class="dropdown-toggle" data-toggle="dropdown">
+                {{ctrl.user.name}}
+              </a>
+            </span>
+            <span class="status" ng-show="ctrl.showStatus">
+              <i class="fa fa-circle"></i> {{ctrl.user.status}}
+            </span>
+          </div>
+        </div>
+
+        <div class="collapse navbar-collapse navbar-ex1-collapse" id="sidebar-nav">
+            <sidebar-section [name]='Navigation'></sidebar-section>
+        </div>
+      </div>
+    </section>
+  </div>
@@ -0,0 +1,27 @@
+import {Injectable, EventEmitter} from "ng-forward";
+
+
+@Injectable()
+export class SidebarNotificationService {
+    private alternateVisibilityEvent: EventEmitter<boolean> = new EventEmitter<boolean>();
+    public sidebarVisible: boolean = false;
+
+    getCurrentVisibility() {
+        return this.sidebarVisible;
+    }
+
+    alternateVisibility() {
+        this.sidebarVisible = !this.sidebarVisible;
+        this.alternateVisibilityEvent.next(this.sidebarVisible);
+    }
+
+    setVisibility(visibility: boolean) {
+        this.sidebarVisible = visibility;
+        this.alternateVisibilityEvent.next(this.sidebarVisible);
+    }
+
+    subscribe(fn: (visible: boolean) => void) {
+        this.alternateVisibilityEvent.subscribe(fn);
+    }
+
+}
-export interface IAuthEvents {
-    loginSuccess: string;
-    loginFailed: string;
-    logoutSuccess: string;
+export enum AuthEvents {
+    loginSuccess, loginFailed, logoutSuccess
 }
-
-export const AUTH_EVENTS: IAuthEvents = {
-    loginSuccess: "auth-login-success",
-    loginFailed: "auth-login-failed",
-    logoutSuccess: "auth-logout-success"
-};
 \ No newline at end of file
-import {AuthService, AUTH_EVENTS} from "./";
+import {AuthService, AuthEvents} from "./";
+import {SessionService} from './session.service';
+
+import {Injectable, Provider, provide, EventEmitter} from "ng-forward";
+import {ComponentFixture} from 'ng-forward/cjs/testing/test-component-builder';
+
+import {getAngularServiceFactory, AngularServiceFactory} from "../../spec/helpers";
  
 describe("Services", () => {
  
@@ -15,23 +21,26 @@ describe(&quot;Services&quot;, () =&gt; {
             $translateProvider.translations('en', {});
         }));
  
-        beforeEach(inject((_$httpBackend_: ng.IHttpBackendService, _$rootScope_: ng.IRootScopeService, _AuthService_: AuthService) => {
-            $httpBackend = _$httpBackend_;
-            authService = _AuthService_;
-            $rootScope = _$rootScope_;
+        beforeEach(() => {
  
             user = <noosfero.User>{
                 id: 1,
                 login: "user"
             };
-        }));
-
+        });
  
         describe("Succesffull login", () => {
  
+            let factory: AngularServiceFactory;
+            let authService: AuthService;
+            let $log: ng.ILogService;
+            let $http: ng.IHttpBackendService;
+
             beforeEach(() => {
                 credentials = { username: "user", password: "password" };
-
+                factory = getAngularServiceFactory();
+                authService = factory.getAngularService("AuthService");
+                $httpBackend = factory.getHttpBackendService();
                 $httpBackend.expectPOST("/api/v1/login", "login=user&password=password").respond(200, { user: user });
             });
  
@@ -44,20 +53,15 @@ describe(&quot;Services&quot;, () =&gt; {
                 expect($httpBackend.verifyNoOutstandingRequest());
             });
  
-
-            it("should emit event loggin successful with user logged data", () => {
-
-                authService.login(credentials);
-
-                let eventEmmited: boolean = false;
-                $rootScope.$on(AUTH_EVENTS.loginSuccess, (event: ng.IAngularEvent, userThroughEvent: noosfero.User) => {
-                    eventEmmited = true;
+            it("should emit event loggin successful with user logged data", (done: Function) => {
+                let successEvent: any = AuthEvents[AuthEvents.loginSuccess];
+                (<any>authService)[successEvent].subscribe((userThroughEvent: noosfero.User): any => {
                     expect(userThroughEvent).toEqual(user);
+                    done();
                 });
-
+                authService.login(credentials);
                 $httpBackend.flush();
  
-                expect(eventEmmited).toBeTruthy(AUTH_EVENTS.loginSuccess + " was not emmited!");
             });
  
             it("should return the current logged in user", () => {
@@ -74,6 +78,5 @@ describe(&quot;Services&quot;, () =&gt; {
             });
         });
  
-
     });
 });
-import {Injectable, Inject} from "ng-forward";
+import {Injectable, Inject, EventEmitter} from "ng-forward";
  
 import {NoosferoRootScope, UserResponse} from "./../shared/models/interfaces";
 import {SessionService} from "./session.service";
  
-import {AUTH_EVENTS, IAuthEvents} from "./auth-events";
+import {AuthEvents} from "./auth-events";
  
 @Injectable()
-@Inject("$q", "$http", "$rootScope", "SessionService", "$log", "AUTH_EVENTS")
+@Inject("$http", SessionService, "$log")
 export class AuthService {
  
-    constructor(private $q: ng.IQService,
-        private $http: ng.IHttpService,
-        private $rootScope: NoosferoRootScope,
-        private sessionService: SessionService,
-        private $log: ng.ILogService,
-        private auth_events: IAuthEvents) {
+    public loginSuccess: EventEmitter<noosfero.User> = new EventEmitter<noosfero.User>();
+    public loginFailed: EventEmitter<ng.IHttpPromiseCallbackArg<any>> = new EventEmitter<ng.IHttpPromiseCallbackArg<any>>();
+    public logoutSuccess: EventEmitter<noosfero.User> = new EventEmitter<noosfero.User>();
  
+    constructor(private $http: ng.IHttpService,
+        private sessionService: SessionService,
+        private $log: ng.ILogService) {
     }
  
     loginFromCookie() {
@@ -27,8 +27,8 @@ export class AuthService {
     private loginSuccessCallback(response: ng.IHttpPromiseCallbackArg<UserResponse>) {
         this.$log.debug('AuthService.login [SUCCESS] response', response);
         let currentUser: noosfero.User = this.sessionService.create(response.data);
-        this.$rootScope.currentUser = currentUser;
-        this.$rootScope.$broadcast(this.auth_events.loginSuccess, currentUser);
+        this.loginSuccess.next(currentUser);
+
         return currentUser;
     }
  
@@ -40,15 +40,15 @@ export class AuthService {
  
     private loginFailedCallback(response: ng.IHttpPromiseCallbackArg<any>): any {
         this.$log.debug('AuthService.login [FAIL] response', response);
-        this.$rootScope.$broadcast(this.auth_events.loginFailed);
-        // return $q.reject(response);
+        this.loginFailed.next(response);
         return null;
     }
  
     public logout() {
+        let user: noosfero.User = this.sessionService.currentUser();
         this.sessionService.destroy();
-        this.$rootScope.currentUser = undefined;
-        this.$rootScope.$broadcast(this.auth_events.logoutSuccess);
+
+        this.logoutSuccess.next(user);
         this.$http.jsonp('/account/logout'); // FIXME logout from noosfero to sync login state
     }
  
@@ -66,4 +66,14 @@ export class AuthService {
         }
         return (this.isAuthenticated() && authorizedRoles.indexOf(this.sessionService.currentUser().userRole) !== -1);
     }
-}
 \ No newline at end of file
+
+    subscribe(eventName: string, fn: Function) {
+
+        let event: EventEmitter<any> = <EventEmitter<any>>(<any>this)[eventName];
+        if (event) {
+            event.subscribe(fn);
+        } else {
+            throw new Error(`The event: ${eventName} not exists`);
+        }
+    }
+}
+import * as plugins from "../../plugins";
 import {bundle, Component, StateConfig, Inject} from "ng-forward";
 import {ArticleBlogComponent} from "./../article/types/blog/blog.component";
  
@@ -8,15 +9,18 @@ import {BoxesComponent} from &quot;../layout/boxes/boxes.component&quot;;
 import {BlockComponent} from "../layout/blocks/block.component";
 import {EnvironmentComponent} from "../environment/environment.component";
 import {EnvironmentHomeComponent} from "../environment/environment-home.component";
-import {PeopleBlockComponent} from "../layout/blocks/people-block/people-block.component";
+import {PeopleBlockComponent} from "../layout/blocks/people/people-block.component";
+import {LinkListBlockComponent} from "./../layout/blocks/link-list/link-list-block.component";
+import {RecentDocumentsBlockComponent} from "../layout/blocks/recent-documents/recent-documents-block.component";
+import {ProfileImageBlockComponent} from "../layout/blocks/profile-image/profile-image-block.component";
+import {RawHTMLBlockComponent} from "../layout/blocks/raw-html/raw-html-block.component";
+import {StatisticsBlockComponent} from "../layout/blocks/statistics/statistics-block.component";
+
+import {MembersBlockComponent} from "./../layout/blocks/members/members-block.component";
+import {CommunitiesBlockComponent} from "./../layout/blocks/communities/communities-block.component";
+
 import {LoginBlockComponent} from "../layout/blocks/login-block/login-block.component";
-import {LinkListBlockComponent} from "./../layout/blocks/link-list/link-list.component";
-import {RecentDocumentsBlockComponent} from "../layout/blocks/recent-documents/recent-documents.component";
-import {ProfileImageBlockComponent} from "../layout/blocks/profile-image-block/profile-image-block.component";
-import {RawHTMLBlockComponent} from "../layout/blocks/raw-html/raw-html.component";
  
-import {MembersBlockComponent} from "./../layout/blocks/members-block/members-block.component";
-import {CommunitiesBlockComponent} from "./../layout/blocks/communities-block/communities-block.component";
 import {NoosferoTemplate} from "../shared/pipes/noosfero-template.filter";
 import {DateFormat} from "../shared/pipes/date-format.filter";
  
@@ -29,7 +33,10 @@ import {BodyStateClassesService} from &quot;./../layout/services/body-state-classes.s
  
 import {Navbar} from "../layout/navbar/navbar";
  
-import {MainBlockComponent} from "../layout/blocks/main-block/main-block.component";
+import {SidebarComponent} from "../layout/sidebar/sidebar.component";
+
+import {MainBlockComponent} from "../layout/blocks/main/main-block.component";
+import {HtmlEditorComponent} from "../shared/components/html-editor/html-editor.component";
  
  
 /**
@@ -49,8 +56,13 @@ import {MainBlockComponent} from &quot;../layout/blocks/main-block/main-block.compone
 })
 @Inject(BodyStateClassesService)
 export class MainContentComponent {
+
+    public themeSkin: string = 'skin-whbl';
+
     constructor(private bodyStateClassesService: BodyStateClassesService) {
-        bodyStateClassesService.start();
+        bodyStateClassesService.start({
+            skin: this.themeSkin
+        });
     }
 }
  
@@ -71,22 +83,24 @@ export class EnvironmentContent {
  * NoosferoTemplate, DateFormat, RawHTMLBlock
  * @description
  *  The Main controller for the Noosfero Angular Theme application.
- * 
+ *
  *  The main route '/' is defined as the URL for this controller, which routes
  * requests to the {@link main.MainContentComponent} controller and also, the '/profile' route,
- * which routes requests to the {@link profile.Profile} controller. See {@link profile.Profile} 
- * for more details on how various Noosfero profiles are rendered.  
+ * which routes requests to the {@link profile.Profile} controller. See {@link profile.Profile}
+ * for more details on how various Noosfero profiles are rendered.
  */
 @Component({
     selector: 'main',
     template: '<div ng-view></div>',
     directives: [
         ArticleBlogComponent, ArticleViewComponent, BoxesComponent, BlockComponent,
-        EnvironmentComponent, PeopleBlockComponent, LoginBlockComponent,
-        LinkListBlockComponent, CommunitiesBlockComponent,
-        MainBlockComponent, RecentDocumentsBlockComponent, Navbar, ProfileImageBlockComponent,
-        MembersBlockComponent, NoosferoTemplate, DateFormat, RawHTMLBlockComponent
-    ],
+        EnvironmentComponent, PeopleBlockComponent,
+        LinkListBlockComponent, CommunitiesBlockComponent, HtmlEditorComponent,
+        MainBlockComponent, RecentDocumentsBlockComponent, Navbar, SidebarComponent, ProfileImageBlockComponent,
+        MembersBlockComponent, NoosferoTemplate, DateFormat, RawHTMLBlockComponent, StatisticsBlockComponent,
+        LoginBlockComponent
+    ].concat(plugins.mainComponents).concat(plugins.hotspots),
+
     providers: [AuthService, SessionService, NotificationService, BodyStateClassesService]
 })
 @StateConfig([
 <acme-navbar></acme-navbar>
-<div ui-view="content"></div>
+<!-- Sidebar Left -->
+<sidebar [visible]="false"></sidebar>
+<div class="content-wrapper full-content" ui-view="content"></div>
@@ -0,0 +1,7 @@
+.content-wrapper {
+    margin-top: 32px;
+}
+
+.full-content {
+  margin-left: 0px !important;
+}
-<span title="{{ctrl.profile.name}}">
+<span class="profile-image-wrap" title="{{ctrl.profile.name}}">
   <img ng-if="ctrl.profile.image" ng-src="{{ctrl.profile.image.url}}" class="img-responsive profile-image">
   <i ng-if="!ctrl.profile.image" class="fa {{ctrl.defaultIcon}} fa-5x profile-image"></i>
 </span>
 import {StateConfig, Component, Inject, provide} from 'ng-forward';
 import {ProfileInfoComponent} from './info/profile-info.component';
 import {ProfileHomeComponent} from './profile-home.component';
-import {BasicEditorComponent} from '../article/basic-editor.component';
+import {BasicEditorComponent} from '../article/cms/basic-editor/basic-editor.component';
+import {CmsComponent} from '../article/cms/cms.component';
 import {ContentViewerComponent} from "../article/content-viewer/content-viewer.component";
 import {ContentViewerActionsComponent} from "../article/content-viewer/content-viewer-actions.component";
 import {ActivitiesComponent} from "./activities/activities.component";
@@ -45,13 +46,25 @@ import {MyProfileComponent} from &quot;./myprofile.component&quot;;
         component: MyProfileComponent
     },
     {
-        name: 'main.profile.cms',
-        url: "^/myprofile/:profile/cms",
-        component: BasicEditorComponent,
+        name: 'main.cms',
+        url: "^/myprofile/:profile/cms?parent_id&type",
+        component: CmsComponent,
         views: {
-            "mainBlockContent": {
-                templateUrl: "app/article/basic-editor.html",
-                controller: BasicEditorComponent,
+            "content": {
+                templateUrl: "app/article/cms/cms.html",
+                controller: CmsComponent,
+                controllerAs: "vm"
+            }
+        }
+    },
+    {
+        name: 'main.cmsEdit',
+        url: "^/myprofile/:profile/cms/edit/:id",
+        component: CmsComponent,
+        views: {
+            "content": {
+                templateUrl: "app/article/cms/cms.html",
+                controller: CmsComponent,
                 controllerAs: "vm"
             }
         }
@@ -98,7 +111,7 @@ export class ProfileComponent {
         }).then((response: restangular.IResponse) => {
             this.boxes = response.data.boxes;
         }).catch(() => {
-            $state.transitionTo('main');
+            $state.transitionTo('main.environment.home');
             notificationService.error({ message: "notification.profile.not_found" });
         });
     }
 <div class="profile-container">
+  <div class="profile-header" ng-bind-html="vm.profile.custom_header"></div>
   <div class="row">
     <noosfero-boxes [boxes]="vm.boxes" [owner]="vm.profile"></noosfero-boxes>
   </div>
+  <div class="profile-footer" ng-bind-html="vm.profile.custom_footer"></div>
 </div>
@@ -0,0 +1,26 @@
+import {ComponentTestHelper, createClass} from './../../../../spec/component-test-helper';
+import {HtmlEditorComponent} from "./html-editor.component";
+
+const htmlTemplate: string = '<html-editor [(value)]="ctrl.value" [options]="ctrl.options"></html-editor>';
+
+describe("Components", () => {
+    describe("Html Editor Component", () => {
+
+        let helper: ComponentTestHelper<HtmlEditorComponent>;
+        beforeEach(angular.mock.module("templates"));
+
+        beforeEach((done) => {
+            let properties = { value: "value" };
+            let cls = createClass({
+                template: htmlTemplate,
+                directives: [HtmlEditorComponent],
+                properties: properties
+            });
+            helper = new ComponentTestHelper<HtmlEditorComponent>(cls, done);
+        });
+
+        it("render a textarea", () => {
+            expect(helper.find("textarea").length).toEqual(1);
+        });
+    });
+});
@@ -0,0 +1,11 @@
+import {Component, Input} from "ng-forward";
+
+@Component({
+    selector: 'html-editor',
+    templateUrl: "app/shared/components/html-editor/html-editor.html",
+})
+export class HtmlEditorComponent {
+
+    @Input() options: any = {};
+    @Input() value: any;
+}
@@ -0,0 +1 @@
+<textarea ckeditor="ctrl.options" class="form-control" ng-model="ctrl.value"></textarea>
@@ -25,7 +25,7 @@ export class NotificationService {
  
     httpError(status: number, data: any): boolean {
         this.error({ message: `notification.http_error.${status}.message` });
-        return true; // return true to indicate that the error was already handled
+        return false; // return true to indicate that the error was already handled
     }
  
     success({
@@ -27,6 +27,10 @@
  
     <div ui-view></div>
  
+    <script>
+      CKEDITOR_BASEPATH='/bower_components/ng-ckeditor/libs/ckeditor/';
+    </script>
+
     <!-- build:js(src) scripts/vendor.js -->
     <!-- bower:js -->
     <!-- run `gulp inject` to automatically populate bower script dependencies -->
@@ -42,5 +46,7 @@
     <!-- endinject -->
     <!-- 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>
@@ -35,5 +35,24 @@
   "comment.pagination.more": "More",
   "comment.post.success.title": "Good job!",
   "comment.post.success.message": "Comment saved!",
-  "comment.reply": "reply"
+  "comment.reply": "reply",
+  "article.actions.edit": "Edit",
+  "article.basic_editor.title": "Title",
+  "article.basic_editor.body": "Body",
+  "article.basic_editor.save": "Save",
+  "article.basic_editor.save.failed": "This article could not be saved",
+  "article.basic_editor.cancel": "Cancel",
+  "article.basic_editor.success.title": "Good job!",
+  "article.basic_editor.success.message": "Article saved!",
+  "article.basic_editor.visibility": "Visibility",
+  "article.basic_editor.visibility.public": "Public",
+  "article.basic_editor.visibility.private": "Private",
+  "statistics.users": "Users",
+  "statistics.enterprises": "Enterprises",
+  "statistics.products": "Products",
+  "statistics.communities": "Communities",
+  "statistics.categories": "Categories",
+  "statistics.tags": "Tags",
+  "statistics.comments": "Comments",
+  "statistics.hits": "Hits"
 }
@@ -35,5 +35,24 @@
   "comment.pagination.more": "Mais",
   "comment.post.success.title": "Bom trabalho!",
   "comment.post.success.message": "Comentário salvo com sucesso!",
-  "comment.reply": "responder"
+  "comment.reply": "responder",
+  "article.actions.edit": "Editar",
+  "article.basic_editor.title": "Título",
+  "article.basic_editor.body": "Corpo",
+  "article.basic_editor.save": "Salvar",
+  "article.basic_editor.save.failed": "O artigo não pode ser salvo",
+  "article.basic_editor.cancel": "Cancelar",
+  "article.basic_editor.success.title": "Bom trabalho!",
+  "article.basic_editor.success.message": "Artigo salvo com sucesso!",
+  "article.basic_editor.visibility": "Visibilidade",
+  "article.basic_editor.visibility.public": "Público",
+  "article.basic_editor.visibility.private": "Privado",
+  "statistics.users": "Usuários",
+  "statistics.enterprises": "Empreendimentos",
+  "statistics.products": "Produtos",
+  "statistics.communities": "Comunidades",
+  "statistics.categories": "Categorias",
+  "statistics.tags": "Tags",
+  "statistics.comments": "Comentários",
+  "statistics.hits": "Acessos"
 }
@@ -22,6 +22,23 @@ export class ArticleService extends RestangularService&lt;noosfero.Article&gt; {
         };
     }
  
+    updateArticle(article: noosfero.Article) {
+        let headers = {
+            'Content-Type': 'application/json'
+        };
+        let deferred = this.$q.defer<noosfero.RestResult<noosfero.Article>>();
+        // TODO dynamically copy the selected attributes to update
+        let attributesToUpdate: any = {
+            article: {
+                name: article.name, body: article.body, published: article.published,
+                start_date: article['start_date'], end_date: article['end_date']
+            }
+        };
+        let restRequest: ng.IPromise<noosfero.RestResult<noosfero.Article>> = this.getElement(article.id).customPOST(attributesToUpdate, null, null, headers);
+        restRequest.then(this.getHandleSuccessFunction(deferred))
+            .catch(this.getHandleErrorFunction(deferred));
+        return deferred.promise;
+    }
  
     createInProfile(profile: noosfero.Profile, article: noosfero.Article): ng.IPromise<noosfero.RestResult<noosfero.Article>> {
         let profileElement = this.profileService.get(<number>profile.id);
@@ -32,6 +49,14 @@ export class ArticleService extends RestangularService&lt;noosfero.Article&gt; {
         return this.create(article, <noosfero.RestModel>profileElement, null, headers);
     }
  
+    createInParent(parentId: number, article: noosfero.Article): ng.IPromise<noosfero.RestResult<noosfero.Article>> {
+        let headers = {
+            'Content-Type': 'application/json'
+        };
+
+        let parent = this.getElement(parentId);
+        return this.create(article, parent, null, headers, true, "children");
+    }
  
     getAsCollectionChildrenOf<C>(rootElement: noosfero.Environment | noosfero.Article | noosfero.Profile, path: string, queryParams?: any, headers?: any): restangular.ICollectionPromise<C> {
         return rootElement.getList<C>(path, queryParams, headers);
@@ -77,5 +102,4 @@ export class ArticleService extends RestangularService&lt;noosfero.Article&gt; {
     }
  
  
-
 }
@@ -207,4 +207,27 @@ describe(&quot;Restangular Service - base Class&quot;, () =&gt; {
         $httpBackend.flush();
     });
  
-});
 \ No newline at end of file
+    it("post('customPath', rootObject) calls POST /rootObjects/1/customPath", (done) => {
+        let rootObj: RootObjectModel = rootObjectRestService.getElement(1);
+        $httpBackend.expectPOST("/api/v1/rootObjects/1/customPath").respond(201, { object: { attr: 1, rootId: 1 } });
+        objectRestService.post('customPath', rootObj).then((result: noosfero.RestResult<ObjectModel>) => {
+            expect(result.data).toBeDefined();
+            expect((<any>result.data).attr).toEqual(1);
+            expect((<any>result.data).rootId).toEqual(1);
+            done();
+        });
+        $httpBackend.flush();
+    });
+
+    it("post('customPath') calls POST /objects/customPath", (done) => {
+        $httpBackend.expectPOST("/api/v1/objects/customPath").respond(201, { object: { attr: 1, rootId: 1 } });
+        objectRestService.post('customPath').then((result: noosfero.RestResult<ObjectModel>) => {
+            expect(result.data).toBeDefined();
+            expect((<any>result.data).attr).toEqual(1);
+            expect((<any>result.data).rootId).toEqual(1);
+            done();
+        });
+        $httpBackend.flush();
+    });
+
+});
@@ -11,6 +11,8 @@
 export abstract class RestangularService<T extends noosfero.RestModel> {
  
     private baseResource: restangular.IElement;
+    private currentPromise: ng.IDeferred<T>;
+
     /**
      * Creates an instance of RestangularService.
      * 
@@ -20,6 +22,7 @@ export abstract class RestangularService&lt;T extends noosfero.RestModel&gt; {
      */
     constructor(protected restangularService: restangular.IService, protected $q: ng.IQService, protected $log: ng.ILogService) {
         this.baseResource = restangularService.all(this.getResourcePath());
+        this.resetCurrent();
         // TODO 
         // this.restangularService.setResponseInterceptor((data, operation, what, url, response, deferred) => {
         //     let transformedData: any = data;
@@ -32,6 +35,18 @@ export abstract class RestangularService&lt;T extends noosfero.RestModel&gt; {
         // });
     }
  
+    public resetCurrent() {
+        this.currentPromise = this.$q.defer();
+    }
+
+    public getCurrent(): ng.IPromise<T> {
+        return this.currentPromise.promise;
+    }
+
+    public setCurrent(object: T) {
+        this.currentPromise.resolve(object);
+    }
+
     protected extractData(response: restangular.IResponse): noosfero.RestResult<T> {
         let dataKey: string;
         if (response.data && this.getDataKeys()) {
@@ -221,7 +236,7 @@ export abstract class RestangularService&lt;T extends noosfero.RestModel&gt; {
      * Creates a new Resource into the resource collection
      * calls POST /resourcePath
      */
-    public create(obj: T, rootElement?: noosfero.RestModel, queryParams?: any, headers?: any, isSub: boolean = true): ng.IPromise<noosfero.RestResult<T>> {
+    public create(obj: T, rootElement?: noosfero.RestModel, queryParams?: any, headers?: any, isSub: boolean = true, path?: string): ng.IPromise<noosfero.RestResult<T>> {
         let deferred = this.$q.defer<noosfero.RestResult<T>>();
  
         let restRequest: ng.IPromise<noosfero.RestResult<T>>;
@@ -233,8 +248,9 @@ export abstract class RestangularService&lt;T extends noosfero.RestModel&gt; {
             data = obj;
         }
  
+        let subpath = path || this.getResourcePath();
         if (rootElement) {
-            restRequest = rootElement.all(this.getResourcePath()).post(data, queryParams, headers);
+            restRequest = rootElement.all(subpath).post(data, queryParams, headers);
         } else {
             restRequest = this.baseResource.post(data, queryParams, headers);
         }
@@ -245,6 +261,22 @@ export abstract class RestangularService&lt;T extends noosfero.RestModel&gt; {
         return deferred.promise;
     }
  
+
+    public post(path: string, rootElement?: restangular.IElement, data?: any, headers?: any): ng.IPromise<noosfero.RestResult<T>> {
+        let deferred = this.$q.defer<noosfero.RestResult<T>>();
+        let restRequest: ng.IPromise<any>;
+
+        if (rootElement) {
+            restRequest = rootElement.customPOST(data, path, headers);
+        } else {
+            restRequest = this.baseResource.customPOST(data, path, headers);
+        }
+        restRequest
+            .then(this.getHandleSuccessFunction(deferred))
+            .catch(this.getHandleErrorFunction(deferred));
+        return deferred.promise;
+    }
+
     /**
      * Returns a Restangular IElement representing the 
      */
  
 namespace noosfero {
-    export interface Article  extends RestModel {
+    export interface Article extends RestModel {
         path: string;
         profile: Profile;
         type: string;
+        parent: Article;
+        body: string;
+        title: string;
+        name: string;
+        published: boolean;
+        setting: any;
+        start_date: string;
+        end_date: string;
     }
-}
 \ No newline at end of file
+}
@@ -0,0 +1,10 @@
+namespace noosfero {
+    interface StatisticInfo {
+        name: string;
+        quantity: number;
+        display: boolean;
+    }
+    export interface StatisticsBlock extends Block {
+        statistics: StatisticInfo[];
+    }
+}
@@ -0,0 +1,78 @@
+import {AllowCommentComponent} from "./allow-comment.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';
+
+let htmlTemplate = '<comment-paragraph-plugin-allow-comment [content]="ctrl.content" [paragraph-uuid]="ctrl.paragraphUuid" [article]="ctrl.article"></comment-paragraph-plugin-allow-comment>';
+
+describe("Components", () => {
+    describe("Allow Comment Component", () => {
+
+        let serviceMock = {
+            commentParagraphCount: () => {
+                return Promise.resolve(5);
+            }
+        };
+        let functionToggleCommentParagraph: Function;
+        let eventServiceMock = {
+            // toggleCommentParagraph
+            subscribeToggleCommentParagraph: (fn: Function) => {
+                functionToggleCommentParagraph = fn;
+            }
+        };
+
+        let providers = [
+            new Provider('CommentParagraphService', { useValue: serviceMock }),
+            new Provider('CommentParagraphEventService', { useValue: eventServiceMock })
+        ];
+        let helper: ComponentTestHelper<AllowCommentComponent>;
+
+        beforeEach(angular.mock.module("templates"));
+
+        beforeEach((done) => {
+            let cls = createClass({
+                template: htmlTemplate,
+                directives: [AllowCommentComponent],
+                providers: providers,
+                properties: {
+                    content: "",
+                    paragraphUuid: "uuid",
+                    article: {
+                        setting: {
+                            comment_paragraph_plugin_activate: true
+                        }
+                    }
+                }
+            });
+            helper = new ComponentTestHelper<AllowCommentComponent>(cls, done);
+        });
+
+        it('update comments count', () => {
+            expect(helper.component.commentsCount).toEqual(5);
+        });
+
+        it('display paragraph content', () => {
+            expect(helper.all(".paragraph .paragraph-content").length).toEqual(1);
+        });
+
+        it('display button to side comments', () => {
+            expect(helper.all(".paragraph .actions a").length).toEqual(1);
+        });
+
+        it('set display to true when click in show paragraph', () => {
+            helper.component.showParagraphComments();
+            expect(helper.component.display).toBeTruthy();
+        });
+
+        it('set display to false when click in hide paragraph', () => {
+            helper.component.hideParagraphComments();
+            expect(helper.component.display).toBeFalsy();
+        });
+
+        it('update article when receive a toogle paragraph event', () => {
+            functionToggleCommentParagraph({ id: 2 });
+            expect(helper.component.article.id).toEqual(2);
+        });
+    });
+});
@@ -0,0 +1,45 @@
+import {Component, Input, Inject} from "ng-forward";
+import {SideCommentsComponent} from "../side-comments/side-comments.component";
+import {CommentParagraphEventService} from "../events/comment-paragraph-event.service";
+import {CommentParagraphService} from "../http/comment-paragraph.service";
+
+@Component({
+    selector: "comment-paragraph-plugin-allow-comment",
+    templateUrl: "plugins/comment_paragraph/allow-comment/allow-comment.html",
+    directives: [SideCommentsComponent]
+})
+@Inject("$scope", CommentParagraphEventService, CommentParagraphService)
+export class AllowCommentComponent {
+
+    @Input() content: string;
+    @Input() paragraphUuid: string;
+    @Input() article: noosfero.Article;
+    commentsCount: number;
+    display = false;
+
+    constructor(private $scope: ng.IScope,
+        private commentParagraphEventService: CommentParagraphEventService,
+        private commentParagraphService: CommentParagraphService) { }
+
+    ngOnInit() {
+        this.commentParagraphEventService.subscribeToggleCommentParagraph((article: noosfero.Article) => {
+            this.article = article;
+            this.$scope.$apply();
+        });
+        this.commentParagraphService.commentParagraphCount(this.article, this.paragraphUuid).then((count: number) => {
+            this.commentsCount = count;
+        });
+    }
+
+    isActivated() {
+        return this.article && this.article.setting && this.article.setting.comment_paragraph_plugin_activate;
+    }
+
+    showParagraphComments() {
+        this.display = true;
+    }
+
+    hideParagraphComments() {
+        this.display = false;
+    }
+}
@@ -0,0 +1,12 @@
+<div class="paragraph" ng-class="{'active' : ctrl.display}">
+  <div class="paragraph-content" ng-bind-html="ctrl.content" ng-class="{'active' : ctrl.display}"></div>
+  <div ng-if="ctrl.isActivated()" class="actions">
+    <a href="#" popover-placement="right-top" popover-trigger="none"
+      uib-popover-template="'plugins/comment_paragraph/allow-comment/popover.html'"
+      (click)="ctrl.showParagraphComments()" popover-is-open="ctrl.display">
+      <div class="arrow_box" ng-class="{'active' : ctrl.display}">
+        <span class="count">{{ctrl.commentsCount > 0 ? ctrl.commentsCount : '+'}}</span>
+      </div>
+    </a>
+  </div>
+</div>
@@ -0,0 +1,62 @@
+$balloon-selected-color: #50BF68;
+$balloon-color: #c4c4c4;
+
+comment-paragraph-plugin-allow-comment {
+  .paragraph {
+    width: 100%;
+    &.active {
+      width: 80%;
+    }
+    .popover {
+      &.right > .arrow {
+      }
+    }
+    .paragraph-content {
+      width: 95%;
+      display: inline-block;
+    }
+    .actions {
+      width: 3%;
+      display: inline-block;
+      vertical-align: top;
+      margin-left: 10px;
+      .popover {
+        width: 100%;
+        max-width: 330px;
+      }
+      .count {
+        font-size: 14px;
+        font-weight: bold;
+        color: white;
+        text-align: center;
+        width: 100%;
+        display: inline-block;
+      }
+      .arrow_box {
+        position: relative;
+        background: $balloon-color;
+        margin-top: 5px;
+        width: 25px;
+        border-radius: 2px;
+        &:after {
+          top: 100%;
+          left: 50%;
+          border: solid transparent;
+          content: " ";
+          position: absolute;
+          pointer-events: none;
+          border-color: rgba(196, 196, 196, 0);
+          border-top-color: $balloon-color;
+          border-width: 6px;
+          margin-left: -6px;
+        }
+        &:hover, &.active {
+          background: $balloon-selected-color;
+          &:after {
+            border-top-color: $balloon-selected-color;
+          }
+        }
+      }
+    }
+  }
+}
@@ -0,0 +1 @@
+<comment-paragraph-side-comments id="side-comments-{{ctrl.paragraphUuid}}" click-outside="ctrl.hideParagraphComments()" [article]="ctrl.article" [paragraph-uuid]="ctrl.paragraphUuid"></comment-paragraph-side-comments>
@@ -0,0 +1,39 @@
+import {Component, Input, Inject} from 'ng-forward';
+
+@Component({
+    selector: 'comment-paragraph-plugin-discussion-editor',
+    templateUrl: "plugins/comment_paragraph/article/cms/discussion-editor/discussion-editor.html"
+})
+@Inject("$scope")
+export class DiscussionEditorComponent {
+
+    @Input() article: noosfero.Article;
+    start_date: Date;
+    end_date: Date;
+
+    constructor(private $scope: ng.IScope) {
+        this.convertDate('start_date');
+        this.convertDate('end_date');
+    }
+
+    convertDate(attributeName: string) {
+        this.$scope.$watch(() => {
+            return (<any>this)[attributeName];
+        }, () => {
+            if ((<any>this)[attributeName]) {
+                (<any>this.article)[attributeName] = (<any>this)[attributeName].toISOString();
+            }
+        });
+    }
+
+    ngOnInit() {
+        if (this.article.start_date) {
+            this.start_date = new Date(this.article.start_date);
+        } else {
+            this.start_date = moment().toDate();
+        }
+        if (this.article.end_date) {
+            this.end_date = new Date(this.article.end_date);
+        }
+    }
+}
@@ -0,0 +1,35 @@
+<form>
+  <div class="form-group">
+    <label for="titleInput">{{"article.basic_editor.title" | translate}}</label>
+    <input type="text" class="form-control" id="titleInput" placeholder="{{'article.basic_editor.title' | translate}}" ng-model="ctrl.article.name">
+  </div>
+  <div class="form-group">
+  
+    <div class="form-inline">
+      <span class="start-date discussion-date">
+        <label for="startDateInput">{{"comment-paragraph-plugin.discussion.editor.start_date.label" | translate}}</label>
+        <input id="startDateInput" type="text" class="form-control" uib-datepicker-popup ng-model="ctrl.start_date" 
+          is-open="startDateOpened" ng-required="true" close-text="Close" />
+        <span class="input-group-btn date-popup-button">
+          <button type="button" class="btn btn-default" ng-click="startDateOpened = true">
+            <i class="fa fa-calendar fa-fw"></i>
+          </button>
+        </span>
+      </span>
+      <span class="end-date discussion-date">
+        <label for="endDateInput">{{"comment-paragraph-plugin.discussion.editor.end_date.label" | translate}}</label>
+        <input id="endDateInput" type="text" class="form-control" uib-datepicker-popup ng-model="ctrl.end_date" 
+          is-open="endDateOpened" ng-required="true" close-text="Close" />
+        <span class="date-popup-button">
+          <button type="button" class="btn btn-default" ng-click="endDateOpened = true">
+            <i class="fa fa-calendar fa-fw"></i>
+          </button>
+        </span>
+      </span>
+    </div>
+  </div>
+  <div class="form-group">
+    <label for="bodyInput">{{"article.basic_editor.body" | translate}}</label>
+    <html-editor [(value)]="ctrl.article.body"></html-editor>
+  </div>
+</form>
@@ -0,0 +1,14 @@
+comment-paragraph-plugin-discussion-editor {
+  .discussion-date {
+      [uib-datepicker-popup-wrap] {
+        display: inline-block;
+      }
+      .date-popup-button {
+        @extend .input-group-btn;
+        display: inline-block;
+      }
+  }
+  .end-date {
+    margin-left: 60px;
+  }
+}
@@ -0,0 +1,52 @@
+import {Component, Inject, Input} from "ng-forward";
+import {ArticleService} from "../../../../lib/ng-noosfero-api/http/article.service";
+
+@Component({
+    selector: "noosfero-comment-paragraph-plugin-discussion-block",
+    templateUrl: 'plugins/comment_paragraph/block/discussion/discussion-block.html'
+})
+@Inject(ArticleService, "$state")
+export class DiscussionBlockComponent {
+
+    @Input() block: any;
+    @Input() owner: any;
+
+    profile: any;
+    documents: any;
+
+    documentsLoaded: boolean = false;
+
+    constructor(private articleService: ArticleService, private $state: any) { }
+
+    ngOnInit() {
+        this.profile = this.owner;
+        this.documents = [];
+
+        let limit = ((this.block && this.block.settings) ? this.block.settings.limit : null) || 50;
+        let params: any = { content_type: 'CommentParagraphPlugin::Discussion', per_page: limit, order: 'start_date DESC' };
+        let now = new Date().toISOString();
+        switch (this.block.settings['discussion_status']) {
+            case 0:
+                params['from_start_date'] = now;
+                break;
+            case 1:
+                params['until_start_date'] = now;
+                params['from_end_date'] = now;
+                break;
+            case 2:
+                params['until_end_date'] = now;
+                break;
+        }
+        console.log(this.block.settings['discussion_status']);
+        this.articleService.getByProfile(this.profile, params)
+            .then((result: noosfero.RestResult<noosfero.Article[]>) => {
+                this.documents = <noosfero.Article[]>result.data;
+                this.documentsLoaded = true;
+            });
+    }
+
+    openDocument(article: any) {
+        this.$state.go("main.profile.page", { page: article.path, profile: article.profile.identifier });
+    }
+
+}
@@ -0,0 +1,26 @@
+<div deckgrid source="ctrl.documents" class="deckgrid">
+  <div class="a-card panel media" ng-click="mother.ctrl.openDocument(card);">
+      <div class="author media-left" ng-show="card.author.image">
+        <img ng-src="{{card.author.image.url}}" class="img-circle">
+      </div>
+      <div class="header media-body">
+        <h5 class="title media-heading" ng-bind="card.title"></h5>
+
+        <div class="subheader">
+          <span class="time">
+            <i class="fa fa-clock-o"></i>
+            <span class="start-date date" ng-show="card.start_date">
+              <span class="description">{{"comment-paragraph-plugin.discussion.editor.start_date.label" | translate}}</span>
+              <span class="value">{{card.start_date | amDateFormat:'DD/MM/YYYY'}}</span>
+            </span>
+            <span class="end-date date" ng-show="card.end_date">
+              <span class="description">{{"comment-paragraph-plugin.discussion.editor.end_date.label" | translate}}</span>
+              <span class="value">{{card.end_date | amDateFormat:'DD/MM/YYYY'}}</span>
+            </span>
+          </span>
+        </div>
+      </div>
+      <img ng-show="card.image" ng-src="{{card.image.url}}" class="img-responsive article-image">
+      <div class="post-lead" ng-bind-html="card.body | stripTags | truncate: 100: '...': true"></div>
+  </div>
+</div>
@@ -0,0 +1,68 @@
+.block {
+    noosfero-comment-paragraph-plugin-discussion-block {
+    .deckgrid[deckgrid]::before {
+      content: '4 .column.column-1-4';
+      font-size: 0;
+      visibility: hidden;
+    }
+    .author {
+      img {
+        width: 30px;
+        height: 30px;
+      }
+    }
+    .header {
+      .subheader {
+        color: #C1C1C1;
+        font-size: 10px;
+      }
+    }
+    .post-lead {
+      color: #8E8E8E;
+      font-size: 14px;
+    }
+    .article-image {
+      margin: 10px 0;
+    }
+  }
+
+  .col-md-2-5 {
+    .deckgrid[deckgrid]::before {
+      content: '1 .deck-column';
+    }
+  }
+
+  .col-md-7 {
+    .block.recentdocumentsblock {
+      background-color: transparent;
+      border: 0;
+
+      .deckgrid[deckgrid]::before {
+          content: '3 .deck-column';
+      }
+
+      .panel-heading {
+        display: none;
+      }
+      .panel-body {
+        padding: 0;
+      }
+
+      .deckgrid {
+        .column {
+          float: left;
+        }
+
+        .deck-column {
+          @extend .col-md-4;
+          padding: 0;
+
+          .a-card {
+            padding: 10px;
+            margin: 3px;
+          }
+        }
+      }
+    }
+  }
+}
@@ -0,0 +1,28 @@
+import {CommentParagraphEventService} from "./comment-paragraph-event.service";
+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';
+
+describe("Services", () => {
+    describe("Comment Paragraph Event Service", () => {
+        let eventService: CommentParagraphEventService;
+
+        beforeEach(() => {
+            eventService = new CommentParagraphEventService();
+            eventService['toggleCommentParagraphEmitter'] = jasmine.createSpyObj("toggleCommentParagraphEmitter", ["next", "subscribe"]);
+        });
+
+        it('subscribe to toggle comment paragraph event', () => {
+            eventService['toggleCommentParagraphEmitter'].subscribe = jasmine.createSpy("subscribe");
+            eventService.subscribeToggleCommentParagraph(() => { });
+            expect(eventService['toggleCommentParagraphEmitter'].subscribe).toHaveBeenCalled();
+        });
+
+        it('emit event when toggle comment paragraph', () => {
+            eventService['toggleCommentParagraphEmitter'].subscribe = jasmine.createSpy("next");
+            eventService.toggleCommentParagraph(<noosfero.Article>{});
+            expect(eventService['toggleCommentParagraphEmitter'].next).toHaveBeenCalled();
+        });
+    });
+});
@@ -0,0 +1,19 @@
+import {Injectable, EventEmitter} from "ng-forward";
+
+@Injectable()
+export class CommentParagraphEventService {
+
+    private toggleCommentParagraphEmitter: EventEmitter<noosfero.Article>;
+
+    constructor() {
+        this.toggleCommentParagraphEmitter = new EventEmitter();
+    }
+
+    toggleCommentParagraph(article: noosfero.Article) {
+        this.toggleCommentParagraphEmitter.next(article);
+    }
+
+    subscribeToggleCommentParagraph(fn: (article: noosfero.Article) => void) {
+        this.toggleCommentParagraphEmitter.subscribe(fn);
+    }
+}
@@ -0,0 +1,16 @@
+import { Input, Inject, Component } from "ng-forward";
+import {Hotspot} from "../../../../app/hotspot/hotspot.decorator";
+
+@Component({
+    selector: "comment-paragraph-article-content-hotspot",
+    templateUrl: "plugins/comment_paragraph/hotspot/article-content/article-content.html",
+})
+@Hotspot("article_extra_content")
+export class CommentParagraphArticleContentHotspotComponent {
+
+    @Input() article: noosfero.Article;
+
+    isDiscussion() {
+        return this.article.type === "CommentParagraphPlugin::Discussion";
+    }
+}
@@ -0,0 +1,11 @@
+<div class="discussion-header" ng-if="ctrl.isDiscussion()">
+  <span class="description">{{"comment-paragraph-plugin.discussion.header" | translate}}</span>
+  <span class="start-date date" ng-if="ctrl.article.start_date">
+    <span class="description">{{"comment-paragraph-plugin.discussion.editor.start_date.label" | translate}}</span>
+    <span class="value">{{ctrl.article.start_date | amDateFormat:'DD/MM/YYYY'}}</span>
+  </span>
+  <span class="end-date date" ng-if="ctrl.article.end_date">
+    <span class="description">{{"comment-paragraph-plugin.discussion.editor.end_date.label" | translate}}</span>
+    <span class="value">{{ctrl.article.end_date | amDateFormat:'DD/MM/YYYY'}}</span>
+  </span>
+</div>
@@ -0,0 +1,20 @@
+.discussion-header {
+  @extend .pull-right;
+  margin-bottom: 20px;
+  .date {
+    text-transform: lowercase;
+    font-size: 16px;
+    .description {
+      font-weight: bold;
+      color: #BFBFBF;
+    }
+    .value {
+      font-size: 15px;
+      color: #969696;
+    }
+  }
+  .description {
+    font-weight: bold;
+    color: #BFBFBF;
+  }
+}
@@ -0,0 +1,85 @@
+import {CommentParagraphArticleButtonHotspotComponent} from "./comment-paragraph-article-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';
+
+let htmlTemplate = '<comment-paragraph-article-button-hotspot [article]="ctrl.article"></comment-paragraph-article-button-hotspot>';
+
+describe("Components", () => {
+    describe("Comment Paragraph Article Button Hotspot Component", () => {
+
+        let serviceMock = jasmine.createSpyObj("CommentParagraphService", ["deactivateCommentParagraph", "activateCommentParagraph"]);
+        let eventServiceMock = jasmine.createSpyObj("CommentParagraphEventService", ["toggleCommentParagraph"]);
+
+        let providers = [
+            new Provider('CommentParagraphService', { useValue: serviceMock }),
+            new Provider('CommentParagraphEventService', { useValue: eventServiceMock })
+        ].concat(helpers.provideFilters('translateFilter'));
+        let helper: ComponentTestHelper<CommentParagraphArticleButtonHotspotComponent>;
+
+        beforeEach(angular.mock.module("templates"));
+
+        beforeEach((done) => {
+            let cls = createClass({
+                template: htmlTemplate,
+                directives: [CommentParagraphArticleButtonHotspotComponent],
+                providers: providers,
+                properties: {
+                    article: {}
+                }
+            });
+            helper = new ComponentTestHelper<CommentParagraphArticleButtonHotspotComponent>(cls, done);
+        });
+
+        it('emit event when deactivate comment paragraph in an article', () => {
+            serviceMock.deactivateCommentParagraph = jasmine.createSpy("deactivateCommentParagraph").and.returnValue(
+                { then: (fn: Function) => { fn({ data: {} }); } }
+            );
+            eventServiceMock.toggleCommentParagraph = jasmine.createSpy("toggleCommentParagraph");
+            helper.component.deactivateCommentParagraph();
+
+            expect(serviceMock.deactivateCommentParagraph).toHaveBeenCalled();
+            expect(eventServiceMock.toggleCommentParagraph).toHaveBeenCalled();
+        });
+
+        it('emit event when activate comment paragraph in an article', () => {
+            serviceMock.activateCommentParagraph = jasmine.createSpy("activateCommentParagraph").and.returnValue(
+                { then: (fn: Function) => { fn({ data: {} }); } }
+            );
+            eventServiceMock.toggleCommentParagraph = jasmine.createSpy("toggleCommentParagraph");
+            helper.component.activateCommentParagraph();
+
+            expect(serviceMock.activateCommentParagraph).toHaveBeenCalled();
+            expect(eventServiceMock.toggleCommentParagraph).toHaveBeenCalled();
+        });
+
+        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();
+        });
+
+        it('return false when comment paragraph is not active', () => {
+            expect(helper.component.isActivated()).toBeFalsy();
+        });
+
+        it('return false when article has no setting attribute', () => {
+            helper.component.article = <noosfero.Article>{};
+            helper.detectChanges();
+            expect(helper.component.isActivated()).toBeFalsy();
+        });
+
+        it('display activate button when comment paragraph is not active', () => {
+            expect(helper.all('.comment-paragraph-activate').length).toEqual(1);
+            expect(helper.all('.comment-paragraph-deactivate').length).toEqual(0);
+        });
+
+        it('display deactivate button when comment paragraph is active', () => {
+            helper.component.article = <noosfero.Article>{ setting: { comment_paragraph_plugin_activate: true } };
+            helper.detectChanges();
+            expect(helper.all('.comment-paragraph-deactivate').length).toEqual(1);
+            expect(helper.all('.comment-paragraph-activate').length).toEqual(0);
+        });
+    });
+});
@@ -0,0 +1,38 @@
+import { Input, Inject, Component } from "ng-forward";
+import {Hotspot} from "../../../app/hotspot/hotspot.decorator";
+import {CommentParagraphService} from "../http/comment-paragraph.service";
+import {CommentParagraphEventService} from "../events/comment-paragraph-event.service";
+
+@Component({
+    selector: "comment-paragraph-article-button-hotspot",
+    templateUrl: "plugins/comment_paragraph/hotspot/comment-paragraph-article-button.html",
+})
+@Inject("$scope", CommentParagraphService, CommentParagraphEventService)
+@Hotspot("article_extra_toolbar_buttons")
+export class CommentParagraphArticleButtonHotspotComponent {
+
+    @Input() article: noosfero.Article;
+
+    constructor(private $scope: ng.IScope,
+        private commentParagraphService: CommentParagraphService,
+        private commentParagraphEventService: CommentParagraphEventService) { }
+
+    deactivateCommentParagraph() {
+        this.toggleCommentParagraph(this.commentParagraphService.deactivateCommentParagraph(this.article));
+    }
+
+    activateCommentParagraph() {
+        this.toggleCommentParagraph(this.commentParagraphService.activateCommentParagraph(this.article));
+    }
+
+    isActivated() {
+        return this.article && this.article.setting && this.article.setting.comment_paragraph_plugin_activate;
+    }
+
+    private toggleCommentParagraph(promise: ng.IPromise<noosfero.RestResult<noosfero.Article>>) {
+        promise.then((result: noosfero.RestResult<noosfero.Article>) => {
+            this.article = result.data;
+            this.commentParagraphEventService.toggleCommentParagraph(this.article);
+        });
+    }
+}
@@ -0,0 +1,8 @@
+<a href='#' class="btn btn-default btn-xs comment-paragraph-activate" (click)="ctrl.activateCommentParagraph()"
+  ng-if="!ctrl.article.setting.comment_paragraph_plugin_activate">
+  <i class="fa fa-fw fa-plus"></i> {{"comment-paragraph-plugin.title" | translate}}
+</a>
+<a href='#' class="btn btn-default btn-xs comment-paragraph-deactivate" (click)="ctrl.deactivateCommentParagraph()"
+  ng-if="ctrl.article.setting.comment_paragraph_plugin_activate">
+  <i class="fa fa-fw fa-minus"></i> {{"comment-paragraph-plugin.title" | translate}}
+</a>
@@ -0,0 +1,26 @@
+import { Inject, Input, Component } from "ng-forward";
+import {Hotspot} from "../../../app/hotspot/hotspot.decorator";
+
+@Component({
+    selector: "comment-paragraph-form-hotspot",
+    template: "<span></span>",
+})
+@Hotspot("comment_form_extra_contents")
+@Inject("$scope")
+export class CommentParagraphFormHotspotComponent {
+
+    @Input() comment: noosfero.Comment;
+    @Input() parent: noosfero.Comment;
+
+    constructor(private $scope: ng.IScope) { }
+
+    ngOnInit() {
+        this.$scope.$watch(() => {
+            return this.parent;
+        }, () => {
+            if (this.parent && (<any>this.parent).paragraph_uuid) {
+                (<any>this.comment).paragraph_uuid = (<any>this.parent).paragraph_uuid;
+            }
+        });
+    }
+}
@@ -0,0 +1,33 @@
+import {CommentParagraphFormHotspotComponent} from "./comment-paragraph-form.component";
+import {ComponentTestHelper, createClass} from '../../../spec/component-test-helper';
+import * as helpers from "../../../spec/helpers";
+import {ComponentFixture} from 'ng-forward/cjs/testing/test-component-builder';
+
+let htmlTemplate = '<comment-paragraph-form-hotspot [comment]="ctrl.comment" [parent]="ctrl.parent"></comment-paragraph-form-hotspot>';
+
+describe("Components", () => {
+    describe("Comment Paragraph Form Hotspot Component", () => {
+
+        let helper: ComponentTestHelper<CommentParagraphFormHotspotComponent>;
+
+        beforeEach(angular.mock.module("templates"));
+
+        beforeEach((done) => {
+            let cls = createClass({
+                template: htmlTemplate,
+                directives: [CommentParagraphFormHotspotComponent],
+                providers: [],
+                properties: {
+                    comment: {}
+                }
+            });
+            helper = new ComponentTestHelper<CommentParagraphFormHotspotComponent>(cls, done);
+        });
+
+        it('set paragraph uuid when parent has it setted', () => {
+            helper.component.parent = <any>{ paragraph_uuid: 'uuid' };
+            helper.detectChanges();
+            expect((<any>helper.component.comment).paragraph_uuid).toEqual('uuid');
+        });
+    });
+});
@@ -0,0 +1,90 @@
+import {CommentParagraphService} from "./comment-paragraph.service";
+
+
+describe("Services", () => {
+
+    describe("Comment Paragraph Service", () => {
+
+        let $httpBackend: ng.IHttpBackendService;
+        let commentParagraphService: CommentParagraphService;
+
+        beforeEach(angular.mock.module("noosferoApp", ($translateProvider: angular.translate.ITranslateProvider) => {
+            $translateProvider.translations('en', {});
+        }));
+
+        beforeEach(inject((_$httpBackend_: ng.IHttpBackendService, _CommentParagraphService_: CommentParagraphService) => {
+            $httpBackend = _$httpBackend_;
+            commentParagraphService = _CommentParagraphService_;
+        }));
+
+
+        describe("Succesfull requests", () => {
+
+            it("should return paragraph comments by article", (done) => {
+                let articleId = 1;
+                $httpBackend.expectGET(`/api/v1/articles/${articleId}/comment_paragraph_plugin/comments?without_reply=true`).respond(200, { comments: [{ body: "comment1" }] });
+                commentParagraphService.getByArticle(<noosfero.Article>{ id: articleId }).then((result: noosfero.RestResult<noosfero.Comment[]>) => {
+                    expect(result.data).toEqual([{ body: "comment1" }]);
+                    done();
+                });
+                $httpBackend.flush();
+            });
+
+            it("should create a paragraph comment", (done) => {
+                let articleId = 1;
+                $httpBackend.expectPOST(`/api/v1/articles/${articleId}/comment_paragraph_plugin/comments`).respond(200, { comment: { body: "comment1" } });
+                commentParagraphService.createInArticle(<noosfero.Article>{ id: articleId }, <noosfero.Comment>{ body: "comment1" }).then((result: noosfero.RestResult<noosfero.Comment>) => {
+                    expect(result.data).toEqual({ body: "comment1" });
+                    done();
+                });
+                $httpBackend.flush();
+            });
+
+            it("activate paragraph comments for an article", (done) => {
+                let articleId = 1;
+                $httpBackend.expectPOST(`/api/v1/articles/${articleId}/comment_paragraph_plugin/activate`).respond(200, { article: { title: "article1" } });
+                commentParagraphService.activateCommentParagraph(<noosfero.Article>{ id: articleId }).then((result: noosfero.RestResult<noosfero.Article>) => {
+                    expect(result.data).toEqual({ title: "article1" });
+                    done();
+                });
+                $httpBackend.flush();
+            });
+
+            it("deactivate paragraph comments for an article", (done) => {
+                let articleId = 1;
+                $httpBackend.expectPOST(`/api/v1/articles/${articleId}/comment_paragraph_plugin/deactivate`).respond(200, { article: { title: "article1" } });
+                commentParagraphService.deactivateCommentParagraph(<noosfero.Article>{ id: articleId }).then((result: noosfero.RestResult<noosfero.Article>) => {
+                    expect(result.data).toEqual({ title: "article1" });
+                    done();
+                });
+                $httpBackend.flush();
+            });
+
+            it("return counts for paragraph comments", (done) => {
+                let articleId = 1;
+                $httpBackend.expectGET(`/api/v1/articles/${articleId}/comment_paragraph_plugin/comments/count`).respond(200, { '1': 5, '2': 6 });
+                commentParagraphService.commentParagraphCount(<noosfero.Article>{ id: articleId }, '1').then((count: number) => {
+                    expect(count).toEqual(5);
+                    done();
+                });
+                $httpBackend.flush();
+            });
+
+            it("reset promise when comment paragraph counts fails", (done) => {
+                let articleId = 1;
+                commentParagraphService['articleService'] = jasmine.createSpyObj("articleService", ["getElement"]);
+                commentParagraphService['articleService'].getElement = jasmine.createSpy("getElement").and.returnValue(
+                    {
+                        customGET: (path: string) => {
+                            return Promise.reject({});
+                        }
+                    }
+                );
+                commentParagraphService.commentParagraphCount(<noosfero.Article>{ id: articleId }, '1').catch(() => {
+                    expect(commentParagraphService['commentParagraphCountsPromise']).toBeNull();
+                    done();
+                });
+            });
+        });
+    });
+});
@@ -0,0 +1,64 @@
+import { Injectable, Inject } from "ng-forward";
+import {RestangularService} from "../../../lib/ng-noosfero-api/http/restangular_service";
+import {ArticleService} from "../../../lib/ng-noosfero-api/http/article.service";
+
+@Injectable()
+@Inject("Restangular", "$q", "$log", ArticleService)
+export class CommentParagraphService extends RestangularService<noosfero.Comment> {
+
+    private commentParagraphCountsPromise: ng.IPromise<any>;
+
+    constructor(Restangular: restangular.IService, $q: ng.IQService, $log: ng.ILogService, protected articleService: ArticleService) {
+        super(Restangular, $q, $log);
+    }
+
+    getResourcePath() {
+        return "comment_paragraph_plugin/comments";
+    }
+
+    getDataKeys() {
+        return {
+            singular: 'comment',
+            plural: 'comments'
+        };
+    }
+
+    getByArticle(article: noosfero.Article, params: any = {}): ng.IPromise<noosfero.RestResult<noosfero.Comment[]>> {
+        params['without_reply'] = true;
+        let articleElement = this.articleService.getElement(<number>article.id);
+        return this.list(articleElement, params);
+    }
+
+    createInArticle(article: noosfero.Article, comment: noosfero.Comment): ng.IPromise<noosfero.RestResult<noosfero.Comment>> {
+        let articleElement = this.articleService.getElement(<number>article.id);
+        return this.create(comment, articleElement, null, { 'Content-Type': 'application/json' }, false);
+    }
+
+    activateCommentParagraph(article: noosfero.Article) {
+        let articleElement = this.articleService.getElement(<number>article.id);
+        return this.articleService.post("comment_paragraph_plugin/activate", articleElement);
+    }
+
+    deactivateCommentParagraph(article: noosfero.Article) {
+        let articleElement = this.articleService.getElement(<number>article.id);
+        return this.articleService.post("comment_paragraph_plugin/deactivate", articleElement);
+    }
+
+    commentParagraphCount(article: noosfero.Article, paragraphUuid: string) {
+        return this.commentParagraphCounts(article).then((counts: any) => {
+            return counts[paragraphUuid];
+        });
+    }
+
+    private commentParagraphCounts(article: noosfero.Article) {
+        if (!this.commentParagraphCountsPromise) {
+            let articleElement = this.articleService.getElement(<number>article.id);
+            this.commentParagraphCountsPromise = articleElement.customGET("comment_paragraph_plugin/comments/count").then((response: restangular.IResponse) => {
+                return response.data;
+            }).catch(() => {
+                this.commentParagraphCountsPromise = null;
+            });
+        }
+        return this.commentParagraphCountsPromise;
+    }
+}
@@ -0,0 +1,9 @@
+import {AllowCommentComponent} from "./allow-comment/allow-comment.component";
+import {CommentParagraphArticleButtonHotspotComponent} from "./hotspot/comment-paragraph-article-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 = [CommentParagraphArticleButtonHotspotComponent, CommentParagraphFormHotspotComponent, CommentParagraphArticleContentHotspotComponent];
@@ -0,0 +1,6 @@
+{
+  "comment-paragraph-plugin.title": "Paragraph 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"
+}
@@ -0,0 +1,6 @@
+{
+  "comment-paragraph-plugin.title": "Comentários por Parágrafo",
+  "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,51 @@
+import {SideCommentsComponent} from "./side-comments.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';
+
+let htmlTemplate = '<comment-paragraph-side-comments [article]="ctrl.article" [paragraph-uuid]="ctrl.paragraphUuid"></comment-paragraph-side-comments>';
+
+describe("Components", () => {
+    describe("Side Comments Component", () => {
+
+        let serviceMock = jasmine.createSpyObj("CommentParagraphService", ["getByArticle"]);
+        serviceMock.getByArticle = jasmine.createSpy("getByArticle").and.returnValue(Promise.resolve({ data: {} }));
+
+        let commentServiceMock = {};
+        let postCommentEventService = jasmine.createSpyObj("postCommentEventService", ["emit", "subscribe"]);
+        postCommentEventService.subscribe = jasmine.createSpy("subscribe");
+
+        let providers = [
+            new Provider('CommentParagraphService', { useValue: serviceMock }),
+            new Provider('CommentService', { useValue: commentServiceMock }),
+            new Provider('PostCommentEventService', { useValue: postCommentEventService })
+        ];
+        let helper: ComponentTestHelper<SideCommentsComponent>;
+
+        beforeEach(angular.mock.module("templates"));
+
+        beforeEach((done) => {
+            let cls = createClass({
+                template: htmlTemplate,
+                directives: [SideCommentsComponent],
+                providers: providers,
+                properties: {
+                    paragraphUuid: "uuid",
+                    article: {}
+                }
+            });
+            helper = new ComponentTestHelper<SideCommentsComponent>(cls, done);
+        });
+
+        it('call service to load paragraph comments', () => {
+            helper.component.loadComments();
+            expect(serviceMock.getByArticle).toHaveBeenCalled();
+        });
+
+        it('set paragraph uuid in new comment object', () => {
+            let comment = <any>helper.component.newComment;
+            expect(comment['paragraph_uuid']).toEqual('uuid');
+        });
+    });
+});
@@ -0,0 +1,30 @@
+import {Component, Inject, Input, Output} from "ng-forward";
+import {CommentsComponent} from "../../../app/article/comment/comments.component";
+import {CommentService} from "../../../lib/ng-noosfero-api/http/comment.service";
+import {CommentParagraphService} from "../http/comment-paragraph.service";
+
+@Component({
+    selector: "comment-paragraph-side-comments",
+    templateUrl: 'app/article/comment/comments.html',
+})
+@Inject(CommentService, "$scope", CommentParagraphService)
+export class SideCommentsComponent extends CommentsComponent {
+
+    @Input() article: noosfero.Article;
+    @Input() paragraphUuid: string;
+
+    constructor(commentService: CommentService,
+        $scope: ng.IScope,
+        private commentParagraphService: CommentParagraphService) {
+        super(commentService, $scope);
+    }
+
+    ngOnInit() {
+        super.ngOnInit();
+        (<any>this.newComment).paragraph_uuid = this.paragraphUuid;
+    }
+
+    loadComments() {
+        return this.commentParagraphService.getByArticle(this.article, { page: this.page, per_page: this.perPage, paragraph_uuid: this.paragraphUuid });
+    }
+}
@@ -0,0 +1,15 @@
+comment-paragraph-side-comments {
+  .comments {
+    min-height: 20px;
+    border-top: 0;
+    .comment {
+      margin: 0;
+      &.media {
+        border-top: 0;  
+      }
+      .comments {
+        margin-left: 0;
+      }
+    }
+  }
+}
@@ -0,0 +1,7 @@
+import * as commentParagraph from "./comment_paragraph";
+
+export let mainComponents: any = [];
+mainComponents = mainComponents.concat(commentParagraph.mainComponents);
+
+export let hotspots: any = [];
+hotspots = hotspots.concat(commentParagraph.hotspots);
@@ -36,7 +36,7 @@ export class ComponentTestHelper&lt;T extends any&gt; {
      * @propertyOf spec.ComponentTestHelper
      * @description
      *  The NgForward TestComponentBuilder
-     */
+    */
     tcb: TestComponentBuilder;
     /**
      * @ngdoc property
@@ -69,6 +69,8 @@ export class ComponentTestHelper&lt;T extends any&gt; {
         this.init(done);
     }
  
+    fixture: any;
+
     /**
      * @ngdoc method
      * @name init
@@ -80,7 +82,8 @@ export class ComponentTestHelper&lt;T extends any&gt; {
         let promisse = this.tcb.createAsync(this.mockComponent) as Promise<ComponentFixture>;
         return promisse.then((fixture: any) => {
             // Fire all angular events and parsing
-            fixture.detectChanges();
+            this.fixture = fixture;
+            this.detectChanges();
             // The main debug element
             this.debugElement = fixture.debugElement;
             this.component = <T>this.debugElement.componentViewChildren[0].componentInstance;
@@ -97,6 +100,17 @@ export class ComponentTestHelper&lt;T extends any&gt; {
  
     /**
      * @ngdoc method
+     * @name detectChanges
+     * @methodOf spec.ComponentTestHelper
+     * @description
+     *  Detect changes in component
+     */
+    detectChanges() {
+        this.fixture.detectChanges();
+    }
+
+    /**
+     * @ngdoc method
      * @name all
      * @methodOf spec.ComponentTestHelper
      * @description
@@ -73,6 +73,7 @@ class AngularServiceHookComponent {
     }
 }
  
+
 /**
  * This helper class allows get angular services to be used in integration tests
  * i.e: '$http', '$q', '$location', etc...
 const DEBUG = false;
  
-let log = (message: string, ...args:  any[]) => {
+let log = (message: string, ...args: any[]) => {
     if (DEBUG) {
         console.log(message);
     }
@@ -30,7 +30,7 @@ class ScopeWithEvents {
         }
     }
 }
-export var mocks = {
+export var mocks: any = {
     scopeWithEvents: (): ScopeWithEvents => new ScopeWithEvents(),
     modalInstance: {
         close: () => { }
@@ -41,8 +41,38 @@ export var mocks = {
         }
     },
     authService: {
+        loginSuccess: {
+            event: Function,
+            subscribe: (fn: Function) => {
+                mocks.authService['loginSuccess'].event = fn;
+            },
+            next: (param: any) => {
+                mocks.authService['loginSuccess'].event(param);
+            }
+        },
+        loginFailed: {
+            event: Function,
+            subscribe: (fn: Function) => {
+                mocks.authService['loginFailed'].event = fn;
+            },
+            next: (param: any) => {
+                mocks.authService['loginFailed'].event(param);
+            }
+        },
+        logoutSuccess: {
+            event: Function,
+            subscribe: (fn: Function) => {
+                mocks.authService['logoutSuccess'].event = fn;
+            },
+            next: (param: any) => {
+                mocks.authService['logoutSuccess'].event(param);
+            }
+        },
         logout: () => { },
-        login: () => { }
+        subscribe: (eventName: string, fn: Function) => {
+            mocks.authService[eventName].subscribe(fn);
+        },
+        isAuthenticated: () => { }
     },
     articleService: {
         getByProfile: (profileId: number, params?: any) => {
@@ -71,7 +101,9 @@ export var mocks = {
             return {
                 then: (func?: Function) => { if (func) func(); }
             };
-        }
+        },
+        setCurrent: (article: noosfero.Article) => { },
+        getCurrent: () => { return Promise.resolve({}); }
     },
     environmentService: {
         getEnvironmentPeople: (params: any) => {
@@ -0,0 +1,26 @@
+.navbar {
+  min-height: 123px;
+/*  background:url("../assets/images/redebrasil/bg-header.png") repeat-x;*/
+  background-color: #f9c404;
+  background-image: -moz-radial-gradient(center, ellipse cover, #fcdd4e 1%, #f9c404 100%);
+  background-image: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(1%, #fcdd4e), color-stop(100%, #f9c404));
+  background-image: -webkit-radial-gradient(center, ellipse cover, #fcdd4e 1%, #f9c404 100%);
+  background-image: -o-radial-gradient(center, ellipse cover, #fcdd4e 1%, #f9c404 100%);
+  background-image: -ms-radial-gradient(center, ellipse cover, #fcdd4e 1%, #f9c404 100%);
+  background-image: radial-gradient(ellipse at center, #fcdd4e 1%, #f9c404 100%);
+
+  .container-fluid {
+    .navbar-brand {
+      .noosfero-logo {
+        display: none;
+      }
+      .noosfero-name {
+        color: #03316f;
+        font-size: 40px;
+        font-weight: 800;
+        line-height: 1em;
+        letter-spacing: -0.05em;
+      }
+    }
+  }
+}
@@ -0,0 +1,37 @@
+body > .ng-scope {
+  min-height: 100%;
+}
+
+html, body {
+  height:100%;
+}
+
+.box-default{
+  border: none;
+  border-radius: 3px 3px 0 0;
+  font-family: "Ubuntu Mediun";
+  font-size: 15px;
+  font-variant: normal;
+  font-weight: normal;
+  line-height: 30px;
+  padding: 15px 15px 15px 55px;
+  text-transform: capitalize;
+}
+
+.skin-whbl .membersblock > .panel-heading{
+  @extend .box-default;
+  background: #DAE1C4 url("../assets/images/participa-consulta/pessoas.png") no-repeat 15px center;
+  background-size: 30px 30px;
+  color: #4F9CAC;
+}
+
+.skin-whbl .statisticsblock > .panel-heading{
+  @extend .box-default;
+  background: #69677C url("../assets/images/participa-consulta/indicadores.png") no-repeat 15px center;
+  background-size: 30px 30px;
+  color: #DAE1C4;
+}
+
+.profile-header{
+  text-align: center;
+}
...	...	@@ -34,10 +34,14 @@
34	34	"angular-dynamic-locale": "^0.1.30",
35	35	"angular-i18n": "^1.5.0",
36	36	"angular-load": "^0.4.1",
37		- "angular-translate-interpolation-messageformat": "^2.10.0"
	37	+ "angular-translate-interpolation-messageformat": "^2.10.0",
	38	+ "angular-bind-html-compile": "^1.2.1",
	39	+ "angular-click-outside": "^2.7.1"
38	40	},
39	41	"devDependencies": {
40		- "angular-mocks": "~1.5.0"
	42	+ "angular-mocks": "~1.5.0",
	43	+ "ng-ckeditor": "^0.2.1",
	44	+ "ckeditor": "^4.5.8"
41	45	},
42	46	"overrides": {
43	47	"bootstrap-sass": {
...	...
...	...	@@ -6,6 +6,7 @@ var rename = require('gulp-rename');
6	6	var insert = require('gulp-insert');
7	7	var merge = require('merge-stream');
8	8	var conf = require('./conf');
	9	+var languages = require('./languages');
9	10
10	11	var themeName = conf.paths.theme.replace('-', ' ');
11	12	themeName = themeName.charAt(0).toUpperCase() + themeName.slice(1);
...	...	@@ -16,25 +17,31 @@ var $ = require('gulp-load-plugins')({
16	17	});
17	18
18	19	gulp.task('partials', function () {
19		- var srcPaths = [path.join(conf.paths.tmp, '/serve/app/*/.html')];
20		- conf.paths.allSources.forEach(function(src) {
21		- srcPaths.push(path.join(src, '/app/*/.html'));
	20	+ var merged = merge();
	21	+ ['app', conf.paths.plugins].forEach(function(partialPath) {
	22	+ var srcPaths = [path.join(conf.paths.tmp, '/serve/app/*/.html')];
	23	+ conf.paths.allSources.forEach(function(src) {
	24	+ srcPaths.push(path.join(src, partialPath, '/*/.html'));
	25	+ });
	26	+ merged.add(gulp.src(srcPaths)
	27	+ .pipe($.minifyHtml({
	28	+ empty: true,
	29	+ spare: true,
	30	+ quotes: true
	31	+ }))
	32	+ .pipe($.angularTemplatecache('templateCacheHtml-'+partialPath+'.js', {
	33	+ module: 'noosferoApp',
	34	+ root: partialPath
	35	+ }))
	36	+ .pipe(gulp.dest(conf.paths.tmp + '/partials/')));
22	37	});
23		- return gulp.src(srcPaths)
24		- .pipe($.minifyHtml({
25		- empty: true,
26		- spare: true,
27		- quotes: true
28		- }))
29		- .pipe($.angularTemplatecache('templateCacheHtml.js', {
30		- module: 'noosferoApp',
31		- root: 'app'
32		- }))
33		- .pipe(gulp.dest(conf.paths.tmp + '/partials/'));
	38	+ return merged;
34	39	});
35	40
36	41	gulp.task('html', ['inject', 'partials'], function () {
37		- var partialsInjectFile = gulp.src(path.join(conf.paths.tmp, '/partials/templateCacheHtml.js'), { read: false });
	42	+ var partialsInjectFile = gulp.src([
	43	+ path.join(conf.paths.tmp, '/partials/templateCacheHtml-app.js'),
	44	+ path.join(conf.paths.tmp, '/partials/templateCacheHtml-plugins.js')], { read: false });
38	45	var partialsInjectOptions = {
39	46	starttag: '<!-- inject:partials -->',
40	47	ignorePath: path.join(conf.paths.tmp, '/partials'),
...	...	@@ -73,6 +80,8 @@ gulp.task('html', ['inject', 'partials'], function () {
73	80	.pipe($.useref())
74	81	.pipe($.revReplace({prefix: noosferoThemePrefix}))
75	82	.pipe(htmlFilter)
	83	+ .pipe($.replace('/bower_components/ng-ckeditor/libs/ckeditor/', noosferoThemePrefix + 'ng-ckeditor/libs/ckeditor/'))
	84	+ .pipe($.replace('/bower_components/ng-ckeditor/ng-ckeditor.min.js', noosferoThemePrefix + 'ng-ckeditor/ng-ckeditor.min.js'))
76	85	.pipe($.minifyHtml({
77	86	empty: true,
78	87	spare: true,
...	...	@@ -93,6 +102,10 @@ gulp.task('fonts', function () {
93	102	.pipe(gulp.dest(path.join(conf.paths.dist, '/fonts/')));
94	103	});
95	104
	105	+gulp.task('ckeditor', function () {
	106	+ return gulp.src(['bower_components/ng-ckeditor/*/']).pipe(gulp.dest(path.join(conf.paths.dist, '/ng-ckeditor')));
	107	+});
	108	+
96	109	gulp.task('locale', function () {
97	110	return gulp.src([
98	111	path.join("bower_components/angular-i18n", '*.js'),
...	...	@@ -124,6 +137,10 @@ gulp.task('clean-docs', [], function() {
124	137	return $.del([path.join(conf.paths.docs, '/')]);
125	138	});
126	139
	140	+gulp.task('plugin-languages', ['locale'], function() {
	141	+ return languages.pluginLanguages(conf.paths.dist);
	142	+});
	143	+
127	144	gulp.task('noosfero', ['html'], function () {
128	145	var layouts = gulp.src('layouts/*/')
129	146	.pipe(gulp.dest(path.join(conf.paths.dist, "layouts")));
...	...	@@ -136,4 +153,4 @@ gulp.task('noosfero', ['html'], function () {
136	153	return merge(layouts, theme, index);
137	154	});
138	155
139		-gulp.task('build', ['html', 'fonts', 'other', 'locale', 'noosfero']);
	156	+gulp.task('build', ['html', 'fonts', 'other', 'locale', 'ckeditor', 'plugin-languages', 'noosfero']);
...	...
...	...	@@ -15,11 +15,13 @@ var path = require('path');
15	15	*/
16	16	exports.paths = {
17	17	src: 'src',
	18	+ plugins: 'plugins',
18	19	dist: 'dist',
19	20	tmp: '.tmp',
20	21	e2e: 'e2e',
21	22	docs: 'docs',
22		- themes: 'themes'
	23	+ themes: 'themes',
	24	+ languages: 'languages'
23	25	};
24	26	exports.configTheme = function(theme) {
25	27	exports.paths.theme = theme \|\| "angular-default";
...	...	@@ -34,7 +36,7 @@ exports.configTheme(argv.theme);
34	36	* to inject css preprocessor deps and js files in karma
35	37	*/
36	38	exports.wiredep = {
37		- exclude: [/jquery/, /\/bootstrap\.js$/, /\/bootstrap-sass\/.*\.js/, /\/bootstrap\.css/],
	39	+ exclude: [/jquery/, /\/bootstrap\.js$/, /\/bootstrap-sass\/.*\.js/, /\/bootstrap\.css/, /ckeditor/],
38	40	directory: 'bower_components'
39	41	};
40	42
...	...
...	...	@@ -0,0 +1,29 @@
	1	+'use strict';
	2	+
	3	+var path = require('path');
	4	+var gulp = require('gulp');
	5	+var merge = require('merge-stream');
	6	+var conf = require('./conf');
	7	+var mergeJson = require('gulp-merge-json');
	8	+var glob = require("glob");
	9	+
	10	+exports.pluginLanguages = function(dest) {
	11	+ var merged = merge();
	12	+ glob(path.join(conf.paths.src, conf.paths.languages, "*.json"), function (er, files) {
	13	+ files.forEach(function(file) {
	14	+ merged.add(exports.pluginLanguage(file, dest));
	15	+ });
	16	+ });
	17	+ return merged;
	18	+}
	19	+
	20	+exports.pluginLanguage = function(file, dest) {
	21	+ var language = file.split('/').pop().replace('\.json','');
	22	+ return gulp.src(path.join(conf.paths.src, '**', conf.paths.languages, language+'.json'))
	23	+ .pipe(mergeJson(path.join(conf.paths.languages, language+'.json')))
	24	+ .pipe(gulp.dest(dest))
	25	+}
	26	+
	27	+gulp.task('serve-languages', function() {
	28	+ return exports.pluginLanguages(path.join(conf.paths.tmp, '/serve'));
	29	+});
...	...
...	...	@@ -45,7 +45,7 @@ browserSync.use(browserSyncSpa({
45	45	selector: '[ng-app]'// Only needed for angular apps
46	46	}));
47	47
48		-gulp.task('serve', ['watch'], function () {
	48	+gulp.task('serve', ['serve-languages', 'watch'], function () {
49	49	var srcPaths = [path.join(conf.paths.tmp, '/serve')];
50	50	conf.paths.allSources.reverse().forEach(function(src) {
51	51	srcPaths.push(src);
...	...
...	...	@@ -31,6 +31,7 @@ var buildStyles = function() {
31	31	];
32	32	conf.paths.allSources.forEach(function(src) {
33	33	srcPaths.push(path.join(src, '/app/*/.scss'));
	34	+ srcPaths.push(path.join(src, conf.paths.plugins, '/*/.scss'));
34	35	});
35	36	var injectFiles = gulp.src(srcPaths, { read: false });
36	37
...	...
...	...	@@ -3,6 +3,7 @@
3	3	var path = require('path');
4	4	var gulp = require('gulp');
5	5	var conf = require('./conf');
	6	+var languages = require('./languages');
6	7
7	8	var browserSync = require('browser-sync');
8	9
...	...	@@ -16,7 +17,8 @@ gulp.task('watch', ['inject'], function () {
16	17
17	18	gulp.watch([
18	19	path.join(conf.paths.src, '/app/*/.css'),
19		- path.join(conf.paths.src, '/app/*/.scss')
	20	+ path.join(conf.paths.src, '/app/*/.scss'),
	21	+ path.join(conf.paths.src, conf.paths.plugins, '/*/.scss')
20	22	], function(event) {
21	23	if(isOnlyChange(event)) {
22	24	gulp.start('styles-reload');
...	...	@@ -33,9 +35,14 @@ gulp.task('watch', ['inject'], function () {
33	35	}
34	36	});
35	37
	38	+ gulp.watch(path.join(conf.paths.src, '*', conf.paths.languages, '.json'), function(event) {
	39	+ languages.pluginLanguage(event.path, path.join(conf.paths.tmp, '/serve'));
	40	+ });
	41	+
36	42	var watchPaths = [];
37	43	conf.paths.allSources.forEach(function(src) {
38	44	watchPaths.push(path.join(src, '/app/*/.html'));
	45	+ watchPaths.push(path.join(src, conf.paths.plugins, '/*/.html'));
39	46	});
40	47	gulp.watch(watchPaths, function(event) {
41	48	browserSync.reload(event.path);
...	...
...	...	@@ -49,7 +49,7 @@ var _ = require('lodash');
49	49	var wiredep = require('wiredep');
50	50
51	51	var pathSrcHtml = [
52		- path.join('./src/app/*/.html')
	52	+ path.join('./src/*/.html')
53	53	];
54	54
55	55	var glob = require("glob");
...	...
1		-<% if params[:angular_theme_old] \|\| request.fullpath.start_with?('/myprofile') %>
	1	+<% if params[:angular_theme_old] %>
2	2	<%= render file: Rails.root.join("app/views/layouts/application-ng.html.erb"), use_full_path: false %>
3	3	<% else %>
4	4	<%= from_theme_include(current_theme, "index") %>
...	...
...	...	@@ -49,6 +49,7 @@
49	49	"gulp-insert": "^0.5.0",
50	50	"gulp-inject": "~3.0.0",
51	51	"gulp-load-plugins": "~0.10.0",
	52	+ "gulp-merge-json": "^0.4.0",
52	53	"gulp-minify-css": "~1.2.1",
53	54	"gulp-minify-html": "~1.0.4",
54	55	"gulp-ng-annotate": "~1.1.0",
...	...