Merge branch 'design-mode' into 'master'

Design mode - Fixes from Merge !39 See merge request !42

Merge branch 'design-mode' into 'master'
Design mode - Fixes from Merge !39 See merge request !42
Michel Felipe
2 parents 02560aee 61a0811c
Showing 19 changed files with 299 additions and 84 deletions Show diff stats
bower.json
src/app/admin/layout-edit/designModeToggler.component.spec.ts
src/app/admin/layout-edit/designModeToggler.component.ts
src/app/admin/layout-edit/designModeToggler.html
src/app/admin/layout-edit/designModeToggler.scss
src/app/layout/scss/_layout.scss
src/app/layout/scss/_mixins.scss
src/app/layout/scss/skins/_whbl.scss
src/app/layout/services/body-state-classes.service.spec.ts
src/app/main/main.component.ts
src/app/profile/config-bar.component.ts
src/app/profile/configbar.html
src/app/profile/configbar.scss
src/app/profile/profile-toolbar.component.ts
src/app/profile/profile.component.ts
src/app/profile/toolbar.html
src/languages/en.json
src/languages/pt.json
themes/angular-participa-consulta/app/layout/scss/skins/_yellow.scss
@@ -38,8 +38,8 @@
     "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",
-    "angular-tag-cloud": "^0.3.0"
+    "angular-tag-cloud": "^0.3.0",
+    "angular-ui-switch": "^0.1.1"
   },
   "devDependencies": {
     "angular-mocks": "~1.5.0"
 import {ComponentTestHelper, createClass} from '../../../spec/component-test-helper';
+import {INgForwardJQuery} from 'ng-forward/cjs/util/jqlite-extensions';
 import * as helpers from '../../../spec/helpers';
 import {DesignModeTogglerComponent} from './designModeToggler.component';
 import {DesignModeService} from './designMode.service';
 import {INoosferoLocalStorage} from "./../../shared/models/interfaces";
  
 describe('DesignModeToggler Component', () => {
-    const htmlTemplate: string = '<noosfero-design-toggler></noosfero-design-toggler>';
+    const htmlTemplate: string = '<design-toggler></design-toggler>';
  
     let helper: ComponentTestHelper<DesignModeTogglerComponent>;
     beforeEach(() => {
         angular.mock.module('templates');
         angular.mock.module('ngSanitize');
-        angular.mock.module('toggle-switch');
+        angular.mock.module('uiSwitch');
     });
  
     let designModeService: DesignModeService;
@@ -30,12 +31,12 @@ describe(&#39;DesignModeToggler Component&#39;, () =&gt; {
     });
  
     it('changes css classes representing the switch is on or off', () => {
-        expect(helper.debugElement.query('div.switch-animate').hasClass('switch-off')).toBeTruthy();
-        expect(helper.debugElement.query('div.switch-animate').hasClass('switch-on')).toBeFalsy();
+        let switchEl: INgForwardJQuery = helper.debugElement.query('span.switch');
+
+        expect(switchEl.hasClass('checked')).toBeFalsy();
         helper.component.inDesignMode = true;
         helper.detectChanges();
-        expect(helper.debugElement.query('div.switch-animate').hasClass('switch-on')).toBeTruthy();
-        expect(helper.debugElement.query('div.switch-animate').hasClass('switch-off')).toBeFalsy();
+        expect(switchEl.hasClass('checked')).toBeTruthy();
     });
  
     it('emits event with value "true" when changing inDesignMode to On', (done) => {
@@ -60,4 +61,4 @@ describe(&#39;DesignModeToggler Component&#39;, () =&gt; {
         helper.component.inDesignMode = false;
         helper.detectChanges();
     });
-});
 \ No newline at end of file
+});
-import {Component, Inject} from 'ng-forward';
+import {Component, Inject, Input} from 'ng-forward';
 import {DesignModeService} from './designMode.service';
 import {AuthService, AuthEvents} from '../../login';
  
 @Component({
-    selector: 'noosfero-design-toggler',
+    selector: 'design-toggler',
     templateUrl: 'app/admin/layout-edit/designModeToggler.html'
 })
