Commit 1abc299ebc67bd3fa5219baa9fa5cc9f025931d0
Committed by
Antonio Terceiro
1 parent
54024abb
Exists in
master
and in
28 other branches
Display chat messages in balloons
- resolved bug with friends online list in Opera browser (ActionItem1705)
Showing
4 changed files
with
61 additions
and
56 deletions
Show diff stats
app/views/layouts/chat.rhtml
... | ... | @@ -21,6 +21,7 @@ |
21 | 21 | var $muc_domain = '<%= "conference.#{environment.default_hostname}" %>'; |
22 | 22 | var $user_unavailable_error = '<%= _("<strong>ooops!</strong> The message could not be sent because the user is not online") %>'; |
23 | 23 | var $update_presence_status_every = <%= User.expires_chat_status_every.minutes %>; |
24 | + 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>'; | |
24 | 25 | </script> |
25 | 26 | </head> |
26 | 27 | <body id='chat'> | ... | ... |
public/javascripts/application.js
... | ... | @@ -559,10 +559,16 @@ function open_chat_window(self_link, anchor) { |
559 | 559 | } |
560 | 560 | |
561 | 561 | jQuery(function($) { |
562 | + /* Adds a class to "opera" to the body element if Opera browser detected. | |
563 | + */ | |
564 | + if ( navigator.userAgent.indexOf("Opera") > -1 ) { | |
565 | + $('body').addClass('opera'); | |
566 | + } | |
567 | + | |
562 | 568 | /* Adds a class to "msie" to the body element if a Microsoft browser is |
563 | 569 | * detected. This is needed to workaround several of their limitations. |
564 | 570 | */ |
565 | - if ( navigator.appVersion.indexOf("MSIE") > -1 ) { | |
571 | + else if ( navigator.appVersion.indexOf("MSIE") > -1 ) { | |
566 | 572 | document.body.className += " msie msie" + |
567 | 573 | navigator.appVersion.replace(/^.*MSIE\s+([0-9]+).*$/, "$1"); |
568 | 574 | } |
... | ... | @@ -570,7 +576,7 @@ jQuery(function($) { |
570 | 576 | /* Adds a class to "webkit" to the body element if a Webkit based browser |
571 | 577 | * detected. |
572 | 578 | */ |
573 | - if (window.devicePixelRatio) { | |
579 | + else if (window.devicePixelRatio) { | |
574 | 580 | $('body').addClass('webkit'); |
575 | 581 | } |
576 | 582 | }); | ... | ... |
public/javascripts/chat.js
... | ... | @@ -33,7 +33,7 @@ jQuery(function($) { |
33 | 33 | buddy_item: "<li class='%{presence_status}'><a id='%{jid_id}' class='icon-menu-%{presence_status}-11' href='#'>%{name}</a></li>", |
34 | 34 | occupant_item: "<li class='%{presence_status}'><a data-id='%{jid_id}' class='icon-menu-%{presence_status}-11' href='#'>%{name}</a></li>", |
35 | 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 | 37 | error: "<span class='error'>%{text}</span>", |
38 | 38 | occupant_list: "<div class='occupant-list'><ul class='occupant-list'></ul></div>" |
39 | 39 | }, |
... | ... | @@ -114,7 +114,7 @@ jQuery(function($) { |
114 | 114 | var jid_id = Jabber.jid_to_id(jid); |
115 | 115 | var tab_id = '#' + Jabber.tab_prefix + jid_id; |
116 | 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 | 119 | else { |
120 | 120 | var time = new Date(); | ... | ... |
public/stylesheets/application.css
... | ... | @@ -4373,7 +4373,6 @@ h1#agenda-title { |
4373 | 4373 | } |
4374 | 4374 | .user-status { |
4375 | 4375 | position: relative; |
4376 | - /*margin: auto 5px;*/ | |
4377 | 4376 | } |
4378 | 4377 | .user-status .ui-icon { |
4379 | 4378 | position: absolute; |
... | ... | @@ -4424,15 +4423,13 @@ h1#agenda-title { |
4424 | 4423 | padding-left: 18px; |
4425 | 4424 | } |
4426 | 4425 | |
4427 | -/* chat window */ | |
4426 | +/* chat window {{{ */ | |
4428 | 4427 | |
4429 | 4428 | #title-bar { |
4430 | 4429 | height: 25px; |
4431 | 4430 | width: 100%; |
4432 | 4431 | position: absolute; |
4433 | - background-image: url(/images/icons-app/chat-22x22.png); | |
4434 | - background-position: 2px; | |
4435 | - background-repeat: no-repeat; | |
4432 | + background: #ccc url(/images/icons-app/chat-22x22.png) 2px 2px no-repeat; | |
4436 | 4433 | } |
4437 | 4434 | #title-bar .title { |
4438 | 4435 | margin: 0; |
... | ... | @@ -4500,6 +4497,7 @@ h1#agenda-title { |
4500 | 4497 | right: 0; |
4501 | 4498 | top: 25px; |
4502 | 4499 | left: 250px; |
4500 | + background: white; | |
4503 | 4501 | } |
4504 | 4502 | .conversation { |
4505 | 4503 | margin: 15px; |
... | ... | @@ -4553,7 +4551,6 @@ h1#agenda-title { |
4553 | 4551 | display: block; |
4554 | 4552 | line-height: 1em; |
4555 | 4553 | } |
4556 | - | |
4557 | 4554 | #chat .tabs-bottom .ui-tabs-nav { |
4558 | 4555 | position: absolute; |
4559 | 4556 | left: 0; |
... | ... | @@ -4561,6 +4558,7 @@ h1#agenda-title { |
4561 | 4558 | right:0; |
4562 | 4559 | padding: 0 5px 10px 5px; |
4563 | 4560 | border: 0; |
4561 | + background: #eee; | |
4564 | 4562 | } |
4565 | 4563 | #chat .tabs-bottom .ui-tabs-nav li { |
4566 | 4564 | top: 0; |
... | ... | @@ -4585,12 +4583,13 @@ h1#agenda-title { |
4585 | 4583 | border: none; |
4586 | 4584 | } |
4587 | 4585 | #chat-window .history .message { |
4588 | - min-height: 32px; | |
4589 | - padding: 0 50px 10px 40px; | |
4586 | + padding: 0 50px 0 40px; | |
4587 | + position: relative; | |
4590 | 4588 | } |
4591 | 4589 | #chat-window .history .message .time { |
4592 | 4590 | position: absolute; |
4593 | - right: 20px; | |
4591 | + right: 10px; | |
4592 | + top: 5px; | |
4594 | 4593 | color: gray; |
4595 | 4594 | font-style: italic; |
4596 | 4595 | font-size: 11px; |
... | ... | @@ -4602,8 +4601,9 @@ h1#agenda-title { |
4602 | 4601 | #chat-window .history .message .avatar { |
4603 | 4602 | position: absolute; |
4604 | 4603 | left: 0; |
4605 | - height: 32px; | |
4606 | - width: 32px; | |
4604 | + max-height: 32px; | |
4605 | + max-width: 32px; | |
4606 | + top: 10px; | |
4607 | 4607 | } |
4608 | 4608 | #chat-window .history .notice { |
4609 | 4609 | font-size: 10px; |
... | ... | @@ -4627,6 +4627,16 @@ h1#agenda-title { |
4627 | 4627 | #chat-window .history.room { |
4628 | 4628 | right: 200px |
4629 | 4629 | } |
4630 | +#chat-window .comment-balloon-content { | |
4631 | + min-height: 50px; | |
4632 | + padding: 5px 0 5px 25px; | |
4633 | + position: relative; | |
4634 | +} | |
4635 | +#chat-window .comment-wrapper-1 { | |
4636 | + margin-left: 0; | |
4637 | +} | |
4638 | + | |
4639 | +/* chat window }}} */ | |
4630 | 4640 | |
4631 | 4641 | #profile-activity ul, #profile-network ul, #profile-wall ul { |
4632 | 4642 | padding-left: 0; |
... | ... | @@ -4885,7 +4895,7 @@ h1#agenda-title { |
4885 | 4895 | background: transparent; |
4886 | 4896 | } |
4887 | 4897 | |
4888 | -/* Chat: Online users window */ | |
4898 | +/* friends online {{{ */ | |
4889 | 4899 | |
4890 | 4900 | #chat-online-users { |
4891 | 4901 | position: fixed; |
... | ... | @@ -4915,32 +4925,28 @@ h1#agenda-title { |
4915 | 4925 | margin-right: 5px; |
4916 | 4926 | float: left; |
4917 | 4927 | } |
4918 | - | |
4919 | 4928 | #chat-online-users-content { |
4920 | 4929 | bottom: 24px; |
4921 | 4930 | right: 0px; |
4922 | 4931 | width: 200px; |
4923 | 4932 | border-top: 1px solid #333; |
4924 | 4933 | } |
4925 | - | |
4926 | 4934 | #chat-online-users .menu-submenu-content h4 ul { |
4927 | 4935 | border-top: 1px solid #333; |
4928 | 4936 | background-color: #efefef; |
4929 | 4937 | margin: 0px; |
4930 | 4938 | } |
4931 | - | |
4932 | 4939 | #chat-online-users-content li { |
4933 | 4940 | list-style: none; |
4934 | 4941 | } |
4935 | - | |
4936 | 4942 | #chat-online-users-title:hover, |
4937 | 4943 | #chat-online-users-title:visited { |
4938 | 4944 | color: #000; |
4939 | 4945 | } |
4940 | -.webkit #chat-online-users-title { | |
4946 | +.webkit #chat-online-users-title, | |
4947 | +.opera #chat-online-users-title { | |
4941 | 4948 | text-decoration: none; |
4942 | 4949 | } |
4943 | - | |
4944 | 4950 | .chat-online-user { |
4945 | 4951 | font-size: 12px; |
4946 | 4952 | color: #000; |
... | ... | @@ -4951,27 +4957,22 @@ h1#agenda-title { |
4951 | 4957 | white-space: nowrap; |
4952 | 4958 | position: relative; |
4953 | 4959 | } |
4954 | - | |
4955 | 4960 | .chat-online-user .friend_name { |
4956 | 4961 | line-height: 20px; |
4957 | 4962 | vertical-align: super; |
4958 | 4963 | margin-left: 5px; |
4959 | 4964 | } |
4960 | - | |
4961 | 4965 | .chat-online-user:visited, |
4962 | 4966 | .chat-online-user:active { |
4963 | 4967 | color: #000; |
4964 | 4968 | } |
4965 | - | |
4966 | 4969 | .chat-online-user:hover { |
4967 | 4970 | background-color: #efefef; |
4968 | 4971 | } |
4969 | - | |
4970 | 4972 | #chat-online-users ul { |
4971 | 4973 | padding: 0; |
4972 | 4974 | margin: 0; |
4973 | 4975 | } |
4974 | - | |
4975 | 4976 | .chat-online-user-avatar { |
4976 | 4977 | display: inline-block; |
4977 | 4978 | width: 20px; |
... | ... | @@ -4979,42 +4980,15 @@ h1#agenda-title { |
4979 | 4980 | background: url('/images/icons-app/person-icon.png'); |
4980 | 4981 | position: relative; |
4981 | 4982 | } |
4982 | - | |
4983 | 4983 | .msie .chat-online-user-avatar { |
4984 | 4984 | display: inline; |
4985 | 4985 | } |
4986 | - | |
4987 | -#profile-wall .profile-wall-description .icon-scrap, #profile-wall .profile-wall-description .icon-reply { | |
4988 | - visibility: hidden; | |
4989 | - border-radius: 3px; | |
4990 | - -webkit-border-radius: 3px; | |
4991 | - -moz-border-radius: 3px; | |
4992 | -} | |
4993 | - | |
4994 | -#profile-wall .comment-wrapper-1 { | |
4995 | - margin-left: 0; | |
4996 | -} | |
4997 | - | |
4998 | -#profile-wall .comment-balloon-content { | |
4999 | - padding: 3px 0 3px 15px; | |
5000 | -} | |
5001 | - | |
5002 | -.profile-wall-reply { | |
5003 | - margin: 0; | |
5004 | -} | |
5005 | - | |
5006 | -.profile-wall-scrap-replies { | |
5007 | - float: right; | |
5008 | - margin-right: 2px; | |
5009 | -} | |
5010 | - | |
5011 | 4986 | #chat-online-users-hidden-content { |
5012 | 4987 | max-height: 200px; |
5013 | 4988 | overflow: auto; |
5014 | 4989 | overflow-x: hidden; |
5015 | 4990 | border-top: 5px solid; |
5016 | 4991 | } |
5017 | - | |
5018 | 4992 | .chat-online-user-status { |
5019 | 4993 | position: absolute; |
5020 | 4994 | font-size: 9px; |
... | ... | @@ -5025,11 +4999,9 @@ h1#agenda-title { |
5025 | 4999 | top: 15px; |
5026 | 5000 | right: 10px; |
5027 | 5001 | } |
5028 | - | |
5029 | 5002 | .chat-online-user-status span { |
5030 | 5003 | display: none; |
5031 | 5004 | } |
5032 | - | |
5033 | 5005 | #anyone-online { |
5034 | 5006 | display: block; |
5035 | 5007 | text-align: center; |
... | ... | @@ -5037,3 +5009,29 @@ h1#agenda-title { |
5037 | 5009 | font-style: italic; |
5038 | 5010 | color: #444; |
5039 | 5011 | } |
5012 | + | |
5013 | +/* friends online }}} */ | |
5014 | + | |
5015 | +#profile-wall .profile-wall-description .icon-scrap, #profile-wall .profile-wall-description .icon-reply { | |
5016 | + visibility: hidden; | |
5017 | + border-radius: 3px; | |
5018 | + -webkit-border-radius: 3px; | |
5019 | + -moz-border-radius: 3px; | |
5020 | +} | |
5021 | + | |
5022 | +#profile-wall .comment-wrapper-1 { | |
5023 | + margin-left: 0; | |
5024 | +} | |
5025 | + | |
5026 | +#profile-wall .comment-balloon-content { | |
5027 | + padding: 3px 0 3px 15px; | |
5028 | +} | |
5029 | + | |
5030 | +.profile-wall-reply { | |
5031 | + margin: 0; | |
5032 | +} | |
5033 | + | |
5034 | +.profile-wall-scrap-replies { | |
5035 | + float: right; | |
5036 | + margin-right: 2px; | |
5037 | +} | ... | ... |