Bastelstube/Tims-Chat
1
0
Fork 0
mirror of https://github.com/wbbaddons/Tims-Chat.git synced 2025-01-22 02:00:40 +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; // return false;
// }); // });
$('.chatSidebarTabs li').click($.proxy(function (event) {
event.preventDefault();
this.toggleSidebarContent($(event.target));
}, this));
$('.chatRoom').click($.proxy(function (event) { $('.chatRoom').click($.proxy(function (event) {
if (typeof window.history.replaceState != 'undefined') { if (typeof window.history.replaceState != 'undefined') {
event.preventDefault(); event.preventDefault();
@ -210,6 +215,24 @@ if (typeof TimWolla.WCF == 'undefined') TimWolla.WCF = {};
$(liUserID).addClass('activeMenuItem'); $(liUserID).addClass('activeMenuItem');
$(liUserID + ' .chatUserMenu').wcfBlindIn(); $(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); })(jQuery, document);

92
template/chat.tpl
View File

@ -18,6 +18,14 @@
text-align: left; text-align: left;
} }
.sidebar {
margin-bottom: -20px !important;
}
#sidebar {
/*height: 450px;*/
}
aside { aside {
overflow: auto; overflow: auto;
padding: 0 1px 0 0; padding: 0 1px 0 0;
@ -64,6 +72,11 @@
text-align: center; text-align: center;
} }
#chatInput {
background-position: right center;
background-repeat: no-repeat;
}
#chatOptions { #chatOptions {
display: inline-block; display: inline-block;
} }
@ -130,15 +143,66 @@
.bgFix { .bgFix {
display: block; 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> </style>
</head> </head>
<body id="tpl{$templateName|ucfirst}"> <body id="tpl{$templateName|ucfirst}">
{capture assign='sidebar'}<aside class="sidebar"> {capture assign='sidebar'}<aside class="sidebar">
<div id="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"> <ul id="chatUserList">
{section name=user start=1 loop=11} {section name=user start=1 loop=26}
<li id="user-{$user}" class="chatUser"> <li id="user-{$user}" class="chatUser">
<span class="bgFix"><a class="chatUserLink" href="javascript:;">User {$user}</a></span> <span class="bgFix"><a class="chatUserLink" href="javascript:;">User {$user}</a></span>
<ul class="chatUserMenu"> <ul class="chatUserMenu">
@ -152,18 +216,18 @@
</li> </li>
{/section} {/section}
</ul> </ul>
<h2>{lang}wcf.chat.rooms{/lang}</h2> <nav id="chatRoomList" class="sidebarMenu hidden">
<nav class="sidebarMenu"> <div>
<div> <ul>
<ul> {foreach from=$rooms item='roomListRoom'}
{foreach from=$rooms item='roomListRoom'} <li{if $roomListRoom->roomID == $room->roomID} class="activeMenuItem"{/if}>
<li{if $roomListRoom->roomID == $room->roomID} class="activeMenuItem"{/if}> <a href="{link controller='Chat' object=$roomListRoom}{/link}" class="chatRoom">{$roomListRoom}</a>
<a href="{link controller='Chat' object=$roomListRoom}{/link}" class="chatRoom">{$roomListRoom}</a> </li>
</li> {/foreach}
{/foreach} </ul>
</ul> </div>
</div> </nav>
</nav> </div>
</div> </div>
</aside> </aside>
<!-- CONTENT -->{/capture} <!-- CONTENT -->{/capture}