LDEV-4425 Adding Portraits in Learner

Included in Grouping, Chat, Peer Review and QA
ivanDad · Sep 18, 2017 · efa51a5 · efa51a5
1 parent 2a0ac10
commit efa51a5
Show file tree

Hide file tree

Showing 45 changed files with 349 additions and 224 deletions.
diff --git a/lams_admin/web/WEB-INF/tags/StyledRating.tag b/lams_admin/web/WEB-INF/tags/StyledRating.tag
@@ -44,7 +44,7 @@ When true, hides the names and groups the comments.  -->
 		<tr>
 			<c:if test="${not currentUserDisplay}">
 			<td>
-				<c:out value="${rating.itemDescription}" escapeXml="true"/>
+				<lams:Portrait userId="${rating.itemId}"/><span class="portrait-sm-lineheight"><c:out value="${rating.itemDescription}" escapeXml="true"/></span>
 			</td>
 			</c:if>
 			<td>
@@ -64,7 +64,7 @@ When true, hides the names and groups the comments.  -->
 		<table class="tablesorter">
 		<thead>
 			<tr>
-				<th class="username" title="<fmt:message key='label.sort.by.user.name'/>" width="${criteriaRatings.ratingCriteria.commentsEnabled ? '20%' : '33%'}" > 
+				<th class="username" title="<fmt:message key='label.sort.by.user.name'/>" width="${criteriaRatings.ratingCriteria.commentsEnabled ? '25%' : '40%'}" > 
 					<fmt:message key="label.user.name" />
 				</th>
 				<th class="rating text-center ">
@@ -82,7 +82,7 @@ When true, hides the names and groups the comments.  -->
 			<c:if test="${not empty rating.averageRating}">
 			<tr>
 				<td>
-					<c:out value="${rating.itemDescription}" escapeXml="true"/>
+					<lams:Portrait userId="${rating.itemId}"/><span class="portrait-sm-lineheight"><c:out value="${rating.itemDescription}" escapeXml="true"/></span>
 				</td>
 				<td class="rating">
 					<div class="rating-stars-holder text-center center-block">
@@ -162,7 +162,8 @@ When true, hides the names and groups the comments.  -->
 					<c:otherwise><fmt:formatNumber value="${rating.averageRating}" type="number" maxFractionDigits="0" /></c:otherwise>
 				</c:choose>
 			:</strong>
-			&nbsp;<c:out value="${rating.itemDescription}" escapeXml="true"/>&nbsp;
+			&nbsp;<c:if test="${not currentUserDisplay}"><lams:Portrait userId="${rating.itemId}"/></c:if>
+			<span class="portrait-sm-lineheight"><c:out value="${rating.itemDescription}" escapeXml="true"/>&nbsp;</span>
 				<c:if test="${not currentUserDisplay && not empty rating.userRating}">
 					(${rating.userRating})
 				</c:if>
@@ -183,7 +184,8 @@ When true, hides the names and groups the comments.  -->
 					<c:otherwise>${rating.averageRating}</c:otherwise>
 				</c:choose>
 			:</strong>
-			&nbsp;<c:out value="${rating.itemDescription}" escapeXml="true"/>&nbsp;
+			&nbsp;<c:if test="${not currentUserDisplay}"><lams:Portrait userId="${rating.itemId}"/></c:if>
+			<span class="portrait-sm-lineheight"><c:out value="${rating.itemDescription}" escapeXml="true"/>&nbsp;</span>
 				<c:if test="${not currentUserDisplay && not empty rating.userRating}">
 					(${rating.userRating})
 				</c:if>

diff --git a/lams_central/web/WEB-INF/tags/StyledRating.tag b/lams_central/web/WEB-INF/tags/StyledRating.tag
@@ -44,7 +44,7 @@ When true, hides the names and groups the comments.  -->
 		<tr>
 			<c:if test="${not currentUserDisplay}">
 			<td>
