From 68128c9015ce3767aa3bde1d2d6901a196dbbbb2 Mon Sep 17 00:00:00 2001 From: Rodrigo Souto Date: Fri, 16 Jan 2015 19:19:22 -0300 Subject: [PATCH] chat: chat label to toggle chat opened/closed --- app/views/shared/logged_in/xmpp_chat.html.erb | 7 +++++++ public/designs/icons/tango/mod/64x64/apps/internet-group-chat.png | Bin 0 -> 2164 bytes public/designs/icons/tango/style.css | 1 + public/javascripts/application.js | 13 +++++-------- public/javascripts/chat.js | 4 ++++ public/stylesheets/chat.css | 69 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--- 6 files changed, 83 insertions(+), 11 deletions(-) create mode 100644 public/designs/icons/tango/mod/64x64/apps/internet-group-chat.png diff --git a/app/views/shared/logged_in/xmpp_chat.html.erb b/app/views/shared/logged_in/xmpp_chat.html.erb index fa0b05a..6047797 100644 --- a/app/views/shared/logged_in/xmpp_chat.html.erb +++ b/app/views/shared/logged_in/xmpp_chat.html.erb @@ -12,6 +12,13 @@ var $presence = '<%= current_user.last_chat_status %>'; + +
+ <%= _('Chat') %> +
+
+
+
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