Work on message styling

Replicates some styles from the android app.

js/popup.js

@@ -26,17 +26,25 @@ registerOnLoadFunction(function() {
 
 			conversations.sort(function(a, b) { return b[0].timestamp - a[0].timestamp });
 
-			var ul = $('#messages');
+			var ul = $('#conversations');
 			ul.html('');
 			for (var i = 0; i < MAX_CONVERSATIONS && i < conversations.length; i++) {
 				var conversation = conversations[i];
-				ul.append('<li>');
+				var messages = $('<ul class="conversation">');
 				for (var j = 0; j < MAX_MESSAGES_PER_CONVERSATION && j < conversation.length; j++) {
 					var message = conversation[j];
-					ul.append("From: " + message.sender + ", at: " + timestampToHumanReadable(message.timestamp) + "<br>");
-					ul.append("Message: " + message.message + "<br><br>");
+					$('<li class="message incoming">').
+						append($('<div class="avatar">')).
+						append($('<div class="bubble">').
+							append($('<span class="message-text">').text(message.message)).
+							append($('<span class="metadata">').text("From: " + message.sender + ", at: " + timestampToHumanReadable(message.timestamp)))
+						).appendTo(messages);
 				}
-				ul.append("<input type='text' id=text" + i + " /><button id=button" + i + ">Send</button><br>");
+				$('<li>').
+					append(messages).
+					append($("<form class='container'>").
+						append("<input type='text' id=text" + i + " /><button id=button" + i + ">Send</button><br>")
+					).appendTo(ul);
 				$('#button' + i).click(function() {
 					var sendDestinations = [conversation[0].sender];
 					for (var j = 0; j < conversation[0].destinations.length; j++)
@@ -49,7 +57,6 @@ registerOnLoadFunction(function() {
 						console.log("Sent message: " + result);
 					});
 				});
-				ul.append('</li>');
 			}
 		}
 

popup.css

@@ -88,4 +88,126 @@ textarea {
   margin-left: 5px;
 }
 
+ul {
+	margin: 0;
+	padding: 0;
+}
+li {
+	list-style: none;
+}
+
+/* TS styles */
+.conversation {
+  background-color: #eeeeee;
+}
+
+.bubble {
+  background-color: #fafafa;
+  color: #333333;
+}
+
+.metadata {
+  color: #cccccc;
+}
+
+.incoming .bubble {
+  background-color: #ffffff;
+}
+
+.sending .bubble {
+  opacity: 0.7;
+}
+
+/* Style variants */
+.blue-background {
+  background: #3a7ef2;
+}
+
+/* Formatting */
+.message-text {
+  display: block;
+  padding: 0.5em 0.6em 0em;
+}
+
+.metadata {
+  display: block;
+  font-size: 0.70em;
+  padding: 0.2em 0.6em;
+}
+
+.conversation {
+  font-family: sans-serif;
+  line-height: 1.2em;
+}
+
+.avatar {
+  display: inline-block;
+  background-color: #d0d0da;
+  width: 36px;
+  height: 36px;
+  border-radius: 36px;
+  float: left;
+}
+
+.bubble {
+  position: relative;
+  border-radius: 4.36364px;
+  max-width: 75%;
+  border-bottom: 2.25px solid #dddddd;
+}
+
+.incoming .bubble {
+  float: left;
+}
+.incoming .bubble:after {
+  content: '';
+  display: block;
+  position: absolute;
+  width: 0;
+  height: 0;
+  top: 11px;
+  left: -0.8em;
+  border-right: solid 0.5em #ffffff;
+  border-top: solid 7px transparent;
+  border-left: solid 0.4em transparent;
+  border-bottom: solid 7px transparent;
+}
+
+.outgoing .bubble {
+  float: right;
+}
+.outgoing .bubble:after {
+  content: '';
+  display: block;
+  position: absolute;
+  width: 0;
+  height: 0;
+  top: 11px;
+  right: -0.8em;
+  border-left: solid 0.5em #ffffff;
+  border-top: solid 7px transparent;
+  border-right: solid 0.4em transparent;
+  border-bottom: solid 7px transparent;
+}
+
+.outgoing .bubble, .outgoing .metadata {
+  text-align: right;
+}
+
+.message {
+  padding: 0.3em 11.63636px;
+}
+
+.message:after {
+  content: '';
+  display: block;
+  height: 0;
+  clear: both;
+}
+
+/* debug styles */
+/*
+.conversation { border: 1px solid red; }
+.message { border: 1px solid blue; }
+*/
 

popup.html

@@ -12,10 +12,6 @@
 	<div class='container'>
 		<div id="listener"></div>
 		<div id="log"></div>
-		<div id="inbox">
-			<ul id="messages">
-			</ul>
-		</div>
 		<div id="send" style="display:none;">
 			<form class="compose" action="#">
 				<input id="popup_send_numbers" type='text' placeholder="To">
@@ -31,6 +27,10 @@
 			</form>
 		</div>
 	</div>
+	<div id="inbox">
+		<ul id="conversations">
+		</ul>
+	</div>
 
 	<script type="text/javascript" src="js-deps/nacl-common.js"></script>
 	<script type="text/javascript" src="js-deps/jquery.js"></script>