From 9b469cee7dd19ba48524a335ab11a5d3714ae7e8 Mon Sep 17 00:00:00 2001
From: Pablo Vazquez <venomgfx@gmail.com>
Date: Fri, 11 Nov 2016 20:03:45 +0100
Subject: [PATCH] Style tweaks to jstree

---
 src/styles/_config.sass         |  1 +
 src/styles/_project.sass        | 20 +++++++----
 src/styles/plugins/_jstree.sass | 61 +++++++++------------------------
 3 files changed, 31 insertions(+), 51 deletions(-)

diff --git a/src/styles/_config.sass b/src/styles/_config.sass
index 4d52e05f..3121f7f1 100644
--- a/src/styles/_config.sass
+++ b/src/styles/_config.sass
@@ -7,6 +7,7 @@ $color-background-nav-light: hsl(hue($color-background), 20%, 35%)
 $color-background-nav-dark: hsl(hue($color-background), 20%, 15%)
 
 $color-background-active: #dff5f6  // background colour for active items.
+$color-background-active-dark: hsl(hue($color-background-active), 50%, 50%)
 
 $font-body: 'Roboto'
 $font-headings: 'Lato'
diff --git a/src/styles/_project.sass b/src/styles/_project.sass
index 504402a5..45f27be5 100644
--- a/src/styles/_project.sass
+++ b/src/styles/_project.sass
@@ -30,7 +30,6 @@
 	z-index: $z-index-base + 5
 	width: $project_nav-width
 	overflow: hidden
-	background-color: $color-background-nav
 
 	+media-xs
 		display: block
@@ -40,7 +39,6 @@
 
 #project_sidebar
 	width: $project-sidebar-width
-	background-color: $color-background-nav-dark
 	z-index: $z-index-base + 4
 
 	+media-xs
@@ -166,7 +164,7 @@
 	visibility: visible
 	width: $project_nav-width
 	position: relative
-	background-color: $color-background-nav
+	background-color: $color-background-light
 
 	color: white
 	left: 0
@@ -485,8 +483,8 @@ ul.project-edit-tools
 			margin-right: 5px
 
 		&:hover
-			background-color: $color-primary
-			border-color: darken($color-primary, 5%)
+			background-color: $color-background-active-dark
+			border-color: darken($color-background-active-dark, 5%)
 			color: $color-text-light
 			text-decoration: none
 
@@ -741,7 +739,7 @@ ul.project_nav-edit-list
 	padding: 5px 0 // some padding on top/bottom of jstree
 	position: relative // for scrollbar alignment
 	margin-top: $project_header-height
-	background-color: $color-background-nav
+	background-color: $color-background-light
 
 	&.edit
 		margin-top: 0
@@ -755,13 +753,21 @@ ul.project_nav-edit-list
 	top: 0
 	right: 0
 	bottom: 0
-	z-index: $z-index-base + 4
+	z-index: $z-index-base
 	cursor: w-resize
 	user-select: none
 
 	+media-xs
 		display: none
 
+	&:before
+		content: ' '
+		position: absolute
+		top: 0
+		right: 0
+		bottom: 0
+		width: 2px
+		background-color: $color-background
 
 /* Node Context */
 =project-node-title
diff --git a/src/styles/plugins/_jstree.sass b/src/styles/plugins/_jstree.sass
index 707e8e78..5bdb70f9 100644
--- a/src/styles/plugins/_jstree.sass
+++ b/src/styles/plugins/_jstree.sass
@@ -1,8 +1,9 @@
 /* jsTree overrides */
 
-$tree-color-text: $color-text-light-primary
-$tree-color-highlight: white
-$tree-color-highlight-background: $color-primary
+$tree-color-text: $color-text-dark
+$tree-color-highlight: hsl(hue($color-background-active), 50%, 50%)
+$tree-color-highlight-background: hsl(hue($color-background-active), 40%, 50%)
+$tree-color-highlight-background-text: white
 
 .jstree-default
 
@@ -14,7 +15,7 @@ $tree-color-highlight-background: $color-primary
 		color: $tree-color-text
 		background-image: none !important
 
-		transition: color 100ms ease-in-out
+		transition: color 100ms ease-in-out, background-color 150ms ease-in-out
 
 		+media-xs
 			width: 100%
@@ -37,7 +38,6 @@ $tree-color-highlight-background: $color-primary
 			.jstree-icon.jstree-themeicon
 				opacity: 1
 				width: 24px !important
