Commit 68128c9015ce3767aa3bde1d2d6901a196dbbbb2

Authored by Rodrigo Souto
1 parent e8e3038a

chat: chat label to toggle chat opened/closed

app/views/shared/logged_in/xmpp_chat.html.erb
@@ -12,6 +12,13 @@ @@ -12,6 +12,13 @@
12 var $presence = '<%= current_user.last_chat_status %>'; 12 var $presence = '<%= current_user.last_chat_status %>';
13 </script> 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 <div id='chat'> 22 <div id='chat'>
16 <div id='buddy-list'> 23 <div id='buddy-list'>
17 <div class='toolbar'> 24 <div class='toolbar'>
public/designs/icons/tango/mod/64x64/apps/internet-group-chat.png 0 → 100644

2.11 KB

public/designs/icons/tango/style.css
@@ -92,6 +92,7 @@ @@ -92,6 +92,7 @@
92 .icon-media-next { background-image: url(Tango/16x16/actions/media-skip-forward.png) } 92 .icon-media-next { background-image: url(Tango/16x16/actions/media-skip-forward.png) }
93 .icon-lock { background-image: url(Tango/16x16/actions/lock.png) } 93 .icon-lock { background-image: url(Tango/16x16/actions/lock.png) }
94 .icon-chat { background-image: url(Tango/16x16/apps/internet-group-chat.png); background-repeat: no-repeat } 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 .icon-reply { background-image: url(Tango/16x16/actions/mail-reply-sender.png) } 96 .icon-reply { background-image: url(Tango/16x16/actions/mail-reply-sender.png) }
96 .icon-newforum { background-image: url(Tango/16x16/apps/internet-group-chat.png) } 97 .icon-newforum { background-image: url(Tango/16x16/apps/internet-group-chat.png) }
97 .icon-forum { background-image: url(Tango/16x16/apps/system-users.png) } 98 .icon-forum { background-image: url(Tango/16x16/apps/system-users.png) }
public/javascripts/application.js
@@ -567,14 +567,11 @@ function display_notice(message) { @@ -567,14 +567,11 @@ function display_notice(message) {
567 setTimeout(function() { $noticeBox.fadeOut('fast'); }, 5000); 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 if(jQuery('#conversations .conversation').length == 0) jQuery('.buddies a').first().click(); 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 return false; 575 return false;
579 } 576 }
580 577
@@ -1089,7 +1086,7 @@ function notifyMe(title, options) { @@ -1089,7 +1086,7 @@ function notifyMe(title, options) {
1089 }); 1086 });
1090 } 1087 }
1091 return notification; 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 // want to be respectful there is no need to bother them any more. 1090 // want to be respectful there is no need to bother them any more.
1094 } 1091 }
1095 1092
public/javascripts/chat.js
@@ -771,4 +771,8 @@ jQuery(function($) { @@ -771,4 +771,8 @@ jQuery(function($) {
771 $('#chat .buddies a').live('click', function(){ 771 $('#chat .buddies a').live('click', function(){
772 $('#chat .search').val('').change(); 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
1 #chat { 1 #chat {
2 - width: 350px; 2 + width: 0;
3 height: 100%; 3 height: 100%;
4 - display: none;  
5 position: fixed; 4 position: fixed;
6 right: 0; 5 right: 0;
7 top: 0; 6 top: 0;
8 z-index: 900; 7 z-index: 900;
9 background-color: #FFF; 8 background-color: #FFF;
10 box-shadow: -3px 0px 5px #888; 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 #chat-window { 18 #chat-window {
@@ -19,7 +24,7 @@ @@ -19,7 +24,7 @@
19 background-color: #f9f9f9; 24 background-color: #f9f9f9;
20 top: 0; 25 top: 0;
21 right: 0; 26 right: 0;
22 - width: 65px; 27 + width: 0;
23 bottom: 100px; 28 bottom: 100px;
24 position: absolute; 29 position: absolute;
25 border-left: 1px solid #DCE4E7; 30 border-left: 1px solid #DCE4E7;
@@ -28,6 +33,11 @@ @@ -28,6 +33,11 @@
28 transition: width 0.3s ease-in; 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 #chat #buddy-list:hover { 41 #chat #buddy-list:hover {
32 width: 190px; 42 width: 190px;
33 transition: width 0.3s ease-in; 43 transition: width 0.3s ease-in;
@@ -467,3 +477,56 @@ div.occupants &gt; a.up { @@ -467,3 +477,56 @@ div.occupants &gt; a.up {
467 background-image: linear-gradient(to left, #E3E3E3 25%, #BABDB6 100%, #FFFFFF 100%); 477 background-image: linear-gradient(to left, #E3E3E3 25%, #BABDB6 100%, #FFFFFF 100%);
468 xbackground-color: #BABDB6; 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 +}