changing designModeToggler to use toggle-switch angular directive

Ábner Oliveira
1 parent 46f6b264
Showing 8 changed files with 30 additions and 34 deletions Show diff stats
bower.json
src/app/admin/designMode.service.ts
src/app/admin/designModeToggler.component.ts
src/app/admin/designModeToggler.html
src/app/layout/navbar/navbar.ts
src/app/layout/scss/_layout.scss
src/app/main/main.component.ts
src/languages/en.json
@@ -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"
@@ -7,11 +7,15 @@ export class DesignModeService {
  
     private designModeOn: boolean = false;
  
-    constructor() {
+    isInDesignMode(): boolean {
+        return this.designModeOn;
     }
  
-    toggle() {
-        this.designModeOn = !this.designModeOn;
+    setInDesignMode(value: boolean) {
+        this.designModeOn = value;
         this.onToggle.next(this.designModeOn);
     }
+
+    constructor() {
+    }
 }
 \ No newline at end of file
@@ -7,27 +7,18 @@ import {DesignModeService} from &#39;./designMode.service&#39;;
 @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();
-        });
-    }
+    private _inDesignMode: boolean = false;
  
-    toggleDesignModeOn() {
-        if (!this.inDesignMode) {
-            this.designModeService.toggle();
-        }
-    }
+    get inDesignMode(): boolean {
+        return this.designModeService.isInDesignMode();
+    };
+
+    set inDesignMode(value: boolean) {
+        this.designModeService.setInDesignMode(value);
+    };
  
-    toggleDesignModeOff() {
-        if (this.inDesignMode) {
-            this.designModeService.toggle();
-        }
-    }
 }
 \ No newline at end of file
-
-    <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>
+<toggle-switch
+    html="true"
+    ng-model="ctrl.inDesignMode"
+    on-label="{{'designMode.toggle.ON' | translate}}"
+    off-label="{{'designMode.toggle.OFF' | translate}}"
+    knob-label="{{'designMode.label' | translate}}">
+</toggle-switch>
 \ No newline at end of file
@@ -5,11 +5,12 @@ import {EnvironmentService} from &quot;./../../../lib/ng-noosfero-api/http/environmen
 import {SidebarNotificationService} from "../sidebar/sidebar.notification.service";
 import {BodyStateClassesService} from '../services/body-state-classes.service';
 import {DesignModeTogglerComponent} from './../../admin/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, DesignModeTogglerComponent],
+    directives: [LanguageSelectorComponent, DesignModeTogglerComponent, BootstrapSwitcherComponent],
     providers: [AuthService, SessionService, SidebarNotificationService, EnvironmentService]
 })
 @Inject("$uibModal", AuthService, "SessionService", "$state", SidebarNotificationService, BodyStateClassesService, EnvironmentService)
