From 49ea229781d75306ed55054a67c8a38e98dd95f5 Mon Sep 17 00:00:00 2001 From: max-m Date: Sat, 17 Dec 2011 18:40:17 +0100 Subject: [PATCH 1/2] Added sidebar tabs :) --- file/js/TimWolla.WCF.Chat.js | 23 +++++++++ template/chat.tpl | 92 ++++++++++++++++++++++++++++++------ 2 files changed, 101 insertions(+), 14 deletions(-) diff --git a/file/js/TimWolla.WCF.Chat.js b/file/js/TimWolla.WCF.Chat.js index f69d5a5..4bc16ef 100644 --- a/file/js/TimWolla.WCF.Chat.js +++ b/file/js/TimWolla.WCF.Chat.js @@ -41,6 +41,11 @@ if (typeof TimWolla.WCF == 'undefined') TimWolla.WCF = {}; // return false; // }); + $('.chatSidebarTabs li').click($.proxy(function (event) { + event.preventDefault(); + this.toggleSidebarContent($(event.target)); + }, this)); + $('.chatRoom').click($.proxy(function (event) { if (typeof window.history.replaceState != 'undefined') { event.preventDefault(); @@ -210,6 +215,24 @@ if (typeof TimWolla.WCF == 'undefined') TimWolla.WCF = {}; $(liUserID).addClass('activeMenuItem'); $(liUserID + ' .chatUserMenu').wcfBlindIn(); } + }, + toggleSidebarContent: function (target) { + if (target.parent().hasClass('active')) return; + + if (target.parent().attr('id') == "toggleUsers") { + $('#toggleUsers').addClass('active'); + $('#toggleRooms').removeClass('active'); + + $('#chatRoomList').hide(); + $('#chatUserList').show(); + } + else if (target.parent().attr('id') == "toggleRooms") { + $('#toggleRooms').addClass('active'); + $('#toggleUsers').removeClass('active'); + + $('#chatUserList').hide(); + $('#chatRoomList').show(); + } } }; })(jQuery, document); \ No newline at end of file diff --git a/template/chat.tpl b/template/chat.tpl index bc4b609..34ffbc5 100644 --- a/template/chat.tpl +++ b/template/chat.tpl @@ -18,6 +18,14 @@ text-align: left; } + .sidebar { + margin-bottom: -20px !important; + } + + #sidebar { + /*height: 450px;*/ + } + aside { overflow: auto; padding: 0 1px 0 0; @@ -64,6 +72,11 @@ text-align: center; } + #chatInput { + background-position: right center; + background-repeat: no-repeat; + } + #chatOptions { display: inline-block; } @@ -130,15 +143,66 @@ .bgFix { display: block; } + + .chatSidebarTabs { + height: 30px; + background-color: #FFFFFF; + } + + .chatSidebarTabs ul li { + width: 50%; + float: left; + text-align: center; + border-bottom: 1px solid #BBCCDD; + } + + .chatSidebarTabs ul li a { + padding: 7px 0px 0px 0px; + color: #666666; + height: 23px; + background-color: rgba(0, 0, 0, 0.05); + } + + .chatSidebarTabs ul li:first-child a { + border-right: 1px solid #BBCCDD; + } + + .chatSidebarTabs ul li.active a { + font-size: 130%; + font-weight: bold; + color: #000000; + background-color: #FFFFFF; + } + + #chatRoomList { + margin-top: 5px; + } + + #sidebarContainer { + overflow-y: auto; + height: 420px; + width: 100%; + } + + .hidden { + display: none; + } {capture assign='sidebar'} {/capture} From 324977acf8815f0017732596128d7989d38a6092 Mon Sep 17 00:00:00 2001 From: max-m Date: Sat, 17 Dec 2011 21:29:57 +0100 Subject: [PATCH 2/2] Added a little character counter next to chatInput. --- file/js/TimWolla.WCF.Chat.js | 26 +++++++++--------- file/js/jCounter.jQuery.js | 14 ++++++++++ template/chat.tpl | 42 ++++++++++++++++++++++++++---- template/chatJavascriptInclude.tpl | 5 +++- 4 files changed, 69 insertions(+), 18 deletions(-) create mode 100644 file/js/jCounter.jQuery.js diff --git a/file/js/TimWolla.WCF.Chat.js b/file/js/TimWolla.WCF.Chat.js index f77d97f..084225b 100644 --- a/file/js/TimWolla.WCF.Chat.js +++ b/file/js/TimWolla.WCF.Chat.js @@ -16,6 +16,7 @@ if (typeof TimWolla.WCF == 'undefined') TimWolla.WCF = {}; messageTemplate: null, init: function(roomID, messageID) { this.bindEvents(); + $('#chatInput').focus(); }, /** @@ -123,6 +124,7 @@ if (typeof TimWolla.WCF == 'undefined') TimWolla.WCF = {}; if (this.loading || target.parent().hasClass('activeMenuItem')) return false; this.loading = true; + target.parent().addClass('ajaxLoad'); }, this) }); @@ -192,18 +194,6 @@ if (typeof TimWolla.WCF == 'undefined') TimWolla.WCF = {}; } }); }, - toggleUserMenu: function (target) { - liUserID = '#' + target.parent().parent().attr('id'); - if ($(liUserID).hasClass('activeMenuItem')) { - $(liUserID + ' .chatUserMenu').wcfBlindOut('vertical', function () { - $(liUserID).removeClass('activeMenuItem'); - }); - } - else { - $(liUserID).addClass('activeMenuItem'); - $(liUserID + ' .chatUserMenu').wcfBlindIn(); - } - }, toggleSidebarContent: function (target) { if (target.parent().hasClass('active')) return; @@ -221,6 +211,18 @@ if (typeof TimWolla.WCF == 'undefined') TimWolla.WCF = {}; $('#chatUserList').hide(); $('#chatRoomList').show(); } + }, + toggleUserMenu: function (target) { + liUserID = '#' + target.parent().parent().attr('id'); + if ($(liUserID).hasClass('activeMenuItem')) { + $(liUserID + ' .chatUserMenu').wcfBlindOut('vertical', function () { + $(liUserID).removeClass('activeMenuItem'); + }); + } + else { + $(liUserID).addClass('activeMenuItem'); + $(liUserID + ' .chatUserMenu').wcfBlindIn(); + } } }; })(jQuery, document); \ No newline at end of file diff --git a/file/js/jCounter.jQuery.js b/file/js/jCounter.jQuery.js new file mode 100644 index 0000000..b2c691c --- /dev/null +++ b/file/js/jCounter.jQuery.js @@ -0,0 +1,14 @@ +(function($){ + $.fn.jCounter = function(jCounterID, options) { + var jCounter = $(jCounterID); + var defaultClass = jCounter.attr('class'); + maxChars = (options != null) ? options : 140; + this.on('keypress keydown keyup', $.proxy(function() { + var length = maxChars - this.val().length; + if(length <= maxChars) color = 1; + if(length <= maxChars / 2) color = 2; + if(length <= maxChars / 7) color = 3; + jCounter.text(length).addClass(defaultClass + ' color-'+color); + }, this)); + } +})(jQuery); \ No newline at end of file diff --git a/template/chat.tpl b/template/chat.tpl index 34ffbc5..e8d0580 100644 --- a/template/chat.tpl +++ b/template/chat.tpl @@ -75,6 +75,8 @@ #chatInput { background-position: right center; background-repeat: no-repeat; + position: relative; + z-index: 10; } #chatOptions { @@ -187,6 +189,27 @@ .hidden { display: none; } + + .textCounter { + background: none repeat scroll 0 0 red; + margin-left: -5px; + padding: 5px; + position: relative; + z-index: 0 !important; + border-radius: 0px 5px 5px 0px; + background-color: rgba(0, 0, 0, 0.7); + border: 1px solid rgba(255, 255, 255, 0.3); + } + + .textCounter.color-1 { + color: #FFFFFF; + } + .textCounter.color-2 { + color: #AF0002; + } + .textCounter.color-3 { + color: #D40D12; + } @@ -243,7 +266,8 @@
- + + {CHAT_LENGTH}
@@ -261,22 +285,22 @@ @@ -296,6 +320,14 @@ {@$message->jsonify()} {/implode} ]); + + TimWolla.WCF.Chat.config = { + reloadTime: {CHAT_RELOADTIME}, + animations: {CHAT_ANIMATIONS}, + maxTextLength: {CHAT_LENGTH} + } + + $('#chatInput').jCounter('.textCounter', {CHAT_LENGTH}); //]]> diff --git a/template/chatJavascriptInclude.tpl b/template/chatJavascriptInclude.tpl index 36de2b6..724c3de 100644 --- a/template/chatJavascriptInclude.tpl +++ b/template/chatJavascriptInclude.tpl @@ -1 +1,4 @@ -{if $templateName == 'chat'}{/if} \ No newline at end of file +{if $templateName == 'chat'} + + +{/if} \ No newline at end of file