OO-4361 First draft of learning path menu tree

src/main/resources/serviceconfig/olat.properties

@@ -1255,8 +1255,8 @@ ldap.learningResourceManagerRoleValue=
 # Build properties
 #####
 application.name=OpenOlat
-build.version=14.2a
-build.identifier=openolat142a-dev
+build.version=15.0a
+build.identifier=openolat150a-dev
 build.repo.revision=local-devel
 
 #####

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

@@ -362,10 +362,19 @@ $o-course-node-warning			: $state-warning-text !default;
 $o-course-node-locked			: $state-info-text !default;
 $o-course-node-error			: $state-danger-text !default;
 $o-course-node-deleted			: $badge-bg !default;
-$o-lp-not-accessible			: $state-danger-text !default;
+/* Learning path */
+$o-lp-not-accessible			: lighten($text-muted,10%) !default;
 $o-lp-ready						: #FCCA46 !default; /* yellow */
 $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-step-size					: 12px;
+$o-lp-path-width				: 2px;
+$o-lp-left						: 3px;
+
 
 /* Curriculum */
 /* Basic rendering configuration */

src/main/webapp/static/themes/light/email.css.map

 {
 "version": 3,
-"mappings": "AAkBA,aAAc,CACb,WAAW,CC40Be,wGAA8G,CD30BxI,SAAS,CC40BgB,KAAK,CD10B9B,8BAAiB,CAChB,MAAM,CC00BsB,aAAc,CDz0B1C,YAAY,CC00BoB,IAAI,CDx0BpC,iCAAG,CACF,gBAAgB,CC80BK,OAAe,CD70BpC,KAAK,CC40BkB,IAAkB,CD30BzC,OAAO,CAAE,gBAAyC,CAClD,aAAa,CAAE,IAAI,CACnB,WAAW,CAAE,KAA8B,CAC3C,SAAS,CAAE,OAAO,CAGnB,qCAAO,CACN,KAAK,CCq0BgB,OAAe,CDl0BtC,6BAAgB,CACf,SAAS,CAAE,OAAO,CAClB,KAAK,CC6zBqB,IAAgB,CD5zB1C,UAAU,CAAE,iBAAmC,CAC/C,OAAO,CAAE,QAAQ,CACjB,UAAU,CAAE,GAAG,CAEf,+BAAE,CACD,KAAK,CCuzBoB,IAAgB,CDhzB3C,6BAAc,CACb,WAAW,CAAE,OAAO,CAWrB,6BAAgB,CACf,KAAK,CCqyBmB,IAAkB,CDpyB1C,gBAAgB,CCqyBM,OAAe,CDpyBrC,YAAY,CCqyBiB,OAAmB,CDpyBhD,aAAa,CCqyBiB,GAAG,CDpyBjC,OAAO,CAAE,QAAQ,CACjB,UAAU,CAAE,MAAM,CAClB,WAAW,CAAE,MAAM,CACnB,cAAc,CAAE,MAAM,CACtB,YAAY,CAAE,YAAY,CAC1B,MAAM,CAAE,OAAO,CACf,eAAe,CAAE,IAAI,CAGtB,mCAAsB,CACrB,UAAU,CAAE,GAAG,CACf,aAAa,CAAE,GAAG,CAClB,UAAU,CAAE,MAAM,CAElB,qCAAE,CACD,YAAY,CAAE,GAAG,CACjB,aAAa,CAAE,KAAK,CACpB,WAAW,CAAE,IAAI,CACjB,gDAAa,CACZ,YAAY,CAAE,CAAC,CAMlB,wCAA2B,CAC1B,UAAU,CAAE,IAAI,CAEjB,yCAA4B,CAC3B,UAAU,CAAE,KAAK",
+"mappings": "AAkBA,aAAc,CACb,WAAW,CCq1Be,wGAA8G,CDp1BxI,SAAS,CCq1BgB,KAAK,CDn1B9B,8BAAiB,CAChB,MAAM,CCm1BsB,aAAc,CDl1B1C,YAAY,CCm1BoB,IAAI,CDj1BpC,iCAAG,CACF,gBAAgB,CCu1BK,OAAe,CDt1BpC,KAAK,CCq1BkB,IAAkB,CDp1BzC,OAAO,CAAE,gBAAyC,CAClD,aAAa,CAAE,IAAI,CACnB,WAAW,CAAE,KAA8B,CAC3C,SAAS,CAAE,OAAO,CAGnB,qCAAO,CACN,KAAK,CC80BgB,OAAe,CD30BtC,6BAAgB,CACf,SAAS,CAAE,OAAO,CAClB,KAAK,CCs0BqB,IAAgB,CDr0B1C,UAAU,CAAE,iBAAmC,CAC/C,OAAO,CAAE,QAAQ,CACjB,UAAU,CAAE,GAAG,CAEf,+BAAE,CACD,KAAK,CCg0BoB,IAAgB,CDzzB3C,6BAAc,CACb,WAAW,CAAE,OAAO,CAWrB,6BAAgB,CACf,KAAK,CC8yBmB,IAAkB,CD7yB1C,gBAAgB,CC8yBM,OAAe,CD7yBrC,YAAY,CC8yBiB,OAAmB,CD7yBhD,aAAa,CC8yBiB,GAAG,CD7yBjC,OAAO,CAAE,QAAQ,CACjB,UAAU,CAAE,MAAM,CAClB,WAAW,CAAE,MAAM,CACnB,cAAc,CAAE,MAAM,CACtB,YAAY,CAAE,YAAY,CAC1B,MAAM,CAAE,OAAO,CACf,eAAe,CAAE,IAAI,CAGtB,mCAAsB,CACrB,UAAU,CAAE,GAAG,CACf,aAAa,CAAE,GAAG,CAClB,UAAU,CAAE,MAAM,CAElB,qCAAE,CACD,YAAY,CAAE,GAAG,CACjB,aAAa,CAAE,KAAK,CACpB,WAAW,CAAE,IAAI,CACjB,gDAAa,CACZ,YAAY,CAAE,CAAC,CAMlB,wCAA2B,CAC1B,UAAU,CAAE,IAAI,CAEjB,yCAA4B,CAC3B,UAAU,CAAE,KAAK",
 "sources": ["email.scss","_config.scss"],
 "names": [],
 "file": "email.css"

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

@@ -17,33 +17,107 @@
 	}
 }
 
