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;
+        }
+      }
+    }
+  }
+
 }
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	\ No newline at end of file	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 @@		@@ -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,17 +34,4 @@
34	.main-box-body {	34	.main-box-body {
35	padding: 0 20px 20px 20px;	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	\ No newline at end of file	38	\ No newline at end of file
	@@ -4,6 +4,12 @@		@@ -4,6 +4,12 @@
4	background-clip: padding-box; /* stops bg color from leaking outside the border: */	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	@mixin checkbox-mark($width, $height, $top, $left, $bg, $border, $content: "", $cursor: pointer, $position: absolute) {	13	@mixin checkbox-mark($width, $height, $top, $left, $bg, $border, $content: "", $cursor: pointer, $position: absolute) {
8	width: $width;	14	width: $width;
9	height: $height;	15	height: $height;
	@@ -48,3 +54,31 @@		@@ -48,3 +54,31 @@
48	outline-width: $width;	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	+}
	@@ -193,7 +193,6 @@ describe("BodyStateClasses Service", () => {		@@ -193,7 +193,6 @@ describe("BodyStateClasses Service", () => {
193		193
194	service.start();	194	service.start();
195		195
196	- debugger;
197	designModeService.setInDesignMode(true);	196	designModeService.setInDesignMode(true);
198		197
199		198
	@@ -116,7 +116,7 @@ export class EnvironmentContent {		@@ -116,7 +116,7 @@ export class EnvironmentContent {
116	"angular-bind-html-compile", "angularMoment", "angular.filter", "akoenig.deckgrid",	116	"angular-bind-html-compile", "angularMoment", "angular.filter", "akoenig.deckgrid",
117	"angular-timeline", "duScroll", "oitozero.ngSweetAlert",	117	"angular-timeline", "duScroll", "oitozero.ngSweetAlert",
118	"pascalprecht.translate", "tmh.dynamicLocale", "angularLoad",	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	@StateConfig([	121	@StateConfig([
122	{	122	{
@@ -0,0 +1,21 @@		@@ -0,0 +1,21 @@
	1	+import {Component, Inject, provide} from "ng-forward";
	2	+import {ProfileService} from "../../lib/ng-noosfero-api/http/profile.service";
	3	+
	4	+@Component({
	5	+ selector: "configbar",
	6	+ templateUrl: "app/profile/configbar.html",
	7	+ providers: [
	8	+ provide('profileService', { useClass: ProfileService })
	9	+ ]
	10	+})
	11	+@Inject(ProfileService)
	12	+export class ConfigBarComponent {
	13	+ profile: noosfero.Profile;
	14	+ parentId: number;
	15	+
	16	+ constructor(profileService: ProfileService) {
	17	+ profileService.getCurrentProfile().then((profile: noosfero.Profile) => {
	18	+ this.profile = profile;
	19	+ });
	20	+ }
	21	+}
@@ -0,0 +1,21 @@		@@ -0,0 +1,21 @@
	1	+<div id="config-tool" ng-class="{'closed': !showConfig}">
	2	+ <a id="config-tool-cog" ng-click="showConfig = !showConfig">
	3	+ <i class="fa fa-cog" ng-class="{'anim-icon': showConfig}"></i>
	4	+ </a>
	5	+
	6	+ <div id="config-tool-options">
	7	+ <h4>{{ 'configbar.label' \| translate }}</h4>
	8	+ <div class="section-title">{{ 'configbar.section.layout' \| translate }}</div>
	9	+ <ul>
	10	+ <li>
	11	+ <label class="pull-left">
	12	+ <i class="fa fa-th-large"></i>
	13	+ <span class="item-label">{{ 'designMode.label' \| translate }}</span>
	14	+ </label>
	15	+ <label class="pull-right">
	16	+ <design-toggler></design-toggler>
	17	+ </label>
	18	+ </li>
	19	+ </ul>
	20	+ </div>
	21	+</div>
@@ -0,0 +1,110 @@		@@ -0,0 +1,110 @@
	1	+@import "../layout/scss/mixins";
	2	+
	3	+@include keyframes(rotating) {
	4	+ from {
	5	+ transform: rotate(0deg);
	6	+ }
	7	+ to {
	8	+ transform: rotate(360deg);
	9	+ }
	10	+}
	11	+
	12	+/* CONFIG TOOLS */
	13	+#config-tool {
	14	+ @include transition(all 0.2s ease-in-out 0s);
	15	+ @include box-shadow(0px 1px 4px rgba(0, 0, 0, 0.3));
	16	+ position: fixed;
	17	+ right: 0;
	18	+ top: 120px;
	19	+ min-width: 200px;
	20	+ z-index: 1000;
	21	+
	22	+ #config-tool-cog {
	23	+ @include border-radius($border-radius-base 0 0 $border-radius-base);
	24	+ @include transition(all 0.1s ease-in-out 0s);
	25	+ @include box-shadow(-3px 3px 3px -2px rgba(0, 0, 0, 0.1));
	26	+ background: #fff;
	27	+ cursor: pointer;
	28	+ left: -50px;
	29	+ padding: 10px;
	30	+ position: absolute;
	31	+ text-align: center;
	32	+ width: 50px;
	33	+ top: 0;
	34	+
	35	+ i {
	36	+ font-size: 2.2em;
	37	+ }
	38	+
	39	+ .anim-icon {
	40	+ @include animation(rotating 0.7s ease-in-out 0s);
	41	+ }
	42	+ }
	43	+
	44	+ &.closed {
	45	+ right: -280px;
	46	+ box-shadow: none;
	47	+
	48	+ #config-tool-cog {
	49	+ &:hover {
	50	+ background-color: $primary-color;
	51	+ color: #fff;
	52	+ }
	53	+ }
	54	+ }
	55	+
	56	+ &.opened {
	57	+ right: 0;
	58	+ }
	59	+
	60	+ .section-title {
	61	+ margin: 30px 0 5px;
	62	+ font: {
	63	+ size: 15px;
	64	+ weight: bold;
	65	+ }
	66	+
	67	+ }
	68	+
	69	+ #config-tool-options {
	70	+ @include box-shadow(-3px 3px 3px -2px rgba(0, 0, 0, 0.1));
	71	+ background: #fff;
	72	+ padding: 15px;
	73	+
	74	+ h4 {
	75	+ margin: 0;
	76	+ font-size: 1.3em;
	77	+ }
	78	+
	79	+ ul {
	80	+ list-style: none;
	81	+ border-radius: 2px;
	82	+ padding: 0;
	83	+
	84	+ background: {
	85	+ clip: padding-box;
	86	+ color: #f1f3f2;
	87	+ }
	88	+
	89	+ li {
	90	+ padding: 10px;
	91	+ width: 250px;
	92	+ min-height: 50px;
	93	+ font: {
	94	+ size: 13px;
	95	+ weight: 300;
	96	+ }
	97	+
	98	+ .checkbox {
	99	+ margin: 0;
	100	+ }
	101	+
	102	+ .pull-left {
	103	+ margin-top: 8px;
	104	+ font-weight: normal;
	105	+ }
	106	+
	107	+ }
	108	+ }
	109	+ }
	110	+}
	@@ -1,21 +0,0 @@	@@ -1,21 +0,0 @@
1	-import {Component, Inject, provide} from "ng-forward";
2	-import {ProfileService} from "../../lib/ng-noosfero-api/http/profile.service";
3	-
4	-@Component({
5	- selector: "profile-toolbar",
6	- templateUrl: "app/profile/toolbar.html",
7	- providers: [
8	- provide('profileService', { useClass: ProfileService })
9	- ]
10	-})
11	-@Inject(ProfileService)
12	-export class ProfileToolbarComponent {
13	- profile: noosfero.Profile;
14	- parentId: number;
15	-
16	- constructor(profileService: ProfileService) {
17	- profileService.getCurrentProfile().then((profile: noosfero.Profile) => {
18	- this.profile = profile;
19	- });
20	- }
21	-}