chat: chat label to toggle chat opened/closed

Rodrigo Souto
1 parent e8e3038a
Showing 6 changed files with 83 additions and 11 deletions Show diff stats
app/views/shared/logged_in/xmpp_chat.html.erb
public/designs/icons/tango/mod/64x64/apps/internet-group-chat.png
public/designs/icons/tango/style.css
public/javascripts/application.js
public/javascripts/chat.js
public/stylesheets/chat.css
@@ -12,6 +12,13 @@
       var $presence = '<%= current_user.last_chat_status %>';
     </script>
+
+  <div id="chat-label" class="opened">
+    <span><%= _('Chat') %></span>
+    <br clear="both" />
+    <div class="icon-big-chat"></div>
+  </div>
+
   <div id='chat'>
     <div id='buddy-list'>
       <div class='toolbar'>
@@ -92,6 +92,7 @@
 .icon-media-next   { background-image: url(Tango/16x16/actions/media-skip-forward.png) }
 .icon-lock	       { background-image: url(Tango/16x16/actions/lock.png) }
 .icon-chat         { background-image: url(Tango/16x16/apps/internet-group-chat.png); background-repeat: no-repeat }
+.icon-big-chat     { background-image: url(mod/64x64/apps/internet-group-chat.png); background-repeat: no-repeat }
 .icon-reply        { background-image: url(Tango/16x16/actions/mail-reply-sender.png) }
 .icon-newforum     { background-image: url(Tango/16x16/apps/internet-group-chat.png) }
 .icon-forum        { background-image: url(Tango/16x16/apps/system-users.png) }
@@ -567,14 +567,11 @@ function display_notice(message) {
    setTimeout(function() { $noticeBox.fadeOut('fast'); }, 5000);
 }
-function open_chat_window(self_link, anchor) {
+function toggle_chat_window(self_link, anchor) {
    if(jQuery('#conversations .conversation').length == 0) jQuery('.buddies a').first().click();
-   if(anchor) {
-      jQuery('#chat').show('fast');
-      jQuery("#chat" ).trigger('opengroup', anchor);
-   } else {
-      jQuery('#chat').toggle('fast');
-   }
+   jQuery('#chat').toggleClass('opened');
+   jQuery('#chat-label').toggleClass('opened');
+   if(anchor) jQuery("#chat" ).trigger('opengroup', anchor);
    return false;
 }
@@ -1089,7 +1086,7 @@ function notifyMe(title, options) {
     });
   }
   return notification;
-  // At last, if the user already denied any notification, and you 
+  // At last, if the user already denied any notification, and you
   // want to be respectful there is no need to bother them any more.
 }
@@ -771,4 +771,8 @@ jQuery(function($) {
   $('#chat .buddies a').live('click', function(){
     $('#chat .search').val('').change();
   });
+
+  $('#chat-label').click(function(){
+    toggle_chat_window(this);
+  });
 });
 #chat {
-  width: 350px;
+  width: 0;
   height: 100%;
-  display: none;
   position: fixed;
   right: 0;
   top: 0;
   z-index: 900;
   background-color: #FFF;
   box-shadow: -3px 0px 5px #888;
+  transition: width 0.3s ease-in;
+}
+
+#chat.opened {
+  width: 350px;
+  transition: width 0.3s ease-in;
 }
 #chat-window {
@@ -19,7 +24,7 @@
   background-color: #f9f9f9;
   top: 0;
   right: 0;
-  width: 65px;
+  width: 0;
   bottom: 100px;
   position: absolute;
   border-left: 1px solid #DCE4E7;
@@ -28,6 +33,11 @@
   transition: width 0.3s ease-in;
 }
+#chat.opened #buddy-list {
+  width: 65px;
+  transition: width 0.3s ease-in;
+}
+
 #chat #buddy-list:hover {
   width: 190px;
   transition: width 0.3s ease-in;
@@ -467,3 +477,56 @@ div.occupants &gt; a.up {
   background-image: linear-gradient(to left, #E3E3E3 25%, #BABDB6 100%, #FFFFFF 100%);
   xbackground-color: #BABDB6;
 }
+
+#chat-label {
+  width: 20px;
+  height: 80px;
+  background-color: #2E3436;
+  position: fixed;
+  top: 20%;
+  right: 350px;
+  cursor: pointer;
+  text-align: center;
+  z-index: 7;
+  transition: background-color 0.2s linear, right 0.3s ease-in, width 0.3s ease-in;
+  border-top-left-radius: 10px;
+  border-bottom-left-radius: 10px;
+}
+
+#chat-label.opened {
+  right: 0;
+  width: 100px;
+  transition: background-color 0.2s linear, right 0.3s ease-in, width 0.3s ease-in;
+}
+
+#chat-label.opened:hover {
+  background-color: #888A85;
+  transition: background-color 0.2s linear, right 0.3s ease-in, width 0.3s ease-in;
+}
+
+#chat-label:hover {
+  background-color: #888A85;
+  transition: background-color 0.2s linear, right 0.3s ease-in;
+  transition: background-color 0.2s linear, right 0.3s ease-in, width 0.3s ease-in;
+}
+
+#chat-label span {
+  color: white;
+  font-size: 18px;
+  line-height: 24px;
+  display: none;
+}
+
+#chat-label.opened span {
+  display: inline;
+}
+
+#chat-label div {
+  width: 64px;
+  height: 64px;
+  display: none;
+}
+
+#chat-label.opened div {
+  display: inline-block;
+}
	@@ -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'>
	@@ -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	});
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	+}