-@Inject(DesignModeService, AuthService)
+@Inject(DesignModeService, AuthService, '$sce')
 export class DesignModeTogglerComponent {
  
-    icon: string = "&nbsp;<i class='glyphicon glyphicon-wrench'></i>&nbsp;";
+    private _inDesignMode: boolean = false;
  
-    constructor(private designModeService: DesignModeService, private authService: AuthService) {
+    constructor(private designModeService: DesignModeService, private authService: AuthService, private $sce: ng.ISCEService) {
         this.authService.subscribe(AuthEvents[AuthEvents.logoutSuccess], () => {
             this.designModeService.destroy();
         });
     }
  
-    private _inDesignMode: boolean = false;
-
     get inDesignMode(): boolean {
         return this.designModeService.isInDesignMode();
     };
-<toggle-switch
-    html="true"
-    ng-model="ctrl.inDesignMode"
-    on-label="{{'designMode.toggle.ON' | translate}}"
-    off-label="{{'designMode.toggle.OFF' | translate}}"
-    class="switch-small"
-    knob-label="{{ ctrl.icon + ('designMode.label' | translate) }}">
-</toggle-switch>
 \ No newline at end of file
+<switch id="enabled" name="enabled" ng-model="ctrl.inDesignMode" on="ON" off="OFF" class="green"></switch>
@@ -0,0 +1,55 @@
+$off-text: #949494;
+$off-color: #EFEFEF;
+$blue-color: #36B4F6;
+$red-color: #DF3B3A;
+
+body.noosfero-design-on {
+
+    div.content-wrapper {
+        opacity: 0.5;
+    }
+}
+
+.switch {
+  @include not-select();
+  background-color: $off-color;
+
+  &[on][off] {
+    width: 60px;
+  }
+
+  &:focus {
+    outline: none;
+  }
+
+  &.checked small {
+      left: initial;
+      right: 0px;
+  }
+
+  &.blue.checked {
+    background: $blue-color;
+    border-color: $blue-color;
+  }
+
+  &.red.checked {
+    background: $red-color;
+    border-color: $red-color;
+  }
+
+  %switch-label {
+    font-weight: bold;
+  }
+
+  .on {
+    @extend %switch-label;
+  }
+
+  .off {
+      @extend %switch-label;
+      right: 2px;
+      top: 25%;
+      color: $off-text;
+      text-align: center;
+  }
+}
@@ -34,17 +34,4 @@
 	.main-box-body {
 		padding: 0 20px 20px 20px;
 	}
-}
-
-ul.nav > li.toggler-container {
-	position: relative;
-	padding-top: 12px;
-}
-
-.noosfero-main-toolbar {
-	padding: 5px;
-	@include make-row();
-	margin-left: 0px;
-	margin-right: 0px;
-	background-color: #edecec;
-}
+}
 \ No newline at end of file
@@ -4,6 +4,12 @@
 	background-clip: padding-box; /* stops bg color from leaking outside the border: */
 }
  
+@mixin box-shadow($args...) {
+	-webkit-box-shadow: $args;
+	-moz-box-shadow: $args;
+	box-shadow: $args;
+}
+
 @mixin checkbox-mark($width, $height, $top, $left, $bg, $border, $content: "", $cursor: pointer, $position: absolute) {
 	width: $width;
 	height: $height;
@@ -48,3 +54,31 @@
 		outline-width: $width;
 	}
 }
+
+@mixin not-select() {
+  -webkit-touch-callout: none; /* iOS Safari */
+  -webkit-user-select: none;   /* Chrome/Safari/Opera */
+  -khtml-user-select: none;    /* Konqueror */
+  -moz-user-select: none;      /* Firefox */
+  -ms-user-select: none;       /* Internet Explorer/Edge */
+  user-select: none;           /* Non-prefixed version, currently
+                                  not supported by any browser */
+}
+
+@mixin keyframes($animation-name) {
+	@-webkit-keyframes #{$animation-name} {
+		@content;
+	}
+	@-moz-keyframes #{$animation-name} {
+		@content;
+	}
+	@-ms-keyframes #{$animation-name} {
+		@content;
+	}
+	@-o-keyframes #{$animation-name} {
+		@content;
+	}
+	@keyframes #{$animation-name} {
+		@content;
+	}
+}
@@ -291,11 +291,7 @@ $whbl-font-color: #16191c;
 		background-color: #fff;
 	}
  
