Download as
Browse Code »

Commit 1abc299ebc67bd3fa5219baa9fa5cc9f025931d0

Authored by Caio SBA
Committed by Antonio Terceiro
1 parent 54024abb
Exists in master and in 22 other branches angular_poc, api-article-archived, article-readonly, backup-7-jan-2016, captcha_serpro_plugin, content-manager-hostspot, export-comment-paragraph, fix_event_date_issue, login-captcha, master_rails3, new_video_plugin, pg_search_rank, production, refactor_with_role, refactor_with_role_scope, remove_profile_cat_icons, resend_confirmation_email, staging, staging_rails3, tasks_keep_filter_params, theme-brasil-digital-from-staging, travis

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
  Diff comments   View file @1abc299
... ... @@ -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
  Diff comments   View file @1abc299
... ... @@ -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
  Diff comments   View file @1abc299
... ... @@ -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
  Diff comments   View file @1abc299
... ... @@ -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 +}
... ...