Download as
Browse Code »

Commit 68128c9015ce3767aa3bde1d2d6901a196dbbbb2

Authored by Rodrigo Souto
1 parent e8e3038a
Exists in staging and in 42 other branches all_pending_tasks_api, api-articles-period, api_roles, caching-rails4, captcha_serpro_plugin, comments_permissions, content-manager-hostspot, elasticsearch, elasticsearch_api, elasticsearch_categories, elasticsearch_filter, elasticsearch_sort, elasticsearch_to_merge, elasticsearch_view, environment-exposes-api, export-comment-api, export-comment-paragraph, export_data, external_followers, federation-webfinger, federation_followers, federation_followers_backend, federation_oauth_provider, federation_webfinger, fix_event_date_issue, fix_notification_email, fix_string_downcase_and_upcase, follower_permition, json_cookie_serializer, login-captcha, master, master_profile_followers, oauth_external_login, oauth_login, private-scraps, private-scraps-rebase, production, production-vendorized, profile_api_improvements, tasks_keep_filter_params, user_mention, webfinger_server

chat: chat label to toggle chat opened/closed

Showing 6 changed files with 83 additions and 11 deletions   Show diff stats
app/views/shared/logged_in/xmpp_chat.html.erb
  Diff comments   View file @68128c9
... ... @@ -12,6 +12,13 @@
12 12 var $presence = '<%= current_user.last_chat_status %>';
13 13 </script>
14 14  
  15 +
  16 + <div id="chat-label" class="opened">
  17 + <span><%= _('Chat') %></span>
  18 + <br clear="both" />
  19 + <div class="icon-big-chat"></div>
  20 + </div>
  21 +
15 22 <div id='chat'>
16 23 <div id='buddy-list'>
17 24 <div class='toolbar'>
... ...
public/designs/icons/tango/mod/64x64/apps/internet-group-chat.png 0 → 100644
View file @68128c9

2.11 KB
public/designs/icons/tango/style.css
  Diff comments   View file @68128c9
... ... @@ -92,6 +92,7 @@
92 92 .icon-media-next { background-image: url(Tango/16x16/actions/media-skip-forward.png) }
93 93 .icon-lock { background-image: url(Tango/16x16/actions/lock.png) }
94 94 .icon-chat { background-image: url(Tango/16x16/apps/internet-group-chat.png); background-repeat: no-repeat }
  95 +.icon-big-chat { background-image: url(mod/64x64/apps/internet-group-chat.png); background-repeat: no-repeat }
95 96 .icon-reply { background-image: url(Tango/16x16/actions/mail-reply-sender.png) }
96 97 .icon-newforum { background-image: url(Tango/16x16/apps/internet-group-chat.png) }
97 98 .icon-forum { background-image: url(Tango/16x16/apps/system-users.png) }
... ...
public/javascripts/application.js
  Diff comments   View file @68128c9
... ... @@ -567,14 +567,11 @@ function display_notice(message) {
567 567 setTimeout(function() { $noticeBox.fadeOut('fast'); }, 5000);
568 568 }
569 569  
570   -function open_chat_window(self_link, anchor) {
  570 +function toggle_chat_window(self_link, anchor) {
571 571 if(jQuery('#conversations .conversation').length == 0) jQuery('.buddies a').first().click();
572   - if(anchor) {
573   - jQuery('#chat').show('fast');
574   - jQuery("#chat" ).trigger('opengroup', anchor);
575   - } else {
576   - jQuery('#chat').toggle('fast');
577   - }
  572 + jQuery('#chat').toggleClass('opened');
  573 + jQuery('#chat-label').toggleClass('opened');
  574 + if(anchor) jQuery("#chat" ).trigger('opengroup', anchor);
578 575 return false;
579 576 }
580 577  
... ... @@ -1089,7 +1086,7 @@ function notifyMe(title, options) {
1089 1086 });
1090 1087 }
1091 1088 return notification;
1092   - // At last, if the user already denied any notification, and you
  1089 + // At last, if the user already denied any notification, and you
