OO-1155 style prev/next buttons

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

@@ -133,7 +133,7 @@ public class TooledStackedPanel extends BreadcrumbedStackedPanel implements Stac
 		}
 		currentTools.addAll(getCurrentCrumb().getTools());
 		if(isShowCloseLink()) {
-			currentTools.add(new Tool(getCloseLink(), Align.right, false, null));
+			currentTools.add(new Tool(getCloseLink(), Align.rightEdge, false, null));
 		}
 		return currentTools;
 	}
@@ -198,6 +198,7 @@ public class TooledStackedPanel extends BreadcrumbedStackedPanel implements Stac
 	
 	public enum Align {
 		left,
-		right
+		right,
+		rightEdge
 	}
 }
\ No newline at end of file

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

@@ -88,6 +88,13 @@ public class TooledStackedPanelRenderer extends DefaultComponentRenderer {
 				sb.append("</ul>");
 			}
 			
+			List<Tool> rightEdgeTools = getTools(tools, Align.rightEdge);
+			if(rightEdgeTools.size() > 0) {
+				sb.append("<ul class='o_tools o_tools_right_edge list-inline'>");
+				renderTools(rightEdgeTools, renderer, sb, args);
+				sb.append("</ul>");
+			}
+			
 			List<Tool> rightTools = getTools(tools, Align.right);
 			if(rightTools.size() > 0) {
 				sb.append("<ul class='o_tools o_tools_right list-inline'>");

src/main/java/org/olat/course/run/RunMainController.java

@@ -1470,10 +1470,12 @@ public class RunMainController extends MainLayoutBasicController implements Gene
 		}
 		
 		// new toolbox 'general'
-		previousLink = LinkFactory.createToolLink("previouselement",translate("command.previous"), this, "o_icon_previous");
-		toolbarPanel.addTool(previousLink, Align.right);
-		nextLink = LinkFactory.createToolLink("nextelement",translate("command.next"), this, "o_icon_next");
-		toolbarPanel.addTool(nextLink, Align.right);
+		previousLink = LinkFactory.createToolLink("previouselement","", this, "o_icon_previous_toolbar");
+		previousLink.setTitle(translate("command.previous"));
+		toolbarPanel.addTool(previousLink, Align.rightEdge, false, "o_tool_previous");
+		nextLink = LinkFactory.createToolLink("nextelement","", this, "o_icon_next_toolbar");
+		nextLink.setTitle(translate("command.next"));
+		toolbarPanel.addTool(nextLink, Align.rightEdge, false, "o_tool_next");
 		updateNextPrevious();
 	}
 

src/main/java/org/olat/course/run/_i18n/LocalStrings_de.properties

@@ -15,7 +15,7 @@ command.glossary.off=aus
 command.glossary.off.alt=Glossarbegriffe von Lerninhalt ausblenden
 command.glossary.on=ein
 command.glossary.on.alt=Glossarbegriffe in Lerninhalt einblenden
-command.next=Weiter
+command.next=Weiter zur nchsten Seite
 command.openarchiver=Datenarchivierung
 command.openassessment=Bewertungswerkzeug
 command.opendb=Kurs DB
@@ -27,7 +27,7 @@ command.openstatistic=Kurs Statistiken
 command.openteststatistic=Test Statistiken
 command.opensurveystatistic=Fragebogen Statistiken
 command.personalnote=Notizen
-command.previous=Zur\u00FCck
+command.previous=Zur\u00FCck zur letzten Seite
 command.run=Kurs
 command.settings=Lernressource Einstellungen
 course.closed = Dieser Kurs wurde beendet und wird nicht l\u00e4nger bearbeitet oder aktualisiert.

src/main/java/org/olat/course/run/_i18n/LocalStrings_en.properties

@@ -15,7 +15,7 @@ command.glossary.off=off
 command.glossary.off.alt=Hide glossary terms of learning content
 command.glossary.on=on
 command.glossary.on.alt=Show glossary terms in learning content
-command.next=Next
+command.next=Go to next page
 command.openarchiver=Archive tool
 command.openassessment=Assessment tool
 command.opendb=Course DB
@@ -27,7 +27,7 @@ command.openrightmngt=Rights management
 command.opensimplegroupmngt=Members management
 command.openstatistic=Course statistics
 command.personalnote=Notes
-command.previous=Back
+command.previous=Go to previous page
 command.settings=Learning resource settings
 course.closed=This course is closed and can therefore no longer be edited or updated.
 course.disposed.command.restart=Close course and restart

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

