OO-369 style bread crumb, add back button

src/main/java/org/olat/core/gui/components/stack/StackedControllerImpl.java

@@ -43,6 +43,7 @@ public class StackedControllerImpl extends DefaultController implements StackedC
 	
 	private final List<Link> stack = new ArrayList<Link>(3);
 	private final VelocityContainer mainVC;
+	private final Link backLink;
 	
 	public StackedControllerImpl(WindowControl wControl, Translator trans, String mainCssClass) {
 		super(wControl);
@@ -53,6 +54,12 @@ public class StackedControllerImpl extends DefaultController implements StackedC
 		if(StringHelper.containsNonWhitespace(mainCssClass)) {
 			mainVC.contextPut("mainCssClass", mainCssClass);
 		}
+		// Add back link before the bread crumbs, when pressed delegates click to current bread-crumb - 1
+		backLink = LinkFactory.createCustomLink("back", "back", null, Link.NONTRANSLATED + Link.LINK_CUSTOM_CSS, mainVC, this);
+		backLink.setCustomEnabledLinkCSS("b_breadcumb_back");
+		backLink.setCustomDisplayText("\u25C4"); // unicode back arrow (black left pointer symbol)
+		backLink.setTitle(trans.translate("back"));
+		
 		setInitialComponent(mainVC);
 	}
 	
