diff --git a/public/designs/icons/tango/mod/64x64/apps/internet-group-chat.png b/public/designs/icons/tango/mod/64x64/apps/internet-group-chat.png
new file mode 100644
index 0000000..c9983e4
Binary files /dev/null and b/public/designs/icons/tango/mod/64x64/apps/internet-group-chat.png differ
diff --git a/public/designs/icons/tango/style.css b/public/designs/icons/tango/style.css
index fa15e5f..b5d920d 100644
--- a/public/designs/icons/tango/style.css
+++ b/public/designs/icons/tango/style.css
@@ -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) }
diff --git a/public/javascripts/application.js b/public/javascripts/application.js
index 16487e1..f206c69 100644
--- a/public/javascripts/application.js
+++ b/public/javascripts/application.js
@@ -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.
}
diff --git a/public/javascripts/chat.js b/public/javascripts/chat.js
index d9e758f..bde7bb3 100644
--- a/public/javascripts/chat.js
+++ b/public/javascripts/chat.js
@@ -771,4 +771,8 @@ jQuery(function($) {
$('#chat .buddies a').live('click', function(){
$('#chat .search').val('').change();
});
+
+ $('#chat-label').click(function(){
+ toggle_chat_window(this);
+ });
});
diff --git a/public/stylesheets/chat.css b/public/stylesheets/chat.css
index 4239df1..16d2159 100644
--- a/public/stylesheets/chat.css
+++ b/public/stylesheets/chat.css
@@ -1,13 +1,18 @@
#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 > 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;
+}
--
libgit2 0.21.2