Ábner Oliveira · Ábner Oliveira · Ábner Oliveira · Ábner Oliveira · Ábner Oliveira · Victor Costa
Showing 27 changed files Show diff stats
bower.json
src/app/admin/layout-edit/designMode.service.spec.ts
src/app/admin/layout-edit/designMode.service.ts
src/app/admin/layout-edit/designModeToggler.component.spec.ts
src/app/admin/layout-edit/designModeToggler.component.ts
src/app/admin/layout-edit/designModeToggler.html
src/app/article/content-viewer/content-viewer.component.ts
src/app/layout/navbar/navbar.html
src/app/layout/navbar/navbar.ts
src/app/layout/scss/_layout.scss
src/app/layout/scss/skins/_whbl.scss
src/app/layout/services/body-state-classes.service.spec.ts
src/app/layout/services/body-state-classes.service.ts
src/app/main/main.component.ts
src/app/profile/profile-toolbar.component.ts
src/app/profile/profile.component.ts
src/app/profile/toolbar.html
src/app/shared/components/bootstrap-switcher/bootstrap-switcher.component.ts
src/app/shared/components/interfaces.ts
src/app/shared/components/permission/permission.directive.ts
@@ -35,9 +35,10 @@
     "angular-i18n": "^1.5.0",
     "angular-load": "^0.4.1",
     "angular-translate-interpolation-messageformat": "^2.10.0",
-  	"angular-bind-html-compile": "^1.2.1",
-	  "angular-click-outside": "^2.7.1",
-	  "ng-ckeditor": "^0.2.1"
+    "angular-bind-html-compile": "^1.2.1",
+    "angular-click-outside": "^2.7.1",
+    "ng-ckeditor": "^0.2.1",
+    "angular-bootstrap-toggle-switch": "^0.5.6"
   },
   "devDependencies": {
     "angular-mocks": "~1.5.0"
@@ -0,0 +1,31 @@
+import {DesignModeService} from './designMode.service';
+
+describe('DesignMode Service', () => {
+    let service: DesignModeService;
+
+    beforeEach(() => {
+        service = new DesignModeService();
+    });
+
+    it('has the designModeOn equals false as default', () => {
+        expect(service.isInDesignMode()).toBeFalsy();
+    });
+
+    it('allows set the designMode value', () => {
+        spyOn(service.onToggle, 'next').and.stub();
+        service.setInDesignMode(true);
+        expect(service.isInDesignMode).toBeTruthy();
+    });
+
+    it('emits the onToggle event when changing the designModeOn property', () => {
+        spyOn(service.onToggle, 'next').and.stub();
+        service.setInDesignMode(true);
+        expect(service.onToggle.next).toHaveBeenCalled();
+    });
+
+    it('does not emit onToggle event when there is no change on designModeOn property', () => {
+        spyOn(service.onToggle, 'next').and.stub();
+        service.setInDesignMode(false);
+        expect(service.onToggle.next).not.toHaveBeenCalled();
+    });
+});
 \ No newline at end of file
@@ -0,0 +1,23 @@
+import {Component, Injectable, Output, EventEmitter} from 'ng-forward';
+import {BodyStateClassesService} from '../../layout/services/body-state-classes.service';
+
+@Injectable()
+export class DesignModeService {
+    @Output() onToggle: EventEmitter<boolean> = new EventEmitter<boolean>();
+
+    private designModeOn: boolean = false;
+
+    isInDesignMode(): boolean {
+        return this.designModeOn;
+    }
+
+    setInDesignMode(value: boolean) {
+        if (this.designModeOn !== value) {
+            this.designModeOn = value;
+            this.onToggle.next(this.designModeOn);
+        }
+    }
+
+    constructor() {
+    }
+}
 \ No newline at end of file
@@ -0,0 +1,59 @@
+import {ComponentTestHelper, createClass} from '../../../spec/component-test-helper';
+import * as helpers from '../../../spec/helpers';
+import {DesignModeTogglerComponent} from './designModeToggler.component';
+import {DesignModeService} from './designMode.service';
+
+describe('DesignModeToggler Component', () => {
+    const htmlTemplate: string = '<noosfero-design-toggler></noosfero-design-toggler>';
+
+    let helper: ComponentTestHelper<DesignModeTogglerComponent>;
+    beforeEach(() => {
+        angular.mock.module('templates');
+        angular.mock.module('ngSanitize');
+        angular.mock.module('toggle-switch');
+    });
+
+    let designModeService: DesignModeService;
+    beforeEach((done) => {
+        designModeService = new DesignModeService();
+        let cls = createClass({
+            template: htmlTemplate,
+            directives: [DesignModeTogglerComponent],
+            providers: [
+                helpers.createProviderToValue('DesignModeService', designModeService)
+            ]
+        });
+        helper = new ComponentTestHelper<DesignModeTogglerComponent>(cls, done);
+    });
+
+    it('changes css classes representing the switch is on or off', () => {
+        expect(helper.debugElement.query('div.switch-animate').hasClass('switch-off')).toBeTruthy();
+        expect(helper.debugElement.query('div.switch-animate').hasClass('switch-on')).toBeFalsy();
+        helper.component.inDesignMode = true;
+        helper.detectChanges();
+        expect(helper.debugElement.query('div.switch-animate').hasClass('switch-on')).toBeTruthy();
+        expect(helper.debugElement.query('div.switch-animate').hasClass('switch-off')).toBeFalsy();
+    });
+
+    it('emits event with value "true" when changing inDesignMode to On', (done) => {
+        designModeService.onToggle.subscribe((designModeOn: boolean) => {
+            expect(designModeOn).toBeTruthy();
+            done();
+        });
+        helper.component.inDesignMode = true;
+        helper.detectChanges();
+    });
+
+    it('emits events with value "false" when changing inDesignMode to Off', (done) => {
+        helper.component.inDesignMode = true;
+        helper.detectChanges();
+
+        designModeService.onToggle.subscribe((designModeOn: boolean) => {
+            expect(designModeOn).toBeFalsy();
+            done();
+        });
+
+        helper.component.inDesignMode = false;
+        helper.detectChanges();
+    });
+});
 \ No newline at end of file
@@ -0,0 +1,24 @@
+import {Component, Inject} from 'ng-forward';
+import {DesignModeService} from './designMode.service';
+@Component({
+    selector: 'noosfero-design-toggler',
+    templateUrl: 'app/admin/layout-edit/designModeToggler.html'
+})
+@Inject(DesignModeService)
+export class DesignModeTogglerComponent {
+
+    icon: string = "&nbsp;<i class='glyphicon glyphicon-wrench'></i>&nbsp;";
+
+    constructor(private designModeService: DesignModeService) {
+    }
+
+    private _inDesignMode: boolean = false;
+
+    get inDesignMode(): boolean {
+        return this.designModeService.isInDesignMode();
+    };
+
+    set inDesignMode(value: boolean) {
+        this.designModeService.setInDesignMode(value);
+    };
+}
 \ No newline at end of file
@@ -0,0 +1,8 @@
+<toggle-switch
+    html="true"
+    ng-model="ctrl.inDesignMode"
+    on-label="{{'designMode.toggle.ON' | translate}}"
+    off-label="{{'designMode.toggle.OFF' | translate}}"
+    class="switch-small"
+    knob-label="{{ ctrl.icon + ('designMode.label' | translate) }}">
+</toggle-switch>
 \ No newline at end of file
@@ -14,7 +14,7 @@ import {ProfileService} from &quot;../../../lib/ng-noosfero-api/http/profile.service&quot;
         provide('profileService', { useClass: ProfileService })
     ]
 })