@@ -93,6 +100,14 @@ public class StackedControllerImpl extends DefaultController implements StackedC
 
 	@Override
 	protected void event(UserRequest ureq, Component source, Event event) {
+		if (source.equals(backLink)) {
+			if (stack.size() > 1) {
+				// back means to one level down, change source to the stack item one below current
+				source = stack.get(stack.size()-2);
+				// now continue as if user manually pressed a stack item in the list
+			}
+		}
+		
 		if(stack.contains(source)) {
 			int index = stack.indexOf(source);
 			if(index < (stack.size() - 1)) {

src/main/java/org/olat/core/gui/components/stack/_content/stack.html

@@ -2,6 +2,11 @@
 	<div id="b_main_toolbar" class="b_clearfix #if($mainCssClass) $mainCssClass #end">
 		<div class="b_breadcumb_path">
 			<ul>
+				#if ($breadCrumbs.size() > 1)
+				<li class="b_breadcumb_back">
+					$r.render('back')
+				</li>	
+				#end
 				#foreach ($crumb in $breadCrumbs)
 					<li class="#if ($velocityCount==1) b_first #end #if ($velocityCount==$breadCrumbs.size()) b_last #end">
 						<span>$r.render($crumb.getCommand())</span>

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

@@ -45,16 +45,24 @@ body {
 }
 #b_page_wrapper {
 //	@include o-border-radius(6px);
-	border-bottom: 1px solid lightGrey;
 }
 
 #b_main_toolbar {
 	clear: both;
-	height: 20px;
-	padding: 4px 0 1px 3px;
-	margin: 0 0 1px 0; 
-	background-color: #fefefe;
-	//@include o-box-shadow(0,0,3px,#D3D3D3);
+	height: $tool_bar_height;
+	line-height: $tool_bar_height;
+	vertical-align: middle;
+	margin: 0; 
+	padding: 1px 0 0 0;
+	border-bottom: 1px solid $tool_bar_border;
+	background-color: $tool_bar_bg;
+	@include o-box-shadow(0,0,14px,$main_shadow_color);
+	
+	ul li a {
+		span {
+			line-height: $tool_bar_height;		
+		}
+	}
 }
 
 $mainMinHeight: 550px;
@@ -62,8 +70,9 @@ $mainMinHeight: 550px;
 	background:#fff;
 	min-height: $mainMinHeight; /* min height, should prevent "flashing" of OO sky-banner on slow connections */
 	clear:both;
-	@include o-box-shadow(0,0,14px,#D3D3D3);
+	@include o-box-shadow(0,2px,14px,$main_shadow_color);
 }
+
 #b_page{
 
 	// the "to-top"-link
@@ -336,17 +345,76 @@ div.b_menu_toolbar {
 	
 /* breadcrumbs */
 div.b_breadcumb {}
+
 div.b_breadcumb_path { 
-	padding: 0; margin: 0; float:left; display: inline;
+	padding: 0; 
+	margin: 0; 
+	float:left; display: inline;
 	ul { 
-		padding: 0; margin: 0; list-style: none; float:left;  display: inline; 
-		li { padding: 0 7px 0 14px; margin: 0; list-style: none; float:left;  display: inline; background: url(../openolat/images/breadcrumb-separator.png) no-repeat left center; }
-		li.b_first { background: url(../openolat/images/home.png) no-repeat top left; padding-left: 25px; }
-		li a { color: #464444; }
-		li span.b_disabled { color: #000; padding: 0 10px 0 0; margin: 0; }
+		padding: 0; 
+		margin: 0; 
+		list-style: none; 
+		float:left;  display: inline; 
+		li { 
+			padding: 0 7px 0 14px; 
+			margin: 0;
+			list-style: none; 
+			float:left;	display: inline; 
+			background: url(../openolat/images/breadcrumb-separator.png) no-repeat left 50%; 
+		}
+		li.b_first { 
+			background: url(../openolat/images/home.png) no-repeat 5px 50%; 
+			padding-left: 25px; 
+		}
+		li a { 
+			color: #464444;
+		}
+		li span.b_disabled { 
+			color: #000; 
+			padding: 0 10px 0 0; 
+			margin: 0; 
+		}
 	}
 }
-div.b_breadcumb_content { clear: both;  margin-top: 0.5em; padding-top: 0.5em; border-top: 1px solid #ACAAAA;}
+
+/* normal breadcrumb styles */
+div.b_breadcumb div.b_breadcumb_path {}
+
+/* toolbar breadcrumb specific styles */
+#b_main_toolbar div.b_breadcumb_path { 
+	ul { 
+		a {
+			color: $tool_bar_color;
+			font-weight: bold;
+			&:hover {
+				color: $tool_bar_hover;
+				text-decoration: none;
+			}
+		}
+		
+		li.b_breadcumb_back {
+			background: transparent;
+			padding: 0 7px 0 7px; 
+			margin: 0 2px 0 0;
+			border-right: 1px solid $tool_bar_border;
+			a {
+				font-type: Arial; /* for special arrow key */
+				color: $tool_bar_color;
+				font-weight: normal;
+				&:hover {
+					color: $tool_bar_hover;
+				}
+			}
+		}
+	}
+}
+
+div.b_breadcumb_content { 
+	clear: both;  
+	margin-top: 0.5em; 
+	padding-top: 0.5em; 
+	border-top: 1px solid #ACAAAA;
+}
 
 /* --------------- TOOLBAR ------------ */
 

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

@@ -35,6 +35,16 @@ $fullScreenModalMarginPercents: 2% !default;
 
 /* top navigation */
 $top_nav_line_height : 1.5em !default;
+$top_nav_active_tabs_bg : #fff !default;
+
+/* toolbar with breadcrumb */
+$tool_bar_height : 24px !default;
+$tool_bar_bg : $top_nav_active_tabs_bg !default;
+$tool_bar_border : $basegray_ultra_light !default;
+$tool_bar_color : #2D2E2D !default;
+$tool_bar_hover : #585A58 !default;
+
+$main_shadow_color : #D3D3D3 !default;
 
 /* menu navigation */
 $tree_level_margin : 1em !default;
@@ -65,9 +75,9 @@ $enablebiz : false !default;
 
 /* defines the body-background */
 @mixin bodybg(){
-	background: #ECECEC url('../openolat/images/sky.png') repeat-x left 88px;
+	background: #ECECEC url('../openolat/images/sky.png') repeat-x left 81px;
 	
 	@if $enablebiz == true {
-		background: #ECECEC url('../openolat/images/sky.png') repeat-x left 175px;
+		background: #ECECEC url('../openolat/images/sky.png') repeat-x left 179px;
 	}
 }
\ No newline at end of file

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

@@ -24,7 +24,7 @@ div.b_selectiontree {
 }
 /* --- BREADCRUMBS ---- */
 
-div.o_course_breadcumbs div.b_breadcumb_path ul li.b_first {
+#b_main_toolbar.o_course_breadcumbs div.b_breadcumb_path ul li.b_first {
 	background-image: url(../openolat/images/le_resources/book-open-text-image.png);
 }
 /* --- MODULES: SINGLEPAGE ---- */

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

@@ -50,7 +50,7 @@
 				&.b_nav_active,&:hover,&.b_exception {
 					a.b_nav_tab_close { background-image: url(../openolat/images/cross_small_trimmed_blue.png); }
 					@include o-box-shadow(0, -4px,8px -1px, #d3d3d3);
-					background:#fff;
+					background:$top_nav_active_tabs_bg;
 				}
 				&.b_nav_active a {
 				}
@@ -90,7 +90,7 @@
 				&.b_nav_active,&:hover {
 					a.b_nav_tab_close { background-image: url(../openolat/images/cross_small_trimmed_blue.png); }
 					@include o-box-shadow(0, -4px,8px -1px, #d3d3d3);
-					background:#fff;
+					background:$top_nav_active_tabs_bg;
 				}
 				&.b_nav_active a {
 				}