-	noosfero-design-toggler .ats-switch .knob i {
-		color: #999999;
-	}
-
-	.ats-switch .knob {
+    .ats-switch .knob {
 		padding-right: 15px;
 	}
  
@@ -193,7 +193,6 @@ describe(&quot;BodyStateClasses Service&quot;, () =&gt; {
  
         service.start();
  
-        debugger;
         designModeService.setInDesignMode(true);
  
  
@@ -116,7 +116,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", "toggle-switch", "ngTagCloud", "noosfero.init"]
+        "angular-click-outside", "ngTagCloud", "noosfero.init", "uiSwitch"]
 })
 @StateConfig([
     {
@@ -0,0 +1,21 @@
+import {Component, Inject, provide} from "ng-forward";
+import {ProfileService} from "../../lib/ng-noosfero-api/http/profile.service";
+
+@Component({
+    selector: "configbar",
+    templateUrl: "app/profile/configbar.html",
+    providers: [
+        provide('profileService', { useClass: ProfileService })
+    ]
+})
+@Inject(ProfileService)
+export class ConfigBarComponent {
+    profile: noosfero.Profile;
+    parentId: number;
+
+    constructor(profileService: ProfileService) {
+        profileService.getCurrentProfile().then((profile: noosfero.Profile) => {
+            this.profile = profile;
+        });
+    }
+}
@@ -0,0 +1,21 @@
+<div id="config-tool" ng-class="{'closed': !showConfig}">
+		<a id="config-tool-cog" ng-click="showConfig = !showConfig">
+			<i class="fa fa-cog" ng-class="{'anim-icon': showConfig}"></i>
+		</a>
+
+		<div id="config-tool-options">
+			<h4>{{ 'configbar.label' | translate }}</h4>
+      <div class="section-title">{{ 'configbar.section.layout' | translate }}</div>
+			<ul>
+        <li>
+          <label class="pull-left">
+            <i class="fa fa-th-large"></i>
+            <span class="item-label">{{ 'designMode.label' | translate }}</span>
+          </label>
+          <label class="pull-right">
+            <design-toggler></design-toggler>
+          </label>
+        </li>
+			</ul>
+		</div>
+</div>
@@ -0,0 +1,110 @@
+@import "../layout/scss/mixins";
+
+@include keyframes(rotating) {
+	from {
+		transform: rotate(0deg);
+	}
+	to {
+		transform: rotate(360deg);
+	}
+}
+
+/* CONFIG TOOLS */
+#config-tool {
+	@include transition(all 0.2s ease-in-out 0s);
+	@include box-shadow(0px 1px 4px rgba(0, 0, 0, 0.3));
+	position: fixed;
+	right: 0;
+	top: 120px;
+	min-width: 200px;
+	z-index: 1000;
+
+	#config-tool-cog {
+		@include border-radius($border-radius-base 0 0 $border-radius-base);
+		@include transition(all 0.1s ease-in-out 0s);
+		@include box-shadow(-3px 3px 3px -2px rgba(0, 0, 0, 0.1));
+		background: #fff;
+		cursor: pointer;
+		left: -50px;
+		padding: 10px;
+		position: absolute;
+		text-align: center;
+		width: 50px;
+		top: 0;
+
+		i {
+			font-size: 2.2em;
+		}
+
+		.anim-icon {
+			@include animation(rotating 0.7s ease-in-out 0s);
+		}
+	}
+
+	&.closed {
+		right: -280px;
+		box-shadow: none;
+
+		#config-tool-cog {
+			&:hover {
+				background-color: $primary-color;
+				color: #fff;
+			}
+		}
+	}
+
+	&.opened {
+		right: 0;
+	}
+
+	.section-title {
+	  margin: 30px 0 5px;
+		font: {
+			size: 15px;
+	  	weight: bold;
+		}
+
+	}
+
+	#config-tool-options {
+		@include box-shadow(-3px 3px 3px -2px rgba(0, 0, 0, 0.1));
+		background: #fff;
+		padding: 15px;
+
+		h4 {
+			margin: 0;
+			font-size: 1.3em;
+		}
+
+		ul {
+			list-style: none;
+			border-radius: 2px;
+		  padding: 0;
+
+		  background: {
+				clip: padding-box;
+		  	color: #f1f3f2;
+			}
+
+			li {
+			  padding: 10px;
+				width: 250px;
+			  min-height: 50px;
+				font: {
+					size: 13px;
+			  	weight: 300;
+				}
+
+				.checkbox {
+					margin: 0;
+				}
+
+				.pull-left {
+					margin-top: 8px;
+					font-weight: normal;
+				}
+
+			}
+		}
+	}
+}
@@ -1,21 +0,0 @@
-import {Component, Inject, provide} from "ng-forward";
-import {ProfileService} from "../../lib/ng-noosfero-api/http/profile.service";
-
-@Component({
-    selector: "profile-toolbar",
-    templateUrl: "app/profile/toolbar.html",
-    providers: [
-        provide('profileService', { useClass: ProfileService })
-    ]
-})
-@Inject(ProfileService)
-export class ProfileToolbarComponent {
-    profile: noosfero.Profile;
-    parentId: number;
-
-    constructor(profileService: ProfileService) {
-        profileService.getCurrentProfile().then((profile: noosfero.Profile) => {
-            this.profile = profile;
-        });
-    }
-}
@@ -10,7 +10,7 @@ import {ProfileService} from &quot;../../lib/ng-noosfero-api/http/profile.service&quot;;
 import {NotificationService} from "../shared/services/notification.service";
 import {MyProfileComponent} from "./myprofile.component";
 import {ProfileActionsComponent} from "./profile-actions.component";