+/* learning path tree rendering */
 .o_lp_tree.o_tree {
-	border: none;
-	
+
+	/* RESET default tree style */
 	ul li div {
 		border-bottom: none;
 	}
+	/* No hover effects  */
+	.o_tree_link:last-child:hover, 
+	.o_tree_link:last-child:focus {
+		background-color: transparent;
+	}	
+	/* Opener more right than default to make room for path */	
+	@for $i from 0 through 11 {
+		li div a.o_tree_oc_l#{$i}  { 
+			left: $o-tree-padding-opener-left-px + $o-tree-padding-horizontal_root_visible + (( $i - 1) * $o-tree-padding-steps-px) + $o-lp-step-size; 
+		}
+		li div span.o_tree_l#{$i}  {
+			padding: $o-tree-padding-vertical 2px $o-tree-padding-vertical $o-tree-padding-left-steps-px;
+			margin-left: $o-tree-padding-horizontal_root_visible + ($i * $o-tree-padding-steps-px) + $o-lp-step-size;
+			z-index:9; 
+		}
+	}
+		
+	/* No icons 	*/
+	// TOOD: should not be in the model depending on the course config
+	.o_tree_link > a > i.o_icon {
+	 	display: none;
+	}
+	
+	/* Add box and alpha transparent backgrounds to visualize menu level */
+	border: $o-lp-border;	
+	ul {
+		background: $o-lp-bg;	
+	}
 	
