OO-2057 ep css tuning

src/main/java/org/olat/modules/portfolio/PageStatus.java

@@ -30,22 +30,28 @@ import java.util.Date;
  */
 public enum PageStatus {
 	
-	draft("o_icon_pf_entry_draft"),
-	published("o_icon_pf_entry_published"),
-	inRevision("o_icon_pf_entry_revision"),
-	closed("o_icon_pf_entry_closed"),
-	deleted("o_icon_pf_entry_deleted");
+	draft("o_icon_pf_entry_draft", "status.draft"),
+	published("o_icon_pf_entry_published", "status.published"),
+	inRevision("o_icon_pf_entry_revision", "status.in.revision"),
+	closed("o_icon_pf_entry_closed", "status.closed"),
+	deleted("o_icon_pf_entry_deleted", "status.deleted");
 	
 	private final String cssClass;
-	
-	private PageStatus(String cssClass) {
+	private final String i18nKey;
+
+	private PageStatus(String cssClass, String i18nKey) {
 		this.cssClass = cssClass;
+		this.i18nKey = i18nKey;
 	}
 	
 	public String cssClass() {
 		return cssClass;
 	}
 
+	public String i18nKey() {
+		return i18nKey;
+	}
+
 	public static final boolean isValueOf(String val) {
 		if(val == null) return false;
 		for(PageStatus value:values()) {

src/main/java/org/olat/modules/portfolio/ui/_content/portfolio_element_row.html

@@ -13,7 +13,7 @@
 #end
 #if(${row.isSection()})
 <div class="o_portfolio_section">
-	<h3>$r.escapeHtml($row.sectionLongTitle) <small><i class="o_icon $row.sectionCssClassStatus"> </i></small></h3>
+	<h3>$r.escapeHtml($row.sectionLongTitle) <small><i class="o_icon $row.sectionCssClassStatus" title="$r.translate("section.status"): $r.translate("$row.getSectionStatusI18nKey()")"> </i></small></h3>
 	<div class="o_section_lead o_block_large_bottom">
 		<div class="o_portfolio_section_meta o_small">
 			<div class="o_portfolio_dates clearfix">
@@ -75,7 +75,7 @@
 #if(${row.isPendingAssignment()})
 	<div class="panel #if($r.isNotNull($row.editAssignmentLink)) panel-default #else panel-placeholder #end o_portfolio_assignments">
 		<div class="panel-heading">
-			<h4 class="panel-title"><i class="o_icon o_icon_assignment"> </i>$r.translate("assignment"): $row.assignmentTitle</h4>
+			<h4 class="panel-title"><i class="o_icon o_icon_assignment o_icon-fw"> </i>$r.translate("assignment"): $row.assignmentTitle</h4>
 		</div>
 		<div class="panel-body">
 			$r.xssScan($row.assignmentSummary)
@@ -101,39 +101,41 @@
 #if(${row.isPage()})
 <div class="o_portfolio_page o_block_large">
 	<div class="#if($r.isNotNull($row.assignment)) o_portfolio_assignments #end ">
-		<h4><i class="o_icon ${row.getCssClassStatus()} o_icon-fw"> </i> $r.escapeHtml($row.title)</h4>
-		<div class="o_portfolio_page_meta_wrapper">
-			#if($r.isNotNull($row.assignment))
-				<i class="o_icon o_icon_assignment"> </i> <strong>$r.translate("meta.assignment", $row.assignmentTitle)</strong> 
-			#end
-			#if($r.isNotEmpty($row.pageCategories))
-			<span class="o_portfolio_page_meta text-muted o_small">
-				#if($r.isNotNull($row.assignment)), #end
-				<strong>$r.translate("meta.categories")</strong> <i class="o_icon o_icon_tags"> </i>
-				 #foreach($category in $row.pageCategories)
-				 	#if(${foreach.count} > 1), #end
-				 	<a class="o_pf_tag" href="javascript:${f.ffXHREvent("tag_select","$category")}">$category</a>
-				 #end
-			</span>
-			#end
-			#if($r.isNotNull($row.lastPublicationDate))
-			<span class="o_portfolio_page_meta text-muted o_small">
-				#if($r.isNotNull($row.assignment) || $r.isNotEmpty($row.pageCategories)), #end
-				$r.translate("meta.last.publication", $r.formatDateAndTime($row.lastPublicationDate))
-			</span>
-			#end
-			<span class="o_portfolio_page_meta text-muted o_small">
-				#if($r.isNotNull($row.assignment) || $r.isNotNull($row.lastPublicationDate) or $r.isNotEmpty($row.pageCategories)), #end
-				$r.translate("meta.last.modified", $r.formatDateAndTime($row.lastModified))
-			</span>
-			#if($r.isNotNull(${r.row.getMetaBinderAndSectionTitles()}))
-			<div class="o_portfolio_page_meta text-muted o_small">
-				$r.translate("meta.binder.section.titles", ${row.getMetaBinderAndSectionTitles()})
+		<h4><i class="o_icon ${row.getCssClassStatus()} o_icon-fw" title="$r.translate("page.status"): $r.translate("$row.getPageStatusI18nKey()")"> </i> $r.escapeHtml($row.title)</h4>
+		<div class="o_portfolio_page_body">
+			<div class="o_portfolio_page_meta_wrapper">
+				#if($r.isNotNull($row.assignment))
+					<i class="o_icon o_icon_assignment o_icon-fw"> </i> <strong>$r.translate("meta.assignment", $row.assignmentTitle)</strong> 
+				#end
+				#if($r.isNotEmpty($row.pageCategories))
+				<span class="o_portfolio_page_meta text-muted o_small">
+					#if($r.isNotNull($row.assignment)), #end
+					<strong>$r.translate("meta.categories")</strong> <i class="o_icon o_icon_tags"> </i>
+					 #foreach($category in $row.pageCategories)
+					 	#if(${foreach.count} > 1), #end
+					 	<a class="o_pf_tag" href="javascript:${f.ffXHREvent("tag_select","$category")}">$category</a>
+					 #end
+				</span>
+				#end
+				#if($r.isNotNull($row.lastPublicationDate))
+				<span class="o_portfolio_page_meta text-muted o_small">
+					#if($r.isNotNull($row.assignment) || $r.isNotEmpty($row.pageCategories)), #end
+					$r.translate("meta.last.publication", $r.formatDateAndTime($row.lastPublicationDate))
+				</span>
+				#end
+				<span class="o_portfolio_page_meta text-muted o_small">
+					#if($r.isNotNull($row.assignment) || $r.isNotNull($row.lastPublicationDate) or $r.isNotEmpty($row.pageCategories)), #end
+					$r.translate("meta.last.modified", $r.formatDateAndTime($row.lastModified))
+				</span>
+				#if($r.isNotNull(${r.row.getMetaBinderAndSectionTitles()}))
+				<div class="o_portfolio_page_meta text-muted o_small">
+					$r.translate("meta.binder.section.titles", ${row.getMetaBinderAndSectionTitles()})
+				</div>
+				#end		
+			</div>
+			<div class="o_portfolio_page_summary o_block">
+				$r.xssScan($row.summary)
 			</div>
-			#end		
-		</div>
-		<div class="o_portfolio_page_summary o_block">
-			$r.xssScan($row.summary)
 		</div>
 	</div>
 	<div class="o_portfolio_page_links">

src/main/java/org/olat/modules/portfolio/ui/_content/table_of_contents.html

@@ -5,7 +5,7 @@
 	<div class="o_portfolio_toc #if($timelineSwitch) o_portfolio_withtimeline #end">
 		<ul class="list-unstyled">
 		#foreach($section in $sections)
-			<li class="o_section"><div class="o_header_with_buttons"><h4>$r.render($section.sectionLink) </h4> <i class="o_icon $section.cssClassStatus"> </i>#if(${section.isAssessable()}) ${section.getFormattedResult()} #end</div>
+			<li class="o_section o_block_large_bottom"><div class="o_header_with_buttons"><h4>$r.render($section.sectionLink) </h4> <i class="o_icon $section.cssClassStatus o_icon-fw"> </i>#if(${section.isAssessable()}) ${section.getFormattedResult()} #end</div>
 				#if($r.notNull($section.section.beginDate) || $r.notNull($section.section.endDate))
 					<div class="o_portfolio_section_meta">
 					#if($r.notNull($section.section.beginDate))
@@ -38,7 +38,7 @@
 				#if($r.isNotEmpty(${section.getAssignments()}))
 				<ul class="list-unstyled">
 					#foreach($assignment in $section.assignments)
-						<li><i class="o_icon o_icon_assignment"> </i> $assignment.title</li>
+						<li><i class="o_icon o_icon_assignment o_icon-fw"> </i> $assignment.title</li>
 					#end
 				</ul>
 				#end	
@@ -46,7 +46,7 @@
 				#if($r.isNotEmpty(${section.getPages()}))
 				<ul class="list-unstyled">
 					#foreach($page in $section.pages)
-						<li>$r.render($page.openLink) <i class="o_icon $page.cssClassStatus"> </i> #if($r.isNotNull($page.commentLink)) $r.render($page.commentLink) #end</li>
+						<li><i class="o_icon $page.cssClassStatus o_icon-fw"> </i> $r.render($page.openLink) #if($r.isNotNull($page.commentLink)) $r.render($page.commentLink) #end</li>
 					#end
 				</ul>
 				#end

src/main/java/org/olat/modules/portfolio/ui/model/PortfolioElementRow.java

@@ -151,6 +151,10 @@ public class PortfolioElementRow {
 		return page == null ? null : page.getPageStatus();
 	}
 	
+	public String getPageStatusI18nKey() {
+		return (page == null || page.getPageStatus() == null ) ? PageStatus.draft.i18nKey() : page.getPageStatus().i18nKey();
+	}
+	
 	public Date getLastPublicationDate() {
 		return page == null ? null : page.getLastPublicationDate();
 	}

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

@@ -28,7 +28,7 @@ $fa-css-prefix: "o_icon" !default;
 .o_icon_archive_tool:before { content: $fa-var-download;}
 .o_icon_assessment_mode:before { content: $fa-var-pencil-square-o;}
 .o_icon_assessment_tool:before { content: $fa-var-trophy;}
-.o_icon_assignment:before { content: $fa-var-bolt; }
+.o_icon_assignment:before { content: $fa-var-bolt; color: $o-portfolio-assignment-color;}
 .o_icon_attempt_limit:before { content: $fa-var-refresh; }
 .o_icon_accept:before { content: $fa-var-check; color: $brand-success; }
 .o_icon_add:before { content: $fa-var-plus-circle; }
@@ -380,10 +380,10 @@ $fa-css-prefix: "o_icon" !default;
 .o_calendar_icon:before { content: $fa-var-calendar; }
 
 /* portfolio icons */
-.o_icon_pf_section_draft:before { content: $fa-var-eye-slash; }
-.o_icon_pf_section_progress:before { content: $fa-var-refresh; }
-.o_icon_pf_section_submitted:before { content: $fa-var-refresh; }
-.o_icon_pf_section_closed:before { content: $fa-var-lock; }
+.o_icon_pf_section_draft:before { content: $fa-var-eye-slash; color: $o-portfolio-entry-draft-color;}
+.o_icon_pf_section_progress:before { content: $fa-var-refresh; color: $o-portfolio-entry-draft-color;}
+.o_icon_pf_section_submitted:before { content: $fa-var-refresh; color: $o-portfolio-entry-published-color; }
+.o_icon_pf_section_closed:before { content: $fa-var-lock; color: $o-portfolio-entry-closed-color;}
 .o_icon_pf_binder:before { content: $fa-var-folder-open-o; }
 .o_icon_pf_entry:before { content: $fa-var-quote-left; }
 .o_icon_pf_entry_draft:before { content: $fa-var-circle; color: $o-portfolio-entry-draft-color; }

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

@@ -57,7 +57,7 @@ div#o_main_toolbar.o_toolbar.o_portfolio {
 	}
 }
 /* an assignment entry */
-.o_portfolio_page .o_portfolio_assignments {
+.o_portfolio_page .o_portfolio_assignments .o_portfolio_page_body {
 		border-left: 3px solid $o-portfolio-assignment-color;
 		.o_portfolio_page_meta_wrapper,
 		.o_portfolio_page_summary {
@@ -211,10 +211,16 @@ div#o_main_toolbar.o_toolbar.o_portfolio {
 	.o_portfolio_section_meta {
 		font-size: 80%;
 		color: $gray-light;
+		/* compensate for header o_header_with_buttons margin */
+		position: relative;
+		top: -15px;
 	}
 	
 	.o_section {
 		position: relative;
+		.o_header_with_buttons h4 {
+			padding-right: 0.5em;
+		}
 	}
 
 	.o_section_actions {
@@ -228,6 +234,9 @@ div#o_main_toolbar.o_toolbar.o_portfolio {
 		
 		.o_section_dropdown {
 			display: inline-block;
+			position: relative;
+			top: -0.5em;
+			padding-left: 0.5em;
 		}
 	}
 }