Added feature to sidebar pushing right content on show/hide

Michel Felipe
1 parent f711ee9c
Showing 14 changed files with 441 additions and 13 deletions Show diff stats
src/app/layout/navbar/navbar.ts
src/app/layout/scss/_sidebar.scss
src/app/layout/scss/skins/_whbl.scss
src/app/layout/services/body-state-classes.service.spec.ts
src/app/layout/services/body-state-classes.service.ts
src/app/layout/sidebar/sidebar.component.spec.ts
src/app/layout/sidebar/sidebar.html
src/app/layout/sidebar/sidebar.notification.service.ts
src/app/login/auth.service.spec.ts
src/app/login/auth.service.ts
src/app/main/main.component.ts
src/app/main/main.html
src/app/main/main.scss
src/app/profile/image/image.html
@@ -2,6 +2,7 @@ import {Component, Inject, EventEmitter, Input} from &quot;ng-forward&quot;;
 import {LanguageSelectorComponent} from "../language-selector/language-selector.component";
 import {SessionService, AuthService, AuthController, AuthEvents} from "./../../login";
 import {SidebarNotificationService} from "../sidebar/sidebar.notification.service";
+import {BodyStateClassesService} from '../services/body-state-classes.service';
 @Component({
     selector: "acme-navbar",
@@ -9,7 +10,7 @@ import {SidebarNotificationService} from &quot;../sidebar/sidebar.notification.servic
     directives: [LanguageSelectorComponent],
     providers: [AuthService, SessionService, SidebarNotificationService]
 })
