OO-4361 Styling of linear / non-linear elements

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

@@ -166,6 +166,10 @@ public class MenuTreeRenderer extends DefaultComponentRenderer {
 			// add css class to identify parents of active element
 			target.append(" active_parent");			
 		}
+		if (hasChildren && renderChildren) {
+			// add css class to identify opened elements
+			target.append(" children_visible");	
+		}
 		String ident = curRoot.getIdent();
 		target.append("' data-nodeid='").append(ident).append("'>");			
 		target.append("<div id='dd").append(ident).append("' class='o_tree_l").append(level);

src/main/java/org/olat/course/learningpath/manager/LearningPathCourseTreeModelBuilder.java

@@ -56,11 +56,11 @@ public class LearningPathCourseTreeModelBuilder extends CourseTreeModelBuilder {
 		AssessmentEvaluation assessmentEvaluation = userCourseEnv.getScoreAccounting().evalCourseNode(courseNode);
 		SequenceConfig sequenceConfig = learningPathService.getSequenceConfig(courseNode);
 		LearningPathTreeNode learningPathTreeNode = new LearningPathTreeNode(courseNode, treeLevel, sequenceConfig, assessmentEvaluation);
-		
+				
 		learningPathTreeNode.setVisible(true);
 		boolean accessible = accessEvaluator.isAccessible(learningPathTreeNode, userCourseEnv);
 		learningPathTreeNode.setAccessible(accessible);
-		String iconDecorator1CssClass = getIconDecorator1CssClass(assessmentEvaluation, userCourseEnv);
+		String iconDecorator1CssClass = getIconDecorator1CssClass(sequenceConfig, assessmentEvaluation, userCourseEnv);
 		if (userCourseEnv.isParticipant()) {
 			learningPathTreeNode.setIconCssClass(iconDecorator1CssClass);
 			learningPathTreeNode.setCssClass(iconDecorator1CssClass);
@@ -71,25 +71,54 @@ public class LearningPathCourseTreeModelBuilder extends CourseTreeModelBuilder {
 		return learningPathTreeNode;
 	}
 
-	private String getIconDecorator1CssClass(AssessmentEvaluation assessmentEvaluation, UserCourseEnvironment userCourseEnv) {
+	private String getIconDecorator1CssClass(SequenceConfig sequenceConfig, AssessmentEvaluation assessmentEvaluation, UserCourseEnvironment userCourseEnv) {
 		if (assessmentEvaluation == null || userCourseEnv.isAdmin() || userCourseEnv.isCoach()) return null;
-		
+		String cssClasses = "";
+
 		if (assessmentEvaluation.getFullyAssessed() != null && assessmentEvaluation.getFullyAssessed().booleanValue()) {
-			return "o_lp_done";
+			cssClasses += "o_lp_done";
+		} else {
+			AssessmentEntryStatus status = assessmentEvaluation.getAssessmentStatus();
+			if (status != null) {
+				switch(status) {
+				case notReady: 
+					cssClasses += "o_lp_not_accessible"; 
+					break;
+				case notStarted: 
+					cssClasses += "o_lp_ready"; 
+					break;
+				case inProgress: 
+					cssClasses += "o_lp_in_progress";
+					break;
+				case inReview: 
+					cssClasses += "o_lp_in_progress";
+					break;
+				case done: 
+					cssClasses += "o_lp_in_progress";
+					break;
+				default:
+				}
+			}			
 		}
 		
-		AssessmentEntryStatus status = assessmentEvaluation.getAssessmentStatus();
-		if (status != null) {
-			switch(status) {
-			case notReady: return "o_lp_not_accessible";
-			case notStarted: return "o_lp_ready";
-			case inProgress: return "o_lp_in_progress";
-			case inReview: return "o_lp_in_progress";
-			case done: return "o_lp_in_progress";
-			default:
-			}
+		if (sequenceConfig.isInSequence()) {
+			// nodes that take part in a linear sequence
+			cssClasses += " o_lp_in_sequence";			
+		} else {
+			// nodes that can be accessed in free order
+			cssClasses += " o_lp_not_in_sequence";			
 		}
-		return null;
+		// marker for nodes that contains sequenced children
+		if (sequenceConfig.hasSequentialChildren()) {
+			cssClasses += " o_lp_contains_sequence";
+		} else {
+			cssClasses += " o_lp_contains_no_sequence";
+		}	
+		
+		
+		
+		
+		return cssClasses;
 	}
 
 }

src/main/webapp/static/themes/light/_config.scss

@@ -369,8 +369,8 @@ $o-lp-in-progress				: $o-lp-ready !default;
 $o-lp-done						: $state-success-text !default;
 $o-lp-default					: #888 !default;
 $o-lp-border					: 1px solid $navbar-default-border;
-$o-lp-bg						: rgba(0,0,0,0.02);	
-$o-lp-step-top					: floor($o-tree-font-size / 2) + 10px; // + padding from span
+$o-lp-bg						: rgba(0,0,0,0.025);	
+$o-lp-step-top					: 13px;
 $o-lp-step-size					: 12px;
 $o-lp-path-width				: 2px;
 $o-lp-left						: 3px;

src/main/webapp/static/themes/light/modules/_course.scss

@@ -51,7 +51,7 @@
 	
 	/* Add box and alpha transparent backgrounds to visualize menu level */
 	border: $o-lp-border;	
-	ul {
+	li.children_visible {
 		background: $o-lp-bg;	
 	}
 	
@@ -63,15 +63,15 @@
 		&:before {
 			content: ' ';
 			position: absolute;
-			top: $o-lp-step-top + $o-lp-step-size - 1px;
+			top: $o-lp-step-top + $o-lp-step-size;
 			left: $o-lp-left + (($o-lp-step-size - $o-lp-path-width) / 2);
-			height: (($o-lp-step-top - $o-lp-path-width) * 2);
+			height: (($o-tree-padding-vertical * 2 + $line-height-computed) - $o-lp-step-size + 1px);
 			width: $o-lp-path-width;
 		}	
 		/* step indicator */
 		&:after {
 			position: absolute;
-			top: ($o-lp-step-top - 1px); 
+			top: ($o-lp-step-top); 
 			left: $o-lp-left;
 			height: $o-lp-step-size;
 			width: $o-lp-step-size;
@@ -113,6 +113,13 @@
 		border: none;
 	}
 	
+	/* Nodes that are not in a sequence have different path rendering */
+	li.o_lp_not_in_sequence:not(:last-child):before,
+	li.o_lp_contains_no_sequence.children_visible:before,
+	li.o_lp_contains_no_sequence.children_visible li.o_lp_not_in_sequence:before{
+	 	border-left: $o-lp-path-width solid $o-lp-default; 
+	}
+	
 }
 
 .o_lp_identity {

src/main/webapp/static/themes/light/modules/_tree.scss

@@ -59,7 +59,6 @@
 		
 		li div {
 				position: relative;
-				margin-bottom: -1px;
 				border-bottom: 1px solid $o-tree-border-color;
 		}