mirrors/etherpad-lite
1
0
Fork 0
mirror of https://github.com/ether/etherpad-lite.git synced 2025-04-20 23:46:14 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

userlist/embed working again

Browse source
This commit is contained in:
HansPinckaers 2011-04-07 20:45:28 +02:00
parent 540156735c
commit 0b8b380d2b
6 changed files with 239 additions and 153 deletions
Download patch file Download diff file Expand all files Collapse all files

106
static/css/pad_lite.css
View file

@ -7,6 +7,33 @@ html { font-size: 62.5%; }
body { background: #ccc;} body { background: #ccc;}
body, textarea { font-family: Helvetica, Arial, sans-serif; } body, textarea { font-family: Helvetica, Arial, sans-serif; }
#users
{
position: absolute;
z-index: 3;
background-color: rgba(0,0,0,0.7);
width: 160px;
right: 4px;
top: 40px;
color: #fff;
padding: 5px;
-moz-border-radius: 6px;
border-radius: 6px;
}
#sharebutton {
background: url(/static/img/jun09/pad/inviteshare2.gif) no-repeat 0 -31px;
position: relative;
display: block;
top: 6px;
padding-top: 30px;
height: 0; overflow: hidden; width: 96px;
left:50%;
margin-left: -48px;
}
a img a img
{ {
border: 0; border: 0;
@ -40,11 +67,11 @@ a img
margin-left: 2px; margin-left: 2px;
background-color: #fff; background-color: #fff;
-moz-border-radius: 2px; -moz-border-radius: 4px;
border-radius: 2px; border-radius: 4px;
border: 1px solid #ccc; border: 1px solid #ccc;
padding: 4px 6px; padding: 4px 5px;
height: 18px; height: 18px;
@ -55,6 +82,18 @@ a img
background: -webkit-gradient(linear, 0 0, 0 100%, from(#eee), color-stop(20%, white), color-stop(20%, white)); background: -webkit-gradient(linear, 0 0, 0 100%, from(#eee), color-stop(20%, white), color-stop(20%, white));
} }
#editbar ul li a
{
text-decoration: none;
color: #ccc;
}
#editbar ul li a span
{
position: relative;
top:-2px
}
#editbar ul li:hover #editbar ul li:hover
{ {
border: 1px solid #888; border: 1px solid #888;
@ -373,8 +412,11 @@ a#hidetopmsg { position: absolute; right: 5px; bottom: 5px; }
#myswatchbox { position: absolute; left: 5px; top: 5px; width: 22px; height: 22px; #myswatchbox { position: absolute; left: 5px; top: 5px; width: 22px; height: 22px;
/*border-top: 1px solid #c3cfe0; border-left: 1px solid #c3cfe0; /*border-top: 1px solid #c3cfe0; border-left: 1px solid #c3cfe0;
border-right: 1px solid #ecf3fc; border-bottom: 1px solid #ecf3fc;*/ border-right: 1px solid #ecf3fc; border-bottom: 1px solid #ecf3fc;*/
border: 1px solid #bbb; border: 1px solid #fff;
padding: 1px; background: transparent; cursor: pointer; } padding: 1px; background: transparent; cursor: pointer;
-moz-border-radius: 3px;
border-radius: 3px;
}
/* /*
#myuser .myswatchboxhoverable, #myuser .myswatchboxunhoverable { #myuser .myswatchboxhoverable, #myuser .myswatchboxunhoverable {
background: white; background: white;
@ -389,13 +431,17 @@ a#hidetopmsg { position: absolute; right: 5px; bottom: 5px; }
background: url(/static/img/jun09/pad/colorpicker.gif) no-repeat left top; background: url(/static/img/jun09/pad/colorpicker.gif) no-repeat left top;
width: 232px; height: 140px; width: 232px; height: 140px;
position: absolute; position: absolute;
left: 10px; top: 18px; z-index: 101; left: -240px; top: 0px; z-index: 101;
display: none;/*...initially*/ display: none;/*...initially*/
} }
#mycolorpicker .picked { border: 1px solid #fff !important; } #mycolorpicker ul li
{
float: left;
}
#mycolorpicker .picked { border: 1px solid #000 !important; }
#mycolorpicker .picked .pickerswatch { border: 1px solid #666; } #mycolorpicker .picked .pickerswatch { border: 1px solid #fff; }
#mycolorpickersave { position: absolute; left: 14px; top: 102px; #mycolorpickersave { position: absolute; left: 14px; top: 102px;
width: 47px; height: 0; padding-top: 20px; overflow: hidden; width: 47px; height: 0; padding-top: 20px; overflow: hidden;
cursor: pointer; } cursor: pointer; }
@ -403,11 +449,11 @@ a#hidetopmsg { position: absolute; right: 5px; bottom: 5px; }
width: 44px; height: 0; padding-top: 20px; overflow: hidden; width: 44px; height: 0; padding-top: 20px; overflow: hidden;
cursor: pointer; } cursor: pointer; }
#myusernameform { margin-left: 35px; } #myusernameform { margin-left: 35px; }
#myusernameedit { font-size: 1.6em; color: #444; #myusernameedit { font-size: 1.3em; color: #fff;
padding: 3px; height: 18px; margin: 0; border: 0; padding: 3px; height: 18px; margin: 0; border: 0;
width: 197px; background: transparent; } width: 117px; background: transparent; }
#myusernameform input.editable { border: 1px solid #bbb; } #myusernameform input.editable { border: 1px solid #444; }
#myuser .myusernameedithoverable:hover { background: white; } #myuser .myusernameedithoverable:hover { background: white; color: black}
#mystatusform { margin-left: 35px; margin-top: 5px; } #mystatusform { margin-left: 35px; margin-top: 5px; }
#mystatusedit { font-size: 1.2em; color: #777; #mystatusedit { font-size: 1.2em; color: #777;
font-style: italic; display: none; font-style: italic; display: none;
@ -421,18 +467,19 @@ a#hidetopmsg { position: absolute; right: 5px; bottom: 5px; }
#myusernameform .editempty { color: #ef641e; } #myusernameform .editempty { color: #ef641e; }
table#otheruserstable { display: none; } table#otheruserstable { display: none; }
#nootherusers { padding: 10px; font-size: 1.2em; color: #999; font-weight: bold;} #nootherusers { padding: 10px; font-size: 1.2em; color: #eee; font-weight: bold;}
#nootherusers a { color: #48d; } #nootherusers a { color: #3C88FF; }
#otheruserstable td { #otheruserstable td {
border-bottom: 1px solid #e1e1e1; border-bottom: 1px solid #555;
height: 26px; height: 26px;
vertical-align: middle; vertical-align: middle;
padding: 0 2px; padding: 0 2px;
color: #fff;
} }
#otheruserstable .swatch { #otheruserstable .swatch {
border: 1px solid #999; width: 13px; height: 13px; overflow: hidden; border: 1px solid #000; width: 13px; height: 13px; overflow: hidden;
margin: 0 4px; margin: 0 4px;
} }
@ -448,15 +495,6 @@ table#otheruserstable { display: none; }
border-right: 1px solid #e6e6e6; border-bottom: 1px solid #e6e6e6; border-right: 1px solid #e6e6e6; border-bottom: 1px solid #e6e6e6;
} }
.usertdname input.editempty { color: #888; font-style: italic;} .usertdname input.editempty { color: #888; font-style: italic;}
#sharebutton {
background: url(/static/img/jun09/pad/inviteshare2.gif) no-repeat 0 -31px;
position: absolute; display: block; top: 3px; padding-top: 23px;
height: 0; overflow: hidden; width: 96px;
left:50%;
margin-left: -48px;
}
/*#guestslabel { font-size: 1.2em; position: absolute; width: auto; /*#guestslabel { font-size: 1.2em; position: absolute; width: auto;
height: 22px; line-height: 22px; top: 4px; left: 8px; } height: 22px; line-height: 22px; top: 4px; left: 8px; }
#guestsmenu { font-size: 1.2em; position: absolute; left: 100px; #guestsmenu { font-size: 1.2em; position: absolute; left: 100px;
@ -1053,9 +1091,17 @@ a#topbarmaximize {
#embed{ #embed{
display:none; display:none;
position:absolute; position:absolute;
top:42px; top:40px;
font-size:14px; font-size:14px;
width:100%; width:400px;
right: 5px;
z-index: 500;
background-color: #000;
color: white;
background-color: rgba(0,0,0,0.7);
padding: 10px;
-moz-border-radius: 6px;
border-radius: 6px;
} }
#embedcode{ #embedcode{
@ -1063,11 +1109,11 @@ margin-left:10px;
} }
#embedinput{ #embedinput{
width:80%; width:375px;
height:24px; height:24px;
display:inline; display:inline;
margin-top: 10px;
padding-left:4px; padding-left:4px;
margin-left:4px;
} }
ul#colorpickerswatches ul#colorpickerswatches
@ -1078,7 +1124,7 @@ ul#colorpickerswatches
ul#colorpickerswatches li ul#colorpickerswatches li
{ {
border: 1px solid #999; border: 1px solid #fff;
width: 14px; width: 14px;
height: 14px; height: 14px;
overflow: hidden; overflow: hidden;

BIN
static/img/jun09/pad/inviteshare2.gif
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.8 KiB

After

Width:  |  Height:  |  Size: 2.2 KiB

Before After
Before After

21
static/js/pad_editbar.js
View file

@ -81,29 +81,29 @@ var padeditbar = (function(){
if (cmd == 'showusers') { if (cmd == 'showusers') {
// show users shows the current users on teh pad // show users shows the current users on teh pad
// get current height // get current height
var editbarheight = $('#editbar').css('height'); var editbarheight = $('#users').css('display');
if (editbarheight == "36px"){ if (editbarheight == "none"){
// increase the size of the editbar // increase the size of the editbar
$('#editbar').animate({height:'72px'}); //$('#editbar').animate({height:'72px'});
$('#editorcontainerbox').animate({top:'72px'}); //$('#editorcontainerbox').animate({top:'72px'});
$('#embed').hide(); $('#embed').hide();
$('#users').show(); $('#users').show();
} }
else else
{ {
// increase the size of the editbar // increase the size of the editbar
$('#editbar').animate({height:'36px'}); //$('#editbar').animate({height:'36px'});
$('#editorcontainerbox').animate({top:'36px'}); //$('#editorcontainerbox').animate({top:'36px'});
$('#users').hide(); $('#users').hide();
} }
} }
if (cmd == 'embed') { if (cmd == 'embed') {
// embed shows the embed link // embed shows the embed link
// get current height // get current height
var editbarheight = $('#editbar').css('height'); var editbarheight = $('#embed').css('display');
if (editbarheight == "36px"){ if (editbarheight == "none"){
// increase the size of the editbar // increase the size of the editbar
$('#editbar').animate({height:'72px'}); //$('#editbar').animate({height:'72px'});
$('#editorcontainerbox').animate({top:'72px'}); $('#editorcontainerbox').animate({top:'72px'});
// hide the users // hide the users
$('#users').hide(); $('#users').hide();
@ -111,12 +111,13 @@ var padeditbar = (function(){
padurl = document.location; padurl = document.location;
// change the div contents to include the pad url in an input box // change the div contents to include the pad url in an input box
$('#embed').html('<div id="embedcode">Embed code:<input id="embedinput" type="text" value="<iframe src=&quot;'+padurl+'&quot; width=500 height=400>"</iframe>></div>'); $('#embed').html('<div id="embedcode">Embed code:<input id="embedinput" type="text" value="<iframe src=&quot;'+padurl+'&quot; width=500 height=400>"</iframe>></div>');
$('#users').hide();
$('#embed').show(); $('#embed').show();
} }
else else
{ {
// increase the size of the editbar // increase the size of the editbar
$('#editbar').animate({height:'36px'}); //$('#editbar').animate({height:'36px'});
$('#editorcontainerbox').animate({top:'36px'}); $('#editorcontainerbox').animate({top:'36px'});
$('#embed').hide(); $('#embed').hide();
} }

4
static/js/pad_modals.js
View file

@ -59,6 +59,7 @@ var padmodals = (function() {
init: function() { init: function() {
self.initFeedback(); self.initFeedback();
self.initShareBox(); self.initShareBox();
console.log("self.initShareBox");
}, },
initFeedback: function() { initFeedback: function() {
/*var emailField = $("#feedbackbox-email"); /*var emailField = $("#feedbackbox-email");
@ -78,8 +79,9 @@ var padmodals = (function() {
}); });
}, },
initShareBox: function() { initShareBox: function() {
$("#sharebutton, #nootherusers a").click(function() { $("#sharebutton").click(function() {
self.showShareBox(); self.showShareBox();
console.log("share");
}); });
$("#sharebox-hide").click(function() { $("#sharebox-hide").click(function() {
self.hideModal(); self.hideModal();

169
static/js/pad_userlist.js
View file

@ -20,67 +20,6 @@ var colorPickerOpen = false;
var colorPickerSetup = false; var colorPickerSetup = false;
var previousColorId = 0; var previousColorId = 0;
function getColorPickerSwatchIndex(jnode) {
// return Number(jnode.get(0).className.match(/\bn([0-9]+)\b/)[1])-1;
return $("#colorpickerswatches li").index(jnode);
}
function closeColorPicker(accept) {
if (accept) {
var newColorId = getColorPickerSwatchIndex($("#colorpickerswatches .picked"));
if (newColorId >= 0) { // fails on NaN
myUserInfo.colorId = newColorId;
pad.notifyChangeColor(newColorId);
}
} else {
pad.notifyChangeColor(previousColorId);
}
colorPickerOpen = false;
$("#mycolorpicker").css('display', 'none');
//renderMyUserInfo();
}
function showColorPicker() {
previousColorId = myUserInfo.colorId ;
if (! colorPickerOpen) {
var palette = pad.getColorPalette();
if(!colorPickerSetup) {
var colorsList = $("#colorpickerswatches")
for(var i=0;i<palette.length;i++) {
var li = $('<li>', {
style: 'background: '+palette[i]+';'
});
li.appendTo(colorsList);
li.bind('click', function(event){
$("#colorpickerswatches li").removeClass('picked');
$(event.target).addClass("picked");
var newColorId = getColorPickerSwatchIndex($("#colorpickerswatches .picked"));
pad.notifyChangeColor(newColorId);
});
if(myUserInfo.colorId == i){
$(event.target).addClass("picked");
}
}
colorPickerSetup = true;
}
$("#mycolorpicker").css('display', 'block');
colorPickerOpen = true;
$("#colorpickerswatches li").removeClass('picked');
$($("#colorpickerswatches li")[myUserInfo.colorId]).addClass("picked"); //seems weird
//paduserlist.renderMyUserInfo();
}
}
var paduserlist = (function() { var paduserlist = (function() {
@ -366,26 +305,6 @@ var paduserlist = (function() {
}); });
} }
function renderMyUserInfo() {
if (myUserInfo.name) {
$("#myusernameedit").removeClass("editempty").val(
myUserInfo.name);
}
else {
$("#myusernameedit").addClass("editempty").val(
"< enter your name >");
}
if (colorPickerOpen) {
$("#myswatchbox").addClass('myswatchboxunhoverable').removeClass(
'myswatchboxhoverable');
}
else {
$("#myswatchbox").addClass('myswatchboxhoverable').removeClass(
'myswatchboxunhoverable');
}
$("#myswatch").css('background', pad.getColorPalette()[myUserInfo.colorId]);
}
function findExistingIndex(userId) { function findExistingIndex(userId) {
var existingIndex = -1; var existingIndex = -1;
for(var i=0;i<otherUsersInfo.length;i++) { for(var i=0;i<otherUsersInfo.length;i++) {
@ -451,7 +370,7 @@ var paduserlist = (function() {
var self = { var self = {
init: function(myInitialUserInfo) { init: function(myInitialUserInfo) {
self.setMyUserInfo(myInitialUserInfo); self.setMyUserInfo(myInitialUserInfo);
console.log(myInitialUserInfo);
$("#otheruserstable tr").remove(); $("#otheruserstable tr").remove();
if (pad.getUserIsGuest()) { if (pad.getUserIsGuest()) {
@ -466,7 +385,7 @@ var paduserlist = (function() {
// wrap with setTimeout to do later because we get // wrap with setTimeout to do later because we get
// a double "blur" fire in IE... // a double "blur" fire in IE...
window.setTimeout(function() { window.setTimeout(function() {
renderMyUserInfo(); self.renderMyUserInfo();
}, 0); }, 0);
}); });
} }
@ -489,7 +408,7 @@ var paduserlist = (function() {
setMyUserInfo: function(info) { setMyUserInfo: function(info) {
myUserInfo = $.extend({}, info); myUserInfo = $.extend({}, info);
renderMyUserInfo(); self.renderMyUserInfo();
}, },
userJoinOrUpdate: function(info) { userJoinOrUpdate: function(info) {
if ((! info.userId) || (info.userId == myUserInfo.userId)) { if ((! info.userId) || (info.userId == myUserInfo.userId)) {
@ -631,7 +550,89 @@ var paduserlist = (function() {
pad.sendClientMessage(msg); pad.sendClientMessage(msg);
self.removeGuestPrompt(guestId); self.removeGuestPrompt(guestId);
},
renderMyUserInfo: function() {
if (myUserInfo.name) {
$("#myusernameedit").removeClass("editempty").val(
myUserInfo.name);
}
else {
$("#myusernameedit").addClass("editempty").val(
"Enter your name");
}
if (colorPickerOpen) {
$("#myswatchbox").addClass('myswatchboxunhoverable').removeClass(
'myswatchboxhoverable');
}
else {
$("#myswatchbox").addClass('myswatchboxhoverable').removeClass(
'myswatchboxunhoverable');
}
$("#myswatch").css('background', pad.getColorPalette()[myUserInfo.colorId]);
} }
}; };
return self; return self;
}()); }());
function getColorPickerSwatchIndex(jnode) {
// return Number(jnode.get(0).className.match(/\bn([0-9]+)\b/)[1])-1;
return $("#colorpickerswatches li").index(jnode);
}
function closeColorPicker(accept) {
if (accept) {
var newColorId = getColorPickerSwatchIndex($("#colorpickerswatches .picked"));
if (newColorId >= 0) { // fails on NaN
myUserInfo.colorId = newColorId;
pad.notifyChangeColor(newColorId);
}
paduserlist.renderMyUserInfo();
} else {
pad.notifyChangeColor(previousColorId);
paduserlist.renderMyUserInfo();
}
colorPickerOpen = false;
$("#mycolorpicker").css('display', 'none');
}
function showColorPicker() {
previousColorId = myUserInfo.colorId ;
if (! colorPickerOpen) {
var palette = pad.getColorPalette();
if(!colorPickerSetup) {
var colorsList = $("#colorpickerswatches")
for(var i=0;i<palette.length;i++) {
var li = $('<li>', {
style: 'background: '+palette[i]+';'
});
li.appendTo(colorsList);
li.bind('click', function(event){
$("#colorpickerswatches li").removeClass('picked');
$(event.target).addClass("picked");
var newColorId = getColorPickerSwatchIndex($("#colorpickerswatches .picked"));
pad.notifyChangeColor(newColorId);
});
if(myUserInfo.colorId == i){
$(event.target).addClass("picked");
}
}
colorPickerSetup = true;
}
$("#mycolorpicker").css('display', 'block');
colorPickerOpen = true;
$("#colorpickerswatches li").removeClass('picked');
$($("#colorpickerswatches li")[myUserInfo.colorId]).addClass("picked"); //seems weird
console.log(paduserlist);
}
}

88
static/padhtml
View file

@ -84,17 +84,6 @@ var clientVars = {}; // ]]>
</ul> </ul>
<ul id="menu_right"> <ul id="menu_right">
<li>
<a href="javascript:void (window.pad&&pad.editbarClick('showusers'));" title="Show connected users">
<img id="showusersicon" src="/static/img/mar11/editbar_showusers.gif" />
</a>
</li>
<li class="separator"></li>
<li>
<a href="javascript:void (window.pad&&pad.editbarClick('clearauthorship'));" title="Clear Authorship Colors">
<img src="/static/img/jun09/pad/editbar_clearauthorship.gif" />
</a>
</li>
<li> <li>
<a href="javascript:void (window.pad&&pad.editbarClick('undo'));" title="Undo (ctrl-Z)"> <a href="javascript:void (window.pad&&pad.editbarClick('undo'));" title="Undo (ctrl-Z)">
<img src="/static/img/jun09/pad/editbar_undo.gif" /> <img src="/static/img/jun09/pad/editbar_undo.gif" />
@ -125,27 +114,74 @@ var clientVars = {}; // ]]>
<option value="z300">300%</option> <option value="z300">300%</option>
</select> </select>
</li> </li>
<li class="separator"></li>
<li>
<a href="javascript:void (window.pad&&pad.editbarClick('clearauthorship'));" title="Clear Authorship Colors">
<img src="/static/img/jun09/pad/editbar_clearauthorship.gif" />
</a>
</li>
<li>
<a href="javascript:void (window.pad&&pad.editbarClick('showusers'));" title="Show connected users">
<img id="showusersicon" src="/static/img/mar11/editbar_showusers.gif" /> <span>1</span>
</a>
</li>
</ul> </ul>
</div> </div>
<div id="users"> <div id="users">
<ul> <div id="connectionstatus">
<li><a onclick="showColorPicker();" title="Change my name/color">John</a></li> <!-- -->
<li>Joe</li> </div>
</ul>
<!-- some example code so I can make the css --> <div id="myuser">
<div id="mycolorpicker">
<ul id="colorpickerswatches"> <div id="mycolorpicker">
</ul> <ul id="colorpickerswatches">
<span id="mycolorpickersave"> </ul>
<a onclick="closeColorPicker()">Save</a> <span id="mycolorpickersave">
</span> <a onclick="closeColorPicker()">Save</a>
<span id="mycolorpickercancel"> </span>
<a onclick="closeColorPicker()">Cancel</a> <span id="mycolorpickercancel">
</span> <a onclick="closeColorPicker()">Cancel</a>
</div> </span>
</div>
<div id="mycolorpickersave">Save</div>
<div id="mycolorpickercancel">Cancel</div>
<div id="myswatchbox"><div id="myswatch"><!-- --></div></div>
<div id="myusernameform"><input type="text" id="myusernameedit" disabled="disabled" /></div>
<div id="mystatusform"><input type="text" id="mystatusedit" disabled="disabled" /></div>
</div>
<div id="otherusers">
<div id="guestprompts"><!-- --></div>
<table id="otheruserstable" cellspacing="0" cellpadding="0" border="0">
<tr>
<td>
</td>
</tr>
</table>
<div id="nootherusers">
<a href="javascript:void(0)">Invite</a> other users and they will show up here.
</div>
</div>
<div id="userlistbuttonarea">
<!--<a href="javascript:void(0)" id="sharebutton">Share</a>-->
</div>
</div> </div>
<!-- /padusers -->
<!--<div id="users">
<!-- some example code so I can make the css --*>
</div>-->
<div id="editorcontainer"> <div id="editorcontainer">