From 49ea229781d75306ed55054a67c8a38e98dd95f5 Mon Sep 17 00:00:00 2001 From: max-m Date: Sat, 17 Dec 2011 18:40:17 +0100 Subject: [PATCH] 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}