From f75d7f9540350fcc16098770739c429a3f755bde Mon Sep 17 00:00:00 2001
From: =?utf8?q?David=20=E2=80=98Bombe=E2=80=99=20Roden?=
 <bombe@pterodactylus.net>
Date: Fri, 5 Nov 2010 09:58:47 +0100
Subject: [PATCH] Add WoT identicons as avatars.

---
 src/main/resources/static/css/sone.css             | 21 ++++++++++++++++++++-
 src/main/resources/static/javascript/sone.js       | 14 +++++++-------
 src/main/resources/templates/include/head.html     |  6 +++---
 src/main/resources/templates/include/viewPost.html | 10 ++++++++++
 4 files changed, 40 insertions(+), 11 deletions(-)

diff --git a/src/main/resources/static/css/sone.css b/src/main/resources/static/css/sone.css
index 875d6aa..22e411b 100644
--- a/src/main/resources/static/css/sone.css
+++ b/src/main/resources/static/css/sone.css
@@ -138,6 +138,16 @@ textarea {
 	border-bottom: none;
 }
 
+#sone .post > .avatar {
+	position: absolute;
+}
+
+#sone .post > .inner-part {
+	margin-left: 48px;
+	padding-left: 0.5em;
+	min-height: 48px;
+}
+
 #sone .post .author {
 	display: inline;
 	font-weight: bold;
@@ -149,7 +159,6 @@ textarea {
 }
 
 #sone .post .status-line {
-	clear: both;
 	margin-top: 0.5ex;
 	font-size: 85%;
 }
@@ -201,6 +210,16 @@ textarea {
 	padding-top: 0.2ex;
 }
 
+#sone .post .reply > .avatar {
+	position: absolute;
+}
+
+#sone .post .reply > .inner-part {
+	margin-left: 36px;
+	padding-left: 0.5em;
+	min-height: 36px;
+}
+
 #sone .post .reply {
 	clear: both;
 	background-color: #f0f0ff;
diff --git a/src/main/resources/static/javascript/sone.js b/src/main/resources/static/javascript/sone.js
index 695503c..66314e1 100644
--- a/src/main/resources/static/javascript/sone.js
+++ b/src/main/resources/static/javascript/sone.js
@@ -297,16 +297,16 @@ function getReplyId(element) {
 
 function likePost(postId) {
 	$.getJSON("ajax/like.ajax", { "type": "post", "post" : postId, "formPassword": getFormPassword() }, function() {
-		$("#sone .post#" + postId + " > .status-line .like").addClass("hidden");
-		$("#sone .post#" + postId + " > .status-line .unlike").removeClass("hidden");
+		$("#sone .post#" + postId + " > .inner-part > .status-line .like").addClass("hidden");
+		$("#sone .post#" + postId + " > .inner-part > .status-line .unlike").removeClass("hidden");
 		updatePostLikes(postId);
 	});
 }
 
 function unlikePost(postId) {
 	$.getJSON("ajax/unlike.ajax", { "type": "post", "post" : postId, "formPassword": getFormPassword() }, function() {
-		$("#sone .post#" + postId + " > .status-line .unlike").addClass("hidden");
-		$("#sone .post#" + postId + " > .status-line .like").removeClass("hidden");
+		$("#sone .post#" + postId + " > .inner-part > .status-line .unlike").addClass("hidden");
+		$("#sone .post#" + postId + " > .inner-part > .status-line .like").removeClass("hidden");
 		updatePostLikes(postId);
 	});
 }
@@ -314,9 +314,9 @@ function unlikePost(postId) {
 function updatePostLikes(postId) {
 	$.getJSON("ajax/getLikes.ajax", { "type": "post", "post": postId }, function(data, textStatus) {
 		if (data.success) {
-			$("#sone .post#" + postId + " > .status-line .likes").toggleClass("hidden", data.likes == 0)
-			$("#sone .post#" + postId + " > .status-line .likes span.like-count").text(data.likes);
-			$("#sone .post#" + postId + " > .status-line .likes > span").attr("title", generateSoneList(data.sones));
+			$("#sone .post#" + postId + " > .inner-part > .status-line .likes").toggleClass("hidden", data.likes == 0)
+			$("#sone .post#" + postId + " > .inner-part > .status-line .likes span.like-count").text(data.likes);
+			$("#sone .post#" + postId + " > .inner-part > .status-line .likes > span").attr("title", generateSoneList(data.sones));
 		}
 	});
 }
diff --git a/src/main/resources/templates/include/head.html b/src/main/resources/templates/include/head.html
index 5f0d567..19a5f38 100644
--- a/src/main/resources/templates/include/head.html
+++ b/src/main/resources/templates/include/head.html
@@ -34,7 +34,7 @@
 		$(document).ready(function() {
 			$("#sone .post").each(function() {
 				postId = $(this).attr("id");
-				enhanceDeletePostButton("#sone .post#" + postId + " > .status-line .delete button", postId);
+				enhanceDeletePostButton("#sone .post#" + postId + " > .inner-part > .status-line .delete button", postId);
 				(function(postId) {
 					$("#sone .post#" + postId + " .reply").each(function() {
 						replyId = $(this).attr("id");
@@ -104,11 +104,11 @@
 	<script language="javascript">
 		/* convert all “like” buttons to javascript functions. */
 		$(document).ready(function() {
-			$("#sone .post > .status-line .like").submit(function() {
+			$("#sone .post > .inner-part > .status-line .like").submit(function() {
 				likePost(getPostId(this));
 				return false;
 			});
-			$("#sone .post > .status-line .unlike").submit(function() {
+			$("#sone .post > .inner-part > .status-line .unlike").submit(function() {
 				unlikePost(getPostId(this));
 				return false;
 			});
diff --git a/src/main/resources/templates/include/viewPost.html b/src/main/resources/templates/include/viewPost.html
index 3d4b409..c5df1f0 100644
--- a/src/main/resources/templates/include/viewPost.html
+++ b/src/main/resources/templates/include/viewPost.html
@@ -1,4 +1,8 @@
 <div id="<% post.id|html>" class="post<%if loop.last> last<%/if>">
+	<div class="avatar">
+		<img src="/WoT/GetIdenticon?identity=<% post.sone.id|html>&amp;width=48&height=48" width="48" height="48" alt="Avatar Image" />
+	</div>
+	<div class="inner-part">
 	<div>
 		<div class="author profile-link"><a href="viewSone.html?sone=<% post.sone.id|html>"><% post.sone.niceName|html></a></div>
 		<div class="text"><% post.text|html></div>
@@ -34,6 +38,10 @@
 	<div class="replies">
 		<%foreach post.replies reply>
 			<div id="<% reply.id|html>" class="reply">
+				<div class="avatar">
+					<img src="/WoT/GetIdenticon?identity=<% reply.sone.id|html>&amp;width=36&height=36" width="36" height="36" alt="Avatar Image" />
+				</div>
+				<div class="inner-part">
 				<div>
 					<div class="author profile-link"><a href="viewSone.html?sone=<% reply.sone.id|html>"><% reply.sone.niceName|html></a></div>
 					<div class="text"><% reply.text|html></div>
@@ -66,6 +74,7 @@
 						</form>
 					<%/if>
 				</div>
+				</div>
 			</div>
 		<%/foreach>
 		<%ifnull ! currentSone>
@@ -80,4 +89,5 @@
 			</div>
 		<%/if>
 	</div>
+	</div>
 </div>
-- 
2.7.4