-@Inject(ArticleService, ProfileService, "$log", "$stateParams")
+@Inject(ArticleService, ProfileService, "$stateParams")
 export class ContentViewerComponent {
     @Input()
@@ -23,7 +23,10 @@ export class ContentViewerComponent {
     @Input()
     profile: noosfero.Profile = null;
-    constructor(private articleService: ArticleService, private profileService: ProfileService, private $log: ng.ILogService, private $stateParams: angular.ui.IStateParamsService) {
+    constructor(
+        private articleService: ArticleService,
+        private profileService: ProfileService,
+        private $stateParams: angular.ui.IStateParamsService) {
         this.activate();
     }
@@ -26,19 +26,20 @@
             <span ng-bind="ctrl.currentUser.person.name"></span> <b class="caret"></b>
           </a>
           <ul class="dropdown-menu" uib-dropdown-menu>
-              <li>
-                  <a ui-sref="main.profile.info({profile: ctrl.currentUser.person.identifier})"><i class="fa fa-fw fa-user"></i> {{"navbar.profile" | translate}}</a>
-              </li>
-              <li>
-                  <a target="_self" ui-sref="main.profile.settings({profile: ctrl.currentUser.person.identifier})"><i class="fa fa-fw fa-gear"></i> {{"navbar.settings" | translate}}</a>
-              </li>
-              <li class="divider"></li>
-              <li>
-                  <a href="#" ng-click="ctrl.logout()"><i class="fa fa-fw fa-power-off"></i> {{"navbar.logout" | translate}}</a>
-              </li>
+            <li>
+              <a ui-sref="main.profile.info({profile: ctrl.currentUser.person.identifier})"><i class="fa fa-fw fa-user"></i> {{"navbar.profile" | translate}}</a>
+            </li>
+            <li>
+              <a target="_self" ui-sref="main.profile.settings({profile: ctrl.currentUser.person.identifier})"><i class="fa fa-fw fa-gear"></i> {{"navbar.settings" | translate}}</a>
+            </li>
+            <li class="divider"></li>
+            <li>
+              <a href="#" ng-click="ctrl.logout()"><i class="fa fa-fw fa-power-off"></i> {{"navbar.logout" | translate}}</a>
+            </li>
           </ul>
         </li>
       </ul>
+
       <ul class="nav navbar-nav navbar-right">
         <language-selector class="nav navbar-nav navbar-right"></language-selector>
       </ul>
@@ -49,3 +50,5 @@
     </div>
   </div>
 </nav>
+<div ui-view="toolbar">
+</div>
 \ No newline at end of file
@@ -4,11 +4,13 @@ import {SessionService, AuthService, AuthController, AuthEvents} from &quot;./../../l
 import {EnvironmentService} from "./../../../lib/ng-noosfero-api/http/environment.service";
 import {SidebarNotificationService} from "../sidebar/sidebar.notification.service";
 import {BodyStateClassesService} from '../services/body-state-classes.service';
+import {DesignModeTogglerComponent} from './../../admin/layout-edit/designModeToggler.component';
+import {BootstrapSwitcherComponent, BootstrapSwitcherItem} from './../../shared/components/bootstrap-switcher/bootstrap-switcher.component';
 @Component({
     selector: "acme-navbar",
     templateUrl: "app/layout/navbar/navbar.html",
-    directives: [LanguageSelectorComponent],
+    directives: [LanguageSelectorComponent, DesignModeTogglerComponent, BootstrapSwitcherComponent],
     providers: [AuthService, SessionService, SidebarNotificationService, EnvironmentService]
 })
 @Inject("$uibModal", AuthService, "SessionService", "$state", SidebarNotificationService, BodyStateClassesService, EnvironmentService)
@@ -18,7 +20,6 @@ export class Navbar {
     private modalInstance: any = null;
     public showHamburger: boolean = false;
     public currentEnvironment: noosfero.Environment = <any>{ name: '' };
-
     /**
      *
      */
@@ -35,3 +35,24 @@
 		padding: 0 20px 20px 20px;
 	}
 }
+
+
+body.noosfero-design-on {
+
+	div.content-wrapper {
+		opacity: 0.5;
+	}
+}
+
+ul.nav > li.toggler-container {
+	position: relative;
+	padding-top: 12px;
+}
+
+.noosfero-main-toolbar {
+	padding: 5px;
+	@include make-row();
+	margin-left: 0px;
+	margin-right: 0px;
+	background-color: #edecec;
+}
 \ No newline at end of file
@@ -281,6 +281,31 @@ $whbl-font-color: #16191c;
 	.pace .pace-progress {
 		background-color: #fff;
 	}
+
+	noosfero-design-toggler .ats-switch .knob i {
+		color: #999999;
+	}
+
+	.ats-switch .knob {
+		padding-right: 15px;
+	}
+
+	.ats-switch .glyphicon {
+		top: 2px;
+	}
+
+	.ats-switch .switch-left {
+		background-color: #41b941;
+		font-weight: bold;
+		color: white;
+	}
+
+	.ats-switch .switch-right {
+		background-color: #ce3b3b;
+		font-weight: bold;
+		color: white;
+	}
+
 }
 .rtl.skin-whbl #content-wrapper {
 	border-left: 0;
@@ -4,7 +4,7 @@ import {AuthService} from &quot;./../../login/auth.service&quot;;
 import {AuthEvents} from "./../../login/auth-events";
 import {EventEmitter} from 'ng-forward';
-
+import {DesignModeService} from './../../admin/layout-edit/designMode.service';
 describe("BodyStateClasses Service", () => {
@@ -19,10 +19,13 @@ describe(&quot;BodyStateClasses Service&quot;, () =&gt; {
         },
         authService: any = helpers.mocks.authService,
         bodyEl: { className: string },
-        bodyElJq: any;
+        bodyElJq: any,
+        designModeService = new DesignModeService();
+
+
     let getService = (): BodyStateClassesService => {
-        return new BodyStateClassesService($rootScope, $document, $state, authService);
+        return new BodyStateClassesService($rootScope, $document, $state, authService, designModeService);
     };
     beforeEach(() => {
@@ -168,4 +171,30 @@ describe(&quot;BodyStateClasses Service&quot;, () =&gt; {
         expect(contentWrapperMock.removeClass).toHaveBeenCalledWith(BodyStateClassesService.CONTENT_WRAPPER_FULL);
     });
+
+    it("should add the class noosfero-design-on when designMode is changed to true", () => {
+        let fnOnToggle: Function = null;
+        designModeService.onToggle = <any> {
+            subscribe: (fn: Function) => {
+                fnOnToggle = fn;
+            },
+            next: (value: boolean) => {
+                fnOnToggle.apply(designModeService, [value]);
+            }
+        };
+
+        let service = getService();
+
+        bodyElJq.addClass = jasmine.createSpy("addClass");
+        bodyElJq.removeClass = jasmine.createSpy("removeClass");
+        service["bodyElement"] = bodyElJq;
+
+        service.start();
+
+        debugger;
+        designModeService.setInDesignMode(true);
+
+
+        expect(bodyElJq.addClass).toHaveBeenCalledWith(BodyStateClassesService.DESIGN_MODE_ON_CLASSNAME);
+    });
 });
@@ -3,6 +3,7 @@ import {AuthEvents} from &quot;../../login/auth-events&quot;;
 import {AuthService} from "./../../login/auth.service";
 import {HtmlUtils} from "../html-utils";
 import {INgForwardJQuery} from 'ng-forward/cjs/util/jqlite-extensions';
+import {DesignModeService} from './../../admin/layout-edit/designMode.service';
 export interface StartParams {
     skin?: string;
@@ -22,12 +23,13 @@ export interface StartParams {
  *         - full-content
  */
 @Injectable()
-@Inject("$rootScope", "$document", "$state", AuthService)
+@Inject("$rootScope", "$document", "$state", AuthService, DesignModeService)
 export class BodyStateClassesService {
     private started: boolean = false;
     private skin: string;
+    public static get DESIGN_MODE_ON_CLASSNAME(): string { return "noosfero-design-on"; }
     public static get USER_LOGGED_CLASSNAME(): string { return "noosfero-user-logged"; }
     public static get ROUTE_STATE_CLASSNAME_PREFIX(): string { return "noosfero-route-"; }
     public static get CONTENT_WRAPPER_FULL(): string { return "full-content"; }
@@ -38,16 +40,16 @@ export class BodyStateClassesService {
         private $rootScope: ng.IRootScopeService,
         private $document: ng.IDocumentService,
         private $state: ng.ui.IStateService,
-        private authService: AuthService
+        private authService: AuthService,
+        private designModeService: DesignModeService
     ) {
-
     }
     start(config?: StartParams) {
         if (!this.started) {
             this.setupUserLoggedClassToggle();
             this.setupStateClassToggle();
-
+            this.setupDesignModeClassToggle();
             if (config) {
                 this.setThemeSkin(config.skin);
             }
@@ -87,9 +89,19 @@ export class BodyStateClassesService {
     }
     /**
-     * Setup the initial class name on body element indicating the current route
-     * and adds event handler to swith this class when the current page/state changes
+     * setup the listeners to the desigModeService to add class on the Body Element
+     * indicating the user activated the designMode
      */
+    private setupDesignModeClassToggle() {
+        this.designModeService.onToggle.subscribe((designOn: boolean) => {
+            if (designOn) {
+                this.getBodyElement().addClass(BodyStateClassesService.DESIGN_MODE_ON_CLASSNAME);
+            } else {
+                this.getBodyElement().removeClass(BodyStateClassesService.DESIGN_MODE_ON_CLASSNAME);
+            }
+        });
+    }
+
     private setupStateClassToggle() {
         let bodyElement = this.getBodyElement();
         bodyElement.addClass(BodyStateClassesService.ROUTE_STATE_CLASSNAME_PREFIX + this.$state.current.name);
@@ -111,7 +111,7 @@ export class EnvironmentContent {
         "angular-bind-html-compile", "angularMoment", "angular.filter", "akoenig.deckgrid",
         "angular-timeline", "duScroll", "oitozero.ngSweetAlert",
         "pascalprecht.translate", "tmh.dynamicLocale", "angularLoad",
-        "angular-click-outside", "noosfero.init"]
+        "angular-click-outside", "toggle-switch", "noosfero.init"]
 })
 @StateConfig([
     {
@@ -0,0 +1,21 @@
+import {Component, Inject, provide} from "ng-forward";
+import {ProfileService} from "../../lib/ng-noosfero-api/http/profile.service";
+
+@Component({
+    selector: "profile-toolbar",
+    templateUrl: "app/profile/toolbar.html",
+    providers: [
+        provide('profileService', { useClass: ProfileService })
+    ]
+})
+@Inject(ProfileService)
+export class ProfileToolbarComponent {
+    profile: noosfero.Profile;
+    parentId: number;
+
+    constructor(profileService: ProfileService) {
+        profileService.getCurrentProfile().then((profile: noosfero.Profile) => {
+            this.profile = profile;
+        });
+    }
+}
@@ -10,7 +10,7 @@ import {ProfileService} from &quot;../../lib/ng-noosfero-api/http/profile.service&quot;;
 import {NotificationService} from "../shared/services/notification.service";
 import {MyProfileComponent} from "./myprofile.component";
 import {ProfileActionsComponent} from "./profile-actions.component";
-
+import {ProfileToolbarComponent} from "./profile-toolbar.component";
 /**
  * @ngdoc controller
  * @name profile.Profile
@@ -42,6 +42,11 @@ import {ProfileActionsComponent} from &quot;./profile-actions.component&quot;;
                 templateUrl: "app/profile/navbar-actions.html",
                 controller: ProfileActionsComponent,
                 controllerAs: "vm"
+            },
+            "toolbar@main": {
+                templateUrl: "app/profile/toolbar.html",
+                controller: ProfileToolbarComponent,
+                controllerAs: "vm"
             }
         }
     },
@@ -54,6 +59,11 @@ import {ProfileActionsComponent} from &quot;./profile-actions.component&quot;;
                 templateUrl: "app/profile/navbar-actions.html",
                 controller: ProfileActionsComponent,
                 controllerAs: "vm"
+            },
+            "toolbar@main": {
+                templateUrl: "app/profile/toolbar.html",
+                controller: ProfileToolbarComponent,
+                controllerAs: "vm"
             }
         }
     },
@@ -106,6 +116,11 @@ import {ProfileActionsComponent} from &quot;./profile-actions.component&quot;;
                 templateUrl: "app/article/content-viewer/navbar-actions.html",
                 controller: ContentViewerActionsComponent,
                 controllerAs: "vm"
+            },
+            "toolbar@main": {
+                templateUrl: "app/profile/toolbar.html",
+                controller: ProfileToolbarComponent,
+                controllerAs: "vm"
             }
         }
     }
@@ -0,0 +1,4 @@
+<div class="noosfero-main-toolbar" permission="vm.profile.permissions" permission-action="allow_edit">
+    <noosfero-design-toggler class="pull-right"></noosfero-design-toggler>
+
+</div>
 \ No newline at end of file
@@ -0,0 +1,51 @@
+import {Component, Input, Output, EventEmitter} from 'ng-forward';
+
+
+export interface BootstrapSwitcherItem {
+    value: any;
+    label: string;
+}
+@Component({
+    selector: 'noosfero-bootstrap-switcher',
+    template: `
+        <span class="switcher-label" ng-bind="ctrl.label | translate"></span>
+        <div class="btn-group switcher">
+            <button ng-repeat="option in ctrl.options track by $index"
+                   (click)="ctrl.switcherClick(option)"
+                   ng-class="ctrl.getCssClassForItem(option)"
+                   class="btn btn-xs" ng-bind="option.label | translate">
+             </button>
+        </div>
+    `,
+    inputs: ['activeClass', 'defaultClass', 'label', 'options', 'defaultOption'],
+    outputs: ['onSwitch']
+})
+export class BootstrapSwitcherComponent {
+    @Input() activeClass: string = 'active btn-danger';
+    @Input() defaultClass: string = 'btn-default';
+    @Input() label: string;
+    @Input() options: BootstrapSwitcherItem[];
+    @Input() defaultOption: BootstrapSwitcherItem;
+    @Output() onSwitch: EventEmitter<BootstrapSwitcherItem> = new EventEmitter<BootstrapSwitcherItem>();
+
+    selectedOption: BootstrapSwitcherItem = null;
+
+    constructor() { }
+
+    ngOnInit() {
+        this.selectedOption = this.defaultOption;
+    }
+
+    isSelectedOption(value: BootstrapSwitcherItem): boolean {
+        return this.selectedOption === value;
+    }
+
+    getCssClassForItem(value: BootstrapSwitcherItem): string {
+        return this.isSelectedOption(value) ? this.activeClass : this.defaultClass;
+    }
+
+    switcherClick(value: BootstrapSwitcherItem) {
+        this.selectedOption = value;
+        this.onSwitch.next(value);
+    }
+}
 \ No newline at end of file
@@ -0,0 +1,5 @@
+
+
+export interface IComponentWithPermissions {
+    permissions: () => string[];
+}
 \ No newline at end of file
@@ -6,7 +6,7 @@ import {Directive, Inject, Input} from &quot;ng-forward&quot;;
 @Inject('$attrs', '$scope', '$element')
 export class PermissionDirective {
-    constructor($attrs: ng.IAttributes, $scope: ng.IScope, $element: any) {
+    constructor($attrs: ng.IAttributes, $scope: ng.IScope, $element: ng.IAugmentedJQuery) {
         $scope.$watch($attrs['permission'], () => {
             let permissions = $scope.$eval($attrs['permission']);
             let permissionAction = $attrs['permissionAction'];
@@ -75,6 +75,9 @@
   "custom_content.title": "Edit content",
   "profile.custom_header.label": "Header",
   "profile.custom_footer.label": "Footer",
+  "designMode.label": "In Design",
+  "designMode.toggle.ON": "ON",
+  "designMode.toggle.OFF": "OFF",
   "search.results.summary": "{results, plural, one{result} other{# results}}",
   "search.results.query.label": "Search for:",
   "search.results.query.placeholder": "Search"
@@ -75,6 +75,9 @@
   "custom_content.title": "Editar conteúdo",
   "profile.custom_header.label": "Cabeçalho",
   "profile.custom_footer.label": "Rodapé",
+  "designMode.label": "Modo de Edição",
+  "designMode.toggle.ON": "Ligado",
+  "designMode.toggle.OFF": "Desligado",
   "search.results.summary": "{results, plural, one{# resultado} other{# resultados}}",
   "search.results.query.label": "Buscar:",
   "search.results.query.placeholder": "Informe aqui sua busca"
@@ -22,7 +22,7 @@ export class ProfileService {
         this._currentProfilePromise.resolve(profile);
     }
-    setCurrentProfileByIdentifier(identifier: string) {
+    setCurrentProfileByIdentifier(identifier: string): ng.IPromise<noosfero.Profile> {
         this.resetCurrentProfile();
         return this.getByIdentifier(identifier).then((profile: noosfero.Profile) => {
             this.setCurrentProfile(profile);
@@ -14,5 +14,7 @@ namespace noosfero {
         start_date: string;
         end_date: string;
         accept_comments: boolean;
+
+        permissions: string[];
     }
 }
@@ -0,0 +1,5 @@
+namespace noosfero {
+    export interface ModelWithPermissions {
+        permissions: string[];
+    }
+}
 \ No newline at end of file
@@ -78,5 +78,7 @@ namespace noosfero {
          * @returns {string} The Profile footer
          */
         custom_footer: string;
+
+        permissions: string[];
     }
 }
@@ -77,3 +77,8 @@ $selected-color: #f6c445;
     background-color: #7E7E7E;
   }
 }
+
+.ats-switch {
+  border: 0px;
+  border-color: transparent;
+}
	@@ -0,0 +1,31 @@		@@ -0,0 +1,31 @@
		1	+import {DesignModeService} from './designMode.service';
		2	+
		3	+describe('DesignMode Service', () => {
		4	+ let service: DesignModeService;
		5	+
		6	+ beforeEach(() => {
		7	+ service = new DesignModeService();
		8	+ });
		9	+
		10	+ it('has the designModeOn equals false as default', () => {
		11	+ expect(service.isInDesignMode()).toBeFalsy();
		12	+ });
		13	+
		14	+ it('allows set the designMode value', () => {
		15	+ spyOn(service.onToggle, 'next').and.stub();
		16	+ service.setInDesignMode(true);
		17	+ expect(service.isInDesignMode).toBeTruthy();
		18	+ });
		19	+
		20	+ it('emits the onToggle event when changing the designModeOn property', () => {
		21	+ spyOn(service.onToggle, 'next').and.stub();
		22	+ service.setInDesignMode(true);
		23	+ expect(service.onToggle.next).toHaveBeenCalled();
		24	+ });
		25	+
		26	+ it('does not emit onToggle event when there is no change on designModeOn property', () => {
		27	+ spyOn(service.onToggle, 'next').and.stub();
		28	+ service.setInDesignMode(false);
		29	+ expect(service.onToggle.next).not.toHaveBeenCalled();
		30	+ });
		31	+});
0	\ No newline at end of file	32	\ No newline at end of file
	@@ -0,0 +1,23 @@		@@ -0,0 +1,23 @@
		1	+import {Component, Injectable, Output, EventEmitter} from 'ng-forward';
		2	+import {BodyStateClassesService} from '../../layout/services/body-state-classes.service';
		3	+
		4	+@Injectable()
		5	+export class DesignModeService {
		6	+ @Output() onToggle: EventEmitter<boolean> = new EventEmitter<boolean>();
		7	+
		8	+ private designModeOn: boolean = false;
		9	+
		10	+ isInDesignMode(): boolean {
		11	+ return this.designModeOn;
		12	+ }
		13	+
		14	+ setInDesignMode(value: boolean) {
		15	+ if (this.designModeOn !== value) {
		16	+ this.designModeOn = value;
		17	+ this.onToggle.next(this.designModeOn);
		18	+ }
		19	+ }
		20	+
		21	+ constructor() {
		22	+ }
		23	+}
0	\ No newline at end of file	24	\ No newline at end of file
	@@ -0,0 +1,59 @@		@@ -0,0 +1,59 @@
		1	+import {ComponentTestHelper, createClass} from '../../../spec/component-test-helper';
		2	+import * as helpers from '../../../spec/helpers';
		3	+import {DesignModeTogglerComponent} from './designModeToggler.component';
		4	+import {DesignModeService} from './designMode.service';
		5	+
		6	+describe('DesignModeToggler Component', () => {
		7	+ const htmlTemplate: string = '<noosfero-design-toggler></noosfero-design-toggler>';
		8	+
		9	+ let helper: ComponentTestHelper<DesignModeTogglerComponent>;
		10	+ beforeEach(() => {
		11	+ angular.mock.module('templates');
		12	+ angular.mock.module('ngSanitize');
		13	+ angular.mock.module('toggle-switch');
		14	+ });
		15	+
		16	+ let designModeService: DesignModeService;
		17	+ beforeEach((done) => {
		18	+ designModeService = new DesignModeService();
		19	+ let cls = createClass({
		20	+ template: htmlTemplate,
		21	+ directives: [DesignModeTogglerComponent],
		22	+ providers: [
		23	+ helpers.createProviderToValue('DesignModeService', designModeService)
		24	+ ]
		25	+ });
		26	+ helper = new ComponentTestHelper<DesignModeTogglerComponent>(cls, done);
		27	+ });
		28	+
		29	+ it('changes css classes representing the switch is on or off', () => {
		30	+ expect(helper.debugElement.query('div.switch-animate').hasClass('switch-off')).toBeTruthy();
		31	+ expect(helper.debugElement.query('div.switch-animate').hasClass('switch-on')).toBeFalsy();
		32	+ helper.component.inDesignMode = true;
		33	+ helper.detectChanges();
		34	+ expect(helper.debugElement.query('div.switch-animate').hasClass('switch-on')).toBeTruthy();
		35	+ expect(helper.debugElement.query('div.switch-animate').hasClass('switch-off')).toBeFalsy();
		36	+ });
		37	+
		38	+ it('emits event with value "true" when changing inDesignMode to On', (done) => {
		39	+ designModeService.onToggle.subscribe((designModeOn: boolean) => {
		40	+ expect(designModeOn).toBeTruthy();
		41	+ done();
		42	+ });
		43	+ helper.component.inDesignMode = true;
		44	+ helper.detectChanges();
		45	+ });
		46	+
		47	+ it('emits events with value "false" when changing inDesignMode to Off', (done) => {
		48	+ helper.component.inDesignMode = true;
		49	+ helper.detectChanges();
		50	+
		51	+ designModeService.onToggle.subscribe((designModeOn: boolean) => {
		52	+ expect(designModeOn).toBeFalsy();
		53	+ done();
		54	+ });
		55	+
		56	+ helper.component.inDesignMode = false;
		57	+ helper.detectChanges();
		58	+ });
		59	+});
0	\ No newline at end of file	60	\ No newline at end of file
	@@ -0,0 +1,24 @@		@@ -0,0 +1,24 @@
		1	+import {Component, Inject} from 'ng-forward';
		2	+import {DesignModeService} from './designMode.service';
		3	+@Component({
		4	+ selector: 'noosfero-design-toggler',
		5	+ templateUrl: 'app/admin/layout-edit/designModeToggler.html'
		6	+})
		7	+@Inject(DesignModeService)
		8	+export class DesignModeTogglerComponent {
		9	+
		10	+ icon: string = " <i class='glyphicon glyphicon-wrench'></i> ";
		11	+
		12	+ constructor(private designModeService: DesignModeService) {
		13	+ }
		14	+
		15	+ private _inDesignMode: boolean = false;
		16	+
		17	+ get inDesignMode(): boolean {
		18	+ return this.designModeService.isInDesignMode();
		19	+ };
		20	+
		21	+ set inDesignMode(value: boolean) {
		22	+ this.designModeService.setInDesignMode(value);
		23	+ };
		24	+}
0	\ No newline at end of file	25	\ No newline at end of file
	@@ -0,0 +1,8 @@		@@ -0,0 +1,8 @@
		1	+<toggle-switch
		2	+ html="true"
		3	+ ng-model="ctrl.inDesignMode"
		4	+ on-label="{{'designMode.toggle.ON' \| translate}}"
		5	+ off-label="{{'designMode.toggle.OFF' \| translate}}"
		6	+ class="switch-small"
		7	+ knob-label="{{ ctrl.icon + ('designMode.label' \| translate) }}">
		8	+</toggle-switch>
0	\ No newline at end of file	9	\ No newline at end of file
	@@ -35,3 +35,24 @@		@@ -35,3 +35,24 @@
35	padding: 0 20px 20px 20px;	35	padding: 0 20px 20px 20px;
36	}	36	}
37	}	37	}
		38	+
		39	+
		40	+body.noosfero-design-on {
		41	+
		42	+ div.content-wrapper {
		43	+ opacity: 0.5;
		44	+ }
		45	+}
		46	+
		47	+ul.nav > li.toggler-container {
		48	+ position: relative;
		49	+ padding-top: 12px;
		50	+}
		51	+
		52	+.noosfero-main-toolbar {
		53	+ padding: 5px;
		54	+ @include make-row();
		55	+ margin-left: 0px;
		56	+ margin-right: 0px;
		57	+ background-color: #edecec;
		58	+}
38	\ No newline at end of file	59	\ No newline at end of file
	@@ -281,6 +281,31 @@ $whbl-font-color: #16191c;		@@ -281,6 +281,31 @@ $whbl-font-color: #16191c;
281	.pace .pace-progress {	281	.pace .pace-progress {
282	background-color: #fff;	282	background-color: #fff;
283	}	283	}
		284	+
		285	+ noosfero-design-toggler .ats-switch .knob i {
		286	+ color: #999999;
		287	+ }
		288	+
		289	+ .ats-switch .knob {
		290	+ padding-right: 15px;
		291	+ }
		292	+
		293	+ .ats-switch .glyphicon {
		294	+ top: 2px;
		295	+ }
		296	+
		297	+ .ats-switch .switch-left {
		298	+ background-color: #41b941;
		299	+ font-weight: bold;
		300	+ color: white;
		301	+ }
		302	+
		303	+ .ats-switch .switch-right {
		304	+ background-color: #ce3b3b;
		305	+ font-weight: bold;
		306	+ color: white;
		307	+ }
		308	+
284	}	309	}
285	.rtl.skin-whbl #content-wrapper {	310	.rtl.skin-whbl #content-wrapper {
286	border-left: 0;	311	border-left: 0;
	@@ -4,7 +4,7 @@ import {AuthService} from "./../../login/auth.service";		@@ -4,7 +4,7 @@ import {AuthService} from "./../../login/auth.service";