-import {ProfileToolbarComponent} from "./profile-toolbar.component";
+import {ConfigBarComponent} from "./config-bar.component";
 /**
  * @ngdoc controller
  * @name profile.Profile
@@ -44,8 +44,8 @@ import {ProfileToolbarComponent} from &quot;./profile-toolbar.component&quot;;
                 controllerAs: "vm"
             },
             "toolbar@main": {
-                templateUrl: "app/profile/toolbar.html",
-                controller: ProfileToolbarComponent,
+                templateUrl: "app/profile/configbar.html",
+                controller: ConfigBarComponent,
                 controllerAs: "vm"
             }
         }
@@ -61,8 +61,8 @@ import {ProfileToolbarComponent} from &quot;./profile-toolbar.component&quot;;
                 controllerAs: "vm"
             },
             "toolbar@main": {
-                templateUrl: "app/profile/toolbar.html",
-                controller: ProfileToolbarComponent,
+                templateUrl: "app/profile/configbar.html",
+                controller: ConfigBarComponent,
                 controllerAs: "vm"
             }
         }
@@ -118,8 +118,8 @@ import {ProfileToolbarComponent} from &quot;./profile-toolbar.component&quot;;
                 controllerAs: "vm"
             },
             "toolbar@main": {
-                templateUrl: "app/profile/toolbar.html",
-                controller: ProfileToolbarComponent,
+                templateUrl: "app/profile/configbar.html",
+                controller: ConfigBarComponent,
                 controllerAs: "vm"
             }
         }
@@ -1,4 +0,0 @@
-<div class="noosfero-main-toolbar" permission="vm.profile.permissions" permission-action="allow_edit">
-    <noosfero-design-toggler class="pull-right"></noosfero-design-toggler>
-
-</div>
 \ No newline at end of file
@@ -6,6 +6,8 @@
   "navbar.logout": "Log Out",
   "navbar.login": "Login",
   "navbar.toggle_menu": "Toggle navigation",
+  "configbar.label": "Configuration",
+  "configbar.section.layout": "Layout",
   "language.all": "All languages",
   "language.en": "English",
   "language.pt": "Portuguese",
@@ -77,9 +79,7 @@
   "custom_content.title": "Edit content",
   "profile.custom_header.label": "Header",
   "profile.custom_footer.label": "Footer",
-  "designMode.label": "In Design",
-  "designMode.toggle.ON": "ON",
-  "designMode.toggle.OFF": "OFF",
+  "designMode.label": "Design mode",
   "search.results.summary": "{results, plural, one{result} other{# results}}",
   "search.results.query.label": "Search therm:",
   "search.label": "Search",
@@ -6,6 +6,8 @@
   "navbar.logout": "Sair",
   "navbar.login": "Login",
   "navbar.toggle_menu": "Abrir Menu",
+  "configbar.label": "Configurações",
+  "configbar.section.layout": "Visual",
   "language.all": "Todos os idiomas",
   "language.en": "Inglês",
   "language.pt": "Português",
@@ -77,9 +79,7 @@
   "custom_content.title": "Editar conteúdo",
   "profile.custom_header.label": "Cabeçalho",
   "profile.custom_footer.label": "Rodapé",
-  "designMode.label": "Modo de Edição",
-  "designMode.toggle.ON": "Ligado",
-  "designMode.toggle.OFF": "Desligado",
+  "designMode.label": "Alterar design",
   "search.results.summary": "{results, plural, one{# resultado} other{# resultados}}",
   "search.results.query.label": "Termo da busca:",
   "search.label": "Pesquisar",
+$yellow-hover: #f5b025;
+$yellow-base: #f9c404;
+
 .skin-yellow {
   @extend %skin-base;
  
@@ -49,7 +52,7 @@
  
   .container-fluid .navbar-header .navbar-toggle {
     &:hover, &:focus {
-      background-color: #f5b025;
+      background-color: $yellow-hover;
     }
   }
  
@@ -61,4 +64,26 @@
 		}
   }
  
+  #config-tool {
+
+    #config-tool-cog {
+      color: $yellow-hover;
+    }
+
+    #config-tool-options {
+      h4 {
+        color: #2c3e50;
+        font-weight: bold;
+      }
+    }
+
+    &.closed {
+      #config-tool-cog {
+        &:hover {
+          background-color: $yellow-hover;
+        }
+      }
+    }
+  }
+
 }
...	...	@@ -38,8 +38,8 @@
38	38	"angular-bind-html-compile": "^1.2.1",
39	39	"angular-click-outside": "^2.7.1",
40	40	"ng-ckeditor": "^0.2.1",
41		- "angular-bootstrap-toggle-switch": "^0.5.6",
42		- "angular-tag-cloud": "^0.3.0"
	41	+ "angular-tag-cloud": "^0.3.0",
	42	+ "angular-ui-switch": "^0.1.1"
43	43	},
44	44	"devDependencies": {
45	45	"angular-mocks": "~1.5.0"
...	...
1	1	import {ComponentTestHelper, createClass} from '../../../spec/component-test-helper';
	2	+import {INgForwardJQuery} from 'ng-forward/cjs/util/jqlite-extensions';
2	3	import * as helpers from '../../../spec/helpers';
3	4	import {DesignModeTogglerComponent} from './designModeToggler.component';
4	5	import {DesignModeService} from './designMode.service';
5	6	import {INoosferoLocalStorage} from "./../../shared/models/interfaces";
6	7
7	8	describe('DesignModeToggler Component', () => {
8		- const htmlTemplate: string = '<noosfero-design-toggler></noosfero-design-toggler>';
	9	+ const htmlTemplate: string = '<design-toggler></design-toggler>';
9	10
10	11	let helper: ComponentTestHelper<DesignModeTogglerComponent>;
11	12	beforeEach(() => {
12	13	angular.mock.module('templates');
13	14	angular.mock.module('ngSanitize');
14		- angular.mock.module('toggle-switch');
	15	+ angular.mock.module('uiSwitch');
15	16	});
16	17
17	18	let designModeService: DesignModeService;
...	...	@@ -30,12 +31,12 @@ describe('DesignModeToggler Component', () => {
30	31	});
31	32
32	33	it('changes css classes representing the switch is on or off', () => {
33		- expect(helper.debugElement.query('div.switch-animate').hasClass('switch-off')).toBeTruthy();
34		- expect(helper.debugElement.query('div.switch-animate').hasClass('switch-on')).toBeFalsy();
	34	+ let switchEl: INgForwardJQuery = helper.debugElement.query('span.switch');
	35	+
	36	+ expect(switchEl.hasClass('checked')).toBeFalsy();
35	37	helper.component.inDesignMode = true;
36	38	helper.detectChanges();
37		- expect(helper.debugElement.query('div.switch-animate').hasClass('switch-on')).toBeTruthy();
38		- expect(helper.debugElement.query('div.switch-animate').hasClass('switch-off')).toBeFalsy();
	39	+ expect(switchEl.hasClass('checked')).toBeTruthy();
39	40	});
40	41
41	42	it('emits event with value "true" when changing inDesignMode to On', (done) => {
...	...	@@ -60,4 +61,4 @@ describe('DesignModeToggler Component', () => {
60	61	helper.component.inDesignMode = false;
61	62	helper.detectChanges();
62	63	});
63		-});
64	64	\ No newline at end of file
	65	+});
...	...
1		-import {Component, Inject} from 'ng-forward';
	1	+import {Component, Inject, Input} from 'ng-forward';
2	2	import {DesignModeService} from './designMode.service';
3	3	import {AuthService, AuthEvents} from '../../login';
4	4
5	5	@Component({
6		- selector: 'noosfero-design-toggler',
	6	+ selector: 'design-toggler',
7	7	templateUrl: 'app/admin/layout-edit/designModeToggler.html'
8	8	})
9		-@Inject(DesignModeService, AuthService)
	9	+@Inject(DesignModeService, AuthService, '$sce')
10	10	export class DesignModeTogglerComponent {
11	11
12		- icon: string = " <i class='glyphicon glyphicon-wrench'></i> ";
	12	+ private _inDesignMode: boolean = false;
13	13
14		- constructor(private designModeService: DesignModeService, private authService: AuthService) {
	14	+ constructor(private designModeService: DesignModeService, private authService: AuthService, private $sce: ng.ISCEService) {
15	15	this.authService.subscribe(AuthEvents[AuthEvents.logoutSuccess], () => {
16	16	this.designModeService.destroy();
17	17	});
18	18	}
19	19
20		- private _inDesignMode: boolean = false;
21		-
22	20	get inDesignMode(): boolean {
23	21	return this.designModeService.isInDesignMode();
24	22	};
...	...
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		- class="switch-small"
7		- knob-label="{{ ctrl.icon + ('designMode.label' \| translate) }}">
8		-</toggle-switch>
9	1	\ No newline at end of file
	2	+<switch id="enabled" name="enabled" ng-model="ctrl.inDesignMode" on="ON" off="OFF" class="green"></switch>
...	...
...	...	@@ -0,0 +1,55 @@
	1	+$off-text: #949494;
	2	+$off-color: #EFEFEF;
	3	+$blue-color: #36B4F6;
	4	+$red-color: #DF3B3A;
	5	+
	6	+body.noosfero-design-on {
	7	+
	8	+ div.content-wrapper {
	9	+ opacity: 0.5;
	10	+ }
	11	+}
	12	+
	13	+.switch {
	14	+ @include not-select();
	15	+ background-color: $off-color;
	16	+
	17	+ &[on][off] {
	18	+ width: 60px;
	19	+ }
	20	+
	21	+ &:focus {
	22	+ outline: none;
	23	+ }
	24	+
	25	+ &.checked small {
	26	+ left: initial;
	27	+ right: 0px;
	28	+ }
	29	+
	30	+ &.blue.checked {
	31	+ background: $blue-color;
	32	+ border-color: $blue-color;
	33	+ }
	34	+
	35	+ &.red.checked {
	36	+ background: $red-color;
	37	+ border-color: $red-color;
	38	+ }
	39	+
	40	+ %switch-label {
	41	+ font-weight: bold;
	42	+ }
	43	+
	44	+ .on {
	45	+ @extend %switch-label;
	46	+ }
	47	+
	48	+ .off {
	49	+ @extend %switch-label;
	50	+ right: 2px;
	51	+ top: 25%;
	52	+ color: $off-text;
	53	+ text-align: center;
	54	+ }
	55	+}
...	...
...	...	@@ -34,17 +34,4 @@
34	34	.main-box-body {
35	35	padding: 0 20px 20px 20px;
36	36	}
37		-}
38		-
39		-ul.nav > li.toggler-container {
40		- position: relative;
41		- padding-top: 12px;
42		-}
43		-
44		-.noosfero-main-toolbar {
45		- padding: 5px;
46		- @include make-row();
47		- margin-left: 0px;
48		- margin-right: 0px;
49		- background-color: #edecec;
50		-}
	37	+}
51	38	\ No newline at end of file
...	...
...	...	@@ -4,6 +4,12 @@
4	4	background-clip: padding-box; /* stops bg color from leaking outside the border: */
5	5	}
6	6
	7	+@mixin box-shadow($args...) {
	8	+ -webkit-box-shadow: $args;
	9	+ -moz-box-shadow: $args;
	10	+ box-shadow: $args;
	11	+}
	12	+
