Nicer display of attachments in Futon.

git-svn-id: https://svn.apache.org/repos/asf/incubator/couchdb/trunk@660007 13f79535-47bb-0310-9956-ffa450edef68

2 files changed, 85 insertions, 25 deletions

diff --git a/share/www/script/browse.js b/share/www/script/browse.js
index ebf3916f..4491246b 100644
--- a/share/www/script/browse.js
+++ b/share/www/script/browse.js
@@ -40,10 +40,10 @@ function CouchIndexPage() {
     $(document.body).addClass("loading");
     $.couch.allDbs({
       success: function(dbs) {
-        if(dbs.length == 0) {
+        if (dbs.length == 0) {
           $(document.body).removeClass("loading");
         }
-        
+
         $.each(dbs, function(idx, dbName) {
           $("#databases tbody.content").append("<tr>" + 
             "<th><a href='database.html?" + encodeURIComponent(dbName) + "'>" +
@@ -505,6 +505,19 @@ function CouchDocumentPage() {
     _editKey(page.doc, row.find("th"), fieldName);
   }
 
+  var _sortFields = function(a, b) {
+    var a0 = a.charAt(0), b0 = b.charAt(0);
+    if (a0 == "_" && b0 != "_") {
+      return -1;
+    } else if (a0 != "_" && b0 == "_") {
+      return 1;
+    } else if (a == "_attachments" || b == "_attachments") {
+      return a0 == "_attachments" ? 1 : -1;
+    } else {
+      return a < b ? -1 : a != b ? 1 : 0;
+    }
+  }
+
   this.updateFieldListing = function() {
     $(document.body).addClass("loading");
     $("#fields tbody.content").empty();
@@ -517,16 +530,7 @@ function CouchDocumentPage() {
         propNames.push(prop);
       }
       // Order properties alphabetically, but put internal fields first
-      propNames.sort(function(a, b) {
-        var a0 = a.charAt(0), b0 = b.charAt(0);
-        if (a0 == "_" && b0 != "_") {
-          return -1;
-        } else if (a0 != "_" && b0 == "_") {
-          return 1;
-        } else {
-          return a < b ? -1 : a != b ? 1 : 0;
-        }
-      });
+      propNames.sort(_sortFields);
       for (var pi = 0; pi < propNames.length; pi++) {
         _addRowForField(doc, propNames[pi]);
       }
@@ -609,20 +613,27 @@ function CouchDocumentPage() {
   }
 
   function _addRowForField(doc, fieldName) {
-    var value = _renderValue(doc[fieldName]);
-    var row = $("<tr><th></th><td></td></tr>")
-      .find("th").append($("<b></b>").text(fieldName)).dblclick(function() {
-        _editKey(doc, this, $(this).text());
-      }).end()
-      .find("td").append(value).dblclick(function() {
-        _editValue(doc, this, $(this).prev("th").text());
-      }).end()
-      .appendTo("#fields tbody.content");
-    if (fieldName != "_id" && fieldName != "_rev") {
-      row.find("th, td").attr("title", "Double click to edit");
-      _initKey(doc, row, fieldName);
-      _initValue(value);
+    var row = $("<tr><th></th><td></td></tr>").find("th").append($("<b></b>").text(fieldName)).end();
+    if (fieldName == "_attachments") {
+      row
+        .find("td").append(_renderAttachmentList(doc[fieldName]));
+    } else {
+      var value = _renderValue(doc[fieldName]);
+      row
+        .find("th b").dblclick(function() {
+          _editKey(doc, this, $(this).text());
+        }).end()
+        .find("td").append(value).dblclick(function() {
+          _editValue(doc, this, $(this).prev("th").text());
+        }).end()
+        
+      if (fieldName != "_id" && fieldName != "_rev") {
+        row.find("th, td").attr("title", "Double click to edit");
+        _initKey(doc, row, fieldName);
+        _initValue(value);
+      }
     }
+    row.appendTo("#fields tbody.content");
     $("#fields tbody tr").removeClass("odd").filter(":odd").addClass("odd");
     return row;
   }
@@ -766,4 +777,31 @@ function CouchDocumentPage() {
     }
   }
 
+  function _renderAttachmentList(attachments) {
+    var ul = $("<ul></ul>").addClass("attachments");
+    $.each(attachments, function(idx, attachment) {
+      _renderAttachmentItem(idx, attachment).appendTo(ul);
+    });
+    return ul;
+  }
+
+  function _renderAttachmentItem(name, attachment) {
+    var li = $("<li></li>");
+    $("<a href='' title='Download file' target='_top'></a>").text(name)
+      .attr("href", db.uri + encodeURIComponent(docId) + "/" + encodeURIComponent(name))
+      .wrapInner("<tt></tt>").appendTo(li);
+    $("<span>()</span>").text("" + prettyPrintSize(attachment.length) + 
+      ", " + attachment["content-type"]).addClass("info").appendTo(li);
+    _initAttachmentItem(name, attachment, li);
+    return li;
+  }
+
+  function _initAttachmentItem(name, attachment, li) {
+    $("<button type='button' class='delete' title='Delete attachment'></button>").click(function() {
+      delete page.doc._attachments[name];
+      li.remove();
+      page.isDirty = true;
+    }).prependTo($("a", li));
+  }
+
 }
diff --git a/share/www/style/layout.css b/share/www/style/layout.css
index b8c4110e..152c1acc 100644
--- a/share/www/style/layout.css
+++ b/share/www/style/layout.css
@@ -380,6 +380,28 @@ ul.suggest-dropdown li.selected { cursor: pointer; background: Highlight;
 }
 #fields tbody.content div.error { color: #d33; }
 
+#fields tbody.content td ul.attachments { list-style: none; margin: 0;
+  padding: 0;
+}
+#fields tbody.content td ul.attachments li {
+  margin-bottom: .3em; min-height: 20px; padding-left: 20px;
+}
+#fields tbody.content td ul.attachments tt { font-size: 95%; }
+#fields tbody.content td ul.attachments li span.info { color: #666;
+  display: block; font-size: 95%;
+}
+#fields tbody.content td ul.attachments li button {
+  background: transparent no-repeat; border: none; cursor: pointer;
+  float: left; margin: 0 2px 0 -20px; padding: 0; width: 15px; height: 15px;
+  vertical-align: middle;
+}
+#fields tbody.content td ul.attachments li button:hover {
+  background-position: -15px 0;
+}
+#fields tbody.content td ul.attachments li button.delete {
+  background-image: url(../image/delete-mini.gif);
+}
+
 /* Test suite */
 
 #tests { table-layout: fixed; }