More bootstrap work, status page now updates

themes/bootstrap/templates/mailbox/_show.html

@@ -2,26 +2,26 @@
 {{$id := .message.Id}}
 <div class="btn-group btn-group-sm message-controls" role="group" aria-label="Message Controls">
   <button type="button"
-          class="btn btn-default"
+          class="btn btn-primary"
           onClick="window.open('/link/{{$name}}/{{$id}}');">
     <span class="glyphicon glyphicon-link" aria-hidden="true"></span>
     Link
   </button>
   <button type="button"
-          class="btn btn-default"
+          class="btn btn-danger"
           onClick="deleteMessage('{{.message.Id}}');">
     <span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
     Delete
   </button>
   <button type="button"
-          class="btn btn-default"
+          class="btn btn-primary"
           onClick="messageSource('{{.message.Id}}');">
     <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
     Source
   </button>
   {{if .htmlAvailable}}
     <button type="button"
-            class="btn btn-default"
+            class="btn btn-primary"
             onClick="htmlView('{{.message.Id}}');">
       <span class="glyphicon glyphicon-new-window" aria-hidden="true"></span>
       HTML
@@ -29,32 +29,46 @@
   {{end}}
 </div>
 
-<div class="well well-sm message-header">
-  <dl class="dl-horizontal">
-    <dt>From:</dt>
-    <dd>{{.message.From}}</dd>
-    <dt>Date:</dt>
-    <dd>{{.message.Date}}</dd>
-    <dt>Subject:</dt>
-    <dd>{{.message.Subject}}</dd>
-  </dl>
-</div>
-
-<div id="message-body">{{.body}}</div>
-
-{{with .attachments}}
-<div class="panel panel-default message-attachments">
+<div class="panel panel-default message-header">
   <div class="panel-body">
-    <ul class="list-unstyled">
-      {{range $i, $e := .}}
-      <li>
-        {{$e.FileName}}
-        ({{$e.ContentType}})
-        <a href="/mailbox/vattach/{{$name}}/{{$id}}/{{$i}}/{{$e.FileName}}" target="_blank">View</a>
-        <a href="/mailbox/dattach/{{$name}}/{{$id}}/{{$i}}/{{$e.FileName}}">Download</a>
-      </li>
-      {{end}}
-    </ul>
+    <dl class="dl-horizontal">
+      <dt>From:</dt>
+      <dd>{{.message.From}}</dd>
+      <dt>Date:</dt>
+      <dd>{{.message.Date}}</dd>
+      <dt>Subject:</dt>
+      <dd>{{.message.Subject}}</dd>
+    </dl>
   </div>
 </div>
+
+<div class="message-body">{{.body}}</div>
+
+{{with .attachments}}
+<div class="well message-attachments">
+  <ul class="list-unstyled">
+    {{range $i, $e := .}}
+    <li>
+      <span class="glyphicon glyphicon-paperclip" aria-hidden="true"></span>
+      {{$e.FileName}}
+      ({{$e.ContentType}})
+      <a class="btn btn-success btn-sm"
+         role="button"
+         href="/mailbox/vattach/{{$name}}/{{$id}}/{{$i}}/{{$e.FileName}}"
+         target="_blank"
+         aria-label="View">
+        <span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span>
+        View
+      </a>
+      <a class="btn btn-primary btn-sm"
+         role="button"
+         hhref="/mailbox/dattach/{{$name}}/{{$id}}/{{$i}}/{{$e.FileName}}"
+         aria-label="Download">
+        <span class="glyphicon glyphicon-download" aria-hidden="true"></span>
+        Download
+      </a>
+    </li>
+    {{end}}
+  </ul>
+</div>
 {{end}}

themes/bootstrap/templates/mailbox/index.html

@@ -1,49 +1,50 @@
 {{define "title"}}{{printf "Inbucket for %v" .name}}{{end}}
+{{define "navMail"}}true{{end}}
 {{$name := .name}}
 
 {{define "script"}}
 <script>
-  var selected = "{{.selected}}"
+  var selected = "{{.selected}}";
   function messageLoaded(responseText, textStatus, XMLHttpRequest) {
     if (textStatus == "error") {
-      alert("Failed to load message, server said:\n" + responseText)
+      alert("Failed to load message, server said:\n" + responseText);
     } else {
-      window.scrollTo(0,0)
+      window.scrollTo(0,0);
     }
   }
 
   function listLoaded() {
     $('.listEntry').click(
       function() {
-        $('.listEntry').removeClass("disabled")
-        $(this).addClass("disabled")
-        $('#emailContent').load('/mailbox/{{.name}}/' + this.id, messageLoaded)
-        selected = this.id
+        $('.listEntry').removeClass("disabled");
+        $(this).addClass("disabled");
+        $('#emailContent').load('/mailbox/{{.name}}/' + this.id, messageLoaded);
+        selected = this.id;
       }
     )
-    $("#messageList").slideDown()
+    $("#messageList").slideDown();
     if (selected != "") {
-      $("#" + selected).click()
-      selected = ""
+      $("#" + selected).click();
+      selected = "";
     }
   }
 
   function loadList() {
-    $('#messageList').load("/mailbox/{{.name}}", listLoaded)
+    $('#messageList').load("/mailbox/{{.name}}", listLoaded);
   }
 
   function reloadList() {
-    $('#messageList').hide()
-    loadList()
+    $('#messageList').hide();
+    loadList();
   }
 
   function listInit() {
-    $("#messageList").hide()
-    loadList()
+    $("#messageList").hide();
+    loadList();
   }
 
   function deleteMessage(id) {
-    $('#emailContent').empty()
+    $('#emailContent').empty();
     $.ajax({
       type: 'DELETE',
       url: '/mailbox/{{.name}}/' + id,
@@ -53,22 +54,27 @@
 
   function htmlView(id) {
     window.open('/mailbox/{{.name}}/' + id + "/html", '_blank',
-    'width=800,height=600,' +
-    'menubar=yes,resizable=yes,scrollbars=yes,status=yes,toolbar=yes')
+        'width=800,height=600,' +
+        'menubar=yes,resizable=yes,scrollbars=yes,status=yes,toolbar=yes');
   }
 
   function messageSource(id) {
     window.open('/mailbox/{{.name}}/' + id + "/source", '_blank',
-    'width=800,height=600,' +
-    'menubar=no,resizable=yes,scrollbars=yes,status=no,toolbar=no')
+        'width=800,height=600,' +
+        'menubar=no,resizable=yes,scrollbars=yes,status=no,toolbar=no');
   }
 
-  $(document).ready(listInit)
+  function docReady() {
+    $('#nav-mail').addClass("active");
+    listInit();
+  }
+
+  $(document).ready(docReady)
 </script>
 {{end}}
 
 {{define "content"}}
-<div class="panel panel-primary">
+<div class="panel panel-info">
   <div class="panel-heading mailbox-header">
     <span class="glyphicon glyphicon-inbox" aria-hidden="true"></span>
     {{.name}}