Home Explore Help
Register Sign In
im-changing.ru
/
converse.js
mirror of https://github.com/conversejs/converse.js.git
2
0
Fork 0
Files Issues 0 Wiki
Browse Source

Various changes, see below:

- disable drag resizing when chatboxes are minimized.
- refactored chat box and chat room markup so that they are more similar.
- don't make the chat box title clickable if no vcard URL is available
- make only the title text clickable, not the whitespace
- fixed toggling of resized chats
JC Brand 11 years ago
parent
62f6997a25
commit
12fc286ca6
5 changed files with 129 additions and 120 deletions
Split View Show Diff Stats
  1. 24 14
      converse.css
  2. 13 17
      converse.js
  3. 70 75
      mockup.html
  4. 1 1
      src/dragresize.js
  5. 21 13
      src/templates/chatbox.html

+ 24 - 14
converse.css
View File 

@@ -386,16 +386,25 @@ span.spinner.hor_centered {
 
     background-color: #2D617A;
 
 }
 
 
-.chatroom .chat-body {
 
-    height: -moz-calc(100% - 38px);
 
-    height: -o-calc(100% - 38px);
 
-    height: calc(100% - 38px);
 
+.chat-body {
 
     background-color: white;
 
     border-bottom-right-radius: 4px;
 
     border-bottom-left-radius: 4px;
 
     border-top: 0;
 
 }
 
 
+.chatbox .chat-body {
 
+    height: -moz-calc(100% - 38px);
 
+    height: -o-calc(100% - 38px);
 
+    height: calc(100% - 38px);
 
+}
 
+
 
+.chatroom .chat-body {
 
+    height: -moz-calc(100% - 38px);
 
+    height: -o-calc(100% - 38px);
 
+    height: calc(100% - 38px);
 
+}
 
+
 
 .chatroom .chat-area {
 
     float: left;
 
     width: 200px;
 
@@ -450,16 +459,10 @@ ul.participant-list li.moderator {
 
     -moz-box-sizing: border-box;
 
 }
 
 
-.chatbox .chat-content {
 
-    height: -moz-calc(100% - 114px);
 
-    height: -o-calc(100% - 114px);
 
-    height: calc(100% - 114px);
 
-}
 
-
 
-.chatroom .chat-content {
 
-    height: -moz-calc(100% - 75px);
 
-    height: -o-calc(100% - 75px);
 
-    height: calc(100% - 75px);
 
+.chat-content {
 
+    height: -moz-calc(100% - 76px);
 
+    height: -o-calc(100% - 76px);
 
+    height: calc(100% - 76px);
 
 }
 
 
 .chat-info {
 
@@ -558,6 +561,10 @@ div.chat-title {
 
     height: 1em;
 
 }
 
 
+div.chat-title a {
 
+    color: white;
 
+}
 
+
 
 .chat-head-chatbox,
 
 .chat-head-chatroom {
 
     background: linear-gradient(top, rgba(206,220,231,1) 0%,rgba(79,106,114,1) 100%);
 
@@ -576,6 +583,9 @@ p.chatroom-topic {
 
     margin: 0;
 
 }
 
 
+div.chat-head-chatbox a.user-custom-message {
 
+    color: white;
 
+}
 
 .activated{
 
     display: block !important;
 
 }

+ 13 - 17
converse.js
View File 

@@ -1149,19 +1149,21 @@
 
                 }
 
             },
 
 
-            swapToggleIcon: function ($el) {
 
-                if ($el.hasClass('icon-minus')) {
 
-                    $el.removeClass('icon-minus').addClass('icon-plus');
 
-                } else {
 
-                    $el.removeClass('icon-plus').addClass('icon-minus');
 
-                }
 
-            },
 
-
 
             toggleChat: function (ev) {
 
+                // FIXME: Restore chat box to original resized height.
 
+                // Requires that we save the custom height.
 
+                this.$el.children('.box-flyout').attr('style', '');
 
+
 
                 this.saveToggleState();
 
-                this.$el.find('form.sendXMPPMessage').toggle();
 
-                this.$el.find('div.chat-content').slideToggle('fast');
 
-                this.swapToggleIcon($(ev.target));
 
+                this.$el.find('div.chat-body').slideToggle('fast');
 
+                var $target = $(ev.target);
 
+                if ($target.hasClass('icon-minus')) {
 
+                    $target.removeClass('icon-minus').addClass('icon-plus');
 
+                } else {
 
+                    $target.removeClass('icon-plus').addClass('icon-minus');
 
+                }
 
+                // Toggle drag resize ability
 
+                this.$el.find('.dragresize-tm').toggle();
 
             },
 
 
             updateVCard: function () {
 
@@ -1746,12 +1748,6 @@
 
             },
 
             is_chatroom: true,
 
 
-            toggleChat: function (ev) {
 
-                this.saveToggleState();
 
-                this.$el.find('div.chat-body').slideToggle('fast');
 
-                this.swapToggleIcon($(ev.target));
 
-            },
 
-
 
             sendChatRoomMessage: function (body) {
 
                 var match = body.replace(/^\s*/, "").match(/^\/(.*?)(?: (.*))?$/) || [false],
 
                     $chat_content;

+ 70 - 75
mockup.html
View File 

@@ -1,5 +1,5 @@
 
 <!DOCTYPE html>
 
-<html lang="en" id="facebook">
 
+<html lang="en">
 
 <head>
 
     <title id="pageTitle">Converse: Mockup</title>
 
     <meta charset="utf-8">
 
@@ -9,7 +9,7 @@
 
     <link type="text/css" rel="stylesheet" href="stylesheets/stylesheet.css">
 
     <link type="text/css" rel="stylesheet" href="converse.css">
 
     <script src="components/jquery/jquery.min.js"></script>
 
-    <script type="text/javascript" src="dragresize/dragresize_commented.js"></script>
 
+    <script type="text/javascript" src="src/dragresize.js"></script>
 
     <script type="text/javascript">
 
         $(document).ready(function () {
 
         //<![CDATA[
 
@@ -245,74 +245,76 @@
 
             <div class="chat-head chat-head-chatbox">
 
                 <a class="close-chatbox-button icon-close"></a>
 
                 <a class="toggle-chatbox-button icon-minus"></a>
 
-
 
-                <a href="http://opkode.com" target="_blank" class="user">
 
-                    <canvas height="33px" width="33px" class="avatar" style="background-color: black"></canvas>
 
-                    <div class="chat-title"> JC Brand </div>
 
-                </a>
 
+                <canvas height="33px" width="33px" class="avatar" style="background-color: black"></canvas>
 
+                <div class="chat-title">
 
+                    <a href="http://opkode.com" target="_blank" class="user">
 
+                        JC Brand
 
+                    </a>
 
+                </div>
 
                 <p class="user-custom-message" title="10000ft in the air">10000ft in the air</p>
 
-                <p></p>
 
             </div>
 
-            <div class="chat-content">
 
-                <div class="chat-info"><strong>/help</strong>:This is an info message</div>
 
-                <div class="chat-error">This is an error message</div>
 
-                <div class="chat-message">
 
-                    <span class="chat-message-me">09:35 me:&nbsp;</span>
 
-                    <span class="chat-message-content">
 
-                        Hello world
 
-                        <span class="icon-smiley"></span>
 
-                    </span>
 
-                </div>
 
-                <div class="chat-message ">
 
-                    <span class="chat-message-them">19:25 Benedict-John:&nbsp;</span>
 
-                    <span class="chat-message-content">Dagsê</span>
 
-                </div>
 
-                <div class="chat-message">
 
-                    <span class="chat-message-me">19:39 me:&nbsp;</span>
 
-                    <span class="chat-message-content">This is a relatively long message to check that wrapping works as expected.</span>
 
-                </div>
 
-                <div class="chat-message">
 
-                    <span class="chat-message-me">19:42 me:&nbsp;</span>
 
-                    <span class="chat-message-content">Supercalifragilisticexpialidociousstillnotlongenough</span>
 
-                </div>
 
-                <div class="chat-event">JC Brand is busy</div>
 
-                <div class="chat-message ">
 
-                    <span class="chat-message-me">19:43 me:&nbsp;</span>
 
-                    <span class="chat-message-content">Another message to check that scrolling works.</span>
 
+            <div class="chat-body">
 
+                <div class="chat-content">
 
+                    <div class="chat-info"><strong>/help</strong>:This is an info message</div>
 
+                    <div class="chat-error">This is an error message</div>
 
+                    <div class="chat-message">
 
+                        <span class="chat-message-me">09:35 me:&nbsp;</span>
 
+                        <span class="chat-message-content">
 
+                            Hello world
 
+                            <span class="icon-smiley"></span>
 
+                        </span>
 
+                    </div>
 
+                    <div class="chat-message ">
 
+                        <span class="chat-message-them">19:25 Benedict-John:&nbsp;</span>
 
+                        <span class="chat-message-content">Dagsê</span>
 
+                    </div>
 
+                    <div class="chat-message">
 
+                        <span class="chat-message-me">19:39 me:&nbsp;</span>
 
+                        <span class="chat-message-content">This is a relatively long message to check that wrapping works as expected.</span>
 
+                    </div>
 
+                    <div class="chat-message">
 
+                        <span class="chat-message-me">19:42 me:&nbsp;</span>
 
+                        <span class="chat-message-content">Supercalifragilisticexpialidociousstillnotlongenough</span>
 
+                    </div>
 
+                    <div class="chat-event">JC Brand is busy</div>
 
+                    <div class="chat-message ">
 
+                        <span class="chat-message-me">19:43 me:&nbsp;</span>
 
+                        <span class="chat-message-content">Another message to check that scrolling works.</span>
 
+                    </div>
 
                 </div>
 
+                <form class="sendXMPPMessage" action="" method="post">
 
+                    <ul class="chat-toolbar no-text-select">
 
+                        <li class="toggle-smiley icon-happy" title="Insert a smilery">
 
+                            <ul>
 
+                                <li><a class="icon-smiley" href="#" data-emoticon=":)"></a></li>
 
+                                <li><a class="icon-wink" href="#" data-emoticon=";)"></a></li>
 
+                                <li><a class="icon-grin" href="#" data-emoticon=":D"></a></li>
 
+                                <li><a class="icon-tongue" href="#" data-emoticon=":P"></a></li>
 
+                                <li><a class="icon-cool" href="#" data-emoticon="8)"></a></li>
 
+                                <li><a class="icon-evil" href="#" data-emoticon=">:)"></a></li>
 
+                                <li><a class="icon-confused" href="#" data-emoticon=":S"></a></li>
 
+                                <li><a class="icon-wondering" href="#" data-emoticon=":\"></a></li>
 
+                                <li><a class="icon-angry" href="#" data-emoticon=">:("></a></li>
 
+                                <li><a class="icon-sad" href="#" data-emoticon=":("></a></li>
 
+                                <li><a class="icon-shocked" href="#" data-emoticon=":O"></a></li>
 
+                                <li><a class="icon-thumbs-up" href="#" data-emoticon="(^.^)b"></a></li>
 
+                                <li><a class="icon-heart" href="#" data-emoticon="<3"></a></li>
 
+                            </ul>
 
+                        </li>
 
+                        <li class="toggle-otr unencrypted" title="Turn on 'off-the-record' chat encryption">
 
+                            <span class="chat-toolbar-text">unencrypted</span>
 
+                            <span class="icon-unlocked"></span>
 
+                            <ul>
 
+                                <li><a href="#">Start private conversation</a></li>
 
+                                <li><a href="#">End private conversation</a></li>
 
+                                <li><a href="#">Authenticate buddy</a></li>
 
+                                <li><a href="http://www.cypherpunks.ca/otr/help/3.2.0/levels.php" target="_blank">What's this?</a></li>
 
+                            </ul>
 
+                        </li>
 
+                    </ul>
 
+                    <textarea type="text" class="chat-textarea" placeholder="Personal message"></textarea>
 
+                </form>
 
             </div>
 
-            <form class="sendXMPPMessage" action="" method="post">
 
-                <ul class="chat-toolbar no-text-select">
 
-                    <li class="toggle-smiley icon-happy" title="Insert a smilery">
 
-                        <ul>
 
-                            <li><a class="icon-smiley" href="#" data-emoticon=":)"></a></li>
 
-                            <li><a class="icon-wink" href="#" data-emoticon=";)"></a></li>
 
-                            <li><a class="icon-grin" href="#" data-emoticon=":D"></a></li>
 
-                            <li><a class="icon-tongue" href="#" data-emoticon=":P"></a></li>
 
-                            <li><a class="icon-cool" href="#" data-emoticon="8)"></a></li>
 
-                            <li><a class="icon-evil" href="#" data-emoticon=">:)"></a></li>
 
-                            <li><a class="icon-confused" href="#" data-emoticon=":S"></a></li>
 
-                            <li><a class="icon-wondering" href="#" data-emoticon=":\"></a></li>
 
-                            <li><a class="icon-angry" href="#" data-emoticon=">:("></a></li>
 
-                            <li><a class="icon-sad" href="#" data-emoticon=":("></a></li>
 
-                            <li><a class="icon-shocked" href="#" data-emoticon=":O"></a></li>
 
-                            <li><a class="icon-thumbs-up" href="#" data-emoticon="(^.^)b"></a></li>
 
-                            <li><a class="icon-heart" href="#" data-emoticon="<3"></a></li>
 
-                        </ul>
 
-                    </li>
 
-                    <li class="toggle-otr unencrypted" title="Turn on 'off-the-record' chat encryption">
 
-                        <span class="chat-toolbar-text">unencrypted</span>
 
-                        <span class="icon-unlocked"></span>
 
-                        <ul>
 
-                            <li><a href="#">Start private conversation</a></li>
 
-                            <li><a href="#">End private conversation</a></li>
 
-                            <li><a href="#">Authenticate buddy</a></li>
 
-                            <li><a href="http://www.cypherpunks.ca/otr/help/3.2.0/levels.php" target="_blank">What's this?</a></li>
 
-                        </ul>
 
-                    </li>
 
-                </ul>
 
-                <textarea type="text" class="chat-textarea" placeholder="Personal message"></textarea>
 
-            </form>
 
         </div>
 
     </div>
 
 
@@ -325,8 +327,7 @@
 
                 <a class="configure-chatroom-button icon-wrench" style=""></a>
 
 
                 <div class="chat-title"> Chatroom </div>
 
-                <p class="chatroom-topic"></p>
 
-                <p></p>
 
+                <p class="chatroom-topic">May the force be with you</p>
 
             </div>
 
             <div class="chat-body">
 
                 <div class="chat-area">
 
@@ -479,19 +480,13 @@ $(document).ready(function () {
 
 
         $('.toggle-chatbox-button').click(function(ev) {
 
             var $grandparent = $(ev.target).parent().parent().parent();
 
-            if ($grandparent.attr('class') == 'chatroom') {
 
-                $grandparent.find('.chat-body').slideToggle(300);
 
-            } else {
 
-                $grandparent.find('div.chat-content').slideToggle(300);
 
-            }
 
+            $grandparent.find('.chat-body').slideToggle(300);
 
             var flyout = $grandparent.find('.box-flyout');
 
             if (flyout.hasClass('minimized')) {
 
                 flyout.removeClass('minimized');
 
             } else {
 
                 flyout.addClass('minimized');
 
             }
 
-
 
-            $(ev.target).parent().parent().find('form.sendXMPPMessage').toggle();
 
         });
 
 
         // Clickable Dropdown

+ 1 - 1
src/dragresize.js
View File 

@@ -14,7 +14,7 @@ Simplified and modified for Converse.js by JC Brand https://opkode.com
 
     if (typeof define === 'function' && define.amd) {

         define("dragresize", [], function() { return factory(); });

     } else {

-        root.dragresize = factory();

+        root.DragResize = factory();

     }

 }(this, function () {

+ 21 - 13
src/templates/chatbox.html
View File 

@@ -3,19 +3,27 @@
 
     <div class="chat-head chat-head-chatbox">
 
         <a class="close-chatbox-button icon-close"></a>
 
         <a class="toggle-chatbox-button icon-minus"></a>
 
-        <a href="{{url}}" target="_blank" class="user">
 
-            <div class="chat-title"> {{ fullname }} </div>
 
-        </a>
 
+        <div class="chat-title"> 
+            {[ if (url) { ]}
 
+                <a href="{{url}}" target="_blank" class="user">
 
+            {[ } ]}
 
+                    {{ fullname }}
 
+            {[ if (url) { ]}
 
+                </a>
 
+            {[ } ]}
 
+        </div>
 
         <p class="user-custom-message"><p/>
 
     </div>
 
-    <div class="chat-content"></div>
 
-    <form class="sendXMPPMessage" action="" method="post">
 
-        {[ if (show_toolbar) { ]}
 
-            <ul class="chat-toolbar no-text-select"></ul>
 
-        {[ } ]}
 
-    <textarea
 
-        type="text"
 
-        class="chat-textarea"
 
-        placeholder="{{label_personal_message}}"/>
 
-    </form>
 
+    <div class="chat-body">
 
+        <div class="chat-content"></div>
 
+        <form class="sendXMPPMessage" action="" method="post">
 
+            {[ if (show_toolbar) { ]}
 
+                <ul class="chat-toolbar no-text-select"></ul>
 
+            {[ } ]}
 
+        <textarea
 
+            type="text"
 
+            class="chat-textarea"
 
+            placeholder="{{label_personal_message}}"/>
 
+        </form>
 
+    </div>
 
 </div>