Merge pull request #591 from fourplusone/timeslider_authors

Timeslider authors

src/static/css/pad.css

@@ -42,9 +42,8 @@ a img
   border-bottom: 1px solid #ccc;
   overflow: hidden;
   padding-top: 3px;
-  position: absolute;
-  left: 0;
-  right: 0;
+  width: 100%;
+  white-space: nowrap;
   height: 32px;
 }
 
@@ -177,7 +176,6 @@ a#backtoprosite { padding-left: 20px; left: 6px;
   background: url(static/img/protop.gif) no-repeat -5px -6px; }
 #accountnav { right: 30px; color: #fff; }
   
-.propad a#topbaretherpad { background: url(static/img/protop.gif) no-repeat -397px -3px; }
 
 #specialkeyarea { top: 5px; left: 250px; color: yellow; font-weight: bold;
   font-size: 1.5em; position: absolute; }
@@ -606,8 +604,6 @@ table#otheruserstable { display: none; }
   text-align: left;
 }
 
-.nonprouser #sharebox-stripe { display: none; }
-
 .sharebox-url {
   width: 440px; height: 18px;
   text-align: left;

src/static/css/timeslider.css

@@ -1,4 +1,7 @@
-#editorcontainerbox {overflow:auto; top:40px;}
+#editorcontainerbox {
+  overflow:auto; top:40px;
+  position: static;
+}
 
 #padcontent {font-size:12px; padding:10px;}
 
@@ -67,8 +70,9 @@
   width:122px;
 }
 
+
 .topbarcenter, #docbar {display:none;}
-#padmain {top:30px;}
+#padmain {top:0px !important;}
 #editbarright {float:right;}
 #returnbutton {color:#222; font-size:16px; line-height:29px; margin-top:0; padding-right:6px;}
 #importexport .popup {width:185px;}
@@ -77,6 +81,53 @@
   width:185px;
 }
 
+
+.timeslider-bar 
+{
+  background: #f7f7f7;
+  background: linear-gradient(#f7f7f7, #f1f1f1 80%);
+  border-bottom: 1px solid #ccc;
+  overflow: hidden;
+  padding-top: 3px;
+  width: 100%;
+}
+
+.timeslider-bar #editbar 
+{
+  border-bottom: none;
+  float: right;
+  width: 170px;
+  width: initial;
+}
+
+.timeslider-bar h1 
+{
+  margin: 5px;
+}
+.timeslider-bar p 
+{
+  margin: 5px;
+}
+#timeslider-top {
+  width: 100%;
+  position: fixed;
+  z-index: 1;
+}
+
+#authorsList .author {
+  padding-left: 0.4em;
+  padding-right: 0.4em;
+}
+
+#authorsList .author-anonymous {
+  padding-left: 0.6em;
+  padding-right: 0.6em;
+}
+
+#padeditor {
+  position: static;
+}
+
 /* lists */
 .list-bullet2, .list-indent2, .list-number2 {margin-left:3em;}
 .list-bullet3, .list-indent3, .list-number3 {margin-left:4.5em;}

src/static/js/broadcast_slider.js

@@ -170,41 +170,67 @@ function loadBroadcastSliderJS(fireWhenAllScriptsAreLoaded)
       $('#error').show();
     }
 
+    var fixPadHeight = _.throttle(function(){
+      var height = $('#timeslider-top').height();
+      $('#editorcontainerbox').css({marginTop: height});
+    }, 600);
+    
     function setAuthors(authors)
     {
-      $("#authorstable").empty();
+      var authorsList = $("#authorsList");
+      authorsList.empty();
       var numAnonymous = 0;
       var numNamed = 0;
+      var colorsAnonymous = [];
       _.each(authors, function(author)
       {
+        var authorColor =  clientVars.colorPalette[author.colorId] || author.colorId;
         if (author.name)
         {
+          if (numNamed !== 0) authorsList.append(', ');
+          
+          $('<span />')
+            .text(author.name || "unnamed")
+            .css('background-color', authorColor)
+            .addClass('author')
+            .appendTo(authorsList);
+
           numNamed++;
-          var tr = $('<tr></tr>');
-          var swatchtd = $('<td></td>');
-          var swatch = $('<div class="swatch"></div>');
-          swatch.css('background-color', clientVars.colorPalette[author.colorId]);
-          swatchtd.append(swatch);
-          tr.append(swatchtd);
-          var nametd = $('<td></td>');
-          nametd.text(author.name || "unnamed");
-          tr.append(nametd);
-          $("#authorstable").append(tr);
         }
         else
         {
           numAnonymous++;
+          if(authorColor) colorsAnonymous.push(authorColor);
         }
       });
       if (numAnonymous > 0)
       {
-        var html = "<tr><td colspan=\"2\" style=\"color:#999; padding-left: 10px\">" + (numNamed > 0 ? "...and " : "") + numAnonymous + " unnamed author" + (numAnonymous > 1 ? "s" : "") + "</td></tr>";
-        $("#authorstable").append($(html));
+        var anonymousAuthorString = numAnonymous + " unnamed author" + (numAnonymous > 1 ? "s" : "")
+        if (numNamed !== 0){
+          authorsList.append(' + ' + anonymousAuthorString);
+        } else {
+          authorsList.append(anonymousAuthorString);
+        }
+        
+        if(colorsAnonymous.length > 0){
+          authorsList.append(' (');
+          _.each(colorsAnonymous, function(color, i){
+            if( i > 0 ) authorsList.append(' '); 
+            $('<span /> ')
+              .css('background-color', color)
+              .addClass('author author-anonymous')
+              .appendTo(authorsList);
+          });
+          authorsList.append(')');
+        }
+        
       }
       if (authors.length == 0)
       {
-        $("#authorstable").append($("<tr><td colspan=\"2\" style=\"color:#999; padding-left: 10px\">No Authors</td></tr>"))
+        authorsList.append("No Authors");
       }
+      
+      fixPadHeight();
     }
 
     BroadcastSlider = {
@@ -465,7 +491,6 @@ function loadBroadcastSliderJS(fireWhenAllScriptsAreLoaded)
         {
           if (clientVars.supportsSlider)
           {
-            $("#padmain, #rightbars").css('top', "130px");
             $("#timeslider").show();
             setSliderLength(clientVars.totalRevs);
             setSliderPosition(clientVars.revNum);