showing assignee avatar in flags list

public/less/generics.less

@@ -88,6 +88,12 @@
 	/* Contains the user icon class as a mixin, so there's no need to include that in the template */
 	.user-icon;
 
+	&.avatar-xs {
+		width: 16px;
+		height: 16px;
+		.user-icon-style(16px, 1rem);
+	}
+
 	&.avatar-sm {
 		width: 24px;
 		height: 24px;

src/posts/flags.js

@@ -228,7 +228,7 @@ module.exports = function (Posts) {
 			async.apply(Posts.expandFlagHistory),
 			function (posts, next) {
 				// Parse out flag data into its own object inside each post hash
-				posts = posts.map(function (postObj) {
+				async.map(posts, function (postObj, next) {
 					for(var prop in postObj) {
 						postObj.flagData = postObj.flagData || {};
 
@@ -256,10 +256,19 @@ module.exports = function (Posts) {
 						}
 					}
 
-					return postObj;
-				});
+					if (postObj.flagData.assignee) {
+						user.getUserFields(parseInt(postObj.flagData.assignee, 10), ['username', 'picture'], function (err, userData) {
+							if (err) {
+								return next(err);
+							}
 
-				setImmediate(next.bind(null, null, posts));
+							postObj.flagData.assigneeUser = userData;
+							next(null, postObj);
+						});
+					} else {
+						setImmediate(next.bind(null, null, postObj));
+					}
+				}, next);
 			}
 		], callback);
 	}

src/views/admin/manage/flags.tpl

@@ -70,6 +70,15 @@
 					<div class="panel-heading" role="tab">
 						<h4 class="panel-title">
 							<a role="button" data-toggle="collapse" data-parent="#accordion" href="#flag-pid-{posts.pid}" aria-expanded="true" aria-controls="flag-pid-{posts.pid}">
+								<!-- IF ../flagData.assignee -->
+								<div class="pull-right">
+									<!-- IF ../flagData.assigneeUser.picture -->
+									<img class="avatar avatar-xs" title="{../flagData.assigneeUser.username}" src="{../flagData.assigneeUser.picture}">
+									<!-- ELSE -->
+									<div class="avatar avatar-xs" title="{../flagData.assigneeUser.username}" style="background-color: {../flagData.assigneeUser.icon:bgColor};">{../flagData.assigneeUser.icon:text}</div>
+									<!-- ENDIF ../flagData.assigneeUser.picture -->
+								</div>
+								<!-- ENDIF ../flagData.assignee -->
 								<span class="label <!-- IF ../flagData.labelClass -->label-{../flagData.labelClass}<!-- ELSE -->label-info<!-- ENDIF ../flagData.labelClass -->">[[topic:flag_manage_state_<!-- IF ../flagData.state -->{../flagData.state}<!-- ELSE -->open<!-- ENDIF ../flagData.state -->]]</span>
 								&nbsp;[[topic:flag_manage_title, {posts.category.name}]]
 								<small><span class="timeago" title="{posts.timestampISO}"></span></small>
@@ -85,7 +94,7 @@
 											<!-- IF ../user.picture -->
 											<img title="{posts.user.username}" src="{../user.picture}">
 											<!-- ELSE -->
-											<div class="user-icon" style="background-color: {../user.icon:bgColor};">{../user.icon:text}</div>
+											<div title="{posts.user.username}" class="user-icon" style="background-color: {../user.icon:bgColor};">{../user.icon:text}</div>
 											<!-- ENDIF ../user.picture -->
 										</a>