OO-1068: bootstrapify e-portfolio map style

src/main/java/org/olat/portfolio/ui/structel/EPMultiplePageController.java

@@ -22,7 +22,6 @@ package org.olat.portfolio.ui.structel;
 import java.util.ArrayList;
 import java.util.List;
 
-import org.olat.core.CoreSpringFactory;
 import org.olat.core.gui.UserRequest;
 import org.olat.core.gui.components.Component;
 import org.olat.core.gui.components.link.Link;
@@ -46,6 +45,7 @@ import org.olat.portfolio.model.structel.EPPage;
 import org.olat.portfolio.model.structel.PortfolioStructure;
 import org.olat.portfolio.ui.structel.view.EPChangelogController;
 import org.olat.portfolio.ui.structel.view.EPTOCReadOnlyController;
+import org.springframework.beans.factory.annotation.Autowired;
 
 /**
  * Description:<br>
@@ -63,10 +63,10 @@ public class EPMultiplePageController extends BasicController implements Activat
 	private Controller currentActivePageCtrl;
 	private EPTOCReadOnlyController tocPageCtrl;
 	private EPChangelogController changelogPageCtrl;
-	private int previousPage;
 	private final VelocityContainer vC;
 	private final EPSecurityCallback secCallback;
-	private final EPFrontendManager ePFMgr;
+	@Autowired
+	private EPFrontendManager ePFMgr;
 
 	private Link tocLink; // the first tab, link to TOC
 	private Link changelogLink; // the last tab, link to Changelog
@@ -79,8 +79,7 @@ public class EPMultiplePageController extends BasicController implements Activat
 		this.pageList = pageList;
 		this.pageListByKeys = new ArrayList<Long>(pageList.size());
 		this.secCallback = secCallback;
-		ePFMgr = CoreSpringFactory.getImpl(EPFrontendManager.class);
-
+		
 		vC = createVelocityContainer("multiPages");
 
 		init(ureq);
@@ -180,7 +179,6 @@ public class EPMultiplePageController extends BasicController implements Activat
 	private void setCurrentPageAfterInit(int pageNum) {
 		vC.put("pageCtrl", currentActivePageCtrl.getInitialComponent());
 		vC.contextPut("actualPage", pageNum + 1);
-		previousPage = pageNum + 1;
 	}
 
 	/**

src/main/java/org/olat/portfolio/ui/structel/_content/mapview.html

@@ -8,31 +8,29 @@
 	</div>
 #end
 </div>
-<div class="b_eportfolio_map $!style">
-	<div class="b_ep_relative"> ## needed for positioning
-		<div class="b_map_header">
-		<div class="b_struct_edit_btn">
+<div class="o_eportfolio_map o_map-$!style">
+	<div class="o_ep_relative"> ## needed for positioning
+		<div class="o_map_header">
+		<div class="o_struct_edit_btn">
 			#if(!$r.available("editor") && $r.available("addButton"))
-				<div class="b_eportfolio_add_link">$r.render("addButton")</div>
+				<div class="o_eportfolio_add_link">$r.render("addButton")</div>
 			#end
 			#if($r.available("map.submit.assess"))
-				<div class="b_struct_submit_assess_btn">$r.render("map.submit.assess")</div>
+				<div class="o_struct_submit_assess_btn">$r.render("map.submit.assess")</div>
 			#end
 			#if($closed) 
-				<div class="b_artefact_closed"><span title=" $r.translate("map.is.closed.hint") ">&nbsp;&nbsp;&nbsp;&nbsp;</span></div>
+				<div class="o_artefact_closed"><span title=" $r.translate("map.is.closed.hint") ">&nbsp;&nbsp;&nbsp;&nbsp;</span></div>
 			#end
 			<br/>
 		</div>
 		<h4>$r.escapeHtml($map.title)</h4>
-		<div style="clear: right;"></div>
 	
 		#if(!$r.available("editor"))
-			<div class="b_eportfolio_mapdescr">$map.description</div>
+			<div class="o_eportfolio_mapdescr">$map.description</div>
 			#if($r.available("ownerportrait"))
-				<div class="b_eportfolio_mapowner">$r.translate("map.owners","") $r.render("ownerportrait")</div>
+				<div class="o_eportfolio_mapowner">$r.translate("map.owners","") $r.render("ownerportrait")</div>
 			#end
-			<div class="b_clearfix"></div>
-		
+
 			## show av. artefacts here...
 			#if ($r.available("artefactTable")) $r.render("artefactTable") #end
 		

src/main/java/org/olat/portfolio/ui/structel/_content/multiMaps.html

@@ -11,7 +11,7 @@
 	</div>
 #end
 
-<div class="b_eportfolio_maps container-fluid">
+<div class="o_eportfolio_maps container-fluid">
 	#foreach($map in $userMaps)
 	#set($viewLink = "viewLink$velocityCount")
 	#set($delLink = "deleteLink$velocityCount")
@@ -22,11 +22,11 @@
 	#set($index = ($velocityCount - 1))
 	#set($newRow = ($velocityCount % 3))
 	#if($map.getClass().getSimpleName() == "EPStructuredMapTemplate") #set($addTempStamp = "template") #end
-	<div class="col-sm-4 $!mapStyles.get($index) $!addTempStamp">	 
-		<div class="panel panel-default">
+	<div class="col-sm-4 $!addTempStamp">	 
+		<div class="panel o_map-$!mapStyles.get($index)">
 			<div class="panel-heading"><h4>$r.escapeHtml($map.title)</h4></div>
 			<div class="panel-body">$r.xssScan($map.shortenedDescription)</div>
-			<table class="table table-condensed table-striped"><tbody>
+			<table class="table table-condensed"><tbody>
 			#if ($owners.get($index)) <tr><td>$r.translate("map.owners", $r.escapeHtml($owners.get($index)))</td></tr> #end
 			<tr><td>$amounts.get($index)</td></tr>
 			#if ($deadLines.get($index)) <tr><td>$r.translate("map.deadline", "$r.formatDate($deadLines.get($index))")</td></tr> #end

src/main/java/org/olat/portfolio/ui/structel/_content/multiPages.html

@@ -8,5 +8,4 @@
 	#end
 	<li class="#if($changelog_enabled) active #end">$r.render("changelog")</li>
 </ul>
-<div class="b_ep_actualpage">$r.render("pageCtrl")</div>
-<div class="clearfix"></div>
\ No newline at end of file
+<div class="o_ep_actualpage clearfix">$r.render("pageCtrl")</div>
\ No newline at end of file

src/main/java/org/olat/portfolio/ui/structel/edit/_content/editor.html

-<div class="b_eportfolio_edit">
+<div class="o_eportfolio_edit">
 	#if($template-help)
 		$r.contextHelpWithWrapper("org.olat.portfolio.ui.structel.edit", "editorwithrestrictions.html", "chelp.editorwithrestrictions.hoover")
 	#else

src/main/resources/serviceconfig/olat.properties

@@ -927,8 +927,8 @@ course.node.vc.enabled=false
 # Options for e-portfolio
 ########################################
 #List of styles avaialbe for the e-portfolio maps. The separator is a ,
-portfolio.map.styles=default,comic,leather
-portfolio.map.styles.values=default,comic,leather
+portfolio.map.styles=default,comic,leather,epmst-green,epmst-blue,epmst-red
+portfolio.map.styles.values=default,comic,leather,epmst-green,epmst-blue,epmst-red
 #offer a list of all maps shared to public. Don't enable if > 500 public maps exist! The maps can still be viewed by opening a users vcard.
 portfolio.offer.public.map.list=true
 

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

@@ -17,4 +17,68 @@
 }
 .b_eportfolio_page .b_eportfolio_structure > h5 {
 	border-bottom: 1px solid #ddd; margin-top: 1.2em;
-}
\ No newline at end of file
+}
+
+.o_eportfolio_maps {
+	.panel {
+		font-family: 'Century Gothic', 'Apple Gothic', sans-serif;
+	}
+	.panel-heading {
+		padding: 5px 10px;
+	}
+	h4 {
+		padding: 11px 15px;
+		background: rgba(255, 255, 230, 0.7) none;
+		border-radius: 6px;
+	}
+	
+	.table>tbody>tr>td {
+		border-top:none;
+	}
+	
+	.panel-body {
+		border-top:none;
+	}
+	
+	.panel>.panel-body+.table {
+		border-top:none;
+	}
+}
+
+.o_eportfolio_map {
+	margin-top: 6px;
+	padding: 20px 20px 2px 3px;
+	border-radius: 6px 10px 6px 0;
+	font-family: 'Century Gothic', 'Apple Gothic', sans-serif;
+}
+
+.o_eportfolio_map ul.nav-tabs li:not(.active) a {
+	background-color: rgba(240,240,240,0.7);
+	border-radius: 4px 4px 0 0;
+}
+
+.o_ep_actualpage, .o_eportfolio_edit {
+	padding: floor($grid-gutter-width / 2);
+	background-color: #fff;
+}
+
+@import '_portfoliomaps/mixins';
+
+@import '_portfoliomaps/epmst_default';
+@import '_portfoliomaps/epmst_comic';
+@import '_portfoliomaps/epmst_leather';
+
+@import '_portfoliomaps/epmst_green';
+@import '_portfoliomaps/epmst_green2';
+@import '_portfoliomaps/epmst_green3';
+@import '_portfoliomaps/epmst_green4';
+
+@import '_portfoliomaps/epmst_red';
+@import '_portfoliomaps/epmst_red2';
+@import '_portfoliomaps/epmst_red3';
+@import '_portfoliomaps/epmst_red4';
+
+@import '_portfoliomaps/epmst_blue';
+@import '_portfoliomaps/epmst_blue2';
+@import '_portfoliomaps/epmst_blue3';
+@import '_portfoliomaps/epmst_blue4';

src/main/webapp/static/themes/light/modules/_portfoliomaps/_epmst_blue.scss

+$bg_gradient1 : #00D2F8;
+$bg_gradient2 : #4A9EAD;
+
+$infotextcolor : #000;
+$bordercolor : #888;
+$titlecolor : #444;
+
+.o_eportfolio_maps .o_map-epmst-blue {
+	@include epmst-mapclosed($bg_gradient1, $bg_gradient2, $bordercolor);
+
+	h4 {
+		color: $titlecolor;
+	}
+	.panel-body, td, a {
+		color: $infotextcolor;
+	}
+}
+
+.o_eportfolio_map.o_map-epmst-blue {
+	@include epmst-actualpage($bg_gradient1, $bg_gradient2, $bordercolor);
+}

src/main/webapp/static/themes/light/modules/_portfoliomaps/_epmst_blue2.scss

+$bg_gradient1 : #C4F6FF;
+$bg_gradient2 : #C4F6FF;
+
+$infotextcolor : #000;
+$bordercolor : #888;
+$titlecolor : #444;
+
+.o_eportfolio_maps .o_map-epmst-blue2 {
+	@include epmst-mapclosed($bg_gradient1, $bg_gradient2, $bordercolor);
+
+	h4 {
+		color: $titlecolor;
+	}
+	.panel-body, td, a {
+		color: $infotextcolor;
+	}
+}
+
+.o_eportfolio_map.o_map-epmst-blue2 {
+	@include epmst-actualpage($bg_gradient1, $bg_gradient2, $bordercolor);
+}
\ No newline at end of file

src/main/webapp/static/themes/light/modules/_portfoliomaps/_epmst_blue3.scss

+$bg_gradient1 : #B3E2F7;
+$bg_gradient2 : #B3E2F7;
+
+$infotextcolor : #000;
+$bordercolor : #888;
+$titlecolor : #444;
+
+.o_eportfolio_maps .o_map-epmst-blue3 {
+	@include epmst-mapclosed($bg_gradient1, $bg_gradient2, $bordercolor);
+
+	h4 {
+		color: $titlecolor;
+	}
+	.panel-body, td, a {
+		color: $infotextcolor;
+	}
+}
+
+.o_eportfolio_map.o_map-epmst-blue3 {
+	@include epmst-actualpage($bg_gradient1, $bg_gradient2, $bordercolor);
+}
\ No newline at end of file

src/main/webapp/static/themes/light/modules/_portfoliomaps/_epmst_blue4.scss

+$bg_gradient1 : #DEE7F7;
+$bg_gradient2 : #C1E9FD;
+
+$infotextcolor : #000;
+$bordercolor : #888;
+$titlecolor : #444;
+
+.o_eportfolio_maps .o_map-epmst-blue4 {
+	@include epmst-mapclosed($bg_gradient1, $bg_gradient2, $bordercolor);
+
+	h4 {
+		color: $titlecolor;
+	}
+	.panel-body, td, a {
+		color: $infotextcolor;
+	}
+}
+
+.o_eportfolio_map.o_map-epmst-blue4 {
+	@include epmst-actualpage($bg_gradient1, $bg_gradient2, $bordercolor);
+}
\ No newline at end of file

src/main/webapp/static/themes/light/modules/_portfoliomaps/_epmst_comic.scss

+$bordercolor : #888;
+
+.o_eportfolio_maps .o_map-comic {
+	background: #a2c3e8 none;
+	font-family: 'Comic Sans MS', 'Comic Sans', fantasy;
+
+	border: 1px solid $bordercolor; 
+	border-left: 3px solid transparentize(darken($bordercolor, 20%),0.2);
+	box-shadow: 3px 3px 4px rgba(20,20,20,0.4);
+}
+
+.o_eportfolio_map.o_map-comic {
+	background: #a2c3e8;
+	font-family: 'Comic Sans MS', 'Comic Sans', fantasy;
+	
+	border: 1px solid $bordercolor; 
+	border-left: 3px solid transparentize(darken($bordercolor, 20%),0.2);
+}
\ No newline at end of file

src/main/webapp/static/themes/light/modules/_portfoliomaps/_epmst_default.scss

+$bg_gradient1 : #fafafa;
+$bg_gradient2 : #efefef;
+
+$infotextcolor : #000;
+$bordercolor : #efefef;
+$titlecolor : #444;
+
+.o_eportfolio_maps .o_map-default {
+	@include epmst-mapclosed($bg_gradient1, $bg_gradient2, $bordercolor);
+
+	h4 {
+		color: $titlecolor;
+		background: none;
+	}
+	.panel-body, td, a {
+		color: $infotextcolor;
+	}
+}
+.o_eportfolio_map.o_map-default {
+	@include epmst-actualpage($bg_gradient1, $bg_gradient2, $bordercolor);
+}
\ No newline at end of file

src/main/webapp/static/themes/light/modules/_portfoliomaps/_epmst_green.scss

+$bg_gradient1 : #ECF69A;
+$bg_gradient2 : #ECF69A;
+
+$infotextcolor : #000;
+$bordercolor : #888;
+$titlecolor : #444;
+
+.o_eportfolio_maps .o_map-epmst-green {
+	@include epmst-mapclosed($bg_gradient1, $bg_gradient2, $bordercolor);
+
+	h4 {
+		color: $titlecolor;
+	}
+	.panel-body, td, a {
+		color: $infotextcolor;
+	}
+}
+
+.o_eportfolio_map.o_map-epmst-green {
+	@include epmst-actualpage($bg_gradient1, $bg_gradient2, $bordercolor);
+}
\ No newline at end of file

src/main/webapp/static/themes/light/modules/_portfoliomaps/_epmst_green2.scss

+$bg_gradient1 : #99E44D;
+$bg_gradient2 : #CBF1A5;
+
+$infotextcolor : #000;
+$bordercolor : #bbb;
+$titlecolor : #555;
+
+.o_eportfolio_maps .o_map-epmst-green2 {
+	@include epmst-mapclosed($bg_gradient1, $bg_gradient2, $bordercolor);
+
+	h4 {
+		color: $titlecolor;
+	}
+	.panel-body, td, a {
+		color: $infotextcolor;
+	}
+}
+
+.o_eportfolio_map.o_map-epmst-green2 {
+	@include epmst-actualpage($bg_gradient1, $bg_gradient2, $bordercolor);
+}
\ No newline at end of file

src/main/webapp/static/themes/light/modules/_portfoliomaps/_epmst_green3.scss

+$bg_gradient1 : #DFF0C1;
+$bg_gradient2 : #A0D346;
+
+$infotextcolor : #000;
+$bordercolor : #bbb;
+$titlecolor : #555;
+
+.o_eportfolio_maps .o_map-epmst-green3 {
+	@include epmst-mapclosed($bg_gradient1, $bg_gradient2, $bordercolor);
+
+	h4 {
+		color: $titlecolor;
+	}
+	.panel-body, td, a {
+		color: $infotextcolor;
+	}
+}
+
+.o_eportfolio_map.o_map-epmst-green3 {
+	@include epmst-actualpage($bg_gradient1, $bg_gradient2, $bordercolor);
+}
\ No newline at end of file

src/main/webapp/static/themes/light/modules/_portfoliomaps/_epmst_green4.scss

+$bg_gradient1 : #D7DBB5;
+$bg_gradient2 : #D7DBB5;
+
+$infotextcolor : #000;
+$bordercolor : #bbb;
+$titlecolor : #555;
+
+.o_eportfolio_maps .o_map-epmst-green4 {
+	@include epmst-mapclosed($bg_gradient1, $bg_gradient2, $bordercolor);
+
+	h4 {
+		color: $titlecolor;
+	}
+	.panel-body, td, a {
+		color: $infotextcolor;
+	}
+}
+
+.o_eportfolio_map.o_map-epmst-green4 {
+	@include epmst-actualpage($bg_gradient1, $bg_gradient2, $bordercolor);
+}
\ No newline at end of file

src/main/webapp/static/themes/light/modules/_portfoliomaps/_epmst_leather.scss

+$bordercolor : #888;
+
+.o_eportfolio_maps .o_map-leather {
+	background: rgb(149, 115, 82) url('#{$o-images-path}portfolio/light-leather-tile.jpg');
+	font-family: Palatino, Georgia, serif;
+
+	border: 1px solid $bordercolor; 
+	border-left: 3px solid transparentize(darken($bordercolor, 20%),0.2);
+	box-shadow: 3px 3px 4px rgba(20,20,20,0.4);
+	
+	h4 {
+		background: rgba(243, 230, 225, 0.5) none;
+	}
+	
+	.panel-body, td {
+		color: #C2A074;
+	}
+	
+	a {
+		color: #fad9a4;
+	}
+}
+
+.o_eportfolio_map.o_map-leather {
+	font-family: Palatino, Georgia, serif;
+	background: rgb(149, 115, 82) url('#{$o-images-path}portfolio/light-leather-tile.jpg');
+	
+	border: 1px solid $bordercolor; 
+	border-left: 3px solid transparentize(darken($bordercolor, 20%),0.2);
+	
+	.o_map_header {
+		h4, p, a, span, label {
+			color: #fff;
+		}
+	}
+}
\ No newline at end of file

src/main/webapp/static/themes/light/modules/_portfoliomaps/_epmst_red.scss

+$bg_gradient1 : #FFBA71;
+$bg_gradient2 : #FFBA99;
+
+$infotextcolor : #000;
+$bordercolor : #888;
+$titlecolor : #444;
+
+.o_eportfolio_maps .o_map-epmst-red {
+	@include epmst-mapclosed($bg_gradient1, $bg_gradient2, $bordercolor);
+
+	h4 {
+		color: $titlecolor;
+	}
+	.panel-body, td, a {
+		color: $infotextcolor;
+	}
+}
+
+.o_eportfolio_map.o_map-epmst-red {
+	@include epmst-actualpage($bg_gradient1, $bg_gradient2, $bordercolor);
+}
\ No newline at end of file