-				color: $color-text-light-primary
 
 				&.pi-image
 					font-size: .85em !important
@@ -62,17 +62,7 @@ $tree-color-highlight-background: $color-primary
 						font-size: .85em !important
 
 				.jstree-anchor
-					border-left: thin solid lighten($color-background-nav, 5%)
-
-			/* color of the icon on an expanded item, like a folder */
-			.jstree-ocl,
-			.jstree-anchor,
-			.jstree-ocl .jstree-icon.jstree-themeicon,
-			.jstree-anchor .jstree-icon.jstree-themeicon
-				color: $tree-color-highlight !important
-
-			.jstree-anchor:first-of-type
-				color: white !important
+					border-left: thin solid $color-text-dark-hint
 
 		/* Closed Folder */
 		&.jstree-closed
@@ -90,7 +80,7 @@ $tree-color-highlight-background: $color-primary
 		.jstree-anchor
 			width: 100%
 			padding-left: 28px
-			padding-right: 5px
+			padding-right: 10px
 			height: inherit
 			line-height: 26px
 			white-space: nowrap
@@ -106,14 +96,20 @@ $tree-color-highlight-background: $color-primary
 			.jstree-themeicon
 				margin: 0 !important
 				font-size: 95% !important
+				color: $color-text-dark-secondary
 
 			/* Selected item */
 			&.jstree-clicked
 				background-color: $tree-color-highlight-background !important
+				color: $tree-color-highlight-background-text !important
+
+				.jstree-ocl, .jstree-themeicon
+					color: $tree-color-highlight-background-text !important
+
 				&:after
 					content: '\e83a'
 					font-family: 'pillar-font'
-					color: $tree-color-highlight
+					color: $tree-color-highlight-background-text
 					position: absolute
 					right: 7px
 					top: 1px
@@ -125,7 +121,7 @@ $tree-color-highlight-background: $color-primary
 				/* hover an active item */
 				&.jstree-hovered,
 				&.jstree-hovered .jstree-icon.jstree-themeicon
-					color: lighten($tree-color-highlight, 5%) !important
+					color: $tree-color-highlight-background-text !important
 					box-shadow: none
 
 			.jstree-hovered
@@ -137,7 +133,7 @@ $tree-color-highlight-background: $color-primary
 	/* active item text + icon */
 	.jstree-clicked,
 	.jstree-clicked > .jstree-ocl
-		color: $tree-color-highlight !important
+		color: $tree-color-highlight-background-text !important
 		background-color: transparent !important
 		border-radius: 0
 		box-shadow: none
@@ -154,7 +150,7 @@ $tree-color-highlight-background: $color-primary
 	.jstree-hovered .jstree-ocl
 		background-color: transparent !important
 		box-shadow: none
-		color: white !important
+		color: $tree-color-highlight-background-text !important
 
 	/* Folder that you click to collapse/expand */
 	.jstree-icon
@@ -192,9 +188,6 @@ $tree-color-highlight-background: $color-primary
 .jstree-default .jstree-hovered .jstree-icon.jstree-themeicon
 	color: $tree-color-highlight !important
 
-.jstree-leaf[aria-selected='true']
-	a.jstree-anchor.jstree-clicked
-		background-color: rgba($tree-color-highlight-background, .5) !important
 
 a.jstree-anchor.jstree-clicked+ul li a.jstree-anchor.jstree-clicked
 	background-color: rgba($tree-color-highlight-background, .7) !important
@@ -202,26 +195,6 @@ a.jstree-anchor.jstree-clicked+ul li a.jstree-anchor.jstree-clicked
 a.jstree-anchor.jstree-clicked+ul li a.jstree-anchor.jstree-clicked+ul li a.jstree-anchor.jstree-clicked
 	background-color: rgba($tree-color-highlight-background, .8) !important
 
-a.jstree-anchor+ul
-	border:
-		top: none !important
-		bottom: none !important
-	a.jstree-anchor
-		color: darken($color-text-light-primary, 10%) !important
-
-		&.jstree-hovered,
-		&.jstree-clicked
-			color: white !important
-
-		&+ul
-			a.jstree-anchor
-				color: darken($color-text-light-primary, 10%) !important
-
-				&.jstree-hovered,
-				&.jstree-clicked
-					color: white !important
-
-
 i.jstree-icon.jstree-ocl
 	height: 26px !important
 	color: rgba($tree-color-text, .5) !important