some ui changes and cleanup

* using .active + css rather than  and
* no more slideUp / slideDown
* buttons inside the document rather than over the timestamp

static/css/custom.css

@@ -52,21 +52,28 @@ ul#doclist li:last-child { height:1.5em; }
 ul#doclist li .doclink { cursor:pointer; text-decoration:none; }
 ul#doclist strong { color:#000; padding:.7em 0 .7em 1.8em; }
 ul#doclist span { font-size:.75em; }
-ul#doclist .preview { position:absolute; top:0; padding:1em 2em 1em .5em; overflow:hidden; white-space:nowrap; color:#555; }
+ul#doclist span.preview { position:absolute; top:0; padding:1em 2em 1em .5em; overflow:hidden; white-space:nowrap; color:#555; }
 ul#doclist time { position:absolute; right:1.2em; font-size:.75em; }
-ul#doclist li a.btn { display:none; }
+/* 
+ul#doclist li a.btn { display:none; } 
+ul#doclist li:hover a.btn { position:absolute; display:inline; right:1em; top:.5em; }
+ */
 ul#doclist li:hover .preview { color:#000; }
 ul#doclist li:hover .date { display:none; }
-ul#doclist li:hover a.btn { position:absolute; display:inline; right:1em; top:.5em; }
+ul#doclist li .buttons { display:none; }
+ul#doclist li.active .buttons { margin-left: 2em; display:block; }
+ul#doclist li a.btn { margin: 1em; } 
 
 #docTitleInput { height:1.2em; width:6em; font-size:1em; margin:-.7em -.05em -.5em; padding:0; color:#000; font-weight:bold; }
 .editTitle { margin:0; }
 
 #previewPad { position:absolute; margin-top:43px; margin-left:-11px; width:73em; height:32em; background:none; border:none; }
