Thread model and UI improvements

Adds thread model/collection for managing conversation-level state, such
as unreadCounts, group membership, thread order, etc... plus various UI
improvements enabled by thread model, including an improved compose
flow, and thread-destroy button.

Adds Whisper.notify for presenting messages to the user in an orderly
fashion. Currently using a growl-style fade in/out effect.

Also some housekeeping:
Cut up views into separate files.
Partial fix for formatTimestamp.
Tweaked buttons and other styles.

css/buttons.css

@@ -1,26 +1,44 @@
-.btn span {
+.btn {
   display: inline-block;
   padding: 0.5em;
-  border: 2px solid #7fd0ed;
-  border-radius: 4px;
-}
-.btn {
+  border: 2px solid #acdbf5;
   border-radius: 4px;
   background-color: #fff;
-  padding: 2px;
-  border: none;
+  color: #7fd0ed;
+  font-weight: bold;
 }
 .btn:hover, .btn:focus {
   cursor: pointer;
   outline: none;
-  background-color: #f1fafd;
+}
+.btn:hover {
+  background-color: #7fd0ed;
+  border-color: #acdbf5;
+  color: #fff;
 }
 .btn:active {
   outline: 2px dashed #acdbf5;
+  outline-offset: 2px;
 }
-.btn.selected span,
-.btn:active span {
+.btn.selected ,
+.btn:active {
   background-color: #7fd0ed;
   border: 2px solid #acdbf5;
   color: #fff;
 }
+.btn:active {
+  background-color: #f1fafd;
+  color: #7fd0ed;
+}
+
+.btn-square {
+  display: inline-block;
+  width: 32px;
+  line-height: 15px;
+}
+
+.btn-sm.btn-square {
+  padding: 0;
+  width: 25px;
+  height: 25px;
+}

css/conversation.css

@@ -1,6 +1,7 @@
 .conversation {
+  box-sizing: border-box;
   position: relative;
-  max-width: 400px;
+  min-height: 64px;
   margin: auto;
   padding: 1em;
   border-radius: 10px;
@@ -47,9 +48,12 @@
 }
 
 .conversation .header {
-  padding: 0.3em 0.6em 0.3em 46px;
+  padding: 0.3em 0 0.3em 46px;
 }
-.avatar {
+.conversation .btn.destroy {
+  float: right;
+}
+.conversation .image {
   position: absolute;
   top: 8px;
   left: 10px;
@@ -69,18 +73,20 @@
 .collapsable {
   background-color: #fff;
   border: 2px solid #acdbf5;
-  padding: 1em 0em;
+  padding: 1em 0em 0em;
   line-height: 1.2em;
   font-family: sans-serif;
-  border-radius: 30px;
+  border-radius: 20px 0;
 }
 
-.messages + form {
-  text-align: right;
+.collapsable form {
+  margin: 0;
+  padding: 1em;
 }
-
-.conversation form {
-  margin-top: 0.5em;
+.collapsable input[type=text] {
+  box-sizing: border-box;
+  width: 100%;
+  border: none;
 }
 
 .message-text {

css/forms.css

@@ -1,7 +1,7 @@
 input[type=text], textarea {
   position: relative;
   display: inline-block;
-  padding: 7px;
+  padding: 0.5em;
   border: 2px solid #7fd0ed;
   border-radius: 4px;
   background-color: #fafafa;
@@ -9,6 +9,7 @@ input[type=text], textarea {
 }
 
 
+input[type=submit]:focus,
 input[type=text]:focus {
   outline: 2px dashed #acdbf5;
   outline-offset: 2px;

css/popup.css

@@ -35,22 +35,19 @@ header {
   padding: 5px 0;
 }
 
-form.compose {
-  position: relative;
-}
-
 label {
   float: left;
   margin-right: 1em;
 }
 
-form.compose input[type=text], form.compose textarea {
-  margin: 0.5em 0;
-}
-#send input[type=submit] {
+#compose-cancel {
   float: right;
 }
 
+#send .conversation {
+  padding: 0.3em 1em;
+}
+
 #popup_send_numbers {
   margin-bottom: 0;
 }
@@ -95,5 +92,19 @@ ul {
 li {
   list-style: none;
 }
-
-/* Formatting */
+#send_link ~ #new-chat-help,
+#new-group ~ #new-group-help {
+  display: none;
+}
+#send_link:hover ~ #new-chat-help,
+#new-group:hover ~ #new-group-help {
+  display: block;
+}
+.help {
+  display: inline-block;
+  position: fixed;
+  top: 10;
+  right: 10;
+  font-size: 0.8em;
+  color: #7fd0ed;
+}