OO-684 fix left alignment in trees with root, add marker css to tree, more...

OO-684 fix left alignment in trees with root, add marker css to tree, more general defaults in definitions

src/main/java/org/olat/core/gui/components/tree/MenuTreeRenderer.java

@@ -104,9 +104,13 @@ public class MenuTreeRenderer implements ComponentRenderer {
 		if(tree.isDragEnabled() || tree.isDropEnabled()) {
 			target.append(" b_dd_ct");
 		}
+		// marker classes to differentiate rendering when root node is visible 
 		if(!tree.isRootVisible()) {
 			target.append(" b_tree_root_hidden");
 		}
+		else {
+			target.append(" b_tree_root_visible");
+		}
 		target.append("'><ul class=\"b_tree_l0\">");
 		if(tree.isRootVisible()) {
 			renderLevel(target, 0, root, selPath, openNodeIds, ubu, flags, tree);
@@ -149,7 +153,7 @@ public class MenuTreeRenderer implements ComponentRenderer {
 			target.append(" b_tree_selected_parents");			
 		}
 		String ident = curRoot.getIdent();
-		target.append("\"><div id='dd").append(ident).append("' class=\"b_tree_item_wrapper");
+		target.append("\"><div id='dd").append(ident).append("' class=\"b_tree_item_wrapper b_tree_l").append(level);
 		if(tree.isDragEnabled() || tree.isDropEnabled()) {
 			target.append(" b_dd_item");
 		}

src/main/webapp/static/themes/openolat/all/_definitions.scss

@@ -39,6 +39,12 @@ $glossColor4 : #3C3C3C !default;
 $okcolor : #009900 !default;
 $nokcolor : #990000 !default;
 
+$linkcolor : $basecolor !default;
+$linkcolor_hover: $basecolor !default;
+$menulinkcolor : $basegray !default;
+$menulinkcolor_hover : $basecolor !default;
+$menulinkcolor_selected : $basecolor !default;
+
 /* full screen margins. Set to 0% to have have no surrounding border at all */
 $fullScreenModalMarginPercents: 2% !default;
 

src/main/webapp/static/themes/openolat/all/content.scss

@@ -52,11 +52,11 @@ h6 { font-size: 116.67%; font-style:italic }  /* 14px */
 /** ----------------- LINKS ----------------- **/
 a,a:visited {
 	text-decoration:none;
-	color:$basecolor;
+	color:$linkcolor;
 }
 a:hover {
 	text-decoration:underline;
-	color:$basecolor;
+	color:$linkcolor_hover;
 }
 
 a img {

src/main/webapp/static/themes/openolat/all/modules/_nav.scss

@@ -117,6 +117,7 @@
 
 /* note:  the markup will be the one from OLATpro, has to be merged yet */
 div.b_tree {
+	position: relative;
 	font-size: 100%;
 	padding: 0;
 	
@@ -150,12 +151,18 @@ div.b_tree {
 			}				
 			
 			a {
-				color:$basegray;
+				color:$menulinkcolor;
 			}
 			a.b_tree_l0 {
 				padding-left:16px;
 			}
 			
+			div.b_tree_item_wrapper {
+				&.b_tree_l0 {
+				
+				}
+			}
+			
 			.b_tree_oc_l0 {
 				position: absolute;
 				top: 0px;
@@ -163,25 +170,28 @@ div.b_tree {
 				z-index: 9;
 			}
 			
-			.b_tree_level_open.b_tree_oc_l0 {
-				z-index: 10;
-			}
-			.b_tree_level_close.b_tree_oc_l0 {
+			.b_tree_level_open.b_tree_oc_l0, .b_tree_level_close.b_tree_oc_l0 {
 				z-index: 10;
 			}
 
 			/* selected, hovered, active <a> tag */
-			a:focus, a:hover { color: $basecolor; background-color: transparent; text-decoration:underline; }	
-			a.b_tree_selected,a:active { color: $basecolor; background-color: transparent; text-decoration:none; }	
-			a.b_tree_selected_parents,strong { color: $basecolor; font-weight: bold; }
+			a:focus, a:hover { color: $menulinkcolor_hover; background-color: transparent; text-decoration:underline; }	
+			a.b_tree_selected,a:active { color: $menulinkcolor_selected; background-color: transparent; text-decoration:none; }	
+			a.b_tree_selected_parents,strong { color: $menulinkcolor_selected; font-weight: bold; }
 						
 			/*  icon positioning */
 			@for $i from 1 through 11 {
-				.b_tree_oc_l#{$i}  { position:absolute; top:0px; left: 1px + ($i * $tree_padding_steps_px); z-index:9; }
+				.b_tree_oc_l#{$i}  { 
+					position:absolute; top:0px; left: 1px + ($i * $tree_padding_steps_px); 
+					z-index:9; 
+				}
 			}
 
 			@for $i from 0 through 11 {
-				a.b_tree_l#{$i}  { padding-left: $tree_padding_opener_px + ($i * $tree_padding_steps_px); z-index:9; }
+				a.b_tree_l#{$i}  { 
+					padding-left: $tree_padding_opener_px + ($i * $tree_padding_steps_px); 
+					z-index:9; 
+				}
 			}			
 			
 			
@@ -206,7 +216,10 @@ div.b_tree {
 		
 		/* link to select the item with icon */
 		@for $i from 0 through 11 {
-			&.b_tree_l#{$i}  a.b_tree_icon { padding-left: ($tree_padding_opener_px + $treeicon_width_px  + $tree_padding_steps_px * $i);  background-position:($tree_padding_opener_px + 2px + $tree_padding_steps_px * $i)  50%; }
+			&.b_tree_l#{$i}  a.b_tree_icon { 
+				padding-left: ($tree_padding_opener_px + $treeicon_width_px  + $tree_padding_steps_px * $i);  
+				background-position:($tree_padding_opener_px + 2px + $tree_padding_steps_px * $i)  50%; 
+			}
 		}
 	
 	}// end ul
@@ -214,7 +227,6 @@ div.b_tree {
 	
 	/* special case with hidden root - apply margin/paddings to wrapper */
 	&.b_tree_root_hidden {
-		position: relative;
 		margin: 0 0 0 $tree_level_margin; 
 		ul { 
 			padding: 0;
@@ -224,6 +236,11 @@ div.b_tree {
 		} 		
 	}
 	
+	/* special case with root node shown: move everything a bit left as the root node needs no space for the opener image */
+	&.b_tree_root_visible {
+		left: -$tree_padding_opener_px;
+	}
+	
 	/* the open/close node icons */
 	a.b_tree_level_close,
 	a.b_tree_level_open {