Added timeslider author UI

This commit is contained in:
Matthias Bartelmeß 2012-03-24 20:35:45 +01:00
parent db67080ee9
commit 371aee2e19
3 changed files with 106 additions and 131 deletions

View file

@ -67,13 +67,56 @@
width:122px; width:122px;
} }
.topbarcenter, #docbar {display:none;} .topbarcenter, #docbar {display:none;}
#padmain {top:30px;} #padmain {top:0px !important;}
#editbarright {float:right;} #editbarright {float:right;}
#returnbutton {color:#222; font-size:16px; line-height:29px; margin-top:0; padding-right:6px;} #returnbutton {color:#222; font-size:16px; line-height:29px; margin-top:0; padding-right:6px;}
#importexport {top:118px;} #importexport {top:118px;}
#importexport .popup {width:185px;} #importexport .popup {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;
}
#padeditor {
position: static;
}
/* lists */ /* lists */
.list-bullet2, .list-indent2, .list-number2 {margin-left:3em;} .list-bullet2, .list-indent2, .list-number2 {margin-left:3em;}
.list-bullet3, .list-indent3, .list-number3 {margin-left:4.5em;} .list-bullet3, .list-indent3, .list-number3 {margin-left:4.5em;}

View file

@ -170,26 +170,27 @@ function loadBroadcastSliderJS(fireWhenAllScriptsAreLoaded)
$('#error').show(); $('#error').show();
} }
var fixPadHeight = _.throttle(function(){
var height = $('#timeslider-top').height();
$('#editorcontainerbox').css({marginTop: height});
}, 600);
function setAuthors(authors) function setAuthors(authors)
{ {
$("#authorstable").empty(); var authorsList = $("#authorsList");
authorsList.empty();
var numAnonymous = 0; var numAnonymous = 0;
var numNamed = 0; var numNamed = 0;
_.each(authors, function(author) _.each(authors, function(author)
{ {
if (author.name) if (author.name)
{ {
if (numNamed !== 0) authorsList.append(', ');
var authorColor = clientVars.colorPalette[author.colorId] || author.colorId;
var span = $('<span />').text(author.name || "unnamed").css('background-color', authorColor).addClass('author');
authorsList.append(span);
numNamed++; 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 else
{ {
@ -198,13 +199,19 @@ function loadBroadcastSliderJS(fireWhenAllScriptsAreLoaded)
}); });
if (numAnonymous > 0) 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>"; var anonymousAuthorString = numAnonymous + " unnamed author" + (numAnonymous > 1 ? "s" : "")
$("#authorstable").append($(html)); if (numNamed !== 0){
authorsList.append(' + ' + anonymousAuthorString);
} else {
authorsList.append(anonymousAuthorString);
}
} }
if (authors.length == 0) 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 = { BroadcastSlider = {
@ -465,7 +472,6 @@ function loadBroadcastSliderJS(fireWhenAllScriptsAreLoaded)
{ {
if (clientVars.supportsSlider) if (clientVars.supportsSlider)
{ {
$("#padmain, #rightbars").css('top', "130px");
$("#timeslider").show(); $("#timeslider").show();
setSliderLength(clientVars.totalRevs); setSliderLength(clientVars.totalRevs);
setSliderPosition(clientVars.revNum); setSliderPosition(clientVars.revNum);

View file

@ -11,40 +11,14 @@
<style type="text/css" title="dynamicsyntax"></style> <style type="text/css" title="dynamicsyntax"></style>
</head> </head>
<body id="padbody" class="timeslider limwidth nonpropad nonprouser"> <body id="padbody" class="timeslider limwidth">
<div id="padpage"> <div id="padpage">
<div id="padtop"> <div id="padtop">
<div class="topbar">
<div class="topbarleft">
<!-- -->
</div>
<div class="topbarright">
<!-- -->
</div>
<div class="topbarcenter">
<a href="/" class="topbarBrand">Etherpad v1.1</a> <a href="http://etherpad.org"
class="EtherpadLink">Etherpad is</a> <a href="../../static/LICENSE" class=
"Licensing">free software</a>
<div class="fullscreen" onclick="$('body').toggleClass('maximized');">
Full screen
</div><a href="javascript:void(0);" onclick=
"$('body').toggleClass('maximized');" class="topbarmaximize" title=
"Toggle maximization"></a>
</div>
<div class="specialkeyarea">
<!-- -->
</div>
</div>
<div id="alertbar"> <div id="alertbar">
<div id="servermsg"> <div id="servermsg">
<h3>Server Notice<span id="servermsgdate"><!-- --></span>:</h3><a id= <h3>Server Notice<span id="servermsgdate"><!-- --></span>:</h3><a id=
"hidetopmsg" href="javascript:%20void%20pad.hideServerMessage()" name= "hidetopmsg" href="javascript:%20void%20pad.hideServerMessage()" name=
"hidetopmsg">hide</a> "hidetopmsg">hide</a>
<p id="servermsgtext"><!-- --></p> <p id="servermsgtext"><!-- --></p>
</div> </div>
</div> </div>
@ -68,65 +42,28 @@
</div><!-- /docbar --> </div><!-- /docbar -->
</div> </div>
<div id="timeslider-top">
<div id="timeslider-wrapper"> <div id="timeslider-wrapper">
<div id="error" style="display: none">
It looks like you're having connection troubles. <a href=
"/ep/pad/view/test/latest">Reconnect now</a>.
</div>
<div id="timeslider" unselectable="on" style="display: none"> <div id="timeslider" unselectable="on" style="display: none">
<div id="timeslider-left"></div> <div id="timeslider-left"></div>
<div id="timeslider-right"></div> <div id="timeslider-right"></div>
<div id="timer"></div> <div id="timer"></div>
<div id="timeslider-slider"> <div id="timeslider-slider">
<div id="ui-slider-handle"></div> <div id="ui-slider-handle"></div>
<div id="ui-slider-bar"></div> <div id="ui-slider-bar"></div>
</div> </div>
<div id="playpause_button"> <div id="playpause_button">
<div id="playpause_button_icon" class=""></div> <div id="playpause_button_icon" class=""></div>
</div> </div>
<div id="steppers"> <div id="steppers">
<div class="stepper" id="leftstep"></div> <div class="stepper" id="leftstep"></div>
<div class="stepper" id="rightstep"></div> <div class="stepper" id="rightstep"></div>
</div> </div>
</div> </div>
</div> </div>
<!--<div id="rightbars" style="top: 95px;"> <div class="timeslider-bar">
<div id="rightbar"><a href="/ep/pad/view/c6fg9GM51V/latest" id="viewlatest">Viewing latest content</a><br> <div class="editbarright" id="editbar">
<a thref="/ep/pad/view/c6fg9GM51V/rev.%revision%" href="/ep/pad/view/c6fg9GM51V/rev.0" class="tlink">Link to this version</a>
<br><a thref="/ep/pad/view/ro.fw470Orpi4T/rev.%revision%" href="/ep/pad/view/ro.fw470Orpi4T/rev.0" class="tlink">Link to read-only page</a><br><a href="/c6fg9GM51V">Edit this pad</a>
<h2>Download as</h2>
<img src="../../static/img/may09/html.gif"><a thref="/ep/pad/export/c6fg9GM51V/rev.%revision%?format=html" href="/ep/pad/export/c6fg9GM51V/rev.0?format=html" class="tlink">HTML</a><br>
<img src="../../static/img/may09/txt.gif"><a thref="/ep/pad/export/c6fg9GM51V/rev.%revision%?format=txt" href="/ep/pad/export/c6fg9GM51V/rev.0?format=txt" class="tlink">Plain text</a><br>
<img src="../../static/img/may09/doc.gif"><a thref="/ep/pad/export/c6fg9GM51V/rev.%revision%?format=doc" href="/ep/pad/export/c6fg9GM51V/rev.0?format=doc" class="tlink">Microsoft Word</a><br>
<img src="../../static/img/may09/pdf.gif"><a thref="/ep/pad/export/c6fg9GM51V/rev.%revision%?format=pdf" href="/ep/pad/export/c6fg9GM51V/rev.0?format=pdf" class="tlink">PDF</a>
</div>
<div id="legend">
<h2>Authors</h2>
<table cellspacing="0" cellpadding="0" border="0" id="authorstable"><tbody><tr><td style="color:#999; padding-left: 10px" colspan="2">No Authors</td></tr></tbody></table>
</div>
</div>-->
<div id="padmain">
<div id="padeditor">
<div id="editbar" class="editbar disabledtoolbar">
<div id="editbarinner" class="editbarinner">
<div id="editbarleft" class="editbarleft">
<!-- -->
</div>
<div id="editbarright" class="editbarright">
<!-- termporary place holder-->
<ul> <ul>
<li onClick="window.padeditbar.toolbarClick('import_export');return false;"> <li onClick="window.padeditbar.toolbarClick('import_export');return false;">
<a id="exportlink" title="Export to different document formats"> <a id="exportlink" title="Export to different document formats">
@ -137,34 +74,23 @@
<a id="returnbutton">Return to pad</a> <a id="returnbutton">Return to pad</a>
</div> </div>
<div id="editbarinner" class="editbarinner"> <div>
<table cellpadding="0" cellspacing="0" border="0" id="editbartable" class=
"editbartable">
<tr>
<td>
<h1> <h1>
<span id="revision_label"></span> <span id="revision_label"></span>
<span id="revision_date"></span> <span id="revision_date"></span>
</h1> </h1>
</td> <p>Authors:
<span id="authorsList">
<td width="100%">&nbsp;</td> <span>No Authors</span>
</tr> </span> </p>
</table>
<table cellpadding="0" cellspacing="0" border="0" id="editbarsavetable"
class="editbarsavetable">
<tr>
<td></td>
</tr>
</table>
</div> </div>
</div> </div>
</div> </div>
<div id="padmain">
<div id="padeditor">
<div id="editorcontainerbox"> <div id="editorcontainerbox">
<div id="padcontent"> <div id="padcontent">
</div> </div>
</div> </div>
</div><!-- /padeditor --> </div><!-- /padeditor -->