From 7057a9e1d1b55ee0b89712c54c1c300a9b5b7feb Mon Sep 17 00:00:00 2001 From: Abner Oliveira Date: Mon, 6 Jun 2016 10:54:05 -0300 Subject: [PATCH] initial commit for the design mode feature --- src/app/admin/designMode.service.ts | 17 +++++++++++++++++ src/app/admin/designModeToggler.component.ts | 33 +++++++++++++++++++++++++++++++++ src/app/admin/designModeToggler.html | 6 ++++++ src/app/layout/navbar/navbar.html | 6 ++++++ src/app/layout/navbar/navbar.ts | 3 ++- src/app/layout/scss/_layout.scss | 14 ++++++++++++++ src/app/layout/services/body-state-classes.service.ts | 24 ++++++++++++++++++------ src/languages/en.json | 5 ++++- src/languages/pt.json | 7 +++++-- 9 files changed, 105 insertions(+), 10 deletions(-) create mode 100644 src/app/admin/designMode.service.ts create mode 100644 src/app/admin/designModeToggler.component.ts create mode 100644 src/app/admin/designModeToggler.html diff --git a/src/app/admin/designMode.service.ts b/src/app/admin/designMode.service.ts new file mode 100644 index 0000000..3d23d95 --- /dev/null +++ b/src/app/admin/designMode.service.ts @@ -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 = new EventEmitter(); + + private designModeOn: boolean = false; + + constructor() { + } + + toggle() { + this.designModeOn = !this.designModeOn; + this.onToggle.next(this.designModeOn); + } +} \ No newline at end of file diff --git a/src/app/admin/designModeToggler.component.ts b/src/app/admin/designModeToggler.component.ts new file mode 100644 index 0000000..2e66f9b --- /dev/null +++ b/src/app/admin/designModeToggler.component.ts @@ -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 diff --git a/src/app/admin/designModeToggler.html b/src/app/admin/designModeToggler.html new file mode 100644 index 0000000..24167e4 --- /dev/null +++ b/src/app/admin/designModeToggler.html @@ -0,0 +1,6 @@ + + +
+ + +
diff --git a/src/app/layout/navbar/navbar.html b/src/app/layout/navbar/navbar.html index faff949..8dcb32c 100644 --- a/src/app/layout/navbar/navbar.html +++ b/src/app/layout/navbar/navbar.html @@ -39,9 +39,15 @@ +
+
    +
  • + +
    • +
diff --git a/src/app/layout/navbar/navbar.ts b/src/app/layout/navbar/navbar.ts index 2fbaeb2..bc3d716 100644 --- a/src/app/layout/navbar/navbar.ts +++ b/src/app/layout/navbar/navbar.ts @@ -4,11 +4,12 @@ import {SessionService, AuthService, AuthController, AuthEvents} from "./../../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) diff --git a/src/app/layout/scss/_layout.scss b/src/app/layout/scss/_layout.scss index f8abff4..ce6a150 100644 --- a/src/app/layout/scss/_layout.scss +++ b/src/app/layout/scss/_layout.scss @@ -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 diff --git a/src/app/layout/services/body-state-classes.service.ts b/src/app/layout/services/body-state-classes.service.ts index c9198e8..1d34d5f 100644 --- a/src/app/layout/services/body-state-classes.service.ts +++ b/src/app/layout/services/body-state-classes.service.ts @@ -3,6 +3,7 @@ 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'; +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); diff --git a/src/languages/en.json b/src/languages/en.json index ffc7034..651974f 100644 --- a/src/languages/en.json +++ b/src/languages/en.json @@ -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" } diff --git a/src/languages/pt.json b/src/languages/pt.json index bf1d05d..7347e63 100644 --- a/src/languages/pt.json +++ b/src/languages/pt.json @@ -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" } -- libgit2 0.21.2