4	import {AuthEvents} from "./../../login/auth-events";	4	import {AuthEvents} from "./../../login/auth-events";
5		5
6	import {EventEmitter} from 'ng-forward';	6	import {EventEmitter} from 'ng-forward';
7	-	7	+import {DesignModeService} from './../../admin/layout-edit/designMode.service';
8		8
9	describe("BodyStateClasses Service", () => {	9	describe("BodyStateClasses Service", () => {
10		10
	@@ -19,10 +19,13 @@ describe("BodyStateClasses Service", () => {		@@ -19,10 +19,13 @@ describe("BodyStateClasses Service", () => {
19	},	19	},
20	authService: any = helpers.mocks.authService,	20	authService: any = helpers.mocks.authService,
21	bodyEl: { className: string },	21	bodyEl: { className: string },
22	- bodyElJq: any;	22	+ bodyElJq: any,
		23	+ designModeService = new DesignModeService();
		24	+
		25	+
23		26
24	let getService = (): BodyStateClassesService => {	27	let getService = (): BodyStateClassesService => {
25	- return new BodyStateClassesService($rootScope, $document, $state, authService);	28	+ return new BodyStateClassesService($rootScope, $document, $state, authService, designModeService);
26	};	29	};
27		30
28	beforeEach(() => {	31	beforeEach(() => {
	@@ -168,4 +171,30 @@ describe("BodyStateClasses Service", () => {		@@ -168,4 +171,30 @@ describe("BodyStateClasses Service", () => {
168		171
169	expect(contentWrapperMock.removeClass).toHaveBeenCalledWith(BodyStateClassesService.CONTENT_WRAPPER_FULL);	172	expect(contentWrapperMock.removeClass).toHaveBeenCalledWith(BodyStateClassesService.CONTENT_WRAPPER_FULL);
170	});	173	});
		174	+
		175	+ it("should add the class noosfero-design-on when designMode is changed to true", () => {
		176	+ let fnOnToggle: Function = null;
		177	+ designModeService.onToggle = <any> {
		178	+ subscribe: (fn: Function) => {
		179	+ fnOnToggle = fn;
		180	+ },
		181	+ next: (value: boolean) => {
		182	+ fnOnToggle.apply(designModeService, [value]);
		183	+ }
		184	+ };
		185	+
		186	+ let service = getService();
		187	+
		188	+ bodyElJq.addClass = jasmine.createSpy("addClass");
		189	+ bodyElJq.removeClass = jasmine.createSpy("removeClass");
		190	+ service["bodyElement"] = bodyElJq;
		191	+
		192	+ service.start();
		193	+
		194	+ debugger;
		195	+ designModeService.setInDesignMode(true);
		196	+
		197	+
		198	+ expect(bodyElJq.addClass).toHaveBeenCalledWith(BodyStateClassesService.DESIGN_MODE_ON_CLASSNAME);
		199	+ });
171	});	200	});
	@@ -111,7 +111,7 @@ export class EnvironmentContent {		@@ -111,7 +111,7 @@ export class EnvironmentContent {
111	"angular-bind-html-compile", "angularMoment", "angular.filter", "akoenig.deckgrid",	111	"angular-bind-html-compile", "angularMoment", "angular.filter", "akoenig.deckgrid",
112	"angular-timeline", "duScroll", "oitozero.ngSweetAlert",	112	"angular-timeline", "duScroll", "oitozero.ngSweetAlert",
113	"pascalprecht.translate", "tmh.dynamicLocale", "angularLoad",	113	"pascalprecht.translate", "tmh.dynamicLocale", "angularLoad",
114	- "angular-click-outside", "noosfero.init"]	114	+ "angular-click-outside", "toggle-switch", "noosfero.init"]
115	})	115	})
116	@StateConfig([	116	@StateConfig([
117	{	117	{
@@ -0,0 +1,21 @@		@@ -0,0 +1,21 @@
	1	+import {Component, Inject, provide} from "ng-forward";
	2	+import {ProfileService} from "../../lib/ng-noosfero-api/http/profile.service";
	3	+
	4	+@Component({
	5	+ selector: "profile-toolbar",
	6	+ templateUrl: "app/profile/toolbar.html",
	7	+ providers: [
	8	+ provide('profileService', { useClass: ProfileService })
	9	+ ]
	10	+})
	11	+@Inject(ProfileService)
	12	+export class ProfileToolbarComponent {
	13	+ profile: noosfero.Profile;
	14	+ parentId: number;
	15	+
	16	+ constructor(profileService: ProfileService) {
	17	+ profileService.getCurrentProfile().then((profile: noosfero.Profile) => {
	18	+ this.profile = profile;
	19	+ });
	20	+ }
	21	+}