From 4e7d3a2962a47a75dea3c286d9e53ad847578631 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bar=C4=B1=C5=9F=20Soner=20U=C5=9Fakl=C4=B1?=
 <baris@nodebb.org>
Date: Thu, 23 Mar 2017 11:00:29 +0300
Subject: [PATCH] https://github.com/NodeBB/NodeBB/issues/5542

---
 less/account.less          |  4 ++++
 templates/account/info.tpl | 38 ++++++++++++++++++++++++++++++++++++--
 2 files changed, 40 insertions(+), 2 deletions(-)

diff --git a/less/account.less b/less/account.less
index ff94fa2..b2ddb84 100644
--- a/less/account.less
+++ b/less/account.less
@@ -272,6 +272,10 @@
 			margin-top: .25rem;
 		}
 	}
+
+	[component="account/moderation-note/list"] .icon {
+		margin-right: 10px;
+	}
 }
 
 
diff --git a/templates/account/info.tpl b/templates/account/info.tpl
index 4cbbd74..82bd157 100644
--- a/templates/account/info.tpl
+++ b/templates/account/info.tpl
@@ -144,9 +144,43 @@
 					<h3 class="panel-title">[[user:info.moderation-note]]</h3>
 				</div>
 				<div class="panel-body">
-					<textarea component="account/moderation-note" class="form-control">{moderationNote}</textarea>
+					<textarea component="account/moderation-note" class="form-control"></textarea>
 					<br/>
-					<button class="btn btn-sm pull-right btn-success" component="account/save-moderation-note">[[global:save]]</button>
+					<button class="btn btn-sm pull-right btn-success" component="account/save-moderation-note">[[user:info.moderation-note.add]]</button>
+					<br/>
+					<div component="account/moderation-note/list">
+						<!-- BEGIN moderationNotes -->
+						<hr/>
+
+						<div class="clearfix">
+							<div class="icon pull-left">
+								<a href="<!-- IF moderationNotes.user.userslug -->{config.relative_path}/user/{moderationNotes.user.userslug}<!-- ELSE -->#<!-- ENDIF moderationNotes.user.userslug -->">
+									<!-- IF moderationNotes.user.picture -->
+									<img class="avatar avatar-sm" component="user/picture" data-uid="{moderationNotes.user.uid}" src="{moderationNotes.user.picture}" align="left" itemprop="image" />
+									<!-- ELSE -->
+									<div component="user/picture" data-uid="{moderationNotes.user.uid}" class="user-icon" style="background-color: {moderationNotes.user.icon:bgColor};">{moderationNotes.user.icon:text}</div>
+									<!-- ENDIF moderationNotes.user.picture -->
+								</a>
+							</div>
+
+							<div class="pull-left">
+								<strong>
+									<a href="<!-- IF moderationNotes.user.userslug -->{config.relative_path}/user/{moderationNotes.user.userslug}<!-- ELSE -->#<!-- ENDIF moderationNotes.user.userslug -->" itemprop="author" data-username="{moderationNotes.user.username}" data-uid="{moderationNotes.user.uid}">{moderationNotes.user.username}</a>
+								</strong>
+
+								<div class="visible-xs-inline-block visible-sm-inline-block visible-md-inline-block visible-lg-inline-block">
+									<span class="timeago" title="{moderationNotes.timestampISO}"></span>
+								</div>
+								<br />
+
+								<div class="content">
+									{moderationNotes.note}
+								</div>
+							</div>
+						</div>
+						<!-- END moderationNotes -->
+					</div>
+					<!-- IMPORT partials/paginator.tpl -->
 				</div>
 			</div>
 			<!-- ENDIF isAdminOrGlobalModerator -->