Display chat messages in balloons

- resolved bug with friends online list in Opera browser (ActionItem1705)

Display chat messages in balloons
- resolved bug with friends online list in Opera browser (ActionItem1705)
Caio SBA · Antonio Terceiro
1 parent 54024abb
Showing 4 changed files with 61 additions and 56 deletions Show diff stats
app/views/layouts/chat.rhtml
public/javascripts/application.js
public/javascripts/chat.js
public/stylesheets/application.css
@@ -21,6 +21,7 @@
       var $muc_domain = '<%= "conference.#{environment.default_hostname}" %>';
       var $user_unavailable_error = '<%= _("<strong>ooops!</strong> The message could not be sent because the user is not online") %>';
       var $update_presence_status_every = <%= User.expires_chat_status_every.minutes %>;
+      var $balloon_template = '<div data-who="%{who}" class="message %{who}"><img class="avatar" src="%{avatar_url}"/><% comment_balloon do %><h5 class="%{who}-name">%{name}</h5><span class="time">%{time}</span><p>%{message}</p><% end %></div>';
     </script>
   </head>
   <body id='chat'>
@@ -559,10 +559,16 @@ function open_chat_window(self_link, anchor) {
 }
 jQuery(function($) {
+   /* Adds a class to "opera" to the body element if Opera browser detected.
+    */
+   if ( navigator.userAgent.indexOf("Opera") > -1 ) {
+     $('body').addClass('opera');
+   }
+
    /* Adds a class to "msie" to the body element if a Microsoft browser is
     * detected. This is needed to workaround several of their limitations.
     */
-   if ( navigator.appVersion.indexOf("MSIE") > -1 ) {
+   else if ( navigator.appVersion.indexOf("MSIE") > -1 ) {
      document.body.className += " msie msie" +
        navigator.appVersion.replace(/^.*MSIE\s+([0-9]+).*$/, "$1");
    }
@@ -570,7 +576,7 @@ jQuery(function($) {
    /* Adds a class to "webkit" to the body element if a Webkit based browser
     * detected.
     */
-   if (window.devicePixelRatio) {
+   else if (window.devicePixelRatio) {
      $('body').addClass('webkit');
    }
 });
@@ -33,7 +33,7 @@ jQuery(function($) {
         buddy_item: "<li class='%{presence_status}'><a id='%{jid_id}' class='icon-menu-%{presence_status}-11' href='#'>%{name}</a></li>",
         occupant_item: "<li class='%{presence_status}'><a data-id='%{jid_id}' class='icon-menu-%{presence_status}-11' href='#'>%{name}</a></li>",
         room_item: "<li class='room'><a id='%{jid_id}' class='icon-chat' href='#'>%{name}</a></li>",
-        message: "<div data-who='%{who}' class='message %{who}'><img class='avatar' src='%{avatar_url}'/><h5 class='%{who}-name'>%{name}</h5><span class='time'>%{time}</span><p>%{message}</p></div>",
+        message: $balloon_template,
         error: "<span class='error'>%{text}</span>",
         occupant_list: "<div class='occupant-list'><ul class='occupant-list'></ul></div>"
      },
@@ -114,7 +114,7 @@ jQuery(function($) {
             var jid_id = Jabber.jid_to_id(jid);
             var tab_id = '#' + Jabber.tab_prefix + jid_id;
             if ($(tab_id).find('.message').length > 0 && $(tab_id).find('.message:last').attr('data-who') == who) {
-               $(tab_id).find('.history').find('.message:last').append('<p>' + body + '</p>');
+               $(tab_id).find('.history').find('.message:last .comment-balloon-content').append('<p>' + body + '</p>');
             }
             else {
                var time = new Date();
@@ -4373,7 +4373,6 @@ h1#agenda-title {
 }
 .user-status {
   position: relative;
-  /*margin: auto 5px;*/
 }
 .user-status .ui-icon {
   position: absolute;
@@ -4424,15 +4423,13 @@ h1#agenda-title {
   padding-left: 18px;
 }
-/* chat window */
+/* chat window {{{ */
 #title-bar {
   height: 25px;
   width: 100%;
   position: absolute;
-  background-image: url(/images/icons-app/chat-22x22.png);
-  background-position: 2px;
-  background-repeat: no-repeat;
+  background: #ccc url(/images/icons-app/chat-22x22.png) 2px 2px no-repeat;
 }
 #title-bar .title {
   margin: 0;
@@ -4500,6 +4497,7 @@ h1#agenda-title {
   right: 0;
   top: 25px;
   left: 250px;
+  background: white;
 }
 .conversation {
   margin: 15px;
@@ -4553,7 +4551,6 @@ h1#agenda-title {
   display: block;
   line-height: 1em;
 }
-
 #chat .tabs-bottom .ui-tabs-nav {
   position: absolute;
   left: 0;
@@ -4561,6 +4558,7 @@ h1#agenda-title {
   right:0;
   padding: 0 5px 10px 5px;
   border: 0;
+  background: #eee;
 }
 #chat .tabs-bottom .ui-tabs-nav li {
   top: 0;
@@ -4585,12 +4583,13 @@ h1#agenda-title {
   border: none;
 }
 #chat-window .history .message {
-  min-height: 32px;
-  padding: 0 50px 10px 40px;
+  padding: 0 50px 0 40px;
+  position: relative;
 }
 #chat-window .history .message .time {
   position: absolute;
-  right: 20px;
+  right: 10px;
+  top: 5px;
   color: gray;
   font-style: italic;
   font-size: 11px;
@@ -4602,8 +4601,9 @@ h1#agenda-title {
 #chat-window .history .message .avatar {
   position: absolute;
   left: 0;
-  height: 32px;
-  width: 32px;
+  max-height: 32px;
+  max-width: 32px;
+  top: 10px;
 }
 #chat-window .history .notice {
   font-size: 10px;
@@ -4627,6 +4627,16 @@ h1#agenda-title {
 #chat-window .history.room {
   right: 200px
 }
