You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@couchdb.apache.org by cm...@apache.org on 2008/08/02 00:37:50 UTC

svn commit: r681878 - in /incubator/couchdb/trunk/share/www: browse/document.html script/browse.js style/layout.css

Author: cmlenz
Date: Fri Aug  1 15:37:50 2008
New Revision: 681878

URL: http://svn.apache.org/viewvc?rev=681878&view=rev
Log:
Experimental tabbed interface in Futon document view to switch between tabular fields display and a raw JSON display.

Modified:
    incubator/couchdb/trunk/share/www/browse/document.html
    incubator/couchdb/trunk/share/www/script/browse.js
    incubator/couchdb/trunk/share/www/style/layout.css

Modified: incubator/couchdb/trunk/share/www/browse/document.html
URL: http://svn.apache.org/viewvc/incubator/couchdb/trunk/share/www/browse/document.html?rev=681878&r1=681877&r2=681878&view=diff
==============================================================================
--- incubator/couchdb/trunk/share/www/browse/document.html [utf-8] (original)
+++ incubator/couchdb/trunk/share/www/browse/document.html [utf-8] Fri Aug  1 15:37:50 2008
@@ -41,6 +41,24 @@
           .attr("href", "database.html?" + encodeURIComponent(page.db.name));
         $("h1 strong").text(page.docId);
         page.updateFieldListing();
+
+        $("#tabs li.tabular a").click(function() {
+          $("#tabs li").removeClass("active");
+          $(this).parent().addClass("active");
+          $("#fields thead th:first").text("Field").attr("colspan", 1).next().show();
+          $("#fields tbody.content").show();
+          $("#fields tbody.source").hide();
+        });
+        $("#tabs li.source a").click(function() {
+          $("#tabs li").removeClass("active");
+          $(this).parent().addClass("active");
+          $("#fields thead th:first").text("Source").attr("colspan", 2).next().hide();
+          $("#fields tbody.content").hide();
+          $("#fields tbody.source").find("td").each(function() {
+            $(this).html($("<code></code>").text(prettyPrintJSON(page.doc)));
+          }).end().show();
+        });
+
         $("#toolbar button.save").click(page.saveDocument);
         $("#toolbar button.add").click(page.addField);
         $("#toolbar button.delete").click(page.deleteDocument);
@@ -61,6 +79,10 @@
         <li><button class="delete">Delete Document</button></li>
       </ul>
 
+      <ul id="tabs">
+        <li class="active tabular"><a href="#tabular">Fields</a></li>
+        <li class="source"><a href="#source">Source</a></li>
+      </ul>
       <table id="fields" class="listing" cellspacing="0">
         <col class="field"><col class="value">
         <caption>Fields</caption>
@@ -72,6 +94,9 @@
         </thead>
         <tbody class="content">
         </tbody>
+        <tbody class="source" style="display: none">
+          <tr><td colspan="2"></td></tr>
+        </tbody>
         <tbody class="footer">
           <tr>
             <td colspan="2">

Modified: incubator/couchdb/trunk/share/www/script/browse.js
URL: http://svn.apache.org/viewvc/incubator/couchdb/trunk/share/www/script/browse.js?rev=681878&r1=681877&r2=681878&view=diff
==============================================================================
--- incubator/couchdb/trunk/share/www/script/browse.js [utf-8] (original)
+++ incubator/couchdb/trunk/share/www/script/browse.js [utf-8] Fri Aug  1 15:37:50 2008
@@ -507,6 +507,9 @@
   page = this;
 
   this.addField = function() {
+    if (!$("#fields tbody.content:visible").length) {
+      $("#tabs li.tabular a").click(); // switch to tabular view
+    }
     var fieldName = "unnamed";
     var fieldIdx = 1;
     while (page.doc.hasOwnProperty(fieldName)) {

Modified: incubator/couchdb/trunk/share/www/style/layout.css
URL: http://svn.apache.org/viewvc/incubator/couchdb/trunk/share/www/style/layout.css?rev=681878&r1=681877&r2=681878&view=diff
==============================================================================
--- incubator/couchdb/trunk/share/www/style/layout.css (original)
+++ incubator/couchdb/trunk/share/www/style/layout.css Fri Aug  1 15:37:50 2008
@@ -315,9 +315,22 @@
 }
 #documents tbody.content td.value { font-size: 10px; }
 
+/* Document display tabs */
+
+#tabs { float: right; list-style: none; margin: -1.4em 0 0; }
+#tabs li { display: inline; font-size: 95%; padding: 0; }
+#tabs li.active { font-weight: bold; }
+#tabs :link, #tabs :visited { background: #dadada; color: #666;
+  border: 1px solid #a7a7a7; float: left; margin: 0 0 0 .5em;
+  padding: .5em 2em .3em; position: relative; top: 1px;
+}
+#tabs .active :link, #tabs .active :visited { background: #e9e9e9;
+  border-bottom-color: #e9e9e9; color: #333;
+}
+
 /* Document fields table */
 
-#fields { table-layout: fixed; }
+#fields { clear: right; table-layout: fixed; }
 #fields col.field { width: 33%; }
 #fields tbody.content th { padding-left: 25px; padding-right: 48px; }
 #fields tbody.content th button {
@@ -400,6 +413,9 @@
 #fields tbody.content td ul.attachments li button.delete {
   background-image: url(../image/delete-mini.gif);
 }
+#fields tbody.source td code { display: block; overflow: auto;
+  white-space: pre-wrap; width: 100%;
+}
 
 /* Test suite */