converted load-more-link to button, added loading-gif, fixed typo

src/node/handler/PadMessageHandler.js

@@ -365,7 +365,7 @@ function handleChatMessage(client, message)
 }
 
 /**
- * Handles the clients requets for more chat-messages
+ * Handles the clients request for more chat-messages
  * @param client the client that send this message
  * @param message the message from the client
  */

src/static/css/pad.css

@@ -488,10 +488,21 @@ table#otheruserstable {
   -ms-overflow-x: hidden;
   overflow-x: hidden;
 }
-#chatloadmessages
+.chatloadmessages
 {
-  color: blue;
-  text-decoration: underline;
+  margin-bottom: 5px;
+  margin-top: 5px;
+  margin-left: auto;
+  margin-right: auto;
+  display: block;
+}
+#chatloadmessagesbutton
+{
+  line-height: 1.8em;
+}
+#chatloadmessagesball
+{
+  display: none;
 }
 #chatinputbox {
   padding: 3px 2px;

src/static/js/chat.js

@@ -115,7 +115,7 @@ var chat = (function()
       
       var html = "<p class='" + authorClass + "'><b>" + authorName + ":</b><span class='time " + authorClass + "'>" + timeStr + "</span> " + text + "</p>";
       if(isHistoryAdd)
-        $(html).insertAfter('#chatloadmessages');
+        $(html).insertAfter('#chatloadmessagesbutton');
       else
         $("#chattext").append(html);
       
@@ -165,15 +165,16 @@ var chat = (function()
 	  // initial messages are loaded in pad.js' _afterHandshake
 	  
 	  $("#chatcounter").text(0);
-	  $("#chatloadmessages").click(function()
+	  $("#chatloadmessagesbutton").click(function()
 	  {
         var start = Math.max(self.historyPointer - 20, 0);
         var end = self.historyPointer;
 
         if(start == end) // nothing to load
           return;
-        if(start == 0) // reached the top
-          $("#chatloadmessages").css("display", "none");
+
+        $("#chatloadmessagesbutton").css("display", "none");
+        $("#chatloadmessagesball").css("display", "block");
 
         pad.collabClient.sendMessage({"type": "GET_CHAT_MESSAGES", "start": start, "end": end});
         self.historyPointer = start;

src/static/js/collab_client.js

@@ -413,9 +413,16 @@ function getCollabClient(ace2editor, serverVars, initialUserInfo, options, _pad)
         chat.scrollDown();
         chat.gotInitalMessages = true;
         chat.historyPointer = clientVars.chatHead - msg.messages.length;
-        if(chat.historyPointer == -1) // there are less than 100 messages
-          $("#chatloadmessages").css("display", "none");
       }
+
+      // messages are loaded, so hide the loading-ball
+      $("#chatloadmessagesball").css("display", "none");
+
+      // there are less than 100 messages or we reached the top
+      if(chat.historyPointer <= 0) 
+        $("#chatloadmessagesbutton").css("display", "none");
+      else // there are still more messages, re-show the load-button
+        $("#chatloadmessagesbutton").css("display", "block");
     }
     else if (msg.type == "SERVER_MESSAGE")
     {

src/static/js/pad.js

@@ -564,7 +564,7 @@ var pad = {
     }
     else // there are no messages
     {
-      $("#chatloadmessages").css("display", "none");
+      $("#chatloadmessagesbutton").css("display", "none");
     }
 
     function postAceInit()

src/templates/pad.html

@@ -368,7 +368,10 @@
 
         <div id="chatbox">
             <div id="titlebar"><span id ="titlelabel" data-l10n-id="pad.chat"></span><a id="titlecross" onClick="chat.hide();return false;">-&nbsp;</a></div>
-            <div id="chattext" class="authorColors"><a id="chatloadmessages" data-l10n-id="pad.chat.loadmessages"></a></div>
+            <div id="chattext" class="authorColors">
+                <img alt="loading.." id="chatloadmessagesball" class="chatloadmessages" src="../static/img/loading.gif" align="top">
+                <button id="chatloadmessagesbutton" class="chatloadmessages" data-l10n-id="pad.chat.loadmessages"></button>
+            </div>
             <div id="chatinputbox">
                 <form>
                     <input id="chatinput" type="text" maxlength="999">