Commit 68128c9015ce3767aa3bde1d2d6901a196dbbbb2
1 parent
e8e3038a
Exists in
master
and in
29 other branches
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
@@ -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'> |
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 > a.up { | @@ -467,3 +477,56 @@ div.occupants > 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 | +} |