1093 1090 // want to be respectful there is no need to bother them any more.
1094 1091 }
1095 1092  
... ...
public/javascripts/chat.js
  Diff comments   View file @68128c9
... ... @@ -771,4 +771,8 @@ jQuery(function($) {
771 771 $('#chat .buddies a').live('click', function(){
772 772 $('#chat .search').val('').change();
773 773 });
  774 +
  775 + $('#chat-label').click(function(){
  776 + toggle_chat_window(this);
  777 + });
774 778 });
... ...
public/stylesheets/chat.css
  Diff comments   View file @68128c9
1 1 #chat {
2   - width: 350px;
  2 + width: 0;
3 3 height: 100%;
4   - display: none;
5 4 position: fixed;
6 5 right: 0;
7 6 top: 0;
8 7 z-index: 900;
9 8 background-color: #FFF;
10 9 box-shadow: -3px 0px 5px #888;
  10 + transition: width 0.3s ease-in;
  11 +}
  12 +
  13 +#chat.opened {
  14 + width: 350px;
  15 + transition: width 0.3s ease-in;
11 16 }
12 17  
13 18 #chat-window {
... ... @@ -19,7 +24,7 @@
19 24 background-color: #f9f9f9;
20 25 top: 0;
21 26 right: 0;
22   - width: 65px;
  27 + width: 0;
23 28 bottom: 100px;
24 29 position: absolute;
25 30 border-left: 1px solid #DCE4E7;
... ... @@ -28,6 +33,11 @@
28 33 transition: width 0.3s ease-in;
29 34 }
30 35  
  36 +#chat.opened #buddy-list {
  37 + width: 65px;
  38 + transition: width 0.3s ease-in;
  39 +}
  40 +
31 41 #chat #buddy-list:hover {
32 42 width: 190px;
33 43 transition: width 0.3s ease-in;
... ... @@ -467,3 +477,56 @@ div.occupants &gt; a.up {
467 477 background-image: linear-gradient(to left, #E3E3E3 25%, #BABDB6 100%, #FFFFFF 100%);
468 478 xbackground-color: #BABDB6;
469 479 }
  480 +
  481 +#chat-label {
  482 + width: 20px;
  483 + height: 80px;
  484 + background-color: #2E3436;
  485 + position: fixed;
  486 + top: 20%;
  487 + right: 350px;
  488 + cursor: pointer;
  489 + text-align: center;
  490 + z-index: 7;
  491 + transition: background-color 0.2s linear, right 0.3s ease-in, width 0.3s ease-in;
  492 + border-top-left-radius: 10px;
  493 + border-bottom-left-radius: 10px;
  494 +}
  495 +
  496 +#chat-label.opened {
  497 + right: 0;
  498 + width: 100px;
  499 + transition: background-color 0.2s linear, right 0.3s ease-in, width 0.3s ease-in;
  500 +}
  501 +
  502 +#chat-label.opened:hover {
  503 + background-color: #888A85;
  504 + transition: background-color 0.2s linear, right 0.3s ease-in, width 0.3s ease-in;
  505 +}
  506 +
  507 +#chat-label:hover {
  508 + background-color: #888A85;
  509 + transition: background-color 0.2s linear, right 0.3s ease-in;
  510 + transition: background-color 0.2s linear, right 0.3s ease-in, width 0.3s ease-in;
  511 +}
  512 +
  513 +#chat-label span {
  514 + color: white;
  515 + font-size: 18px;
  516 + line-height: 24px;
  517 + display: none;
  518 +}
  519 +
  520 +#chat-label.opened span {
  521 + display: inline;
  522 +}
  523 +
  524 +#chat-label div {
  525 + width: 64px;
  526 + height: 64px;
  527 + display: none;
  528 +}
  529 +
  530 +#chat-label.opened div {
  531 + display: inline-block;
  532 +}
... ...