Skip to content
Snippets Groups Projects
Commit dfa99cb1 authored by Florian Gnägi's avatar Florian Gnägi
Browse files

OO-4356 add combined radial progress to course launch page, remove 

rating, improve radial rendering, fix vertical alignment in toolbar.
parent 0f47ec58
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 201 additions and 149 deletions
src/main/java/org/olat/core/gui/components/progressbar/ProgressBarItem.java
+ 4
− 0
View file @ dfa99cb1
......@@ -87,6 +87,10 @@ public class ProgressBarItem extends FormItemImpl {
public void setCssClass(String cssClass) {
component.setCssClass(cssClass);
}
public void setInfo(String info) {
component.setInfo(info);
}
@Override
protected void rootFormAvailable() {
......
src/main/java/org/olat/repository/ui/list/RepositoryEntryListController.java
+ 12
− 1
View file @ dfa99cb1
......@@ -623,8 +623,19 @@ public class RepositoryEntryListController extends FormBasicController
completionItem.setWidthInPercent(true);
completionItem.setLabelAlignment(LabelAlignment.none);
completionItem.setRenderStyle(RenderStyle.radial);
completionItem.setRenderSize(RenderSize.inline);
completionItem.setRenderSize(RenderSize.small);
completionItem.setBarColor(BarColor.success);
// Inline rendering of status
if (row.isPassed()) {
completionItem.setCssClass("o_progress_passed");
} else if (row.isFailed()) {
completionItem.setBarColor(BarColor.danger);
completionItem.setCssClass("o_progress_failed");
}
// Inline rendering of score
if (StringHelper.containsNonWhitespace(row.getScore())) {
completionItem.setInfo(row.getScore() + "pt");
}
row.setCompletionItem(completionItem);
}
}
......
src/main/java/org/olat/repository/ui/list/_content/row_1.html
+ 8
− 4
View file @ dfa99cb1
......@@ -59,11 +59,11 @@
#end
#if($row)
#if($row.completionItemName)
#if($row.completionItemName)
<div class="o_completion row">
$r.render($row.getCompletionItemName())
</div>
#end
#else
#if($row.passed || $row.failed)
<div class="row">
#if($row.passed)
......@@ -83,6 +83,7 @@
</div>
#end
#end
#end
#if($row.accessTypes && !$row.isMember())
<div class="o_bookings row">
......@@ -92,13 +93,15 @@
<div class="o_methods">
<ul class="list-inline">
#foreach($type in $row.accessTypes)
<li title="$r.escapeHtml("$type.displayName")"><i class="o_icon $type.type o_icon-lg"></i>#if($type.price && $type.price.length() > 0) ($type.price)#end</li>
<li class="o_nowrap" style="width:100%"><i class="o_icon $type.type o_icon-lg"></i>#if($type.price && $type.price.length() > 0)<span class="o_access_price"> ($type.price) </span>#end <span class="o_access_name small "> $r.escapeHtml("$type.displayName")</span></li>
#end
</ul>
</div>
</div>
#end
#*
TODO: Discuss: disturbing on the course listing page, only on course info page?
#if($row.ratingFormItemName || $row.commentsLinkName)
<div class="o_social o_ratings_and_comments row">
#if($row.ratingFormItemName)
......@@ -111,6 +114,7 @@
#end
</div>
#end
*#
$r.render($row.getDetailsLinkName())
#if($row.getStartLinkName())
......
src/main/webapp/static/themes/light/modules/_coursesite.scss
+ 5
− 6
View file @ dfa99cb1
......@@ -61,7 +61,7 @@
padding-top: 0.25em;
.o_completion {
padding: 0 1em;
text-align: center;
}
.o_state, .o_score {
......@@ -101,14 +101,13 @@
.o_bookings {
padding: 0 0 0 1em;
@include text-overflow();
color: $text-muted;
.o_label {
margin-bottom: 1em;
color: $text-muted;
margin-bottom: 0.8em;
font-weight: bold;
@extend %o_small;
}
.o_methods {
color: $brand-info;
}
.o_methods { }
}
......
src/main/webapp/static/themes/light/modules/_radial-progress.scss
+ 168
− 133
View file @ dfa99cb1
......@@ -4,10 +4,10 @@ http://jsfiddle.net/andsens/mLA7X/
https://gist.github.com/digitalbreed/84a19db69244b22519e03550ba010a25
*/
/* Standard size */
$o-radial-progress-inset-size : $o-radial-progress-circle-size * 0.75 !default; // 90px
$o-radial-progress-percentage-font-size : $o-radial-progress-circle-size * 0.18 !default; // 22px
.radial-progress {
/* derived variables */
$o-radial-progress-inset-size : $o-radial-progress-circle-size * 0.75 !default; // 90px
$o-radial-progress-percentage-font-size : $o-radial-progress-circle-size * 0.18 !default; // 22px
margin: $o-radial-progress-margin;
width: $o-radial-progress-circle-size;
......@@ -129,163 +129,158 @@ https://gist.github.com/digitalbreed/84a19db69244b22519e03550ba010a25
&+.o_progress_label {
margin-left: 0.5em;
}
}
/* small variant */
&.radial-progress-sm {
/* derived variables */
$o-radial-progress-inset-size-sm : $o-radial-progress-circle-size-sm * 0.75 !default;
$o-radial-progress-percentage-font-size-sm : $o-radial-progress-circle-size-sm * 0.24 !default;
/* small variant */
$o-radial-progress-inset-size-sm : $o-radial-progress-circle-size-sm * 0.75 !default;
$o-radial-progress-percentage-font-size-sm : $o-radial-progress-circle-size-sm * 0.24 !default;
.radial-progress-sm {
width: $o-radial-progress-circle-size-sm;
height: $o-radial-progress-circle-size-sm;
font-size: $o-radial-progress-percentage-font-size-sm;
.circle {
.mask {
clip: rect(0px, $o-radial-progress-circle-size-sm, $o-radial-progress-circle-size-sm, $o-radial-progress-circle-size-sm/2);
.fill {
clip: rect(0px, $o-radial-progress-circle-size-sm/2, $o-radial-progress-circle-size-sm, 0px);
}
width: $o-radial-progress-circle-size-sm;
height: $o-radial-progress-circle-size-sm;
font-size: $o-radial-progress-percentage-font-size-sm;
.circle {
.mask {
clip: rect(0px, $o-radial-progress-circle-size-sm, $o-radial-progress-circle-size-sm, $o-radial-progress-circle-size-sm/2);
.fill {
clip: rect(0px, $o-radial-progress-circle-size-sm/2, $o-radial-progress-circle-size-sm, 0px);
}
}
.inset {
width: $o-radial-progress-inset-size-sm;
height: $o-radial-progress-inset-size-sm;
margin-left: ($o-radial-progress-circle-size-sm - $o-radial-progress-inset-size-sm)/2;
margin-top: ($o-radial-progress-circle-size-sm - $o-radial-progress-inset-size-sm)/2;
font-size: $o-radial-progress-inset-size - 10px; /* for bgIcon */
line-height: $o-radial-progress-inset-size-sm - 10px;
font-size: $o-radial-progress-inset-size-sm - 5px;
.bgIcon {
position: absolute;
top: 5px;
}
}
.inset {
width: $o-radial-progress-inset-size-sm;
height: $o-radial-progress-inset-size-sm;
margin-left: ($o-radial-progress-circle-size-sm - $o-radial-progress-inset-size-sm)/2;
margin-top: ($o-radial-progress-circle-size-sm - $o-radial-progress-inset-size-sm)/2;
font-size: $o-radial-progress-inset-size - 10px; /* for bgIcon */
line-height: $o-radial-progress-inset-size-sm - 10px;
font-size: $o-radial-progress-inset-size-sm - 5px;
.bgIcon {
position: absolute;
top: 5px;
}
}
}
/* large variant */
&.radial-progress-lg {
/* derived variables */
$o-radial-progress-inset-size-lg : $o-radial-progress-circle-size-lg * 0.75 !default;
$o-radial-progress-percentage-font-size-lg : $o-radial-progress-circle-size-lg * 0.18 !default;
/* large variant */
$o-radial-progress-inset-size-lg : $o-radial-progress-circle-size-lg * 0.75 !default;
$o-radial-progress-percentage-font-size-lg : $o-radial-progress-circle-size-lg * 0.18 !default;
.radial-progress-lg {
width: $o-radial-progress-circle-size-lg;
height: $o-radial-progress-circle-size-lg;
font-size: $o-radial-progress-percentage-font-size-lg;
.circle {
.mask {
clip: rect(0px, $o-radial-progress-circle-size-lg, $o-radial-progress-circle-size-lg, $o-radial-progress-circle-size-lg/2);
.fill {
clip: rect(0px, $o-radial-progress-circle-size-lg/2, $o-radial-progress-circle-size-lg, 0px);
}
width: $o-radial-progress-circle-size-lg;
height: $o-radial-progress-circle-size-lg;
font-size: $o-radial-progress-percentage-font-size-lg;
.circle {
.mask {
clip: rect(0px, $o-radial-progress-circle-size-lg, $o-radial-progress-circle-size-lg, $o-radial-progress-circle-size-lg/2);
.fill {
clip: rect(0px, $o-radial-progress-circle-size-lg/2, $o-radial-progress-circle-size-lg, 0px);
}
}
.inset {
width: $o-radial-progress-inset-size-lg;
height: $o-radial-progress-inset-size-lg;
margin-left: ($o-radial-progress-circle-size-lg - $o-radial-progress-inset-size-lg)/2;
margin-top: ($o-radial-progress-circle-size-lg - $o-radial-progress-inset-size-lg)/2;
font-size: $o-radial-progress-inset-size-lg - 20px;
line-height: $o-radial-progress-inset-size-lg - 10px;
.bgIcon {
position: absolute;
top: 5px;
}
}
.inset {
width: $o-radial-progress-inset-size-lg;
height: $o-radial-progress-inset-size-lg;
margin-left: ($o-radial-progress-circle-size-lg - $o-radial-progress-inset-size-lg)/2;
margin-top: ($o-radial-progress-circle-size-lg - $o-radial-progress-inset-size-lg)/2;
font-size: $o-radial-progress-inset-size-lg - 20px;
line-height: $o-radial-progress-inset-size-lg - 10px;
.bgIcon {
position: absolute;
top: 5px;
}
}
/* inline variant */
&.radial-progress-inline {
/* derived variables */
$o-radial-progress-inset-size-inline : $o-radial-progress-circle-size-inline * 0.70 !default;
$o-radial-progress-percentage-font-size-inline : $o-radial-progress-circle-size-inline * 0.18 !default;
}
width: $o-radial-progress-circle-size-inline;
height: $o-radial-progress-circle-size-inline;
/* inline variant */
$o-radial-progress-inset-size-inline : $o-radial-progress-circle-size-inline * 0.70 !default;
$o-radial-progress-percentage-font-size-inline : $o-radial-progress-circle-size-inline * 0.18 !default;
.radial-progress-inline {
margin: 0;
vertical-align: bottom;
display: inline-block;
.circle {
.mask {
clip: rect(0px, $o-radial-progress-circle-size-inline, $o-radial-progress-circle-size-inline, $o-radial-progress-circle-size-inline/2);
.fill {
clip: rect(0px, $o-radial-progress-circle-size-inline/2, $o-radial-progress-circle-size-inline, 0px);
}
width: $o-radial-progress-circle-size-inline;
height: $o-radial-progress-circle-size-inline;
margin: 0;
vertical-align: bottom;
display: inline-block;
.circle {
.mask {
clip: rect(0px, $o-radial-progress-circle-size-inline, $o-radial-progress-circle-size-inline, $o-radial-progress-circle-size-inline/2);
.fill {
clip: rect(0px, $o-radial-progress-circle-size-inline/2, $o-radial-progress-circle-size-inline, 0px);
}
}
.inset {
width: $o-radial-progress-inset-size-inline;
height: $o-radial-progress-inset-size-inline;
margin-left: ($o-radial-progress-circle-size-inline - $o-radial-progress-inset-size-inline)/2;
margin-top: ($o-radial-progress-circle-size-inline - $o-radial-progress-inset-size-inline)/2;
.bgIcon {
display: none;
}
}
.inset {
width: $o-radial-progress-inset-size-inline;
height: $o-radial-progress-inset-size-inline;
margin-left: ($o-radial-progress-circle-size-inline - $o-radial-progress-inset-size-inline)/2;
margin-top: ($o-radial-progress-circle-size-inline - $o-radial-progress-inset-size-inline)/2;
.bgIcon {
display: none;
}
}
}
/* pie style without inset*/
&.radial-progress-pie {
.percentage .centeredWrapper {
.number,
.o_progress_label {
color: #fff;
text-shadow: 1px 1px 2px #000000;
}
}
}
/* color variants */
&.radial-progress-success {
.circle .mask .fill, .circle .fill {
background-color: $o-radial-progress-circle-success-color;
}
.inset .percentage .number span {
color: $o-radial-progress-percentage-success-color;
/* pie style without inset*/
.radial-progress-pie {
.percentage .centeredWrapper {
.number,
.o_progress_label {
color: #fff;
text-shadow: 1px 1px 2px #000000;
}
}
}
/* color variants */
.radial-progress-success {
.circle .mask .fill, .circle .fill {
background-color: $o-radial-progress-circle-success-color;
}
&.radial-progress-info {
.circle .mask .fill, .circle .fill {
background-color: $o-radial-progress-circle-info-color;
}
.inset .percentage .number span {
color: $o-radial-progress-percentage-info-color;
}
.inset .percentage .number span {
color: $o-radial-progress-percentage-success-color;
}
&.radial-progress-danger {
.circle .mask .fill, .circle .fill {
background-color: $o-radial-progress-circle-danger-color;
}
.inset .percentage .number span {
color: $o-radial-progress-percentage-danger-color;
}
}
.radial-progress-info {
.circle .mask .fill, .circle .fill {
background-color: $o-radial-progress-circle-info-color;
}
&.radial-progress-warning {
.circle .mask .fill, .circle .fill {
background-color: $o-radial-progress-circle-warning-color;
}
.inset .percentage .number span {
color: $o-radial-progress-percentage-warning-color;
}
.inset .percentage .number span {
color: $o-radial-progress-percentage-info-color;
}
}
.radial-progress-danger {
.circle .mask .fill, .circle .fill {
background-color: $o-radial-progress-circle-danger-color;
}
.inset .percentage .number span {
color: $o-radial-progress-percentage-danger-color;
}
}
.radial-progress-warning {
.circle .mask .fill, .circle .fill {
background-color: $o-radial-progress-circle-warning-color;
}
.inset .percentage .number span {
color: $o-radial-progress-percentage-warning-color;
}
}
/* toolbar variant */
$o-radial-progress-circle-size-toolbar : $o-toolbar-height-md + 8px !default;
$o-radial-progress-inset-size-toolbar : $o-radial-progress-circle-size-toolbar - 8px !default;
$o-radial-progress-percentage-font-size-toolbar : $o-toolbar-size-text-md !default;
.o_tool .o_progress {
width: $o-toolbar-height-md;
height: $o-toolbar-height-md;
height: $o-toolbar-height-md - 4px;
position: relative;
.radial-progress {
/* derived variables */
$o-radial-progress-circle-size-toolbar : $o-toolbar-height-md + 8px;
$o-radial-progress-inset-size-toolbar : $o-radial-progress-circle-size-toolbar - 8px !default;
$o-radial-progress-percentage-font-size-toolbar : $o-toolbar-size-text-md !default;
width: $o-radial-progress-circle-size-toolbar;
height: $o-radial-progress-circle-size-toolbar;
......@@ -332,13 +327,16 @@ https://gist.github.com/digitalbreed/84a19db69244b22519e03550ba010a25
}
}
}
@media (max-width: $screen-sm-max) {
}
@media (max-width: $screen-sm-max) {
.o_tool .o_progress,
.o_coursetable.o_rendertype_custom .o_completion .o_progress {
width: $o-toolbar-height-sm;
height: $o-toolbar-height-sm;
height: $o-toolbar-height-sm - 4px;
.radial-progress {
$o-radial-progress-circle-size-toolbar : $o-toolbar-height-sm + 6px;
$o-radial-progress-inset-size-toolbar : $o-radial-progress-circle-size-toolbar - 6px !default;
$o-radial-progress-percentage-font-size-toolbar : $o-toolbar-size-text-sm !default;
$o-radial-progress-inset-size-toolbar : $o-radial-progress-circle-size-toolbar - 6px;
$o-radial-progress-percentage-font-size-toolbar : $o-toolbar-size-text-sm;
width: $o-radial-progress-circle-size-toolbar;
height: $o-radial-progress-circle-size-toolbar;
......@@ -363,12 +361,26 @@ https://gist.github.com/digitalbreed/84a19db69244b22519e03550ba010a25
}
}
}
@media (max-width: $screen-xs-max) {
/* fix positioning in course listing */
.o_coursetable.o_rendertype_custom .o_completion .o_progress {
display: inline-block;
.radial-progress {
position: relative;
top: 0;
left: -4px;
margin: 0;
}
}
}
@media (max-width: $screen-xs-max) {
.o_tool .o_progress,
.o_coursetable.o_rendertype_custom .o_completion .o_progress {
width: $o-toolbar-height-xs;
height: $o-toolbar-height-xs;
.radial-progress {
$o-radial-progress-circle-size-toolbar : $o-toolbar-height-xs + 4px;
$o-radial-progress-inset-size-toolbar : $o-radial-progress-circle-size-toolbar - 6px !default;
$o-radial-progress-inset-size-toolbar : $o-radial-progress-circle-size-toolbar - 6px;
width: $o-radial-progress-circle-size-toolbar;
height: $o-radial-progress-circle-size-toolbar;
......@@ -398,6 +410,29 @@ https://gist.github.com/digitalbreed/84a19db69244b22519e03550ba010a25
}
}
/* special rendering in course list table */
.o_coursetable.o_rendertype_classic .o_progress .radial-progress {
@extend .radial-progress, .radial-progress-inline;
/* remove unwanted stuff */
.inset:after {
display: none;
}
.percentage {
position: relative;
left: $o-radial-progress-circle-size-inline * 1.4;
.number {
font-size: $o-content-font-size-base;
line-height: $o-content-line-height-base;
font-weight: normal;
color: $text-color;
}
.addon {
display: none;
}
}
}
/* Styles with background images triggered by element css class */
.o_progress_failed, .o_progress_passed {
......
src/main/webapp/static/themes/light/modules/_toolbar.scss
+ 0
− 1
View file @ dfa99cb1
......@@ -121,7 +121,6 @@
.o_tool, .o_text {
position: relative;
margin: 0 10px;
vertical-align: top;
&:first-child {
margin-left: 0;
}
......
src/main/webapp/static/themes/light/theme.css
+ 1
− 1
View file @ dfa99cb1
source diff could not be displayed: it is too large. Options to address this: view the blob.
src/main/webapp/static/themes/light/theme.css.map
+ 1
− 1
View file @ dfa99cb1
source diff could not be displayed: it is too large. Options to address this: view the blob.
src/main/webapp/static/themes/openolat/theme.css
+ 1
− 1
View file @ dfa99cb1
source diff could not be displayed: it is too large. Options to address this: view the blob.
src/main/webapp/static/themes/openolat/theme.css.map
+ 1
− 1
View file @ dfa99cb1
source diff could not be displayed: it is too large. Options to address this: view the blob.
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment