Merge branch 'master' of git://github.com/Pita/etherpad-lite into api

static/css/pad.css

@@ -61,6 +61,7 @@ a img
   padding: 4px 5px;
   
   height: 18px;
+  width: 18px;
 
   cursor: pointer;
   
@@ -94,6 +95,7 @@ a img
   border: inherit;
   background: inherit;
   visibility:hidden;
+  width: 0px;
 }
 #editbar ul li a
 {
@@ -308,7 +310,13 @@ a#hidetopmsg { position: absolute; right: 5px; bottom: 5px; }
 .hidesidebar #padeditor { right: 0; }
 
 #vdraggie {
-  background: url(static/img/vdraggie.gif) no-repeat top center;
+/*  background: url(static/img/vdraggie.gif) no-repeat top center;*/
+  width:16px;
+  height:16px;
+  background-image:url('../../static/img/etherpad_lite_icons.gif');
+  background-repeat: no-repeat;
+  background-position: 0px -300px;
+
   cursor: W-resize;
   bottom:0;
   position:absolute;
@@ -812,7 +820,6 @@ ul#colorpickerswatches li:hover
 
 #chatlabel
 {
-  cursor: default;
   font-size:13px;
   line-height:16px;
   font-weight:bold;
@@ -842,6 +849,7 @@ ul#colorpickerswatches li:hover
   border-top-left-radius: 5px;
   border-top-right-radius: 5px;
   background-color:#fff;
+  cursor: pointer;
 }
 
 #chaticon a
@@ -876,10 +884,11 @@ ul#colorpickerswatches li:hover
 
 #titlecross
 {
-  font-size:16px;
+  font-size:25px;
   float:right;
   text-align: right;
   text-decoration: none;
+  cursor: pointer;
   color:#555;
 }
 
@@ -906,22 +915,26 @@ position: relative;
   display: block;
     
 } 
-/*
-.ui-resizable-disabled .ui-resizable-handle, .ui-resizable- autohide .ui-resizable-handle { display: none; } 
-*/
 
 .ui-resizable-nw {
-  cursor: nw-resize; 
-  width: 22px; 
-  height: 22px; 
-  left: 0px; top: 0px; 
-  background-size: 100% auto;
   background-image: url("../img/nw-resize.png");
   background-repeat: no-repeat;
-/*  background-position: -5px -5px;*/
+  background-size: 100% auto;
+  cursor: nw-resize;
+  height: 22px;
+  left: 0;
+  top: 0;
+  width: 22px;
+} 
+
+.ui-resizable-ne 
+{ 
+  cursor: ne-resize; 
+  width: 9px; 
+  height: 9px; 
+  right: -5px; 
+  top: -5px;
 } 
-.ui-resizable-ne { cursor: ne-resize; width: 9px; height: 9px; right: 
--5px; top: -5px;} 
 
 #importexport{
   position:absolute;
@@ -1046,3 +1059,30 @@ padding: 10px;
 border-radius: 6px;
 opacity:.8;
 }
+
+.buttonicon{
+width:16px;
+height:16px;
+background-image:url('../../static/img/etherpad_lite_icons.gif');
+background-repeat: no-repeat;
+margin-left: 1px;
+margin-top: 1px;
+}
+
+#usericon
+{
+width:27px !important;
+}
+
+#focusprotector
+{
+  z-index: 100;
+  position: absolute;
+  bottom: 0px;
+  top: 0px;
+  left: 0px;
+  right: 0px;
+  background-color: white;
+  opacity:0.01;
+  display:none;
+}

static/js/chat.js

