Permalink
Browse files

UI: style Contacts and Compose

Both still need a nicer UX that uses the sidebar correctly.

I envision just three tabs: Inbox (with an option to access archived stuff as well), Outbox (sent mail + drafts + compose), and Contacts
  • Loading branch information...
1 parent d3000c6 commit a5af74bbc79926358a5e840c2247b0b4711d344e @dcposch committed Feb 10, 2014
Showing with 43 additions and 37 deletions.
  1. +36 −29 static/index.html
  2. +7 −8 static/js/app.js
View
65 static/index.html
@@ -109,7 +109,6 @@ <h4 class="modal-title">Welcome to Scramble!</h4>
<!-- PAGE STRUCTURE -->
<script id="page-template" type="text/x-handlebars-template">
-
<div class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
@@ -291,55 +290,63 @@ <h4 class="modal-title" id="myModalLabel">Keyboard shortcuts</h4>
<!-- COMPOSE -->
<script id="compose-template" type="text/x-handlebars-template">
- <div>
+ <div class="form">
{{#if inline}}
- <input type="hidden" name="subject" value="{{subject}}"/>
+ <input type="hidden" name="subject" value="{{subject}}" />
{{else}}
- <input type="text" name="subject" value="{{subject}}" class="invis-input lead" placeholder="Subject"/>
+ <div class="form-group">
+ <input type="text" name="subject" value="{{subject}}" class="form-control input-lg" placeholder="Subject" />
+ </div>
{{/if}}
<div class="panel panel-default">
<input type="hidden" name="ancestorIDs" value="{{ancestorIDs}}"/>
<input type="hidden" name="threadID" value="{{threadID}}"/>
- <div class="input-group invis-input-group">
- <span class="input-group-addon">To:</span><input name="to" type="text" class="form-control" value="{{to}}" placeholder="You must choose at least one recipient."></input>
- </div>
- <div class="panel-body">
- <textarea name="body" class="invis-input">{{body}}</textarea>
+ <div class="input-group">
+ <span class="input-group-addon">To:</span>
+ <input name="to" type="text" class="form-control" value="{{to}}" placeholder="You must choose at least one recipient." />
</div>
+
+ <textarea name="body" rows="15" class="form-control">{{body}}</textarea>
</div>
- <input type="submit" class="js-send-button btn btn-primary btn-lg" value="Send"></input>
+ <input type="submit" class="js-send-button btn btn-primary" value="Send"></input>
</div>
</script>
<!-- CONTACTS -->
<script id="contacts-template" type="text/x-handlebars-template">
-<div class="contacts">
- <h2>Contacts</h2>
- <ul>
- {{#each this}}
- <li>
- <input type="text" class="name" placeholder="(name)" value="{{name}}" />
- <input type="text" class="address" placeholder="(address)" value="{{address}}" />
- <input type="text" class="pubHash" placeholder="(key hash)" value="{{pubHash}}" disabled="true" />
- <a href="#" class="js-delete-button">[X]</a>
- </li>
- {{/each}}
- </ul>
- <button class="addContactButton">Add Contact</button>
- <button class="saveContactsButton">Save</button>
+<div class="js-contacts-form form form-horizontal">
+ {{#each this}}
+ <div class="form-group">
+ <div class="col-sm-3">
+ <input type="text" class="js-name form-control" placeholder="Name" value="{{name}}" />
+ </div>
+ <div class="col-sm-4">
+ <input type="text" class="js-address form-control" placeholder="Email address" value="{{address}}" />
+ </div>
+ <div class="js-pubhash col-sm-3" >{{pubHash}}&nbsp;</div>
+ <a href="#" class="js-delete-button col-sm-1">[X]</a>
+ </div>
+ {{/each}}
</div>
+<button class="js-add-contact btn btn-default">Add Contact</button>
+<button class="js-save-contacts btn btn-primary">Save</button>
</script>
<script id="new-contact-template" type="text/x-handlebars-template">
-<li class="new">
-<input type="text" class="name" placeholder="(name)"/>
-<input type="text" class="address" placeholder="(email address)"/>
-<a href="#" class="js-delete-button">[X]</a>
-</li>
+<div class="form-group">
+ <div class="col-sm-3">
+ <input type="text" class="js-name form-control" placeholder="Name" />
+ </div>
+ <div class="col-sm-4">
+ <input type="text" class="js-address form-control" placeholder="Email address" />
+ </div>
+ <div class="js-pubhash col-sm-3" >&nbsp;</div>
+ <a href="#" class="js-delete-button col-sm-1">[X]</a>
+</div>
</script>
View
15 static/js/app.js
@@ -1454,15 +1454,14 @@ function displayContacts() {
function bindContactsEvents() {
$(".contacts li .js-delete-button").click(deleteRow);
- $(".addContactButton").click(newRow);
- $(".saveContactsButton").click(function() {
- var rows = $(".contacts li");
+ $(".js-add-contact").click(newRow);
+ $(".js-save-contacts").click(function() {
+ var rows = $(".js-contacts-form > div");
var contacts = [];
- var needResolution = {}; // need to find pubhash before saving
- // {address: name}
+ var needResolution = {}; // need to find pubhash before saving {address: name}
for (var i = 0; i < rows.length; i++) {
- var name = trim($(rows[i]).find(".name").val());
- var address = trim($(rows[i]).find(".address").val());
+ var name = trim($(rows[i]).find(".js-name").val());
+ var address = trim($(rows[i]).find(".js-address").val());
var contact = getContact(address);
if (!address) {
continue;
@@ -1501,7 +1500,7 @@ function bindContactsEvents() {
function newRow() {
var row = $(render("new-contact-template"));
row.find(".js-delete-button").click(deleteRow);
- $(".contacts ul").append(row);
+ $(".js-contacts-form").append(row);
}
function deleteRow(e) {
$(e.target).parent().remove();

0 comments on commit a5af74b

Please sign in to comment.