Download as
Browse Code »

Commit bbeb58489299d3314b9733554f4cd0bf745368f3

Authored by Ábner Oliveira
1 parent 46f6b264
Exists in master and in 11 other branches cosmetic_changes_people_and_communities_block, forgot_password, layout_support, login_modal_improve, profile-article-resolvers, profile-blocks-sass, profile_description_block_component, recent-activities, staging, translations, users_profile_page

changing designModeToggler to use toggle-switch angular directive

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