Bastelstube/Tims-Chat
1
0
Fork 0
mirror of https://github.com/wbbaddons/Tims-Chat.git synced 2024-10-31 14:10:08 +00:00
Code Issues Releases Wiki Activity

Added sidebar tabs :)

Browse Source
This commit is contained in:
max-m 2011-12-17 18:40:17 +01:00
parent 987482c590
commit 49ea229781
2 changed files with 101 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
file/js/TimWolla.WCF.Chat.js
View File

@ -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);

92
template/chat.tpl
View File

@ -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;
}
</style>
</head>
<body id="tpl{$templateName|ucfirst}">
{capture assign='sidebar'}<aside class="sidebar">
<div id="sidebar">
<h2>{lang}wcf.chat.users{/lang}</h2>
<nav class="chatSidebarTabs">
<ul>
<li id="toggleUsers" class="active"><a href="javascript:;" title="{lang}wcf.chat.users{/lang}">{lang}wcf.chat.users{/lang}</a></li>
<li id="toggleRooms"><a href="javascript:;" title="{lang}wcf.chat.rooms{/lang}">{lang}wcf.chat.rooms{/lang}</a></li>
</ul>
</nav>
<div id="sidebarContainer">
<ul id="chatUserList">
{section name=user start=1 loop=11}
{section name=user start=1 loop=26}
<li id="user-{$user}" class="chatUser">
<span class="bgFix"><a class="chatUserLink" href="javascript:;">User {$user}</a></span>
<ul class="chatUserMenu">
@ -152,18 +216,18 @@
</li>
{/section}
</ul>
<h2>{lang}wcf.chat.rooms{/lang}</h2>
<nav class="sidebarMenu">
<div>
<ul>
{foreach from=$rooms item='roomListRoom'}
<li{if $roomListRoom->roomID == $room->roomID} class="activeMenuItem"{/if}>
<a href="{link controller='Chat' object=$roomListRoom}{/link}" class="chatRoom">{$roomListRoom}</a>
</li>
{/foreach}
</ul>
</div>
</nav>
<nav id="chatRoomList" class="sidebarMenu hidden">
<div>
<ul>
{foreach from=$rooms item='roomListRoom'}
<li{if $roomListRoom->roomID == $room->roomID} class="activeMenuItem"{/if}>
<a href="{link controller='Chat' object=$roomListRoom}{/link}" class="chatRoom">{$roomListRoom}</a>
</li>
{/foreach}
</ul>
</div>
</nav>
</div>
</div>
</aside>
<!-- CONTENT -->{/capture}