+#chat-window .comment-balloon-content {
+  min-height: 50px;
+  padding: 5px 0 5px 25px;
+  position: relative;
+}
+#chat-window .comment-wrapper-1 {
+  margin-left: 0;
+}
+
+/* chat window }}} */
 #profile-activity ul, #profile-network ul, #profile-wall ul {
   padding-left: 0;
@@ -4885,7 +4895,7 @@ h1#agenda-title {
   background: transparent;
 }
-/* Chat: Online users window */
+/* friends online {{{ */
 #chat-online-users {
   position: fixed;
@@ -4915,32 +4925,28 @@ h1#agenda-title {
   margin-right: 5px;
   float: left;
 }
-
 #chat-online-users-content {
   bottom: 24px;
   right: 0px;
   width: 200px;
   border-top: 1px solid #333;
 }
-
 #chat-online-users .menu-submenu-content h4 ul {
   border-top: 1px solid #333;
   background-color: #efefef;
   margin: 0px;
 }
-
 #chat-online-users-content li {
   list-style: none;
 }
-
 #chat-online-users-title:hover,
 #chat-online-users-title:visited {
   color: #000;
 }
-.webkit #chat-online-users-title {
+.webkit #chat-online-users-title,
+.opera #chat-online-users-title {
   text-decoration: none;
 }
-
 .chat-online-user {
   font-size: 12px;
   color: #000;
@@ -4951,27 +4957,22 @@ h1#agenda-title {
   white-space: nowrap;
   position: relative;
 }
-
 .chat-online-user .friend_name {
   line-height: 20px;
   vertical-align: super;
   margin-left: 5px;
 }
-
 .chat-online-user:visited,
 .chat-online-user:active {
   color: #000;
 }
-
 .chat-online-user:hover {
   background-color: #efefef;
 }
-
 #chat-online-users ul {
   padding: 0;
   margin: 0;
 }
-
 .chat-online-user-avatar {
   display: inline-block;
   width: 20px;
@@ -4979,42 +4980,15 @@ h1#agenda-title {
   background: url('/images/icons-app/person-icon.png');
   position: relative;
 }
-
 .msie .chat-online-user-avatar {
   display: inline;
 }
