Commit bbeb58489299d3314b9733554f4cd0bf745368f3
1 parent
46f6b264
Exists in
master
and in
11 other branches
changing designModeToggler to use toggle-switch angular directive
Showing
8 changed files
with
30 additions
and
34 deletions
Show diff stats
bower.json
... | ... | @@ -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" | ... | ... |
src/app/admin/designMode.service.ts
... | ... | @@ -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 | ... | ... |
src/app/admin/designModeToggler.component.ts
... | ... | @@ -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 | ... | ... |
src/app/admin/designModeToggler.html
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 | ... | ... |
src/app/layout/navbar/navbar.ts
... | ... | @@ -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 | */ | ... | ... |
src/app/layout/scss/_layout.scss
src/app/main/main.component.ts
... | ... | @@ -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 | { | ... | ... |
src/languages/en.json
... | ... | @@ -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 | } | ... | ... |