Made chat expandable

mikemintz · Nov 15, 2011 · 67a6cfd · 67a6cfd
1 parent c135ca2
commit 67a6cfd
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 9 deletions.
diff --git a/deme_django/TODO b/deme_django/TODO
@@ -74,6 +74,7 @@ Interface
 * In a long document (I tested a 700 page document to see what would break) the line does not show up for located comments. (Jimmy 10/27/11) 
 * The new edit button does not work and says there is a problem with lock refresh. (Jimmy 10/27/11)
 * When I uploaded a portion of the TODO file onto demesandbox it wrapped a line that went too long, but on my local installation it did not. (Jimmy 10/27/11)
+* Chat can send empty messages (Jimmy 11/14/11)
 
 Documentation
 -------------

diff --git a/deme_django/cms/templates/default_layout.html b/deme_django/cms/templates/default_layout.html
@@ -163,6 +163,18 @@
         }
     };
     </script>
+    <script type="text/javascript">
+    function toggleChat(className){
+        var chat = "#" + className;
+        if ($(chat).is(":hidden")) {
+            $(chat).slideDown("slow");
+            $("#expandChatButton").attr("class", "ui-icon ui-icon-circle-triangle-s");
+        } else {
+            $(chat).slideUp("slow");
+            $("#expandChatButton").attr("class", "ui-icon ui-icon-circle-triangle-n");
+        }
+    };
+    </script>
 
 </head>
 
@@ -401,12 +413,7 @@ <h3>Permissions</h3>
                     {{ memberOf_box }}
                 </div>
                 {% endif %}
-                <div class="ui-widget-header ui-corner-top ui-helper-clearfix" style="padding: 5px;">
-                    Chat
-                </div>
-                <div class="ui-widget-content ui-corner-bottom ui-helper-clearfix" style="padding: 5px; margin-bottom: 10px;">
-                    {% chat_box %}
-                </div>
+
             </td>
             <td style="vertical-align: top; width: 85%; padding:0;" id="center_table_column">
                 <div style="margin-top: 80px;">
@@ -441,6 +448,18 @@ <h3>Permissions</h3>
     </table>
 
 </div>
+<div style="clear: both;"></div>
+<div class ="chat" style="width: 200px; margin: 0; position: fixed; bottom: 0;">
+    <div class="ui-widget-header ui-corner-top ui-helper-clearfix" id="chatHeader" style="padding: 5px;">
+        Chat 
+        <a id="expandChat" onclick="toggleChat('chatBody'); return false;" class="fg-button ui-state-default fg-button-icon-solo ui-corner-all" title="Expand_Chat" style="float: right; height: 10px;"><span class="ui-icon ui-icon-circle-triangle-n" id="expandChatButton" style= "height: 20px;"></span>Expand Chat</a>
+
+
+    </div>
+    <div class="ui-widget-content ui-corner-bottom ui-helper-clearfix" id="chatBody" style="padding: 5px; display:none;">
+        {% chat_box %}
+    </div>
+</div>
 
 <div class="footer">
     <p>

diff --git a/deme_django/modules/chat/templatetags/chat_extras.py b/deme_django/modules/chat/templatetags/chat_extras.py
@@ -19,11 +19,11 @@ def render(self, context):
             <div>
                 <a href="%(chathistory_url)s">View chat history</a>
             </div>
-            <div id="chat_messages" style="height: 250px; overflow-y: scroll;">
+            <div id="chat_messages" style="height: 250px; overflow-y: scroll; border-style: solid; border-width: 1px; border-color: #888;">
             </div>
             <form onsubmit="$.ajax({url: '%(createchatmessage_url)s', type: 'POST', data: {'body': this['body'].value}}); this['body'].value = ''; this['body'].focus(); return false;">
-                <input type="text" name="body" autocomplete="off" />
-                <input type="submit" value="Send" />
+                <input type="text" name="body" style="width:184px; " autocomplete="off" />
+                <input type="submit" style="display: none;" value="Send" />
             </form>
             <script type="text/javascript">
                 $(function(){