@@ -19,7 +20,6 @@ export class Navbar {
     private modalInstance: any = null;
     public showHamburger: boolean = false;
     public currentEnvironment: noosfero.Environment = <any>{ name: '' };
-
     /**
      *
      */
@@ -47,5 +47,4 @@ body.noosfero-design-on {
 ul.nav > li.toggler-container {
 	position: relative;
 	padding-top: 12px;
-	color: white;
 }
 \ No newline at end of file
@@ -109,7 +109,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([
     {
@@ -75,7 +75,7 @@
   "custom_content.title": "Edit content",
   "profile.custom_header.label": "Header",
   "profile.custom_footer.label": "Footer",
-  "designMode.label": "Design Mode",
+  "designMode.label": "In Design",
   "designMode.toggle.ON": "ON",
   "designMode.toggle.OFF": "OFF"
 }
...	...	@@ -35,9 +35,10 @@
35	35	"angular-i18n": "^1.5.0",
36	36	"angular-load": "^0.4.1",
37	37	"angular-translate-interpolation-messageformat": "^2.10.0",
38		- "angular-bind-html-compile": "^1.2.1",
39		- "angular-click-outside": "^2.7.1",
40		- "ng-ckeditor": "^0.2.1"
	38	+ "angular-bind-html-compile": "^1.2.1",
	39	+ "angular-click-outside": "^2.7.1",
	40	+ "ng-ckeditor": "^0.2.1",
	41	+ "angular-bootstrap-toggle-switch": "^0.5.6"
41	42	},
42	43	"devDependencies": {
43	44	"angular-mocks": "~1.5.0"
...	...
...	...	@@ -7,11 +7,15 @@ export class DesignModeService {
7	7
8	8	private designModeOn: boolean = false;
9	9
10		- constructor() {
	10	+ isInDesignMode(): boolean {
	11	+ return this.designModeOn;
11	12	}
12	13
13		- toggle() {
14		- this.designModeOn = !this.designModeOn;
	14	+ setInDesignMode(value: boolean) {
	15	+ this.designModeOn = value;
15	16	this.onToggle.next(this.designModeOn);
16	17	}
	18	+
	19	+ constructor() {
	20	+ }
17	21	}
18	22	\ No newline at end of file
...	...
...	...	@@ -7,27 +7,18 @@ import {DesignModeService} from './designMode.service';
7	7	@Inject(DesignModeService, '$scope')
8	8	export class DesignModeTogglerComponent {
9	9
10		- inDesignMode: boolean = false;
11	10
12	11	constructor(private designModeService: DesignModeService, private $scope: ng.IScope) {
13	12	}
14	13
15		- ngOnInit() {
16		- this.designModeService.onToggle.subscribe((editOnOrFalse: boolean) => {
17		- this.inDesignMode = editOnOrFalse;
18		- this.$scope.$apply();
19		- });
20		- }
	14	+ private _inDesignMode: boolean = false;
21	15
22		- toggleDesignModeOn() {
23		- if (!this.inDesignMode) {
24		- this.designModeService.toggle();
25		- }
26		- }
	16	+ get inDesignMode(): boolean {
	17	+ return this.designModeService.isInDesignMode();
	18	+ };
	19	+
	20	+ set inDesignMode(value: boolean) {
	21	+ this.designModeService.setInDesignMode(value);
	22	+ };
27	23
28		- toggleDesignModeOff() {
29		- if (this.inDesignMode) {
30		- this.designModeService.toggle();
31		- }
32		- }
33	24	}
34	25	\ No newline at end of file
...	...
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>
	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	+ knob-label="{{'designMode.label' \| translate}}">
	7	+</toggle-switch>
7	8	\ No newline at end of file
...	...
...	...	@@ -5,11 +5,12 @@ import {EnvironmentService} from "./../../../lib/ng-noosfero-api/http/environmen
5	5	import {SidebarNotificationService} from "../sidebar/sidebar.notification.service";
6	6	import {BodyStateClassesService} from '../services/body-state-classes.service';
7	7	import {DesignModeTogglerComponent} from './../../admin/designModeToggler.component';
	8	+import {BootstrapSwitcherComponent, BootstrapSwitcherItem} from './../../shared/components/bootstrap-switcher/bootstrap-switcher.component';
8	9
9	10	@Component({
10	11	selector: "acme-navbar",
11	12	templateUrl: "app/layout/navbar/navbar.html",
12		- directives: [LanguageSelectorComponent, DesignModeTogglerComponent],
	13	+ directives: [LanguageSelectorComponent, DesignModeTogglerComponent, BootstrapSwitcherComponent],
13	14	providers: [AuthService, SessionService, SidebarNotificationService, EnvironmentService]
14	15	})
15	16	@Inject("$uibModal", AuthService, "SessionService", "$state", SidebarNotificationService, BodyStateClassesService, EnvironmentService)
...	...	@@ -19,7 +20,6 @@ export class Navbar {
19	20	private modalInstance: any = null;
20	21	public showHamburger: boolean = false;
21	22	public currentEnvironment: noosfero.Environment = <any>{ name: '' };
22		-
23	23	/**
24	24	*
25	25	*/
...	...
...	...	@@ -47,5 +47,4 @@ body.noosfero-design-on {
47	47	ul.nav > li.toggler-container {
48	48	position: relative;
49	49	padding-top: 12px;
50		- color: white;
51	50	}
52	51	\ No newline at end of file
...	...
...	...	@@ -109,7 +109,7 @@ export class EnvironmentContent {
109	109	"angular-bind-html-compile", "angularMoment", "angular.filter", "akoenig.deckgrid",
110	110	"angular-timeline", "duScroll", "oitozero.ngSweetAlert",
111	111	"pascalprecht.translate", "tmh.dynamicLocale", "angularLoad",
112		- "angular-click-outside", "noosfero.init"]
	112	+ "angular-click-outside", "toggle-switch", "noosfero.init"]
113	113	})
114	114	@StateConfig([
115	115	{
...	...
...	...	@@ -75,7 +75,7 @@
75	75	"custom_content.title": "Edit content",
76	76	"profile.custom_header.label": "Header",
77	77	"profile.custom_footer.label": "Footer",
78		- "designMode.label": "Design Mode",
	78	+ "designMode.label": "In Design",
79	79	"designMode.toggle.ON": "ON",
80	80	"designMode.toggle.OFF": "OFF"
81	81	}
...	...