-
-#profile-wall .profile-wall-description .icon-scrap, #profile-wall .profile-wall-description .icon-reply {
-  visibility: hidden;
-  border-radius: 3px;
-  -webkit-border-radius: 3px;
-  -moz-border-radius: 3px;
-}
-
-#profile-wall .comment-wrapper-1 {
-  margin-left: 0;
-}
-
-#profile-wall .comment-balloon-content {
-  padding: 3px 0 3px 15px;
-}
-
-.profile-wall-reply {
-  margin: 0;
-}
-
-.profile-wall-scrap-replies {
-  float: right;
-  margin-right: 2px;
-}
-
 #chat-online-users-hidden-content {
   max-height: 200px;
   overflow: auto;
   overflow-x: hidden;
   border-top: 5px solid;
 }
-
 .chat-online-user-status {
   position: absolute;
   font-size: 9px;
@@ -5025,11 +4999,9 @@ h1#agenda-title {
   top: 15px;
   right: 10px;
 }
-
 .chat-online-user-status span {
   display: none;
 }
-
 #anyone-online {
   display: block;
   text-align: center;
@@ -5037,3 +5009,29 @@ h1#agenda-title {
   font-style: italic;
   color: #444;
 }
+
+/* friends online }}} */
+
+#profile-wall .profile-wall-description .icon-scrap, #profile-wall .profile-wall-description .icon-reply {
+  visibility: hidden;
+  border-radius: 3px;
+  -webkit-border-radius: 3px;
+  -moz-border-radius: 3px;
+}
+
+#profile-wall .comment-wrapper-1 {
+  margin-left: 0;
+}
+
+#profile-wall .comment-balloon-content {
+  padding: 3px 0 3px 15px;
+}
+
+.profile-wall-reply {
+  margin: 0;
+}
+
+.profile-wall-scrap-replies {
+  float: right;
+  margin-right: 2px;
+}
	@@ -33,7 +33,7 @@ jQuery(function($) {		@@ -33,7 +33,7 @@ jQuery(function($) {
33	buddy_item: "<li class='%{presence_status}'><a id='%{jid_id}' class='icon-menu-%{presence_status}-11' href='#'>%{name}</a></li>",	33	buddy_item: "<li class='%{presence_status}'><a id='%{jid_id}' class='icon-menu-%{presence_status}-11' href='#'>%{name}</a></li>",
34	occupant_item: "<li class='%{presence_status}'><a data-id='%{jid_id}' class='icon-menu-%{presence_status}-11' href='#'>%{name}</a></li>",	34	occupant_item: "<li class='%{presence_status}'><a data-id='%{jid_id}' class='icon-menu-%{presence_status}-11' href='#'>%{name}</a></li>",
35	room_item: "<li class='room'><a id='%{jid_id}' class='icon-chat' href='#'>%{name}</a></li>",	35	room_item: "<li class='room'><a id='%{jid_id}' class='icon-chat' href='#'>%{name}</a></li>",
36	- message: "<div data-who='%{who}' class='message %{who}'><img class='avatar' src='%{avatar_url}'/><h5 class='%{who}-name'>%{name}</h5><span class='time'>%{time}</span><p>%{message}</p></div>",	36	+ message: $balloon_template,
37	error: "<span class='error'>%{text}</span>",	37	error: "<span class='error'>%{text}</span>",
38	occupant_list: "<div class='occupant-list'><ul class='occupant-list'></ul></div>"	38	occupant_list: "<div class='occupant-list'><ul class='occupant-list'></ul></div>"
39	},	39	},
	@@ -114,7 +114,7 @@ jQuery(function($) {		@@ -114,7 +114,7 @@ jQuery(function($) {
114	var jid_id = Jabber.jid_to_id(jid);	114	var jid_id = Jabber.jid_to_id(jid);
115	var tab_id = '#' + Jabber.tab_prefix + jid_id;	115	var tab_id = '#' + Jabber.tab_prefix + jid_id;
116	if ($(tab_id).find('.message').length > 0 && $(tab_id).find('.message:last').attr('data-who') == who) {	116	if ($(tab_id).find('.message').length > 0 && $(tab_id).find('.message:last').attr('data-who') == who) {
117	- $(tab_id).find('.history').find('.message:last').append('<p>' + body + '</p>');	117	+ $(tab_id).find('.history').find('.message:last .comment-balloon-content').append('<p>' + body + '</p>');
118	}	118	}
119	else {	119	else {
120	var time = new Date();	120	var time = new Date();