Make popup a little nicer to look at

Also add a little auto-suggestion contacts list. For now it just contains your own number.
11 years ago · a67ab3a46f
parent 2ae5628122
commit a67ab3a46f
3 changed files with 123 additions and 15 deletions
--- a/js/popup.js
+++ b/js/popup.js
@ -59,8 +59,12 @@ registerOnLoadFunction(function() {
 				fillMessages();
 		});
 		fillMessages();
+		$('.my-number').text(storage.getUnencrypted("number_id").split(".")[0]);
 		storage.putUnencrypted("unreadCount", 0);
 		chrome.browserAction.setBadgeText({text: ""});
+		$("#me").click(function() {
+			$('#popup_send_numbers').val($('.my-number').text());
+		});

 		$("#popup_send_button").click(function() {
 			var numbers = [];
--- a/popup.css
+++ b/popup.css
@ -0,0 +1,91 @@
+.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; }
+.clearfix:after { clear: both; }  
+.clearfix { zoom: 1; }  
+
+body {
+  margin: 0;
+  min-width: 300px;
+  min-height: 500px;
+  font-family: sans-serif;
+  color: #333;
+}
+
+.container {
+  max-width: 960px;
+  margin: auto;
+  padding: 0 1em;
+}
+
+header {
+  background-color: ccc;
+  padding: 5px 0;
+}
+
+form.compose {
+  position: relative;
+}
+
+label {
+  float: left;
+  margin-right: 1em;
+}
+
+input[type=text], textarea {
+  display: block;
+  padding: 0.5em;
+  margin: 0.5em 0;
+  border-radius: 4px;
+  border: 1px solid #ddf;
+}
+
+textarea {
+  resize: vertical;
+  width: 100%;
+  min-height: 100px;
+  box-sizing: border-box;
+  font-family: Helvetica, Arial, sans-serif;
+  font-size: 14px;
+  line-height: 18px;
+}
+
+#send input[type=submit] {
+  float: right;
+}
+
+#popup_send_numbers {
+  margin-bottom: 0;
+}
+
+#popup_send_numbers:focus + .contacts,
+.contacts:hover {
+  display: block;
+}
+
+.contacts {
+  display: none;
+  position: absolute;
+  left: 10px;
+}
+
+.contact {
+  border: solid 1px #ccc;
+  background: #fff;
+  font-size: 88%;
+  padding-right: 5px;
+  cursor: pointer;
+}
+
+.contact .pic {
+  display: block;
+  float: left;
+  width: 30px;
+  height: 30px;
+  background: #ddd;
+}
+
+.contact .name, .contact .number {
+  line-height: 30px;
+  margin-left: 5px;
+}
+
+
--- a/popup.html
+++ b/popup.html
@ -1,22 +1,35 @@
 <html>
 <head>
+<link type='text/css' rel='stylesheet' href='popup.css'>
 </head>
 <body data-name="curve25519" data-tools="pnacl" data-configs="Debug Release" data-path="pnacl/{config}">
-	<div id="listener"></div>
-	<div id="log"></div>
-
-	<a id="inbox_link">Inbox</a>
-	<a id="send_link">Send</a>
-	<div id="inbox">
-		<ul id="messages">
-		</ul>
-	</div>
-	<div id="send" style="display:none;">
-		<form>
-			<input id="popup_send_numbers" />
-			<input id="popup_send_text" />
-			<a id="popup_send_button">Send</a>
-		</form>
+	<header class="clearfix">
+		<div class='container'>
+			<button id="inbox_link">Inbox</button>
+			<button id="send_link">Compose</button>
+		</div>
+	</header>
+	<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">
+				<input id="popup_send_numbers" type='text' placeholder="To">
+				<div class='contacts'>
+					<div id='me' class='contact'>
+						<span class='pic'></span>
+						<span class='name'>Me</span>
+						<span class='number my-number'></span>
+					</div>
+				</div>
+				<textarea id="popup_send_text"></textarea>
+				<button id="popup_send_button">Send</button>
+			</form>
+		</div>
 	</div>

 	<script type="text/javascript" src="js-deps/nacl-common.js"></script>