@@ -102,8 +102,9 @@ $o-offcanvas-link-hover-color 	: $navbar-inverse-link-hover-color;
 $o-toolbar-bg-color				: $navbar-default-bg !default;
 $o-toolbar-border-color			: $navbar-default-border !default;
 $o-toolbar-border-radius		: $navbar-border-radius !default;
-$o-tooblar-link-color			: $navbar-default-link-color !default;
-$o-tooblar-link-hover-color		: $navbar-default-link-hover-color !default;
+$o-toolbar-link-color			: $navbar-default-link-color !default;
+$o-toolbar-link-hover-color		: $navbar-default-link-hover-color !default;
+$o-toolbar-link-disabled-color		: lighten($navbar-default-link-color, 20%) !default;
 $o-toolbar-size-icon-md 		: ceil($font-size-base * 1.25) !default;
 $o-toolbar-size-text-md 		: ceil($font-size-base * 0.85) !default;
 $o-toolbar-size-caret-md 		: $font-size-base !default;
@@ -126,6 +127,15 @@ $o-toolbar-close-color				: $brand-danger !default;
 $o-toolbar-breadcrumb-bg-color		: $panel-default-heading-bg !default;
 $o-toolbar-breadcrumb-font-size 	: ceil(($font-size-base * 0.75)) !default;
 $o-toolbar-breadcrumb-line-height	: floor(($o-toolbar-breadcrumb-font-size * $line-height-base)) !default;
+$o-toolbar-nav-link-color			: $o-toolbar-link-color !default; 
+$o-toolbar-nav-link-hover-color		: $o-toolbar-link-hover-color !default; 
+$o-toolbar-nav-link-disabled-color	: $o-toolbar-link-disabled-color !default; 
+$o-toolbar-nav-bg-color				: $gray-lighter !default;
+$o-toolbar-nav-border-color			: $btn-default-border !default; 
+$o-toolbar-nav-border-radius		: 4px !default; 
+$o-toolbar-nav-size-icon-md 		: ceil($font-size-base * 1.5) !default;
+$o-toolbar-nav-size-icon-sm 		: ceil($font-size-base * 1.25) !default;
+$o-toolbar-nav-size-icon-xs 		: ceil($font-size-base * 1.4) !default;
 
 /* Left side menu tree */
 $o-tree-bg						: none !default;
@@ -164,9 +174,9 @@ $o-autocomplete-suggestion-color 	: $btn-primary-color !default;
 $o-autocomplete-suggestion-bg-color	: $btn-primary-bg !default;
 
 /* Chart library configuration for visualized statistics */
-$o-d3chart-default 				: $brand-primary;
-$o-d3chart-light 				: lighten($brand-primary, 15%);
-$o-d3chart-dark 				: darken($brand-primary, 15%);
+$o-d3chart-default 				: $brand-primary !default;
+$o-d3chart-light 				: lighten($brand-primary, 15%) !default;
+$o-d3chart-dark 				: darken($brand-primary, 15%) !default;
 
 /* Toggle sliders */
 $o-toggle-size					: 16px !default;

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

@@ -131,8 +131,9 @@ $fa-css-prefix: "o_icon" !default;
 .o_icon_new_document:before { content: $fa-var-file-text; }
 .o_icon_new_folder:before { content: $fa-var-folder;}
 .o_icon_news:before { content: $fa-var-info-circle; }
-.o_icon_next:before { content: $fa-var-arrow-circle-right; }
+.o_icon_next:before { content: $fa-var-chevron-circle-right; }
 .o_icon_next_page:before { content: $fa-var-angle-double-right; }
+.o_icon_next_toolbar:before { content: $fa-var-caret-right; }
 .o_icon_notes:before { content: $fa-var-pencil; }
 .o_icon_notification:before { content: $fa-var-rss;}
 .o_icon_open_tree:before { content: $fa-var-caret-right;}
@@ -143,8 +144,9 @@ $fa-css-prefix: "o_icon" !default;
 .o_icon_phone:before { content: $fa-var-phone;}
 .o_icon_post:before { content: $fa-var-comment-o; }
 .o_icon_preview:before { content: $fa-var-eye;}
-.o_icon_previous:before { content: $fa-var-arrow-circle-left; }
+.o_icon_previous:before { content: $fa-var-chevron-circle-left; }
 .o_icon_previous_page:before { content: $fa-var-angle-double-left; }