-				<c:out value="${rating.itemDescription}" escapeXml="true"/>
+				<lams:Portrait userId="${rating.itemId}"/><span class="portrait-sm-lineheight"><c:out value="${rating.itemDescription}" escapeXml="true"/></span>
 			</td>
 			</c:if>
 			<td>
@@ -64,7 +64,7 @@ When true, hides the names and groups the comments.  -->
 		<table class="tablesorter">
 		<thead>
 			<tr>
-				<th class="username" title="<fmt:message key='label.sort.by.user.name'/>" width="${criteriaRatings.ratingCriteria.commentsEnabled ? '20%' : '33%'}" > 
+				<th class="username" title="<fmt:message key='label.sort.by.user.name'/>" width="${criteriaRatings.ratingCriteria.commentsEnabled ? '25%' : '40%'}" > 
 					<fmt:message key="label.user.name" />
 				</th>
 				<th class="rating text-center ">
@@ -82,7 +82,7 @@ When true, hides the names and groups the comments.  -->
 			<c:if test="${not empty rating.averageRating}">
 			<tr>
 				<td>
-					<c:out value="${rating.itemDescription}" escapeXml="true"/>
+					<lams:Portrait userId="${rating.itemId}"/><span class="portrait-sm-lineheight"><c:out value="${rating.itemDescription}" escapeXml="true"/></span>
 				</td>
 				<td class="rating">
 					<div class="rating-stars-holder text-center center-block">
@@ -162,7 +162,8 @@ When true, hides the names and groups the comments.  -->
 					<c:otherwise><fmt:formatNumber value="${rating.averageRating}" type="number" maxFractionDigits="0" /></c:otherwise>
 				</c:choose>
 			:</strong>
-			&nbsp;<c:out value="${rating.itemDescription}" escapeXml="true"/>&nbsp;
+			&nbsp;<c:if test="${not currentUserDisplay}"><lams:Portrait userId="${rating.itemId}"/></c:if>
+			<span class="portrait-sm-lineheight"><c:out value="${rating.itemDescription}" escapeXml="true"/>&nbsp;</span>
 				<c:if test="${not currentUserDisplay && not empty rating.userRating}">
 					(${rating.userRating})
 				</c:if>
@@ -183,7 +184,8 @@ When true, hides the names and groups the comments.  -->
 					<c:otherwise>${rating.averageRating}</c:otherwise>
 				</c:choose>
 			:</strong>
-			&nbsp;<c:out value="${rating.itemDescription}" escapeXml="true"/>&nbsp;
+			&nbsp;<c:if test="${not currentUserDisplay}"><lams:Portrait userId="${rating.itemId}"/></c:if>
+			<span class="portrait-sm-lineheight"><c:out value="${rating.itemDescription}" escapeXml="true"/>&nbsp;</span>
 				<c:if test="${not currentUserDisplay && not empty rating.userRating}">
 					(${rating.userRating})
 				</c:if>

diff --git a/lams_central/web/css/_learner_base.scss b/lams_central/web/css/_learner_base.scss
@@ -1027,6 +1027,11 @@ $portrait-size-image-xl: 400px;
 	color:$portrait-color-6;
 }
 
+// lineheight setting to use on the name if it is next to portrait, as generated by the Portrait tag. e.g. in Peer Review
+.portrait-sm-lineheight {
+	line-height: 32px;
+}
+
 .portrait-generic-sm {
 	@include portrait-generic($portrait-size-image-sm, 35px);
 }

diff --git a/lams_central/web/includes/javascript/portrait.js b/lams_central/web/includes/javascript/portrait.js
@@ -35,6 +35,45 @@ function addPortrait( selector, portraitId, userId, size, round, LAMS_URL ) {
     }
 }
 