-@Inject("$uibModal", AuthService, "SessionService", "$state", SidebarNotificationService)
+@Inject("$uibModal", AuthService, "SessionService", "$state", SidebarNotificationService, BodyStateClassesService)
 export class Navbar {
     private currentUser: noosfero.User;
@@ -25,11 +26,13 @@ export class Navbar {
         public authService: AuthService,
         private session: SessionService,
         private $state: ng.ui.IStateService,
-        private sidebarNotificationService: SidebarNotificationService
+        private sidebarNotificationService: SidebarNotificationService,
+        private bodyStateService: BodyStateClassesService
     ) {
         this.currentUser = this.session.currentUser();
         this.showHamburguer = this.authService.isAuthenticated();
+        this.bodyStateService.addContentClass(!this.sidebarNotificationService.sidebarVisible);
         this.authService.subscribe(AuthEvents[AuthEvents.loginSuccess], () => {
             if (this.modalInstance) {
@@ -51,6 +54,8 @@ export class Navbar {
     public toggleCollapse() {
         this.sidebarNotificationService.alternateVisibility();
+
+        this.bodyStateService.addContentClass(!this.sidebarNotificationService.sidebarVisible);
     }
     openLogin() {
@@ -21,6 +21,8 @@
 	position: absolute;
 	background: #2c3e50;
 	width: 220px;
+  border-right: 2px solid #e7ebee;
+  height: 200%;
 	@media (max-width: $break-sm-max) {
 		position: relative;
@@ -289,3 +291,17 @@
 	color: #fff;
 	border-left-color: $primary-color;
 }
+
+#user-left-box {
+  .profile-image-wrap {
+    float:left;
+    width: 70px;
+    height: 70px;
+  }
+  i.profile-image {
+    border-radius: 18%;
+    border: 3px solid #fff;
+    background-color: #fff;
+    text-align: center;
+  }
+}
@@ -0,0 +1,310 @@
+$whbl-nav-col-bg: #ffffff; //f3f5f6
+$whbl-sidebar-linkColor: #484848;
+$whbl-primary-color: #1E96D0; //blue
+$whbl-font-color: #16191c;
+
+.skin-whbl {
+	#header-navbar {
+		background-color: $whbl-primary-color;
+	}
+	.navbar > .container .navbar-brand {
+		background-color: transparent;
+		width: 221px;
+	}
+	#nav-col,
+	#page-wrapper {
+		background-color: $whbl-nav-col-bg;
+	}
+	#sidebar-nav .nav > li > a {
+		color: $whbl-sidebar-linkColor;
+		/* border-bottom: 1px solid #e7ebee; */
+	}
+	#sidebar-nav .nav > .open > .submenu > li > .submenu,
+	#sidebar-nav .nav > .active > .submenu > li > .submenu,
+	#sidebar-nav .nav li .submenu > li.open a,
+	#nav-col-submenu .submenu > li > .submenu,
+	#nav-col-submenu li .submenu > li.open > a {
+	    background-color: darken($whbl-nav-col-bg, 8%);
+	}
+	.nav-pills > li.active > a,
+	.nav-pills > li.active > a:hover,
+	.nav-pills > li.active > a:focus,
+	#sidebar-nav .nav-pills > li.active > a,
+	#sidebar-nav .nav-pills > li.active > a:hover,
+	#sidebar-nav .nav-pills > li.active > a:focus,
+	.nav-pills > li.open > a,
+	.nav-pills > li.open > a:hover,
+	.nav-pills > li.open > a:focus,
+	#sidebar-nav .nav-pills > li.open > a,
+	#sidebar-nav .nav-pills > li.open > a:hover,
+	#sidebar-nav .nav-pills > li.open > a:focus,
+	#sidebar-nav .nav-pills > li > a:focus {
+		background-color: darken($whbl-nav-col-bg, 4%);
+		border-color: $whbl-primary-color;
+		border-bottom-color: #e7ebee;
+		color: $whbl-sidebar-linkColor;
+	}
+	#sidebar-nav .nav-pills > li.active > a > i {
+		color: #2980b9;
+	}
+	#sidebar-nav .nav > li > a:hover {
+		background-color: darken($whbl-nav-col-bg, 4%);
+		border-color: $whbl-primary-color;
+		border-bottom-color: #e7ebee;
+		color: $whbl-sidebar-linkColor;
+	}
+
+	#sidebar-nav .nav > li .submenu li > a:hover {
+		color: $whbl-font-color;
+		font-weight: bold;
+	}
+	#header-navbar .nav > li > a {
+		color: #fff;
+	}
+	#header-navbar .nav > li > a:hover,
+	#header-navbar .nav > li > a:focus,
+	#header-navbar .nav .open > a,
+	#header-navbar .nav .open > a:hover,
+	#header-navbar .nav .open > a:focus {
+		background-color: #2980b9;
+	}
+	#sidebar-nav .nav li .submenu,
+	#nav-col-submenu .submenu {
+		background-color: darken($whbl-nav-col-bg, 4%);
+	}
+	#sidebar-nav .nav li .submenu > li > a,
+	.nav-small #nav-col-submenu .submenu > li > a {
+		color: $whbl-font-color;
+	}
+	#sidebar-nav .nav > .open > .submenu > .open > a,
+	#sidebar-nav .nav > .active > .submenu > .open > a,
+	#sidebar-nav .nav > .active > .submenu > .active > a,
+	#nav-col-submenu .submenu > .open > a,
+	#nav-col-submenu .submenu > .active > a {
+		border-bottom-color: transparent;
+	    box-shadow: 0 -1px 0 transparent inset;
+	}
+	#sidebar-nav .nav > .open > .submenu > .open > a {
+	    border-bottom-color: #dcdfe6;
+		box-shadow: none;
+	}
+	#sidebar-nav .nav li.open > a.dropdown-toggle > .drop-icon,
+	#sidebar-nav .nav li.active > a.dropdown-toggle > .drop-icon {
+		color: $whbl-font-color;
+	}
+	#sidebar-nav .nav li .submenu > li > a:hover,
+	#sidebar-nav .nav li .submenu > li > a.active,
+	#sidebar-nav .nav li .submenu > li.active > a {
+		background-color: darken($whbl-nav-col-bg, 8%);
+	}
+	.navbar > .container .navbar-brand {
+		color: #fff;
+	}
+	.navbar-toggle {
+		color: #fff;
+	}
+	.graph-box {
+		background-color: $whbl-primary-color !important;
+	}
+	.content-wrapper {
+		background-color: #f9f9f9;
+	  height: 100%;
+	  margin-top: 0;
+	  margin-bottom: 0;
+	  position: relative;
+	  min-height: 1200px;
+	  padding: 15px 15px 35px 15px;
+	  margin-left: 220px;
+		// border-left: 2px solid #e7ebee;
+	}
+	#user-left-box {
+
+		.user-box {
+			color: $whbl-font-color;
+			> a {
+				color: $whbl-font-color;
+			}
+			> .name {
+				> a {
+					color: $whbl-font-color;
+
+					&:hover, &:focus {
+						color: $whbl-font-color;
+					}
+				}
+			}
+		}
+		.user-box a:hover,
+		.user-box a:focus {
+			color: darken($whbl-font-color, 20%);
+		}
+	}
+	#sidebar-nav .nav > li.nav-header {
+		border-top-color: #e7ebee;
+		color: darken($whbl-nav-col-bg, 35%);
+	}
+	.nav-tabs {
+		background-color: #f9f9f9;
+	}
+	h1 {
+		color: $whbl-primary-color;
+	}
+	#header-navbar .nav > li > a:hover,
+	#header-navbar .nav > li > a:focus,
+	#header-navbar .nav .open > a,
+	#header-navbar .nav .open > a:hover,
+	#header-navbar .nav .open > a:focus,
+	.navbar-toggle:hover,
+	.navbar-toggle:focus,
+	.mobile-search.active > .btn {
+		background-color: #2980b9;
+	}
+	.main-box {
+		border: 1px solid $main-bg-color;
+	}
+	a,
+	.fc-state-default,
+	.jvectormap-zoomin,
+	.jvectormap-zoomout,
+	#user-profile .profile-details ul > li > span {
+		color: $whbl-primary-color;
+	}
+	a:hover,
+	a:focus,
+	.widget-users li > .details > .name > a:hover,
+	.widget-todo .actions > a:hover {
+		color: $whbl-primary-color;
+	}
+	.table a.table-link:hover {
+		color: #2980b9;
+	}
+	.pagination {
+		> li {
+			> a,
+			> span,
+			> a:hover,
+			> span:hover,
+			> a:focus,
+			> span:focus,
+			> a:active,
+			> span:active {
+				color: $whbl-primary-color;
+			}
+		}
+		> .active {
+			> a,
+			> span,
+			> a:hover,
+			> span:hover,
+			> a:focus,
+			> span:focus {
+				background-color: $whbl-primary-color;
+				border-color: $whbl-primary-color;
+				color: #fff;
+			}
+		}
+	}
+	.notifications-list {
+		.item-footer {
+			background-color: #272d33;
+
+			a:hover {
+				background-color: #0f1114;
+			}
+		}
+	}
+	.btn-primary,
+	.btn-default,
+	.btn-info,
+	.btn-success,
+	.btn-warning,
+	.btn-danger,
+	.btn-primary:hover,
+	.btn-default:hover,
+	.btn-info:hover,
+	.btn-success:hover,
+	.btn-warning:hover,
+	.btn-danger:hover {
+		color: #fff;
+	}
+	.btn-primary {
+		background-color: $whbl-primary-color;
+		border-color: #2980b9;
+	}
+	.btn-primary:hover,
+	.btn-primary:focus,
+	.btn-primary:active,
+	.btn-primary.active,
+	.open .dropdown-toggle.btn-primary {
+		background-color: #2980b9;
+		border-color: #216897;
+	}
+	.btn-success {
+		background-color: $whbl-primary-color;
+		border-color: #2980b9;
+	}
+	.btn-success:hover,
+	.btn-success:focus,
+	.btn-success:active,
+	.btn-success.active,
+	.open .dropdown-toggle.btn-success {
+		background-color: #2980b9;
+		border-color: #1c5c87;
+	}
+	h1 {
+		color: $whbl-primary-color;
+	}
+	.widget-users li > .details > .time {
+		color: $whbl-primary-color;
+	}
+	blockquote,
+	blockquote.pull-right {
+		border-color: $whbl-primary-color;
+	}
+	a.list-group-item.active,
+	a.list-group-item.active:hover,
+	a.list-group-item.active:focus {
+		background-color: $whbl-primary-color;
+		border-color: $whbl-primary-color;
+	}
+	.nav .caret {
+		border-bottom-color: $whbl-primary-color;
+		border-top-color: $whbl-primary-color;
+	}
+	.panel-default > .panel-heading,
+	.notifications-list .item-footer {
+		background-color: $whbl-primary-color;
+	}
+	.notifications-list .item-footer a:hover {
+		background-color: #2980b9;
+	}
+	#invoice-companies .invoice-dates .invoice-number > span,
+	.notifications-list .item a .time {
+		color: $whbl-primary-color;
+	}
+	.table thead > tr > th > a:hover span {
+		color: $whbl-primary-color;
+		border-color: $whbl-primary-color;
+	}
+	.pace .pace-progress {
+		background-color: #fff;
+	}
+}
+.rtl.skin-whbl #content-wrapper {
+	border-left: 0;
+	border-right: 2px solid #e7ebee;
+}
+
+@media (max-width: $break-sm-max) {
+	.skin-whbl {
+		#logo.navbar-brand > img.normal-logo.logo-white {
+			display: block;
+		}
+		#logo.navbar-brand > img.normal-logo.logo-black {
+			display: none;
+		}
+		.navbar > .container .navbar-brand {
+			background-color: $whbl-primary-color;
+		}
+	}
+}
@@ -19,7 +19,9 @@ describe(&quot;BodyStateClasses Service&quot;, () =&gt; {
         },
         authService: any = helpers.mocks.authService,
         bodyEl: { className: string },
-        bodyElJq: any;
+        bodyElJq: any,
+        contentWrapperEl: { className: string },
+        contentWrapperElJq: any;
     let getService = (): BodyStateClassesService => {
         return new BodyStateClassesService($rootScope, $document, $state, authService);
@@ -29,6 +31,9 @@ describe(&quot;BodyStateClasses Service&quot;, () =&gt; {
         authService.isAuthenticated = jasmine.createSpy("isAuthenticated").and.returnValue(true);
         bodyEl = { className: "" };
         bodyElJq = [bodyEl];
+
+        contentWrapperEl = { className: "" };
+        contentWrapperElJq = [contentWrapperEl];
     });
     it("should add the class noosfero-user-logged to the body element if the user is authenticated", () => {
@@ -133,4 +138,43 @@ describe(&quot;BodyStateClasses Service&quot;, () =&gt; {
         // and check now if the bodyEl has a class indicating the new state route
         expect(bodyEl.className).toEqual(BodyStateClassesService.ROUTE_STATE_CLASSNAME_PREFIX + "new-route");
     });
+
+    it("add a css class theme skin to body element", () => {
+        let service = getService();
+        let skinClass: string = 'skin-test';
+
+        bodyElJq.addClass = jasmine.createSpy("addClass");
+        bodyElJq.removeClass = jasmine.createSpy("removeClass");
+        service["bodyElement"] = bodyElJq;
+
+        service.start({
+            skin: skinClass
+        });
+
+        expect(bodyElJq.addClass).toHaveBeenCalledWith(skinClass);
+    });
+
+    it("add a css class to content wrapper element", () => {
+        let service = getService();
+
+        contentWrapperElJq.addClass = jasmine.createSpy("addClass");
+        contentWrapperElJq.removeClass = jasmine.createSpy("removeClass");
+
+        service["contentWrapperElement"] = contentWrapperElJq;
+        service.addContentClass(true);
+
+        expect(contentWrapperElJq.addClass).toHaveBeenCalledWith(BodyStateClassesService.CONTENT_WRAPPER_FULL);
+    });
+
+    it("remove a css class from content wrapper element", () => {
+        let service = getService();
+
+        contentWrapperElJq.addClass = jasmine.createSpy("addClass");
+        contentWrapperElJq.removeClass = jasmine.createSpy("removeClass");
+
+        service["contentWrapperElement"] = contentWrapperElJq;
+        service.addContentClass(false);
+
+        expect(contentWrapperElJq.removeClass).toHaveBeenCalledWith(BodyStateClassesService.CONTENT_WRAPPER_FULL);
+    });
 });
@@ -2,6 +2,11 @@ import {Directive, Inject, Injectable} from &quot;ng-forward&quot;;
 import {AuthEvents} from "./../../login/auth-events";
 import {AuthService} from "./../../login/auth.service";
 import {HtmlUtils} from "../html-utils";
+import {INgForwardJQuery} from 'ng-forward/cjs/util/jqlite-extensions';
+
+export interface StartParams {
+    skin?: string;
+}
 /**
  * This is a service which adds classes to the body element
@@ -18,11 +23,14 @@ import {HtmlUtils} from &quot;../html-utils&quot;;
 export class BodyStateClassesService {
     private started: boolean = false;
+    private skin: string;
     public static get USER_LOGGED_CLASSNAME(): string { return "noosfero-user-logged"; }
     public static get ROUTE_STATE_CLASSNAME_PREFIX(): string { return "noosfero-route-"; }
+    public static get CONTENT_WRAPPER_FULL(): string { return "full-content"; }
     private bodyElement: ng.IAugmentedJQuery = null;
+    private contentWrapperElement: INgForwardJQuery = null;
     constructor(
         private $rootScope: ng.IRootScopeService,
@@ -33,14 +41,37 @@ export class BodyStateClassesService {
     }
-    start() {
+    start(config?: StartParams) {
         if (!this.started) {
             this.setupUserLoggedClassToggle();
             this.setupStateClassToggle();
+
+            if (config) {
+                this.setThemeSkin(config.skin);
+            }
             this.started = true;
         }
     }
+    setThemeSkin(skin: string) {
+        this.getBodyElement().addClass(skin);
+    }
+
+    addContentClass(addClass: boolean, className?: string): BodyStateClassesService {
+
+        let fullContentClass: string = className || BodyStateClassesService.CONTENT_WRAPPER_FULL;
+        let contentWrapper = this.getContentWrapper();
+
+        if (contentWrapper) {
+            if (addClass) {
+                contentWrapper.addClass(fullContentClass);
+            } else {
+                contentWrapper.removeClass(fullContentClass);
+            }
+        }
+        return this;
+    }
+
     private getStateChangeSuccessHandlerFunction(bodyElement: ng.IAugmentedJQuery): (event: ng.IAngularEvent, toState: ng.ui.IState) => void {
         let self = this;
         return (event: ng.IAngularEvent, toState: ng.ui.IState) => {
@@ -95,4 +126,15 @@ export class BodyStateClassesService {
         }
         return this.bodyElement;
     }
+
+    private getContentWrapper(selector?: string): INgForwardJQuery {
+
+        if (this.contentWrapperElement === null) {
+
+            let doc = <INgForwardJQuery>angular.element(this.$document);
+            this.contentWrapperElement = doc.query(selector || '.content-wrapper');
+        }
+
+        return this.contentWrapperElement;
+    }
 }
@@ -2,6 +2,7 @@ import {provide} from &#39;ng-forward&#39;;
 import {ComponentTestHelper, createClass} from '../../../spec/component-test-helper';
 import {providers} from 'ng-forward/cjs/testing/providers';
 import {SidebarComponent} from './sidebar.component';
+import * as helpers from '../../../spec/helpers';
 const htmlTemplate: string = '<sidebar [visible]="false"></sidebar>';
-<div id="nav-col" ng-show="ctrl.isVisible">
+<div id="nav-col" ng-show="ctrl.isVisible()" ng-class="{'sidebar-hide':!ctrl.isVisible()}">
     <section id="col-left" class="col-left-nano">
       <div id="col-left-inner" class="col-left-nano-content">
         <div id="user-left-box" class="clearfix hidden-sm hidden-xs dropdown profile2-dropdown">
-          <noosfero-profile-image [profile]="ctrl.profile"></noosfero-profile-image>
+          <noosfero-profile-image [profile]="ctrl.user"></noosfero-profile-image>
           <div class="user-box">
             <span class="name">
               <a href="#" class="dropdown-toggle" data-toggle="dropdown">
-                Scarlett J.
+                {{ctrl.user.name}}
                 <i class="fa fa-angle-down"></i>
               </a>
               <ul class="dropdown-menu">
@@ -4,7 +4,7 @@ import {Injectable, EventEmitter} from &quot;ng-forward&quot;;
 @Injectable()
 export class SidebarNotificationService {
     private alternateVisibilityEvent: EventEmitter<boolean> = new EventEmitter<boolean>();
-    private sidebarVisible: boolean = false;
+    public sidebarVisible: boolean = false;
     getCurrentVisibility() {
         return this.sidebarVisible;
 import {AuthService, AuthEvents} from "./";
+import {SessionService} from './session.service';
 import {Injectable, Provider, provide, EventEmitter} from "ng-forward";
 import {ComponentFixture} from 'ng-forward/cjs/testing/test-component-builder';
@@ -6,7 +6,7 @@ import {SessionService} from &quot;./session.service&quot;;
 import {AuthEvents} from "./auth-events";
 @Injectable()
-@Inject("$http", "SessionService", "$log")
+@Inject("$http", SessionService, "$log")
 export class AuthService {
     public loginSuccess: EventEmitter<noosfero.User> = new EventEmitter<noosfero.User>();
@@ -51,8 +51,13 @@ import {HtmlEditorComponent} from &quot;../shared/components/html-editor/html-editor.
 })
 @Inject(BodyStateClassesService)
 export class MainContentComponent {
+
+    public themeSkin: string = 'skin-whbl';
+
     constructor(private bodyStateClassesService: BodyStateClassesService) {
-        bodyStateClassesService.start();
+        bodyStateClassesService.start({
+            skin: this.themeSkin
+        });
     }
 }
 <acme-navbar></acme-navbar>
 <!-- Sidebar Left -->
 <sidebar [visible]="false"></sidebar>
-<div class="content" ui-view="content"></div>
+<div class="content-wrapper" ui-view="content"></div>
-.content {
+.content-wrapper {
     margin-top: 32px;
 }
+
+.full-content {
+  margin-left: 0px !important;
+}
-<span title="{{ctrl.profile.name}}">
+<span class="profile-image-wrap" title="{{ctrl.profile.name}}">
   <img ng-if="ctrl.profile.image" ng-src="{{ctrl.profile.image.url}}" class="img-responsive profile-image">
   <i ng-if="!ctrl.profile.image" class="fa {{ctrl.defaultIcon}} fa-5x profile-image"></i>
 </span>
	@@ -21,6 +21,8 @@		@@ -21,6 +21,8 @@
21	position: absolute;	21	position: absolute;
22	background: #2c3e50;	22	background: #2c3e50;
23	width: 220px;	23	width: 220px;
		24	+ border-right: 2px solid #e7ebee;
		25	+ height: 200%;
24		26
25	@media (max-width: $break-sm-max) {	27	@media (max-width: $break-sm-max) {
26	position: relative;	28	position: relative;
	@@ -289,3 +291,17 @@		@@ -289,3 +291,17 @@
289	color: #fff;	291	color: #fff;
290	border-left-color: $primary-color;	292	border-left-color: $primary-color;
291	}	293	}
		294	+
		295	+#user-left-box {
		296	+ .profile-image-wrap {
		297	+ float:left;
		298	+ width: 70px;
		299	+ height: 70px;
		300	+ }
		301	+ i.profile-image {
		302	+ border-radius: 18%;
		303	+ border: 3px solid #fff;
		304	+ background-color: #fff;
		305	+ text-align: center;
		306	+ }
		307	+}
@@ -0,0 +1,310 @@		@@ -0,0 +1,310 @@
	1	+$whbl-nav-col-bg: #ffffff; //f3f5f6
	2	+$whbl-sidebar-linkColor: #484848;
	3	+$whbl-primary-color: #1E96D0; //blue
	4	+$whbl-font-color: #16191c;
	5	+
	6	+.skin-whbl {
	7	+ #header-navbar {
	8	+ background-color: $whbl-primary-color;
	9	+ }
	10	+ .navbar > .container .navbar-brand {
	11	+ background-color: transparent;
	12	+ width: 221px;
	13	+ }
	14	+ #nav-col,
	15	+ #page-wrapper {
	16	+ background-color: $whbl-nav-col-bg;
	17	+ }
	18	+ #sidebar-nav .nav > li > a {
	19	+ color: $whbl-sidebar-linkColor;
	20	+ /* border-bottom: 1px solid #e7ebee; */
	21	+ }
	22	+ #sidebar-nav .nav > .open > .submenu > li > .submenu,
	23	+ #sidebar-nav .nav > .active > .submenu > li > .submenu,
	24	+ #sidebar-nav .nav li .submenu > li.open a,
	25	+ #nav-col-submenu .submenu > li > .submenu,
	26	+ #nav-col-submenu li .submenu > li.open > a {
	27	+ background-color: darken($whbl-nav-col-bg, 8%);
	28	+ }
	29	+ .nav-pills > li.active > a,
	30	+ .nav-pills > li.active > a:hover,
	31	+ .nav-pills > li.active > a:focus,
	32	+ #sidebar-nav .nav-pills > li.active > a,
	33	+ #sidebar-nav .nav-pills > li.active > a:hover,
	34	+ #sidebar-nav .nav-pills > li.active > a:focus,
	35	+ .nav-pills > li.open > a,
	36	+ .nav-pills > li.open > a:hover,
	37	+ .nav-pills > li.open > a:focus,
	38	+ #sidebar-nav .nav-pills > li.open > a,
	39	+ #sidebar-nav .nav-pills > li.open > a:hover,
	40	+ #sidebar-nav .nav-pills > li.open > a:focus,
	41	+ #sidebar-nav .nav-pills > li > a:focus {
	42	+ background-color: darken($whbl-nav-col-bg, 4%);
	43	+ border-color: $whbl-primary-color;
	44	+ border-bottom-color: #e7ebee;
	45	+ color: $whbl-sidebar-linkColor;
	46	+ }
	47	+ #sidebar-nav .nav-pills > li.active > a > i {
	48	+ color: #2980b9;
	49	+ }
	50	+ #sidebar-nav .nav > li > a:hover {
	51	+ background-color: darken($whbl-nav-col-bg, 4%);
	52	+ border-color: $whbl-primary-color;
	53	+ border-bottom-color: #e7ebee;
	54	+ color: $whbl-sidebar-linkColor;
	55	+ }
	56	+
	57	+ #sidebar-nav .nav > li .submenu li > a:hover {
	58	+ color: $whbl-font-color;
	59	+ font-weight: bold;
	60	+ }
	61	+ #header-navbar .nav > li > a {
	62	+ color: #fff;
	63	+ }
	64	+ #header-navbar .nav > li > a:hover,
	65	+ #header-navbar .nav > li > a:focus,
	66	+ #header-navbar .nav .open > a,
	67	+ #header-navbar .nav .open > a:hover,
	68	+ #header-navbar .nav .open > a:focus {
	69	+ background-color: #2980b9;
	70	+ }
	71	+ #sidebar-nav .nav li .submenu,
	72	+ #nav-col-submenu .submenu {
	73	+ background-color: darken($whbl-nav-col-bg, 4%);
	74	+ }
	75	+ #sidebar-nav .nav li .submenu > li > a,
	76	+ .nav-small #nav-col-submenu .submenu > li > a {
	77	+ color: $whbl-font-color;
	78	+ }
	79	+ #sidebar-nav .nav > .open > .submenu > .open > a,
	80	+ #sidebar-nav .nav > .active > .submenu > .open > a,
	81	+ #sidebar-nav .nav > .active > .submenu > .active > a,
	82	+ #nav-col-submenu .submenu > .open > a,
	83	+ #nav-col-submenu .submenu > .active > a {
	84	+ border-bottom-color: transparent;
	85	+ box-shadow: 0 -1px 0 transparent inset;
	86	+ }
	87	+ #sidebar-nav .nav > .open > .submenu > .open > a {
	88	+ border-bottom-color: #dcdfe6;
	89	+ box-shadow: none;
	90	+ }
	91	+ #sidebar-nav .nav li.open > a.dropdown-toggle > .drop-icon,
	92	+ #sidebar-nav .nav li.active > a.dropdown-toggle > .drop-icon {
	93	+ color: $whbl-font-color;
	94	+ }
	95	+ #sidebar-nav .nav li .submenu > li > a:hover,
	96	+ #sidebar-nav .nav li .submenu > li > a.active,
	97	+ #sidebar-nav .nav li .submenu > li.active > a {
	98	+ background-color: darken($whbl-nav-col-bg, 8%);
	99	+ }
	100	+ .navbar > .container .navbar-brand {
	101	+ color: #fff;
	102	+ }
	103	+ .navbar-toggle {
	104	+ color: #fff;
	105	+ }
	106	+ .graph-box {
	107	+ background-color: $whbl-primary-color !important;
	108	+ }
	109	+ .content-wrapper {
	110	+ background-color: #f9f9f9;
	111	+ height: 100%;
	112	+ margin-top: 0;
	113	+ margin-bottom: 0;
	114	+ position: relative;
	115	+ min-height: 1200px;
	116	+ padding: 15px 15px 35px 15px;
	117	+ margin-left: 220px;
	118	+ // border-left: 2px solid #e7ebee;
	119	+ }
	120	+ #user-left-box {
	121	+
	122	+ .user-box {
	123	+ color: $whbl-font-color;
	124	+ > a {
	125	+ color: $whbl-font-color;
	126	+ }
	127	+ > .name {
	128	+ > a {
	129	+ color: $whbl-font-color;
	130	+
	131	+ &:hover, &:focus {
	132	+ color: $whbl-font-color;
	133	+ }
	134	+ }
	135	+ }
	136	+ }
	137	+ .user-box a:hover,
	138	+ .user-box a:focus {
	139	+ color: darken($whbl-font-color, 20%);
	140	+ }
	141	+ }
	142	+ #sidebar-nav .nav > li.nav-header {
	143	+ border-top-color: #e7ebee;
	144	+ color: darken($whbl-nav-col-bg, 35%);
	145	+ }
	146	+ .nav-tabs {
	147	+ background-color: #f9f9f9;
	148	+ }
	149	+ h1 {
	150	+ color: $whbl-primary-color;
	151	+ }
	152	+ #header-navbar .nav > li > a:hover,
	153	+ #header-navbar .nav > li > a:focus,
	154	+ #header-navbar .nav .open > a,
	155	+ #header-navbar .nav .open > a:hover,
	156	+ #header-navbar .nav .open > a:focus,
	157	+ .navbar-toggle:hover,
	158	+ .navbar-toggle:focus,
	159	+ .mobile-search.active > .btn {
	160	+ background-color: #2980b9;
	161	+ }
	162	+ .main-box {
	163	+ border: 1px solid $main-bg-color;
	164	+ }
	165	+ a,
	166	+ .fc-state-default,
	167	+ .jvectormap-zoomin,
	168	+ .jvectormap-zoomout,
	169	+ #user-profile .profile-details ul > li > span {
	170	+ color: $whbl-primary-color;
	171	+ }
	172	+ a:hover,
	173	+ a:focus,
	174	+ .widget-users li > .details > .name > a:hover,
	175	+ .widget-todo .actions > a:hover {
	176	+ color: $whbl-primary-color;
	177	+ }
	178	+ .table a.table-link:hover {
	179	+ color: #2980b9;
	180	+ }
	181	+ .pagination {
	182	+ > li {
	183	+ > a,
	184	+ > span,
	185	+ > a:hover,
	186	+ > span:hover,
	187	+ > a:focus,
	188	+ > span:focus,
	189	+ > a:active,
	190	+ > span:active {
	191	+ color: $whbl-primary-color;
	192	+ }
	193	+ }
	194	+ > .active {
	195	+ > a,
	196	+ > span,
	197	+ > a:hover,
	198	+ > span:hover,
	199	+ > a:focus,
	200	+ > span:focus {
	201	+ background-color: $whbl-primary-color;
	202	+ border-color: $whbl-primary-color;
	203	+ color: #fff;
	204	+ }
	205	+ }
	206	+ }
	207	+ .notifications-list {
	208	+ .item-footer {
	209	+ background-color: #272d33;
	210	+
	211	+ a:hover {
	212	+ background-color: #0f1114;
	213	+ }
	214	+ }
	215	+ }
	216	+ .btn-primary,
	217	+ .btn-default,
	218	+ .btn-info,
	219	+ .btn-success,
	220	+ .btn-warning,
	221	+ .btn-danger,
	222	+ .btn-primary:hover,
	223	+ .btn-default:hover,
	224	+ .btn-info:hover,
	225	+ .btn-success:hover,
	226	+ .btn-warning:hover,
	227	+ .btn-danger:hover {
	228	+ color: #fff;
	229	+ }
	230	+ .btn-primary {
	231	+ background-color: $whbl-primary-color;
	232	+ border-color: #2980b9;
	233	+ }
	234	+ .btn-primary:hover,
	235	+ .btn-primary:focus,
	236	+ .btn-primary:active,
	237	+ .btn-primary.active,
	238	+ .open .dropdown-toggle.btn-primary {
	239	+ background-color: #2980b9;
	240	+ border-color: #216897;
	241	+ }
	242	+ .btn-success {
	243	+ background-color: $whbl-primary-color;
	244	+ border-color: #2980b9;
	245	+ }
	246	+ .btn-success:hover,
	247	+ .btn-success:focus,
	248	+ .btn-success:active,
	249	+ .btn-success.active,
	250	+ .open .dropdown-toggle.btn-success {
	251	+ background-color: #2980b9;
	252	+ border-color: #1c5c87;
	253	+ }
	254	+ h1 {
	255	+ color: $whbl-primary-color;
	256	+ }
	257	+ .widget-users li > .details > .time {
	258	+ color: $whbl-primary-color;
	259	+ }
	260	+ blockquote,
	261	+ blockquote.pull-right {
	262	+ border-color: $whbl-primary-color;
	263	+ }
	264	+ a.list-group-item.active,
	265	+ a.list-group-item.active:hover,
	266	+ a.list-group-item.active:focus {
	267	+ background-color: $whbl-primary-color;
	268	+ border-color: $whbl-primary-color;
	269	+ }
	270	+ .nav .caret {
	271	+ border-bottom-color: $whbl-primary-color;
	272	+ border-top-color: $whbl-primary-color;
	273	+ }
	274	+ .panel-default > .panel-heading,
	275	+ .notifications-list .item-footer {
	276	+ background-color: $whbl-primary-color;
	277	+ }
	278	+ .notifications-list .item-footer a:hover {
	279	+ background-color: #2980b9;
	280	+ }
	281	+ #invoice-companies .invoice-dates .invoice-number > span,
	282	+ .notifications-list .item a .time {
	283	+ color: $whbl-primary-color;
	284	+ }
	285	+ .table thead > tr > th > a:hover span {
	286	+ color: $whbl-primary-color;
	287	+ border-color: $whbl-primary-color;
	288	+ }
	289	+ .pace .pace-progress {
	290	+ background-color: #fff;
	291	+ }
	292	+}
	293	+.rtl.skin-whbl #content-wrapper {
	294	+ border-left: 0;
	295	+ border-right: 2px solid #e7ebee;
	296	+}
	297	+
	298	+@media (max-width: $break-sm-max) {
	299	+ .skin-whbl {
	300	+ #logo.navbar-brand > img.normal-logo.logo-white {
	301	+ display: block;
	302	+ }
	303	+ #logo.navbar-brand > img.normal-logo.logo-black {
	304	+ display: none;
	305	+ }
	306	+ .navbar > .container .navbar-brand {
	307	+ background-color: $whbl-primary-color;
	308	+ }
	309	+ }
	310	+}
	@@ -19,7 +19,9 @@ describe("BodyStateClasses Service", () => {		@@ -19,7 +19,9 @@ describe("BodyStateClasses Service", () => {
19	},	19	},
20	authService: any = helpers.mocks.authService,	20	authService: any = helpers.mocks.authService,
21	bodyEl: { className: string },	21	bodyEl: { className: string },
22	- bodyElJq: any;	22	+ bodyElJq: any,
		23	+ contentWrapperEl: { className: string },
		24	+ contentWrapperElJq: any;
23		25
24	let getService = (): BodyStateClassesService => {	26	let getService = (): BodyStateClassesService => {
25	return new BodyStateClassesService($rootScope, $document, $state, authService);	27	return new BodyStateClassesService($rootScope, $document, $state, authService);
	@@ -29,6 +31,9 @@ describe("BodyStateClasses Service", () => {		@@ -29,6 +31,9 @@ describe("BodyStateClasses Service", () => {
29	authService.isAuthenticated = jasmine.createSpy("isAuthenticated").and.returnValue(true);	31	authService.isAuthenticated = jasmine.createSpy("isAuthenticated").and.returnValue(true);
30	bodyEl = { className: "" };	32	bodyEl = { className: "" };
31	bodyElJq = [bodyEl];	33	bodyElJq = [bodyEl];
		34	+
		35	+ contentWrapperEl = { className: "" };
		36	+ contentWrapperElJq = [contentWrapperEl];
32	});	37	});
33		38
34	it("should add the class noosfero-user-logged to the body element if the user is authenticated", () => {	39	it("should add the class noosfero-user-logged to the body element if the user is authenticated", () => {
	@@ -133,4 +138,43 @@ describe("BodyStateClasses Service", () => {		@@ -133,4 +138,43 @@ describe("BodyStateClasses Service", () => {
133	// and check now if the bodyEl has a class indicating the new state route	138	// and check now if the bodyEl has a class indicating the new state route
134	expect(bodyEl.className).toEqual(BodyStateClassesService.ROUTE_STATE_CLASSNAME_PREFIX + "new-route");	139	expect(bodyEl.className).toEqual(BodyStateClassesService.ROUTE_STATE_CLASSNAME_PREFIX + "new-route");
135	});	140	});
		141	+
		142	+ it("add a css class theme skin to body element", () => {
		143	+ let service = getService();
		144	+ let skinClass: string = 'skin-test';
		145	+
		146	+ bodyElJq.addClass = jasmine.createSpy("addClass");
		147	+ bodyElJq.removeClass = jasmine.createSpy("removeClass");
		148	+ service["bodyElement"] = bodyElJq;
		149	+
		150	+ service.start({
		151	+ skin: skinClass
		152	+ });
		153	+
		154	+ expect(bodyElJq.addClass).toHaveBeenCalledWith(skinClass);
		155	+ });
		156	+
		157	+ it("add a css class to content wrapper element", () => {
		158	+ let service = getService();
		159	+
		160	+ contentWrapperElJq.addClass = jasmine.createSpy("addClass");
		161	+ contentWrapperElJq.removeClass = jasmine.createSpy("removeClass");
		162	+
		163	+ service["contentWrapperElement"] = contentWrapperElJq;
		164	+ service.addContentClass(true);
		165	+
		166	+ expect(contentWrapperElJq.addClass).toHaveBeenCalledWith(BodyStateClassesService.CONTENT_WRAPPER_FULL);
		167	+ });
		168	+
		169	+ it("remove a css class from content wrapper element", () => {
		170	+ let service = getService();
		171	+
		172	+ contentWrapperElJq.addClass = jasmine.createSpy("addClass");
		173	+ contentWrapperElJq.removeClass = jasmine.createSpy("removeClass");
		174	+
		175	+ service["contentWrapperElement"] = contentWrapperElJq;
		176	+ service.addContentClass(false);
		177	+
		178	+ expect(contentWrapperElJq.removeClass).toHaveBeenCalledWith(BodyStateClassesService.CONTENT_WRAPPER_FULL);
		179	+ });
136	});	180	});
	@@ -2,6 +2,11 @@ import {Directive, Inject, Injectable} from "ng-forward";		@@ -2,6 +2,11 @@ import {Directive, Inject, Injectable} from "ng-forward";
2	import {AuthEvents} from "./../../login/auth-events";	2	import {AuthEvents} from "./../../login/auth-events";
3	import {AuthService} from "./../../login/auth.service";	3	import {AuthService} from "./../../login/auth.service";
4	import {HtmlUtils} from "../html-utils";	4	import {HtmlUtils} from "../html-utils";
		5	+import {INgForwardJQuery} from 'ng-forward/cjs/util/jqlite-extensions';
		6	+
		7	+export interface StartParams {
		8	+ skin?: string;
		9	+}
5		10
6	/**	11	/**
7	* This is a service which adds classes to the body element	12	* This is a service which adds classes to the body element
	@@ -18,11 +23,14 @@ import {HtmlUtils} from "../html-utils";		@@ -18,11 +23,14 @@ import {HtmlUtils} from "../html-utils";
18	export class BodyStateClassesService {	23	export class BodyStateClassesService {
19		24
20	private started: boolean = false;	25	private started: boolean = false;
		26	+ private skin: string;
21		27
22	public static get USER_LOGGED_CLASSNAME(): string { return "noosfero-user-logged"; }	28	public static get USER_LOGGED_CLASSNAME(): string { return "noosfero-user-logged"; }
23	public static get ROUTE_STATE_CLASSNAME_PREFIX(): string { return "noosfero-route-"; }	29	public static get ROUTE_STATE_CLASSNAME_PREFIX(): string { return "noosfero-route-"; }
		30	+ public static get CONTENT_WRAPPER_FULL(): string { return "full-content"; }
24		31
25	private bodyElement: ng.IAugmentedJQuery = null;	32	private bodyElement: ng.IAugmentedJQuery = null;
		33	+ private contentWrapperElement: INgForwardJQuery = null;
26		34
27	constructor(	35	constructor(
28	private $rootScope: ng.IRootScopeService,	36	private $rootScope: ng.IRootScopeService,
	@@ -33,14 +41,37 @@ export class BodyStateClassesService {		@@ -33,14 +41,37 @@ export class BodyStateClassesService {
33		41
34	}	42	}
35		43
36	- start() {	44	+ start(config?: StartParams) {
37	if (!this.started) {	45	if (!this.started) {
38	this.setupUserLoggedClassToggle();	46	this.setupUserLoggedClassToggle();
39	this.setupStateClassToggle();	47	this.setupStateClassToggle();
		48	+
		49	+ if (config) {
		50	+ this.setThemeSkin(config.skin);
		51	+ }
40	this.started = true;	52	this.started = true;
41	}	53	}
42	}	54	}
43		55
		56	+ setThemeSkin(skin: string) {
		57	+ this.getBodyElement().addClass(skin);
		58	+ }
		59	+
		60	+ addContentClass(addClass: boolean, className?: string): BodyStateClassesService {
		61	+
		62	+ let fullContentClass: string = className \|\| BodyStateClassesService.CONTENT_WRAPPER_FULL;
		63	+ let contentWrapper = this.getContentWrapper();
		64	+
		65	+ if (contentWrapper) {
		66	+ if (addClass) {
		67	+ contentWrapper.addClass(fullContentClass);
		68	+ } else {
		69	+ contentWrapper.removeClass(fullContentClass);
		70	+ }
		71	+ }
		72	+ return this;
		73	+ }
		74	+
44	private getStateChangeSuccessHandlerFunction(bodyElement: ng.IAugmentedJQuery): (event: ng.IAngularEvent, toState: ng.ui.IState) => void {	75	private getStateChangeSuccessHandlerFunction(bodyElement: ng.IAugmentedJQuery): (event: ng.IAngularEvent, toState: ng.ui.IState) => void {
45	let self = this;	76	let self = this;
46	return (event: ng.IAngularEvent, toState: ng.ui.IState) => {	77	return (event: ng.IAngularEvent, toState: ng.ui.IState) => {
	@@ -95,4 +126,15 @@ export class BodyStateClassesService {		@@ -95,4 +126,15 @@ export class BodyStateClassesService {
95	}	126	}
96	return this.bodyElement;	127	return this.bodyElement;
97	}	128	}
		129	+
		130	+ private getContentWrapper(selector?: string): INgForwardJQuery {
		131	+
		132	+ if (this.contentWrapperElement === null) {
		133	+
		134	+ let doc = <INgForwardJQuery>angular.element(this.$document);
		135	+ this.contentWrapperElement = doc.query(selector \|\| '.content-wrapper');
		136	+ }
		137	+
		138	+ return this.contentWrapperElement;
		139	+ }
98	}	140	}
	@@ -2,6 +2,7 @@ import {provide} from 'ng-forward';		@@ -2,6 +2,7 @@ import {provide} from 'ng-forward';
2	import {ComponentTestHelper, createClass} from '../../../spec/component-test-helper';	2	import {ComponentTestHelper, createClass} from '../../../spec/component-test-helper';
3	import {providers} from 'ng-forward/cjs/testing/providers';	3	import {providers} from 'ng-forward/cjs/testing/providers';
4	import {SidebarComponent} from './sidebar.component';	4	import {SidebarComponent} from './sidebar.component';
		5	+import * as helpers from '../../../spec/helpers';
5		6
6	const htmlTemplate: string = '<sidebar [visible]="false"></sidebar>';	7	const htmlTemplate: string = '<sidebar [visible]="false"></sidebar>';
7		8
1	-<div id="nav-col" ng-show="ctrl.isVisible">	1	+<div id="nav-col" ng-show="ctrl.isVisible()" ng-class="{'sidebar-hide':!ctrl.isVisible()}">
2	<section id="col-left" class="col-left-nano">	2	<section id="col-left" class="col-left-nano">
3	<div id="col-left-inner" class="col-left-nano-content">	3	<div id="col-left-inner" class="col-left-nano-content">
4	<div id="user-left-box" class="clearfix hidden-sm hidden-xs dropdown profile2-dropdown">	4	<div id="user-left-box" class="clearfix hidden-sm hidden-xs dropdown profile2-dropdown">
5	- <noosfero-profile-image [profile]="ctrl.profile"></noosfero-profile-image>	5	+ <noosfero-profile-image [profile]="ctrl.user"></noosfero-profile-image>
6	<div class="user-box">	6	<div class="user-box">
7	<span class="name">	7	<span class="name">
8	<a href="#" class="dropdown-toggle" data-toggle="dropdown">	8	<a href="#" class="dropdown-toggle" data-toggle="dropdown">
9	- Scarlett J.	9	+ {{ctrl.user.name}}
10	<i class="fa fa-angle-down"></i>	10	<i class="fa fa-angle-down"></i>
11	</a>	11	</a>
12	<ul class="dropdown-menu">	12	<ul class="dropdown-menu">
	@@ -4,7 +4,7 @@ import {Injectable, EventEmitter} from "ng-forward";		@@ -4,7 +4,7 @@ import {Injectable, EventEmitter} from "ng-forward";
4	@Injectable()	4	@Injectable()
5	export class SidebarNotificationService {	5	export class SidebarNotificationService {
6	private alternateVisibilityEvent: EventEmitter<boolean> = new EventEmitter<boolean>();	6	private alternateVisibilityEvent: EventEmitter<boolean> = new EventEmitter<boolean>();
7	- private sidebarVisible: boolean = false;	7	+ public sidebarVisible: boolean = false;
8		8
9	getCurrentVisibility() {	9	getCurrentVisibility() {
10	return this.sidebarVisible;	10	return this.sidebarVisible;
1	import {AuthService, AuthEvents} from "./";	1	import {AuthService, AuthEvents} from "./";
		2	+import {SessionService} from './session.service';
2		3
3	import {Injectable, Provider, provide, EventEmitter} from "ng-forward";	4	import {Injectable, Provider, provide, EventEmitter} from "ng-forward";
4	import {ComponentFixture} from 'ng-forward/cjs/testing/test-component-builder';	5	import {ComponentFixture} from 'ng-forward/cjs/testing/test-component-builder';
	@@ -6,7 +6,7 @@ import {SessionService} from "./session.service";		@@ -6,7 +6,7 @@ import {SessionService} from "./session.service";
6	import {AuthEvents} from "./auth-events";	6	import {AuthEvents} from "./auth-events";
7		7
8	@Injectable()	8	@Injectable()
9	-@Inject("$http", "SessionService", "$log")	9	+@Inject("$http", SessionService, "$log")
10	export class AuthService {	10	export class AuthService {
11		11
12	public loginSuccess: EventEmitter<noosfero.User> = new EventEmitter<noosfero.User>();	12	public loginSuccess: EventEmitter<noosfero.User> = new EventEmitter<noosfero.User>();
1	<acme-navbar></acme-navbar>	1	<acme-navbar></acme-navbar>
2	<!-- Sidebar Left -->	2	<!-- Sidebar Left -->
3	<sidebar [visible]="false"></sidebar>	3	<sidebar [visible]="false"></sidebar>
4	-<div class="content" ui-view="content"></div>	4	+<div class="content-wrapper" ui-view="content"></div>