+.o_icon_previous_toolbar:before { content: $fa-var-caret-left; }
 .o_icon_print:before { content: $fa-var-print;}
 .o_icon_private:before { content: $fa-var-print;}
 .o_icon_provider_guest:before { content: $fa-var-child;}

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

@@ -44,12 +44,19 @@
 
 		a {
 			// Following rules copied from .navbar-link;
-	   	 	color: $o-tooblar-link-color;
-	    	&:hover {
-	      		color: $o-tooblar-link-hover-color;
+	   	 	color: $o-toolbar-link-color;
+	    	&:hover { 
+	      		color: $o-toolbar-link-hover-color;
 	    	}
 	    	@extend %o_undecorated;
 	    	display: inline-block;
+	    	
+	    	&.o_disabled {
+		    	color: $o-toolbar-link-disabled-color !important;
+		    	&:hover {
+		      		color: $o-toolbar-link-disabled-color !important;
+		    	}
+	    	}
 	    }
 
 	}
@@ -102,8 +109,7 @@
 			}
 		}
 	}
-		
-		
+			
 	.o_tools {
 		margin-top: $o-toolbar-tools-margin-top-md;
 		margin-bottom: $o-toolbar-tools-margin-bottom-md;
@@ -162,6 +168,51 @@
 			vertical-align: top;
 		}
 	}
+	
+	.o_tool_next, .o_tool_previous {
+		padding: 0;
+		margin-top: floor($o-toolbar-nav-size-icon-md / 4);
+		border: 1px solid $o-toolbar-nav-border-color;
+		background-color: $o-toolbar-nav-bg-color;
+		a {
+			color: $o-toolbar-nav-link-color;
+			&:hover {
+				color: $o-toolbar-nav-link-hover-color;			
+			}
+
+			&.o_disabled {
+		    	color: $o-toolbar-nav-link-disabled-color !important;
+		    	&:hover {
+		      		color: $o-toolbar-nav-link-disabled-color !important;
+		    	}
+	    	}
+			
+		}
+		i {
+			font-size: $o-toolbar-nav-size-icon-md;
+		}
+		@media (min-width: $screen-xs-max) and (max-width: $screen-sm-max) { 
+			margin-top: floor($o-toolbar-nav-size-icon-sm / 4);
+			i {
+				font-size: $o-toolbar-nav-size-icon-sm;
+			}
+		}
+		@media (max-width: $screen-xs-max) { 
+			margin-top: 0;
+			i {
+				font-size: $o-toolbar-nav-size-icon-xs;
+			}
+		}
+	}
+	.o_tool_previous {
+		margin-left: 10px;
+		@include border-left-radius($o-toolbar-nav-border-radius);
+		border-right: 0;
+	}
+	.o_tool_next {
+		@include border-right-radius($o-toolbar-nav-border-radius);
+	}
+	
 				
 	.o_tool_dropdown {
 		position: relative;
@@ -213,6 +264,10 @@
 	.o_tools_right {
 		float: right;
 	}
+	.o_tools_right_edge {
+		// at the right edge of the toolbar, even on small screens
+		float: right;
+	}
 	.o_tools_center {
 		// default
 	}
@@ -236,7 +291,7 @@
 				vertical-align: top;
 			}
 		}
-		.o_tools_right, .o_tools_center {
+		.o_tools_right, .o_tools_right, .o_tools_center {
 			float: left;
 		}		
 	}

src/main/webapp/static/themes/light/styles/_realistic.scss

@@ -45,4 +45,17 @@
 		@include gradient-vertical($start-color: lighten($o-toolbar-bg-color, 15%), $end-color: $o-toolbar-bg-color);
 	  	@include reset-filter(); // Remove gradient in IE<10 to fix bug where dropdowns don't get triggered
 	}
+	.o_tool_next, .o_tool_previous {
+		@include gradient-vertical($start-color: lighten($o-toolbar-nav-bg-color, 10%), $end-color: darken($o-toolbar-nav-bg-color, 5%));
+	  	@include reset-filter(); // Remove gradient in IE<10 to fix bug where dropdowns don't get triggered
+	  	:hover {
+		    background-color: darken($o-toolbar-nav-bg-color, 5%);
+	  	}
+	}
 }
+
+/* Menu tree */
+.o_tree {
+  	$shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 1px 5px rgba(0,0,0,.05);
+  	@include box-shadow($shadow);
+}
\ No newline at end of file