7	13	@mixin checkbox-mark($width, $height, $top, $left, $bg, $border, $content: "", $cursor: pointer, $position: absolute) {
8	14	width: $width;
9	15	height: $height;
...	...	@@ -48,3 +54,31 @@
48	54	outline-width: $width;
49	55	}
50	56	}
	57	+
	58	+@mixin not-select() {
	59	+ -webkit-touch-callout: none; /* iOS Safari */
	60	+ -webkit-user-select: none; /* Chrome/Safari/Opera */
	61	+ -khtml-user-select: none; /* Konqueror */
	62	+ -moz-user-select: none; /* Firefox */
	63	+ -ms-user-select: none; /* Internet Explorer/Edge */
	64	+ user-select: none; /* Non-prefixed version, currently
	65	+ not supported by any browser */
	66	+}
	67	+
	68	+@mixin keyframes($animation-name) {
	69	+ @-webkit-keyframes #{$animation-name} {
	70	+ @content;
	71	+ }
	72	+ @-moz-keyframes #{$animation-name} {
	73	+ @content;
	74	+ }
	75	+ @-ms-keyframes #{$animation-name} {
	76	+ @content;
	77	+ }
	78	+ @-o-keyframes #{$animation-name} {
	79	+ @content;
	80	+ }
	81	+ @keyframes #{$animation-name} {
	82	+ @content;
	83	+ }
	84	+}
...	...
...	...	@@ -291,11 +291,7 @@ $whbl-font-color: #16191c;
291	291	background-color: #fff;
292	292	}
293	293
294		- noosfero-design-toggler .ats-switch .knob i {
295		- color: #999999;
296		- }
297		-
298		- .ats-switch .knob {
	294	+ .ats-switch .knob {
299	295	padding-right: 15px;
300	296	}
301	297
...	...
...	...	@@ -193,7 +193,6 @@ describe("BodyStateClasses Service", () => {
193	193
194	194	service.start();
195	195
196		- debugger;
197	196	designModeService.setInDesignMode(true);
198	197
199	198
...	...
...	...	@@ -116,7 +116,7 @@ export class EnvironmentContent {
116	116	"angular-bind-html-compile", "angularMoment", "angular.filter", "akoenig.deckgrid",
117	117	"angular-timeline", "duScroll", "oitozero.ngSweetAlert",
118	118	"pascalprecht.translate", "tmh.dynamicLocale", "angularLoad",
119		- "angular-click-outside", "toggle-switch", "ngTagCloud", "noosfero.init"]
	119	+ "angular-click-outside", "ngTagCloud", "noosfero.init", "uiSwitch"]
120	120	})
121	121	@StateConfig([
122	122	{
...	...