initial commit for the design mode feature

Ábner Oliveira
1 parent a7010295
Showing 9 changed files with 105 additions and 10 deletions Show diff stats
src/app/admin/designMode.service.ts
src/app/admin/designModeToggler.component.ts
src/app/admin/designModeToggler.html
src/app/layout/navbar/navbar.html
src/app/layout/navbar/navbar.ts
src/app/layout/scss/_layout.scss
src/app/layout/services/body-state-classes.service.ts
src/languages/en.json
src/languages/pt.json
@@ -0,0 +1,17 @@
+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;
+
+    constructor() {
+    }
+
+    toggle() {
+        this.designModeOn = !this.designModeOn;
+        this.onToggle.next(this.designModeOn);
+    }
+}
 \ No newline at end of file
@@ -0,0 +1,33 @@
+import {Component, Inject} from 'ng-forward';
+import {DesignModeService} from './designMode.service';
+@Component({
+    selector: 'noosfero-design-toggler',
+    templateUrl: 'app/admin/designModeToggler.html'
+})
+@Inject(DesignModeService, '$scope')
+export class DesignModeTogglerComponent {
+
+    inDesignMode: boolean = false;
+
+    constructor(private designModeService: DesignModeService, private $scope: ng.IScope) {
+    }
+
+    ngOnInit() {
+        this.designModeService.onToggle.subscribe((editOnOrFalse: boolean) => {
+            this.inDesignMode = editOnOrFalse;
+            this.$scope.$apply();
+        });
+    }
+
+    toggleDesignModeOn() {
+        if (!this.inDesignMode) {
+            this.designModeService.toggle();
+        }
+    }
+
+    toggleDesignModeOff() {
+        if (this.inDesignMode) {
+            this.designModeService.toggle();
+        }
+    }
+}
 \ No newline at end of file
@@ -0,0 +1,6 @@
+
+    <span class="design-toggler-label" ng-bind="'designMode.label' | translate"></span>
+    <div class="btn-group design-toggler">
+        <button ng-click="ctrl.toggleDesignModeOff()" ng-class="{active: !ctrl.inDesignMode}" class="btn btn-xs btn-warning" ng-bind="'designMode.toggle.OFF' | translate"></button>
+        <button ng-click="ctrl.toggleDesignModeOn()" ng-class="{active: ctrl.inDesignMode}" class="btn btn-xs btn-warning" ng-bind="'designMode.toggle.ON' | translate "></button>
+    </div>
@@ -39,9 +39,15 @@
           </ul>
         </li>
       </ul>
+
       <ul class="nav navbar-nav navbar-right">
         <language-selector class="nav navbar-nav navbar-right"></language-selector>
       </ul>
+      <ul class="nav navbar-nav navbar-right">
+        <li class="toggler-container">
+            <noosfero-design-toggler></noosfero-design-toggler>
+        </li>
+      </ul>
       <div ui-view="actions"></div>
     </div>
   </div>
@@ -4,11 +4,12 @@ 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/designModeToggler.component';
 @Component({
     selector: "acme-navbar",
     templateUrl: "app/layout/navbar/navbar.html",
-    directives: [LanguageSelectorComponent],
+    directives: [LanguageSelectorComponent, DesignModeTogglerComponent],
     providers: [AuthService, SessionService, SidebarNotificationService, EnvironmentService]
 })
 @Inject("$uibModal", AuthService, "SessionService", "$state", SidebarNotificationService, BodyStateClassesService, EnvironmentService)
@@ -35,3 +35,17 @@
 		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;
+	color: white;
+}
 \ No newline at end of file
@@ -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/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);
@@ -74,5 +74,8 @@
   "profile.content.success.message": "Profile saved!",
   "custom_content.title": "Edit content",
   "profile.custom_header.label": "Header",
-  "profile.custom_footer.label": "Footer"
+  "profile.custom_footer.label": "Footer",
+  "designMode.label": "Design Mode",
+  "designMode.toggle.ON": "ON",
+  "designMode.toggle.OFF": "OFF"
 }
@@ -58,7 +58,7 @@
   "article.remove.success.title": "Bom trabalho!",
   "article.remove.success.message": "Artigo removido!",
   "article.remove.confirmation.title": "Tem certeza?",
-  "article.remove.confirmation.message": "Não será possível recuperar este artigo!",  
+  "article.remove.confirmation.message": "Não será possível recuperar este artigo!",
   "article.basic_editor.visibility": "Visibilidade",
   "article.basic_editor.visibility.public": "Público",
   "article.basic_editor.visibility.private": "Privado",
@@ -74,5 +74,8 @@
   "profile.content.success.message": "Perfil salvo!",
   "custom_content.title": "Editar conteúdo",
   "profile.custom_header.label": "Cabeçalho",
-  "profile.custom_footer.label": "Rodapé"
+  "profile.custom_footer.label": "Rodapé",
+  "designMode.label": "Modo de Edição",
+  "designMode.toggle.ON": "Ligado",
+  "designMode.toggle.OFF": "Desligado"
 }
	@@ -0,0 +1,17 @@		@@ -0,0 +1,17 @@
		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	+ constructor() {
		11	+ }
		12	+
		13	+ toggle() {
		14	+ this.designModeOn = !this.designModeOn;
		15	+ this.onToggle.next(this.designModeOn);
		16	+ }
		17	+}
0	\ No newline at end of file	18	\ No newline at end of file
	@@ -0,0 +1,33 @@		@@ -0,0 +1,33 @@
		1	+import {Component, Inject} from 'ng-forward';
		2	+import {DesignModeService} from './designMode.service';
		3	+@Component({
		4	+ selector: 'noosfero-design-toggler',
		5	+ templateUrl: 'app/admin/designModeToggler.html'
		6	+})
		7	+@Inject(DesignModeService, '$scope')
		8	+export class DesignModeTogglerComponent {
		9	+
		10	+ inDesignMode: boolean = false;
		11	+
		12	+ constructor(private designModeService: DesignModeService, private $scope: ng.IScope) {
		13	+ }
		14	+
		15	+ ngOnInit() {
		16	+ this.designModeService.onToggle.subscribe((editOnOrFalse: boolean) => {
		17	+ this.inDesignMode = editOnOrFalse;
		18	+ this.$scope.$apply();
		19	+ });
		20	+ }
		21	+
		22	+ toggleDesignModeOn() {
		23	+ if (!this.inDesignMode) {
		24	+ this.designModeService.toggle();
		25	+ }
		26	+ }
		27	+
		28	+ toggleDesignModeOff() {
		29	+ if (this.inDesignMode) {
		30	+ this.designModeService.toggle();
		31	+ }
		32	+ }
		33	+}
0	\ No newline at end of file	34	\ No newline at end of file
@@ -0,0 +1,6 @@		@@ -0,0 +1,6 @@
	1	+
	2	+ <span class="design-toggler-label" ng-bind="'designMode.label' \| translate"></span>
	3	+ <div class="btn-group design-toggler">
	4	+ <button ng-click="ctrl.toggleDesignModeOff()" ng-class="{active: !ctrl.inDesignMode}" class="btn btn-xs btn-warning" ng-bind="'designMode.toggle.OFF' \| translate"></button>
	5	+ <button ng-click="ctrl.toggleDesignModeOn()" ng-class="{active: ctrl.inDesignMode}" class="btn btn-xs btn-warning" ng-bind="'designMode.toggle.ON' \| translate "></button>
	6	+ </div>
	@@ -35,3 +35,17 @@		@@ -35,3 +35,17 @@
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	+ color: white;
		51	+}
38	\ No newline at end of file	52	\ No newline at end of file