-	span.o_tree_link {
-		border-left: 2px solid;
+	/* Path is rendered for each list element. It consists of a path indicator and the step indicator.
+	 * The step indicator is an icon that represents the status of the step */
+	li {
+		position: relative;
+		/* path indicator */
+		&:before {
+			content: ' ';
+			position: absolute;
+			top: $o-lp-step-top + $o-lp-step-size - 1px;
+			left: $o-lp-left + (($o-lp-step-size - $o-lp-path-width) / 2);
+			height: (($o-lp-step-top - $o-lp-path-width) * 2);
+			width: $o-lp-path-width;
+		}	
+		/* step indicator */
+		&:after {
+			position: absolute;
+			top: ($o-lp-step-top - 1px); 
+			left: $o-lp-left;
+			height: $o-lp-step-size;
+			width: $o-lp-step-size;
+			@include o-make-icon(); 
+		}
 	}	
-	li.o_lp_not_accessible > div > span.o_tree_link {
-		border-color: $o-lp-not-accessible;
+	/* Path stops on last element */
+	ul.o_tree_l1 > li:last-child:before {
+		border: none;
 	}
-	li.o_lp_ready > div > span.o_tree_link {
-		border-color: $o-lp-ready;
+
+	/* Create the path renderings for each status with this mixin */
+	@mixin alert-tree-path-variant($iconcolor, $icon, $strokecolor, $stroke) {
+		&:before {
+			border-left: $o-lp-path-width $stroke $strokecolor;
+		}	
+		&:after {
+			content: $icon;
+			color: $iconcolor;		
+		}
 	}
-	li.o_lp_in_progress > div > span.o_tree_link {
-		border-color: $o-lp-in-progress;
+	
+	/* Learning path status default */
+	li {
+		@include alert-tree-path-variant($o-lp-default, $fa-var-circle-o, $o-lp-default, solid);
 	}
-	li.o_lp_done > div > span.o_tree_link {
-		border-color: $o-lp-done;
+	/* learning path status specific coloring */
+	li.o_lp_not_accessible {
+		@include alert-tree-path-variant($o-lp-not-accessible, $fa-var-ban, $o-lp-not-accessible, dotted);
 	}
+	li.o_lp_ready {
+		@include alert-tree-path-variant($o-lp-ready, $fa-var-circle-o, $o-lp-not-accessible, dotted);
+	}
+	li.o_lp_in_progress {
+		@include alert-tree-path-variant($o-lp-in-progress, $fa-var-play-circle-o, $o-lp-in-progress, solid);
+	}
+	li.o_lp_done {
+		@include alert-tree-path-variant($o-lp-done, $fa-var-check-circle, $o-lp-done, solid);
+	}
+	
 
+	/* Status icons as menu decorators 
 	i.o_lp_not_accessible { color: $o-lp-not-accessible; }
 	i.o_lp_ready          { color: $o-lp-ready; }
 	i.o_lp_in_progress    { color: $o-lp-in-progress; }
 	i.o_lp_done           { color: $o-lp-done; }
+	*/	
+
 }
 
 

src/main/webapp/static/themes/openolat/email.css.map

 {
 "version": 3,
-"mappings": "AAkBA,aAAc,CACb,WAAW,CC40Be,wGAA8G,CD30BxI,SAAS,CC40BgB,KAAK,CD10B9B,8BAAiB,CAChB,MAAM,CC00BsB,aAAc,CDz0B1C,YAAY,CC00BoB,IAAI,CDx0BpC,iCAAG,CACF,gBAAgB,CC80BK,OAAe,CD70BpC,KAAK,CC40BkB,IAAkB,CD30BzC,OAAO,CAAE,gBAAyC,CAClD,aAAa,CAAE,IAAI,CACnB,WAAW,CAAE,KAA8B,CAC3C,SAAS,CAAE,OAAO,CAGnB,qCAAO,CACN,KAAK,CCq0BgB,OAAe,CDl0BtC,6BAAgB,CACf,SAAS,CAAE,OAAO,CAClB,KAAK,CC6zBqB,IAAgB,CD5zB1C,UAAU,CAAE,iBAAmC,CAC/C,OAAO,CAAE,QAAQ,CACjB,UAAU,CAAE,GAAG,CAEf,+BAAE,CACD,KAAK,CCuzBoB,IAAgB,CDhzB3C,6BAAc,CACb,WAAW,CAAE,OAAO,CAWrB,6BAAgB,CACf,KAAK,CCqyBmB,IAAkB,CDpyB1C,gBAAgB,CCqyBM,OAAe,CDpyBrC,YAAY,CCqyBiB,OAAmB,CDpyBhD,aAAa,CCqyBiB,GAAG,CDpyBjC,OAAO,CAAE,QAAQ,CACjB,UAAU,CAAE,MAAM,CAClB,WAAW,CAAE,MAAM,CACnB,cAAc,CAAE,MAAM,CACtB,YAAY,CAAE,YAAY,CAC1B,MAAM,CAAE,OAAO,CACf,eAAe,CAAE,IAAI,CAGtB,mCAAsB,CACrB,UAAU,CAAE,GAAG,CACf,aAAa,CAAE,GAAG,CAClB,UAAU,CAAE,MAAM,CAElB,qCAAE,CACD,YAAY,CAAE,GAAG,CACjB,aAAa,CAAE,KAAK,CACpB,WAAW,CAAE,IAAI,CACjB,gDAAa,CACZ,YAAY,CAAE,CAAC,CAMlB,wCAA2B,CAC1B,UAAU,CAAE,IAAI,CAEjB,yCAA4B,CAC3B,UAAU,CAAE,KAAK",
+"mappings": "AAkBA,aAAc,CACb,WAAW,CCq1Be,wGAA8G,CDp1BxI,SAAS,CCq1BgB,KAAK,CDn1B9B,8BAAiB,CAChB,MAAM,CCm1BsB,aAAc,CDl1B1C,YAAY,CCm1BoB,IAAI,CDj1BpC,iCAAG,CACF,gBAAgB,CCu1BK,OAAe,CDt1BpC,KAAK,CCq1BkB,IAAkB,CDp1BzC,OAAO,CAAE,gBAAyC,CAClD,aAAa,CAAE,IAAI,CACnB,WAAW,CAAE,KAA8B,CAC3C,SAAS,CAAE,OAAO,CAGnB,qCAAO,CACN,KAAK,CC80BgB,OAAe,CD30BtC,6BAAgB,CACf,SAAS,CAAE,OAAO,CAClB,KAAK,CCs0BqB,IAAgB,CDr0B1C,UAAU,CAAE,iBAAmC,CAC/C,OAAO,CAAE,QAAQ,CACjB,UAAU,CAAE,GAAG,CAEf,+BAAE,CACD,KAAK,CCg0BoB,IAAgB,CDzzB3C,6BAAc,CACb,WAAW,CAAE,OAAO,CAWrB,6BAAgB,CACf,KAAK,CC8yBmB,IAAkB,CD7yB1C,gBAAgB,CC8yBM,OAAe,CD7yBrC,YAAY,CC8yBiB,OAAmB,CD7yBhD,aAAa,CC8yBiB,GAAG,CD7yBjC,OAAO,CAAE,QAAQ,CACjB,UAAU,CAAE,MAAM,CAClB,WAAW,CAAE,MAAM,CACnB,cAAc,CAAE,MAAM,CACtB,YAAY,CAAE,YAAY,CAC1B,MAAM,CAAE,OAAO,CACf,eAAe,CAAE,IAAI,CAGtB,mCAAsB,CACrB,UAAU,CAAE,GAAG,CACf,aAAa,CAAE,GAAG,CAClB,UAAU,CAAE,MAAM,CAElB,qCAAE,CACD,YAAY,CAAE,GAAG,CACjB,aAAa,CAAE,KAAK,CACpB,WAAW,CAAE,IAAI,CACjB,gDAAa,CACZ,YAAY,CAAE,CAAC,CAMlB,wCAA2B,CAC1B,UAAU,CAAE,IAAI,CAEjB,yCAA4B,CAC3B,UAAU,CAAE,KAAK",
 "sources": ["../light/email.scss","../light/_config.scss"],
 "names": [],
 "file": "email.css"