@@ -3,16 +3,29 @@ var chat = (function()
   var self = {
     show: function () 
     {      
-      $("#chaticon").hide("slide", { direction: "down" }, 500, function()
+      $("#chaticon").hide("slide", {
+        direction: "down"
+      }, 500, function ()
       {
-        $("#chatbox").show("slide", { direction: "down" }, 750, self.scrollDown);
- 	$("#chatbox").resizable({ handles: 'nw', start: function(event,ui){
-	  $("#editorcontainer").hide();
-        }, stop: function(event,ui){
-          $("#editorcontainer").show();
- 	  self.scrollDown();
-        }});
-
+        $("#chatbox").show("slide", {
+          direction: "down"
+        }, 750, self.scrollDown);
+        $("#chatbox").resizable(
+        {
+          handles: 'nw',
+          start: function (event, ui)
+          {
+            $("#focusprotector").show();
+          },
+          stop: function (event, ui)
+          {
+            $("#focusprotector").hide();
+            
+            $("#chatbox").css({right: "20px", bottom: "0px", left: "", top: ""});
+            
+            self.scrollDown();
+          }
+        });
       });
     },
     hide: function () 

static/pad.html

@@ -25,76 +25,75 @@
 <ul id="menu_left">
 <li>
   <a onClick="window.pad&&pad.editbarClick('bold');return false" title="Bold (ctrl-B)">
-    <img src="../static/img/editbar_bold.gif" width="16" height="16" />
+    <div class="buttonicon" style="background-position:0px -116px"></div>
   </a>
 </li>
 <li>
-	<a onClick="window.pad&&pad.editbarClick('italic'); return false;" title="Italics (ctrl-I)">
-	  <img src="../static/img/editbar_italic.gif" width="16" height="16" />
-	</a>
+  <a onClick="window.pad&&pad.editbarClick('italic'); return false;" title="Italics (ctrl-I)">
+    <div class="buttonicon" style="background-position:0px 0px"></div>
+  </a>
 </li>
 <li>
   <a onClick="window.pad&&pad.editbarClick('underline');return false;" title="Underline (ctrl-U)">
-    <img src="../static/img/editbar_underline.gif" width="16" height="16" />
+    <div class="buttonicon" style="background-position:0px -236px;margin-top:1px;"></div>
   </a>
 </li>
 <li>
-	<a onClick="window.pad&&pad.editbarClick('strikethrough');return false;" title="Strikethrough">
-	  <img src="../static/img/editbar_strikethrough.gif" width="16" height="16" />
-	</a>
+  <a onClick="window.pad&&pad.editbarClick('strikethrough');return false;" title="Strikethrough">
+    <div class="buttonicon" style="background-position:0px -200px"></div>
+  </a>
 </li>
 <li class="separator"></li>
 <li>
   <a onClick="window.pad&&pad.editbarClick('insertunorderedlist');return false;" title="Toggle Bullet List">
-    <img src="../static/img/editbar_insertunorderedlist.gif" width="16" height="16" />
+    <div class="buttonicon" style="background-position:0px -34px"></div>
   </a>
 </li>
 <li>
   <a onClick="window.pad&&pad.editbarClick('indent');return false;" title="Indent List">
-    <img src="../static/img/editbar_indent.gif" width="16" height="16" />
+    <div class="buttonicon" style="background-position:0px -52px"></div>
   </a>
 </li>
 <li>
-	<a onClick="window.pad&&pad.editbarClick('outdent');return false;" title="Unindent List">
-	  <img src="../static/img/editbar_outdent.gif" width="16" height="16" />
+  <a onClick="window.pad&&pad.editbarClick('outdent');return false;" title="Unindent List">
+    <div class="buttonicon" style="background-position:0px -134px"></div>
 	</a>
 </li>
 <li class="separator"></li>
 <li>
-	<a onClick="window.pad&&pad.editbarClick('undo');return false;" title="Undo (ctrl-Z)">
-	  <img src="../static/img/editbar_undo.gif" width="16" height="16" />
-	</a>
+  <a onClick="window.pad&&pad.editbarClick('undo');return false;" title="Undo (ctrl-Z)">
+    <div class="buttonicon" style="background-position:0px -255px"></div>
+  </a>
 </li>
 <li>
 	<a onClick="window.pad&&pad.editbarClick('redo');return false;" title="Redo (ctrl-Y)">
-	  <img src="../static/img/editbar_redo.gif" width="16" height="16" />
-	</a>
+    <div class="buttonicon" style="background-position:0px -166px"></div>
+  </a>
 </li>
 <li class="separator"></li>
 <li>
-	<a onClick="window.pad&&pad.editbarClick('clearauthorship');return false;" title="Clear Authorship Colors">
-	  <img src="../static/img/editbar_clearauthorship.gif" width="16" height="16" />
-	</a>
+  <a onClick="window.pad&&pad.editbarClick('clearauthorship');return false;" title="Clear Authorship Colors">
+    <div class="buttonicon" style="background-position:0px -86px"></div>
+  </a>
 </li>
 </ul>
 
 <ul id="menu_right">
 
 <li>
-	<a id="readonlylink" onClick="window.pad&&pad.editbarClick('readonly');return false;" title="Create a readonly link for this pad">
-	  <img src="../static/img/editbar_readonly.gif" width="16" height="16" />
-	</a>
+  <a id="readonlylink" onClick="window.pad&&pad.editbarClick('readonly');return false;" title="Create a readonly link for this pad">
+     <div class="buttonicon" style="background-position:0px -150px"></div>
+  </a>
 </li>
 <li>
-	<a id="exportlink" onClick="window.pad&&pad.editbarClick('import_export');return false;"
-	title="Import/Export from/to different document formats">
-	  <img src="../static/img/editbar_import_export.gif" width="16" height="16" />
-	</a>
+  <a id="exportlink" onClick="window.pad&&pad.editbarClick('import_export');return false;" title="Import/Export from/to different document formats">
+    <div class="buttonicon" style="background-position:0px -68px"></div>
+  </a>
 </li>
 <li>
-	<a id="embedlink" onClick="window.pad&&pad.editbarClick('embed');return false;" title="Embed this pad">
-	  <img src="../static/img/editbar_embed.gif" width="16" height="16" />
-	</a>
+  <a id="embedlink" onClick="window.pad&&pad.editbarClick('embed');return false;" title="Embed this pad">
+    <div class="buttonicon" style="background-position:0px -18px"></div>
+  </a>
 </li>
 <!--
 We removed this feature cause its not worth the space it needs in the editbar
@@ -109,23 +108,18 @@ We removed this feature cause its not worth the space it needs in the editbar
 	</select>
 </li>-->
 <li class="separator"></li>
-<!--<li>
-	<a onClick="window.pad&&pad.editbarClick('chat'); return false;"
-	title="(Placeholder, not implemented so far) Open the chat for this pad">
-	  <img src="../static/img/editbar_chat.gif" width="16" height="16" />
-	</a>
-</li>-->
 <li>
   <a id="timesliderlink" title="Show the history of this pad">
     <script>
       document.getElementById('timesliderlink').href = document.location+ '/timeslider';
     </script>
-    <img src="../static/img/editbar_timeslider.gif" width="16" height="16" />
+    <div class="buttonicon" style="background-position:0px -218px"></div>
   </a>
 </li>
-<li>
+<li id="usericon">
   <a onClick="window.pad&&pad.editbarClick('showusers');return false;" title="Show connected users">
-    <img id="showusersicon" src="../static/img/editbar_showusers.gif" width="16" height="16" /> <span id="online_count">1</span>
+    <div class="buttonicon" style="background-position:0px -184px;display:inline-block;"></div>
+ <span id="online_count">1</span>
   </a>
 </li>
 </ul>
@@ -256,13 +250,13 @@ Use this link to share a read-only version of your pad:<input id="readonlyInput"
 <a onClick="chat.show();return false;"
 	title="Open the chat for this pad">
 	  <span id="chatlabel">Chat</span>
-	  <img src="../static/img/editbar_chat.gif" width="16" height="16" />
+          <div class="buttonicon" style="background-position:0px -102px;display:inline-block;"></div>
 </a>
 <span id="chatcounter">0</span>
 </div>
 
 <div id="chatbox">
-  <div id="titlebar"><span id ="titlelabel">Chat</span><a id="titlecross" onClick="chat.hide();return false;">x&nbsp;</a></div>
+  <div id="titlebar"><span id ="titlelabel">Chat</span><a id="titlecross" onClick="chat.hide();return false;">-&nbsp;</a></div>
   <div id="chattext" class="authorColors"></div>
   <div id="chatinputbox">
     <form>
@@ -271,10 +265,13 @@ Use this link to share a read-only version of your pad:<input id="readonlyInput"
   </div>
 </div>
 
+<div id="focusprotector">&nbsp;</div>
+
 <!-- /padeditor -->
 <div id="modaloverlay">
 <div id="modaloverlay-inner">
 <!-- -->
+
 </div>
 </div>
 <div id="mainmodals">