+// Define a DIV element that is the learner's portrait. Call in the ajaxProcessing (tablesorter) or 
+// in a formatter function (jqgrid). Is the direct eqivalent of the Portrait tag. Use this method if you need to return
+// the HTML which defines a portrait. Use addPortrait if you need to add a portrait to an existing DIV.
+function definePortrait( portraitId, userId, size, round, LAMS_URL, portraitLocationClasses ) {
+    var isRound = round == null ? true : round;
+    if ( portraitId  && portraitId > 0) {
+    		var retValue = '<div style="background-image:url(' + LAMS_URL + 'download?preferDownload=false&uuid='
+    			+ portraitId + _getSizeVersion(size) + ')" class="' + _getSizeCSS(size);
+    		if ( isRound ) {
+    			retValue += ' ' + CSS_ROUND;
+    		}
+    		if ( portraitLocationClasses ) {
+    			retValue += ' ' + portraitLocationClasses;
+    		}
+    		retValue += '"></div>';
+    		return retValue;
+    } else {
+		var retValue = '<div class="' + _getGenericSizeClass(size) + ' ' + getPortraitColourClass(userId);
+		if ( portraitLocationClasses ) {
+			retValue += ' ' + portraitLocationClasses;
+		}
+		retValue += '"></div>';
+		return retValue;
+    }
+}
+
+// define a small header with the portrait and two lines of text next to portrait
+function definePortraitMiniHeader(portraitId, userId, LAMS_URL, line1, line2, portraitOnRight, otherClasses) {
+	var html = '<div';
+	if ( otherClasses )
+		html += ' class="' + otherClasses + '"';
+	html += '>';
+	html += definePortrait(portraitId, userId, "small", true, LAMS_URL, portraitOnRight ? "pull-right" : "pull-left roffset5");
+	html += '<span>' + line1 + '</span>';
+	html += '<br/><span style="font-size: smaller">' + line2 + '</span>';
+	html += '</div>';
+	return html;
+}
+
 // Get the colour that would be used for the generic portrait. Useful when you need a consistent colour for a user. 
 function getPortraitColourClass(userId) {
 	return PORTRAIT_VERSION_SUFFIX + userId % NUM_COLORS;

diff --git a/lams_gradebook/web/WEB-INF/tags/StyledRating.tag b/lams_gradebook/web/WEB-INF/tags/StyledRating.tag
@@ -44,7 +44,7 @@ When true, hides the names and groups the comments.  -->
 		<tr>
 			<c:if test="${not currentUserDisplay}">
 			<td>
-				<c:out value="${rating.itemDescription}" escapeXml="true"/>
+				<lams:Portrait userId="${rating.itemId}"/><span class="portrait-sm-lineheight"><c:out value="${rating.itemDescription}" escapeXml="true"/></span>
 			</td>
 			</c:if>
 			<td>
@@ -64,7 +64,7 @@ When true, hides the names and groups the comments.  -->
 		<table class="tablesorter">
 		<thead>
 			<tr>
-				<th class="username" title="<fmt:message key='label.sort.by.user.name'/>" width="${criteriaRatings.ratingCriteria.commentsEnabled ? '20%' : '33%'}" > 
+				<th class="username" title="<fmt:message key='label.sort.by.user.name'/>" width="${criteriaRatings.ratingCriteria.commentsEnabled ? '25%' : '40%'}" > 
 					<fmt:message key="label.user.name" />
 				</th>
 				<th class="rating text-center ">
@@ -82,7 +82,7 @@ When true, hides the names and groups the comments.  -->
 			<c:if test="${not empty rating.averageRating}">
 			<tr>
 				<td>
-					<c:out value="${rating.itemDescription}" escapeXml="true"/>
+					<lams:Portrait userId="${rating.itemId}"/><span class="portrait-sm-lineheight"><c:out value="${rating.itemDescription}" escapeXml="true"/></span>
 				</td>
 				<td class="rating">
 					<div class="rating-stars-holder text-center center-block">
@@ -162,7 +162,8 @@ When true, hides the names and groups the comments.  -->
 					<c:otherwise><fmt:formatNumber value="${rating.averageRating}" type="number" maxFractionDigits="0" /></c:otherwise>
 				</c:choose>
 			:</strong>
-			&nbsp;<c:out value="${rating.itemDescription}" escapeXml="true"/>&nbsp;
+			&nbsp;<c:if test="${not currentUserDisplay}"><lams:Portrait userId="${rating.itemId}"/></c:if>
+			<span class="portrait-sm-lineheight"><c:out value="${rating.itemDescription}" escapeXml="true"/>&nbsp;</span>
 				<c:if test="${not currentUserDisplay && not empty rating.userRating}">
 					(${rating.userRating})
 				</c:if>
@@ -183,7 +184,8 @@ When true, hides the names and groups the comments.  -->
 					<c:otherwise>${rating.averageRating}</c:otherwise>
 				</c:choose>
 			:</strong>
-			&nbsp;<c:out value="${rating.itemDescription}" escapeXml="true"/>&nbsp;
+			&nbsp;<c:if test="${not currentUserDisplay}"><lams:Portrait userId="${rating.itemId}"/></c:if>
+			<span class="portrait-sm-lineheight"><c:out value="${rating.itemDescription}" escapeXml="true"/>&nbsp;</span>
 				<c:if test="${not currentUserDisplay && not empty rating.userRating}">
 					(${rating.userRating})
 				</c:if>

diff --git a/lams_learning/web/WEB-INF/tags/StyledRating.tag b/lams_learning/web/WEB-INF/tags/StyledRating.tag
@@ -44,7 +44,7 @@ When true, hides the names and groups the comments.  -->
 		<tr>
 			<c:if test="${not currentUserDisplay}">
 			<td>
-				<c:out value="${rating.itemDescription}" escapeXml="true"/>
+				<lams:Portrait userId="${rating.itemId}"/><span class="portrait-sm-lineheight"><c:out value="${rating.itemDescription}" escapeXml="true"/></span>
 			</td>
 			</c:if>
 			<td>
@@ -64,7 +64,7 @@ When true, hides the names and groups the comments.  -->
 		<table class="tablesorter">
 		<thead>
 			<tr>
-				<th class="username" title="<fmt:message key='label.sort.by.user.name'/>" width="${criteriaRatings.ratingCriteria.commentsEnabled ? '20%' : '33%'}" > 
+				<th class="username" title="<fmt:message key='label.sort.by.user.name'/>" width="${criteriaRatings.ratingCriteria.commentsEnabled ? '25%' : '40%'}" > 
 					<fmt:message key="label.user.name" />
 				</th>
 				<th class="rating text-center ">
@@ -82,7 +82,7 @@ When true, hides the names and groups the comments.  -->
 			<c:if test="${not empty rating.averageRating}">
 			<tr>
 				<td>
-					<c:out value="${rating.itemDescription}" escapeXml="true"/>
+					<lams:Portrait userId="${rating.itemId}"/><span class="portrait-sm-lineheight"><c:out value="${rating.itemDescription}" escapeXml="true"/></span>
 				</td>
 				<td class="rating">
 					<div class="rating-stars-holder text-center center-block">
@@ -162,7 +162,8 @@ When true, hides the names and groups the comments.  -->
 					<c:otherwise><fmt:formatNumber value="${rating.averageRating}" type="number" maxFractionDigits="0" /></c:otherwise>
 				</c:choose>
 			:</strong>
-			&nbsp;<c:out value="${rating.itemDescription}" escapeXml="true"/>&nbsp;
+			&nbsp;<c:if test="${not currentUserDisplay}"><lams:Portrait userId="${rating.itemId}"/></c:if>
+			<span class="portrait-sm-lineheight"><c:out value="${rating.itemDescription}" escapeXml="true"/>&nbsp;</span>
 				<c:if test="${not currentUserDisplay && not empty rating.userRating}">
 					(${rating.userRating})
 				</c:if>
@@ -183,7 +184,8 @@ When true, hides the names and groups the comments.  -->
 					<c:otherwise>${rating.averageRating}</c:otherwise>
 				</c:choose>
 			:</strong>
-			&nbsp;<c:out value="${rating.itemDescription}" escapeXml="true"/>&nbsp;
+			&nbsp;<c:if test="${not currentUserDisplay}"><lams:Portrait userId="${rating.itemId}"/></c:if>
+			<span class="portrait-sm-lineheight"><c:out value="${rating.itemDescription}" escapeXml="true"/>&nbsp;</span>
 				<c:if test="${not currentUserDisplay && not empty rating.userRating}">
 					(${rating.userRating})
 				</c:if>

diff --git a/lams_learning/web/grouping/show.jsp b/lams_learning/web/grouping/show.jsp
@@ -56,7 +56,7 @@ License Information: http://lamsfoundation.org/licensing/lams/2.0/
 								<td width="15%"><strong><c:out value="${group.groupName}" /></strong></td>
 								<td><c:forEach items="${group.users}" var="user">
 										<div name="u-${user.userId}" class="user-container">
-											<i name="ui-${user.userId}" class="fa fa-xs fa-user"></i>&nbsp;<c:out value="${user.firstName}" />&nbsp<c:out value="${user.lastName}" />
+											<lams:Portrait userId="${user.userId}"/><c:out value="${user.firstName}" />&nbsp<c:out value="${user.lastName}" />
 										</div>
 									</c:forEach></td>
 							</tr>

diff --git a/lams_monitoring/web/WEB-INF/tags/StyledRating.tag b/lams_monitoring/web/WEB-INF/tags/StyledRating.tag
@@ -44,7 +44,7 @@ When true, hides the names and groups the comments.  -->
 		<tr>
 			<c:if test="${not currentUserDisplay}">
 			<td>
-				<c:out value="${rating.itemDescription}" escapeXml="true"/>
+				<lams:Portrait userId="${rating.itemId}"/><span class="portrait-sm-lineheight"><c:out value="${rating.itemDescription}" escapeXml="true"/></span>
 			</td>
 			</c:if>
 			<td>
@@ -64,7 +64,7 @@ When true, hides the names and groups the comments.  -->
 		<table class="tablesorter">
 		<thead>
 			<tr>
-				<th class="username" title="<fmt:message key='label.sort.by.user.name'/>" width="${criteriaRatings.ratingCriteria.commentsEnabled ? '20%' : '33%'}" > 
+				<th class="username" title="<fmt:message key='label.sort.by.user.name'/>" width="${criteriaRatings.ratingCriteria.commentsEnabled ? '25%' : '40%'}" > 
 					<fmt:message key="label.user.name" />
 				</th>
 				<th class="rating text-center ">
@@ -82,7 +82,7 @@ When true, hides the names and groups the comments.  -->
 			<c:if test="${not empty rating.averageRating}">
 			<tr>
 				<td>
-					<c:out value="${rating.itemDescription}" escapeXml="true"/>
+					<lams:Portrait userId="${rating.itemId}"/><span class="portrait-sm-lineheight"><c:out value="${rating.itemDescription}" escapeXml="true"/></span>
 				</td>
 				<td class="rating">
 					<div class="rating-stars-holder text-center center-block">
@@ -162,7 +162,8 @@ When true, hides the names and groups the comments.  -->
 					<c:otherwise><fmt:formatNumber value="${rating.averageRating}" type="number" maxFractionDigits="0" /></c:otherwise>
 				</c:choose>
 			:</strong>
-			&nbsp;<c:out value="${rating.itemDescription}" escapeXml="true"/>&nbsp;
+			&nbsp;<c:if test="${not currentUserDisplay}"><lams:Portrait userId="${rating.itemId}"/></c:if>
+			<span class="portrait-sm-lineheight"><c:out value="${rating.itemDescription}" escapeXml="true"/>&nbsp;</span>
 				<c:if test="${not currentUserDisplay && not empty rating.userRating}">
 					(${rating.userRating})
 				</c:if>
@@ -183,7 +184,8 @@ When true, hides the names and groups the comments.  -->
 					<c:otherwise>${rating.averageRating}</c:otherwise>
 				</c:choose>
 			:</strong>
-			&nbsp;<c:out value="${rating.itemDescription}" escapeXml="true"/>&nbsp;
+			&nbsp;<c:if test="${not currentUserDisplay}"><lams:Portrait userId="${rating.itemId}"/></c:if>
+			<span class="portrait-sm-lineheight"><c:out value="${rating.itemDescription}" escapeXml="true"/>&nbsp;</span>
 				<c:if test="${not currentUserDisplay && not empty rating.userRating}">
 					(${rating.userRating})
 				</c:if>

diff --git a/lams_tool_assessment/web/WEB-INF/tags/StyledRating.tag b/lams_tool_assessment/web/WEB-INF/tags/StyledRating.tag
@@ -44,7 +44,7 @@ When true, hides the names and groups the comments.  -->
 		<tr>
 			<c:if test="${not currentUserDisplay}">
 			<td>
-				<c:out value="${rating.itemDescription}" escapeXml="true"/>
+				<lams:Portrait userId="${rating.itemId}"/><span class="portrait-sm-lineheight"><c:out value="${rating.itemDescription}" escapeXml="true"/></span>
 			</td>
 			</c:if>
 			<td>
@@ -64,7 +64,7 @@ When true, hides the names and groups the comments.  -->
 		<table class="tablesorter">
 		<thead>
 			<tr>
-				<th class="username" title="<fmt:message key='label.sort.by.user.name'/>" width="${criteriaRatings.ratingCriteria.commentsEnabled ? '20%' : '33%'}" > 
+				<th class="username" title="<fmt:message key='label.sort.by.user.name'/>" width="${criteriaRatings.ratingCriteria.commentsEnabled ? '25%' : '40%'}" > 
 					<fmt:message key="label.user.name" />
 				</th>
 				<th class="rating text-center ">
@@ -82,7 +82,7 @@ When true, hides the names and groups the comments.  -->
 			<c:if test="${not empty rating.averageRating}">
 			<tr>
 				<td>
-					<c:out value="${rating.itemDescription}" escapeXml="true"/>
+					<lams:Portrait userId="${rating.itemId}"/><span class="portrait-sm-lineheight"><c:out value="${rating.itemDescription}" escapeXml="true"/></span>
 				</td>
 				<td class="rating">
 					<div class="rating-stars-holder text-center center-block">
@@ -162,7 +162,8 @@ When true, hides the names and groups the comments.  -->
 					<c:otherwise><fmt:formatNumber value="${rating.averageRating}" type="number" maxFractionDigits="0" /></c:otherwise>
 				</c:choose>
 			:</strong>
-			&nbsp;<c:out value="${rating.itemDescription}" escapeXml="true"/>&nbsp;
+			&nbsp;<c:if test="${not currentUserDisplay}"><lams:Portrait userId="${rating.itemId}"/></c:if>
+			<span class="portrait-sm-lineheight"><c:out value="${rating.itemDescription}" escapeXml="true"/>&nbsp;</span>
 				<c:if test="${not currentUserDisplay && not empty rating.userRating}">
 					(${rating.userRating})
 				</c:if>
@@ -183,7 +184,8 @@ When true, hides the names and groups the comments.  -->
 					<c:otherwise>${rating.averageRating}</c:otherwise>
 				</c:choose>
 			:</strong>
-			&nbsp;<c:out value="${rating.itemDescription}" escapeXml="true"/>&nbsp;
+			&nbsp;<c:if test="${not currentUserDisplay}"><lams:Portrait userId="${rating.itemId}"/></c:if>
+			<span class="portrait-sm-lineheight"><c:out value="${rating.itemDescription}" escapeXml="true"/>&nbsp;</span>
 				<c:if test="${not currentUserDisplay && not empty rating.userRating}">
 					(${rating.userRating})
 				</c:if>