more css for users stuff

static/css/pad_lite.css

@@ -323,12 +323,15 @@ a#hidetopmsg { position: absolute; right: 5px; bottom: 5px; }
   border-right: 1px solid #ecf3fc; border-bottom: 1px solid #ecf3fc;*/
   border: 1px solid #bbb;
   padding: 1px; background: transparent; cursor: pointer; }
+/*
 #myuser .myswatchboxhoverable, #myuser .myswatchboxunhoverable {
   background: white;
 }
 #myuser .myswatchboxhoverable:hover {
   background: #bbb;
 }
+*/
+
 #myswatch { width: 100%; height: 100%; background: transparent;/*...initially*/ }
 #mycolorpicker {
   background: url(/static/img/jun09/pad/colorpicker.gif) no-repeat left top;
@@ -1073,12 +1076,28 @@ width:100%;
 }
 
 #userscont{
-margin-left:8px;
+margin-left:6px;
 width:90%;
 height:30px;
 }
 
 .user{
+border: 1px solid #BBBBBB;
+padding-left:2px;
+padding-right:2px;
+height:20px;
+border-style:solid;
+border-width:1px;
+border-color:grey;
+background-color:lightblue;
+display:inline;
+min-width:20px;
+display:inline;
+cursor:default;
+}
+
+.myuser{
+border: 1px solid #BBBBBB;
 padding-left:2px;
 padding-right:2px;
 height:20px;
@@ -1092,6 +1111,12 @@ display:inline;
 cursor:pointer;
 }
 
+.myuser a{
+text-decoration:none;
+color:#000;
+}
+
+
 .username{
 padding-left:4px;
 padding-right:4px;

static/js/pad_editbar.js

@@ -79,28 +79,35 @@ var padeditbar = (function(){
     toolbarClick: function(cmd) {
       if (self.isEnabled()) {
         if (cmd == 'showusers') {
+        // show users shows the current users on teh pad
         // get current height
         var editbarheight = $('#editbar').css('height');
           if (editbarheight == "36px"){
             // increase the size of the editbar
             $('#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'});
+            $('#users').hide();
           }
         }
         if (cmd == 'embed') {
+        // embed shows the embed link
         // get current height
         var editbarheight = $('#editbar').css('height');
           if (editbarheight == "36px"){
             // increase the size of the editbar
             $('#editbar').animate({height:'72px'});
             $('#editorcontainerbox').animate({top:'72px'});
+            // get the pad url
             padurl = document.location;
+            // 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='+padurl+'></iframe>"></div>');
             $('#embed').show();
           }

static/js/pad_userlist.js

@@ -14,6 +14,42 @@
  * limitations under the License.
  */
 
+ var colorPickerOpen = false;
+
+ function getColorPickerSwatchIndex(jnode) {
+    return Number(jnode.get(0).className.match(/\bn([0-9]+)\b/)[1])-1;
+  }
+  function closeColorPicker(accept) {
+    if (accept) {
+      var newColorId = getColorPickerSwatchIndex($("#mycolorpicker .picked"));
+      if (newColorId >= 0) { // fails on NaN
+        myUserInfo.colorId = newColorId;
+        pad.notifyChangeColor(newColorId);
+      }
+    }
+    colorPickerOpen = false;
+    $("#mycolorpicker").css('display', 'none');
+    renderMyUserInfo();
+  }
+
+
+  function showColorPicker() {
+    if (! colorPickerOpen) {
+      var palette = pad.getColorPalette();
+      for(var i=0;i<palette.length;i++) {
+        $("#mycolorpicker .n"+(i+1)+" .pickerswatch").css(
+          'background', palette[i]);
+      }
+      $("#mycolorpicker").css('display', 'block');
+      colorPickerOpen = true;
+      renderMyUserInfo();
+    }
+    // this part happens even if color picker is already open
+    $("#mycolorpicker .pickerswatchouter").removeClass('picked');
+    $("#mycolorpicker .pickerswatchouter:eq("+(myUserInfo.colorId||0)+")").
+      addClass('picked');
+  }
+
 
 var paduserlist = (function() {
 
@@ -278,7 +314,6 @@ var paduserlist = (function() {
   var myUserInfo = {};
   var otherUsersInfo = [];
   var otherUsersData = [];
-  var colorPickerOpen = false;
 
   function rowManagerMakeNameEditor(jnode, userId) {
     setUpEditable(jnode, function() {
@@ -352,38 +387,6 @@ var paduserlist = (function() {
     jqueryNode.removeAttr('disabled').addClass('editable');
   }
 
-  function showColorPicker() {
-    if (! colorPickerOpen) {
-      var palette = pad.getColorPalette();
-      for(var i=0;i<palette.length;i++) {
-        $("#mycolorpicker .n"+(i+1)+" .pickerswatch").css(
-          'background', palette[i]);
-      }
-      $("#mycolorpicker").css('display', 'block');
-      colorPickerOpen = true;
-      renderMyUserInfo();
-    }
-    // this part happens even if color picker is already open
-    $("#mycolorpicker .pickerswatchouter").removeClass('picked');
-    $("#mycolorpicker .pickerswatchouter:eq("+(myUserInfo.colorId||0)+")").
-      addClass('picked');
-  }
-  function getColorPickerSwatchIndex(jnode) {
-    return Number(jnode.get(0).className.match(/\bn([0-9]+)\b/)[1])-1;
-  }
-  function closeColorPicker(accept) {
-    if (accept) {
-      var newColorId = getColorPickerSwatchIndex($("#mycolorpicker .picked"));
-      if (newColorId >= 0) { // fails on NaN
-        myUserInfo.colorId = newColorId;
-        pad.notifyChangeColor(newColorId);
-      }
-    }
-    colorPickerOpen = false;
-    $("#mycolorpicker").css('display', 'none');
-    renderMyUserInfo();
-  }
-
   function updateInviteNotice() {
     if (otherUsersInfo.length == 0) {
       $("#otheruserstable").hide();