-.editor.big { min-height:30em; height:30em; margin-top:1em; }
-.editor.small { min-height:3em; height:3em; margin-top:1em; }
+li .editor { display:none; }
+li.pad.active .editor { min-height:30em; height:30em; margin-top:1em; display:block; }
+li.odf.active .editor { display:none; }
 .editor iframe { width:100%; min-height:100%; border:1px solid #bbb; }
 #editorcontainer { margin:1em 0; }
+.more { margin-top: 2em; cursor: pointer; display: block;}
 
 #error { z-index:1; position:absolute; width:63em; }
 

static/documents.html

@@ -4,6 +4,6 @@
   <!--  <div id="trashbox" class='box'>drop an entry to remove</div> -->
   <ul id="doclist">
   </ul>
-  <div><strong class="more" data-page='2'>more &hellip;</strong></div>
-  <div><strong class="sync">Syncing documents &hellip;</strong></div>
+  <a class="more" data-page='2'>more &hellip;</a>
+  <div class="sync">Syncing documents &hellip;</div>
 </div>

static/js/documents.js

@@ -44,7 +44,7 @@ define(function() {
       docs.on('click', '#new-document', newDocument);
       docs.on('click', '.more', nextPage);
       docs.on('change', '#upload-document', uploadFiles);
-      docs.on('click', '.editor.odf .preview_action', previewOdf);
+      docs.on('click', 'li.odf .preview.btn', previewOdf);
 
       var list = $('#doclist');
       list.on('click', 'li', activateLi);
@@ -83,7 +83,9 @@ define(function() {
     }
 
     function documentRow(doc) {
-      return (doc.owner == currentUser()) ? myDocumentRow(doc) : sharedDocumentRow(doc);
+      var row = (doc.owner == currentUser()) ? myDocumentRow(doc) : sharedDocumentRow(doc);
+      decorateDocumentRow(row, doc);
+      return row;
     }
 
     function displayMore(page, total) {
@@ -102,10 +104,13 @@ define(function() {
         + ' <strong class="docTitle">'+doc.title+'</strong>'
         + ' <input class="editTitle" type="text" value="'+doc.title+'" style="display:none;" />'
         + ' <span class="preview" id="'+doc.link+'-preview"></span>'
-        + downloadLink(doc)
         + ' <time datetime="'+new Date(doc.timestamp).toLocaleString()+'"></time>'
-        + ' <a class="btn share" href="#" rel="popover" title="Share this link" data-content="<a href=\''+shareDoc(doc.id)+'\'>'+shareDoc(doc.id)+'</a>"><i class="icon-share-alt"></i> Share</a>'
-        + ' <div class="editor" id="'+doc.link+'-edit" style="display:none;"></div>'
+        + ' <div class="buttons" >'
+        + previewLink(doc)
+        + downloadLink(doc)
+        + shareLink(doc)
+        + ' </div>'
+        + ' <div class="editor" id="'+doc.link+'-edit"></div>'
         + '</li>');
     }
 
@@ -114,14 +119,38 @@ define(function() {
         + ' <strong class="docTitle">'+doc.title+'</strong>'
         + ' <span class="owner" id="'+doc.id+'-owner">'+doc.owner+'</span>'
         + ' <time datetime="'+new Date(doc.timestamp).toLocaleString()+'"></time>'
-        + ' <a class="btn share" href="#" rel="popover" title="Share this link" data-content="<a href=\''+shareDoc(doc.id)+'\'>'+shareDoc(doc.id)+'</a>"><i class="icon-share-alt"></i> Share</a>'
-        + ' <div class="editor" style="display:none;"></div>'
+        + ' <div class="buttons" style="display:none;">'
+        + shareLink(doc)
+        + ' </div>'
+        + ' <div class="editor"></div>'
         + '</li>');
     }
 
+    function decorateDocumentRow(li, doc) {
+      li.attr('data-type', doc.type);
+      if(!doc.type || doc.type == "") {
+        li.addClass('pad');
+      }
+      if(MIME_TYPE_CLASSES[doc.type]) {
+        li.addClass(MIME_TYPE_CLASSES[doc.type]);
+        // li.css('background', 'url("/images/mime/'+doc.type+'.png") no-repeat left');
+        // li.css('padding-left', '6em');
+      }
+    }
+
+    function previewLink(doc) {
+      if(!doc.data || !MIME_TYPE_CLASSES[doc.type]) return "";
+      return '<a class="btn preview" title="Preview the content of this document in the browser">show</a>';
+    }
+
     function downloadLink(doc) {
       if(!doc.data) return "";
-      return '<a href="'+doc.data+'">download</a>';
+      return '<a class="btn download" title="Download this document" href="'+doc.data+'">download</a>';
+    }
+
+    function shareLink(doc) {
+      if(doc.data) return "";
+      return ' <a class="btn share" href="#" rel="popover" title="Share this link" data-content="<a href=\''+shareDoc(doc.id)+'\'>'+shareDoc(doc.id)+'</a>"><i class="icon-share-alt"></i> Share</a>'
     }
 
     function renderDocumentPreview(doc) {
@@ -165,7 +194,6 @@ define(function() {
       var index = $("#doclist li").index(li);
       if(li.is(".active") && index == 0) return;
       if(index != 0) deactivateLi($('#doclist li').first());
-      if(index != 0) li.hide();
       displayDocument(li);
       raiseLi(li);
     }
@@ -179,14 +207,7 @@ define(function() {
           'padId':encodeURIComponent(id),
           'userName':hyphenify(currentUser() || 'unknown'),
         });
-        editor.addClass('big');
-      } else {
-        editor.addClass('small');
-        editor.addClass(MIME_TYPE_CLASSES[doc.type]);
-        editor.html("This is an uploaded document. <br/>");
-        editor.append('<a class="preview_action" >show</a>');
       }
-      editor.show();
       updateTime(id);
       updateHistory(doc);
     }
@@ -196,7 +217,6 @@ define(function() {
       var li = el.is("a") ? el.parent().parent() : el;
       var id = li.attr('id');
       var doc = localGet('documents')[id];
-      var editor = li.find(".editor");
       var data = doc.data;
       runtime.loadClass('odf.OdfCanvas');
       globalreadfunction = runtime.read;
@@ -231,11 +251,10 @@ define(function() {
     var raiseLi = function(li) {
       li.addClass('active');
       li.prependTo("#doclist");
-      li.slideDown(1000);
     }
 
     var deactivateLi = function(li) {
-      li.find('.editor').slideUp().empty();
+      li.find('.editor').empty();
       li.find('.editTitle').hide();
       li.find('.docTitle').show();
       li.removeClass('active')