diff --git a/static/css/pad_lite.css b/static/css/pad_lite.css index 3f47f2984..b34839468 100644 --- a/static/css/pad_lite.css +++ b/static/css/pad_lite.css @@ -7,6 +7,33 @@ html { font-size: 62.5%; } body { background: #ccc;} 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 { border: 0; @@ -40,11 +67,11 @@ a img margin-left: 2px; background-color: #fff; - -moz-border-radius: 2px; - border-radius: 2px; + -moz-border-radius: 4px; + border-radius: 4px; border: 1px solid #ccc; - padding: 4px 6px; + padding: 4px 5px; 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)); } +#editbar ul li a +{ + text-decoration: none; + color: #ccc; +} + +#editbar ul li a span +{ + position: relative; + top:-2px +} + #editbar ul li:hover { 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; /*border-top: 1px solid #c3cfe0; border-left: 1px solid #c3cfe0; border-right: 1px solid #ecf3fc; border-bottom: 1px solid #ecf3fc;*/ - border: 1px solid #bbb; - padding: 1px; background: transparent; cursor: pointer; } + border: 1px solid #fff; + padding: 1px; background: transparent; cursor: pointer; + -moz-border-radius: 3px; + border-radius: 3px; + } /* #myuser .myswatchboxhoverable, #myuser .myswatchboxunhoverable { 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; width: 232px; height: 140px; position: absolute; - left: 10px; top: 18px; z-index: 101; + left: -240px; top: 0px; z-index: 101; 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; width: 47px; height: 0; padding-top: 20px; overflow: hidden; cursor: pointer; } @@ -403,11 +449,11 @@ a#hidetopmsg { position: absolute; right: 5px; bottom: 5px; } width: 44px; height: 0; padding-top: 20px; overflow: hidden; cursor: pointer; } #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; - width: 197px; background: transparent; } -#myusernameform input.editable { border: 1px solid #bbb; } -#myuser .myusernameedithoverable:hover { background: white; } + width: 117px; background: transparent; } +#myusernameform input.editable { border: 1px solid #444; } +#myuser .myusernameedithoverable:hover { background: white; color: black} #mystatusform { margin-left: 35px; margin-top: 5px; } #mystatusedit { font-size: 1.2em; color: #777; font-style: italic; display: none; @@ -421,18 +467,19 @@ a#hidetopmsg { position: absolute; right: 5px; bottom: 5px; } #myusernameform .editempty { color: #ef641e; } table#otheruserstable { display: none; } -#nootherusers { padding: 10px; font-size: 1.2em; color: #999; font-weight: bold;} -#nootherusers a { color: #48d; } +#nootherusers { padding: 10px; font-size: 1.2em; color: #eee; font-weight: bold;} +#nootherusers a { color: #3C88FF; } #otheruserstable td { - border-bottom: 1px solid #e1e1e1; + border-bottom: 1px solid #555; height: 26px; vertical-align: middle; padding: 0 2px; + color: #fff; } #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; } @@ -448,15 +495,6 @@ table#otheruserstable { display: none; } border-right: 1px solid #e6e6e6; border-bottom: 1px solid #e6e6e6; } .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; height: 22px; line-height: 22px; top: 4px; left: 8px; } #guestsmenu { font-size: 1.2em; position: absolute; left: 100px; @@ -1053,9 +1091,17 @@ a#topbarmaximize { #embed{ display:none; position:absolute; -top:42px; +top:40px; 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{ @@ -1063,11 +1109,11 @@ margin-left:10px; } #embedinput{ -width:80%; +width:375px; height:24px; display:inline; +margin-top: 10px; padding-left:4px; -margin-left:4px; } ul#colorpickerswatches @@ -1078,7 +1124,7 @@ ul#colorpickerswatches ul#colorpickerswatches li { - border: 1px solid #999; + border: 1px solid #fff; width: 14px; height: 14px; overflow: hidden; diff --git a/static/img/jun09/pad/inviteshare2.gif b/static/img/jun09/pad/inviteshare2.gif index 98d4c8597..fe07332bb 100644 Binary files a/static/img/jun09/pad/inviteshare2.gif and b/static/img/jun09/pad/inviteshare2.gif differ diff --git a/static/js/pad_editbar.js b/static/js/pad_editbar.js index 28e15808b..4f73ca738 100644 --- a/static/js/pad_editbar.js +++ b/static/js/pad_editbar.js @@ -81,29 +81,29 @@ var padeditbar = (function(){ if (cmd == 'showusers') { // show users shows the current users on teh pad // get current height - var editbarheight = $('#editbar').css('height'); - if (editbarheight == "36px"){ + var editbarheight = $('#users').css('display'); + if (editbarheight == "none"){ // increase the size of the editbar - $('#editbar').animate({height:'72px'}); - $('#editorcontainerbox').animate({top:'72px'}); + //$('#editbar').animate({height:'72px'}); + //$('#editorcontainerbox').animate({top:'72px'}); $('#embed').hide(); $('#users').show(); } else { // increase the size of the editbar - $('#editbar').animate({height:'36px'}); - $('#editorcontainerbox').animate({top:'36px'}); + //$('#editbar').animate({height:'36px'}); + //$('#editorcontainerbox').animate({top:'36px'}); $('#users').hide(); } } if (cmd == 'embed') { // embed shows the embed link // get current height - var editbarheight = $('#editbar').css('height'); - if (editbarheight == "36px"){ + var editbarheight = $('#embed').css('display'); + if (editbarheight == "none"){ // increase the size of the editbar - $('#editbar').animate({height:'72px'}); + //$('#editbar').animate({height:'72px'}); $('#editorcontainerbox').animate({top:'72px'}); // hide the users $('#users').hide(); @@ -111,12 +111,13 @@ var padeditbar = (function(){ padurl = document.location; // change the div contents to include the pad url in an input box $('#embed').html('
Embed code:>
'); + $('#users').hide(); $('#embed').show(); } else { // increase the size of the editbar - $('#editbar').animate({height:'36px'}); + //$('#editbar').animate({height:'36px'}); $('#editorcontainerbox').animate({top:'36px'}); $('#embed').hide(); } diff --git a/static/js/pad_modals.js b/static/js/pad_modals.js index 37a3386f0..183b7ff3d 100644 --- a/static/js/pad_modals.js +++ b/static/js/pad_modals.js @@ -59,6 +59,7 @@ var padmodals = (function() { init: function() { self.initFeedback(); self.initShareBox(); + console.log("self.initShareBox"); }, initFeedback: function() { /*var emailField = $("#feedbackbox-email"); @@ -78,8 +79,9 @@ var padmodals = (function() { }); }, initShareBox: function() { - $("#sharebutton, #nootherusers a").click(function() { + $("#sharebutton").click(function() { self.showShareBox(); + console.log("share"); }); $("#sharebox-hide").click(function() { self.hideModal(); diff --git a/static/js/pad_userlist.js b/static/js/pad_userlist.js index 3e2f38b58..0745b5422 100644 --- a/static/js/pad_userlist.js +++ b/static/js/pad_userlist.js @@ -20,67 +20,6 @@ var colorPickerOpen = false; var colorPickerSetup = false; 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', { - 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() { @@ -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) { var existingIndex = -1; for(var i=0;i= 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', { + 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); + } +} \ No newline at end of file diff --git a/static/padhtml b/static/padhtml index e6a43e538..b6d9333e0 100644 --- a/static/padhtml +++ b/static/padhtml @@ -84,17 +84,6 @@ var clientVars = {}; // ]]>
- - -
-
    -
- - Save - - - Cancel - -
-
+
+ +
+ +
+ +
+
    +
+ + Save + + + Cancel + +
+
Save
+
Cancel
+ +
+
+
+
+ +
+
+ + + + + +
+
+ +
+ Invite other users and they will show up here. +
+
+ +
+ +
+ + + + + +