From 08e0865870a1f5deb498be591f88b3ec81d3762c Mon Sep 17 00:00:00 2001
From: Paulo Reis <paulojreis@gmail.com>
Date: Mon, 25 Sep 2017 16:41:09 +0100
Subject: [PATCH] Customize dashboard sidebar.

---
 services/web/app/views/project/list.pug       |  4 +--
 .../web/app/views/project/list/side-bar.pug   |  2 +-
 .../public/stylesheets/app/project-list.less  | 29 +++++++++++++++----
 .../stylesheets/core/_common-variables.less   |  7 +++++
 .../public/stylesheets/core/ol-variables.less | 21 +++++---------
 5 files changed, 40 insertions(+), 23 deletions(-)

diff --git a/services/web/app/views/project/list.pug b/services/web/app/views/project/list.pug
index 06efb1b11d..dead200279 100644
--- a/services/web/app/views/project/list.pug
+++ b/services/web/app/views/project/list.pug
@@ -58,10 +58,10 @@ block content
 
 		.row(ng-cloak)
 			span(ng-if="projects.length > 0")
-				aside.col-md-2.col-xs-3
+				aside.project-list-sidebar.col-md-2.col-xs-3
 					include ./list/side-bar
 
-				.col-md-10.col-xs-9
+				.project-list-main.col-md-10.col-xs-9
 					include ./list/notifications
 					include ./list/project-list
 			
diff --git a/services/web/app/views/project/list/side-bar.pug b/services/web/app/views/project/list/side-bar.pug
index 5429045afb..93eeb46125 100644
--- a/services/web/app/views/project/list/side-bar.pug
+++ b/services/web/app/views/project/list/side-bar.pug
@@ -1,5 +1,5 @@
 .dropdown(dropdown)
-	a.btn.btn-primary.dropdown-toggle(
+	a.btn.btn-primary.btn-block.dropdown-toggle(
 		href="#",
 		data-toggle="dropdown",
 		dropdown-toggle
diff --git a/services/web/public/stylesheets/app/project-list.less b/services/web/public/stylesheets/app/project-list.less
index 13ca60e181..aabf35b899 100644
--- a/services/web/public/stylesheets/app/project-list.less
+++ b/services/web/public/stylesheets/app/project-list.less
@@ -19,8 +19,21 @@
 
 .project-list-page {
 	position: relative;
+	padding-top: 0;
+	padding-bottom: 0;
 }
 
+	.project-list-sidebar {
+		background-color: @sidebar-bg;
+		padding-top: @content-margin-top;
+		padding-bottom: @content-margin-top;	
+	} 
+
+	.project-list-main {
+		padding-top: @content-margin-top;
+		padding-bottom: @content-margin-top;	
+	}
+
 .project-header {
 	.btn-group > .btn {
 		padding-left: @line-height-base / 2;
@@ -76,7 +89,7 @@
 }
 
 ul.folders-menu {
-	margin: 0;
+	margin: 0 -(@grid-gutter-width / 2);
 	.subdued {
 		color: @gray-light;
 	}
@@ -85,18 +98,22 @@ ul.folders-menu {
 		line-height: 1.8;
 		position: relative;
 		> a {
+			display: block;
 			font-size: 0.9rem;
-			color: #333;
-			padding: (@line-height-computed / 4);
-			display: inline-block;
+			color: @sidebar-link-color;
+			padding: (@line-height-computed / 4) (@grid-gutter-width / 2);
 			line-height: 1.2;
+			&:hover {
+				background-color: @sidebar-hover-bg;
+				text-decoration: @sidebar-hover-text-decoration;
+			}
 		}
 	}
 	> li.active {
 		//border-right: 4px solid @red;
-		background-color: @link-color;
-		border-radius: @border-radius-small;
+		border-radius: @sidebar-active-border-radius;
 		> a {
+			background-color: @sidebar-active-bg;
 			font-weight: 700;
 			color: white;
 			.subdued {
diff --git a/services/web/public/stylesheets/core/_common-variables.less b/services/web/public/stylesheets/core/_common-variables.less
index 4bf27cf58d..80ce79e76e 100644
--- a/services/web/public/stylesheets/core/_common-variables.less
+++ b/services/web/public/stylesheets/core/_common-variables.less
@@ -796,6 +796,13 @@
 // Custom
 @content-alt-bg-color: lighten(@gray-lightest, 2.5%);
 
+@sidebar-bg: transparent;
+@sidebar-link-color: #333;
+@sidebar-active-border-radius: @border-radius-small;
+@sidebar-active-bg: @link-color;
+@sidebar-hover-bg: transparent;
+@sidebar-hover-text-decoration: underline;
+
 @btn-border-width: 1px;        
 @btn-border-bottom-width: 2px; 
 
diff --git a/services/web/public/stylesheets/core/ol-variables.less b/services/web/public/stylesheets/core/ol-variables.less
index 0ff08f73a8..0090713b09 100644
--- a/services/web/public/stylesheets/core/ol-variables.less
+++ b/services/web/public/stylesheets/core/ol-variables.less
@@ -66,20 +66,13 @@
 @btn-danger-bg            : @ol-red;
 @btn-danger-border        : transparent;
 
-
-
-.btn-info {
-  .button-variant(@btn-info-color; @btn-info-bg; @btn-info-border);
-}
-// Warning appears as orange
-.btn-warning {
-  .button-variant(@btn-warning-color; @btn-warning-bg; @btn-warning-border);
-}
-// Danger and error appear as red
-.btn-danger {
-  .button-variant(@btn-danger-color; @btn-danger-bg; @btn-danger-border);
-}
-
+// Sidebar
+@sidebar-bg                     : @ol-blue-gray-5;
+@sidebar-link-color             : #FFF;
+@sidebar-active-border-radius   : 0;
+@sidebar-active-bg              : @ol-blue-gray-6;
+@sidebar-hover-bg               : @ol-blue-gray-4;
+@sidebar-hover-text-decoration  : none;
 //== Colors
 //
 //## Gray and brand colors for use across Bootstrap.