2011-11-26 14:30:56 +00:00
|
|
|
{include file='documentHeader'}
|
|
|
|
|
|
|
|
|
|
<head>
|
2011-12-03 13:44:00 +00:00
|
|
|
<title>{$room->title|language} - {lang}wcf.chat.title{/lang} - {PAGE_TITLE|language}</title>
|
2011-11-26 14:30:56 +00:00
|
|
|
|
|
|
|
|
{include file='headInclude' sandbox=false}
|
2011-12-03 13:13:04 +00:00
|
|
|
|
|
|
|
|
<style type="text/css">
|
|
|
|
|
#chatbox {
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.table {
|
|
|
|
|
display: table;
|
|
|
|
|
table-layout: fixed;
|
|
|
|
|
width: 100%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.table > div {
|
|
|
|
|
display: table-row;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.first {
|
2011-12-03 23:50:04 +00:00
|
|
|
width: 15%;
|
2011-12-03 13:13:04 +00:00
|
|
|
background-color: #D8E7F5;
|
|
|
|
|
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1) inset;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.second {
|
2011-12-03 23:50:04 +00:00
|
|
|
width: 70%;
|
2011-12-03 13:13:04 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.third {
|
2011-12-03 23:50:04 +00:00
|
|
|
width: 15%;
|
2011-12-03 13:13:04 +00:00
|
|
|
background-color: #D8E7F5;
|
|
|
|
|
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1) inset;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.column {
|
|
|
|
|
display: table-cell;
|
|
|
|
|
margin: 0;
|
|
|
|
|
padding: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.second.column > div {
|
2011-12-03 13:58:30 +00:00
|
|
|
padding: 0px 15px 25px;
|
2011-12-03 13:13:04 +00:00
|
|
|
}
|
|
|
|
|
|
2011-12-03 16:37:20 +00:00
|
|
|
#topic, #smileyList {
|
2011-12-03 13:13:04 +00:00
|
|
|
padding: 5px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.smilies li {
|
|
|
|
|
display: inline;
|
|
|
|
|
margin-right: 5px;
|
|
|
|
|
margin-top: 5px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/*
|
|
|
|
|
.tabMenu {
|
|
|
|
|
padding: 0 15px;
|
|
|
|
|
text-align: left;
|
|
|
|
|
}
|
|
|
|
|
*/
|
|
|
|
|
|
|
|
|
|
.chatMessage {
|
2011-12-05 13:54:25 +00:00
|
|
|
height: 200px;
|
|
|
|
|
overflow-y: scroll;
|
2011-12-03 13:13:04 +00:00
|
|
|
}
|
|
|
|
|
|
2011-12-03 23:50:04 +00:00
|
|
|
.chatSidebar a {
|
|
|
|
|
outline: none;
|
2011-12-03 13:13:04 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/*
|
|
|
|
|
.chatSidebar > div h1.activeMenuItem {
|
|
|
|
|
background-image: url("wcf/icon/arrowDown.svg");
|
|
|
|
|
}
|
|
|
|
|
*/
|
|
|
|
|
|
|
|
|
|
.chatSidebar > div h1 {
|
|
|
|
|
font-size: 130%;
|
|
|
|
|
padding: 7px 25px 7px 35px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.chatSidebar > div h1 {
|
|
|
|
|
background-image: url("wcf/icon/arrowRight.svg");
|
|
|
|
|
background-position: 15px center;
|
|
|
|
|
background-repeat: no-repeat;
|
|
|
|
|
background-size: 16px auto;
|
|
|
|
|
color: #336699;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
margin-top: 5px;
|
|
|
|
|
position: relative;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.chatSidebar #chatUserList .sidebarMenuGroup > ul > li > a {
|
|
|
|
|
background-image: url("wcf/icon/arrowRight.svg");
|
|
|
|
|
background-position: 15px center;
|
|
|
|
|
background-repeat: no-repeat;
|
|
|
|
|
background-size: 16px auto;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.chatSidebar #chatUserList .sidebarMenuGroup > ul > li.activeMenuItem > a {
|
|
|
|
|
background-image: url("wcf/icon/arrowDown.svg");
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.chatSidebar > div ul li a {
|
|
|
|
|
color: #6699CC;
|
|
|
|
|
display: block;
|
|
|
|
|
padding: 5px 25px 7px 35px;
|
|
|
|
|
text-shadow: 0 1px 0 #FFFFFF;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.chatSidebar > div ul li.activeMenuItem {
|
|
|
|
|
background-color: #FFFFFF;
|
|
|
|
|
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
z-index: 110;
|
|
|
|
|
font-size: 110%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.chatSidebar > div ul li.activeMenuItem a {
|
|
|
|
|
color: #336699;
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
display: block;
|
|
|
|
|
padding: 5px 25px 7px 35px;
|
|
|
|
|
text-shadow: 0 1px 0 #FFFFFF;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.chatSidebar.right > div ul li.activeMenuItem {
|
|
|
|
|
margin-right: -1px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.chatSidebar.left > div ul li.activeMenuItem {
|
|
|
|
|
margin-left: -1px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.chatSidebar .selectedUser {
|
|
|
|
|
margin-left: 20px;
|
|
|
|
|
}
|
2011-12-03 23:50:04 +00:00
|
|
|
|
2011-12-04 10:52:56 +00:00
|
|
|
.chatUserMenu {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
#chatUserList .sidebarMenuGroup > ul li a {
|
|
|
|
|
margin-left: 20px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/*
|
|
|
|
|
.chatUser.activeMenuItem {
|
|
|
|
|
margin-bottom: 5px;
|
|
|
|
|
}
|
|
|
|
|
*/
|
|
|
|
|
|
2011-12-03 23:50:04 +00:00
|
|
|
.ajaxLoad {
|
|
|
|
|
margin-right: 2px;
|
|
|
|
|
float: right;
|
|
|
|
|
}
|
2011-12-03 13:13:04 +00:00
|
|
|
</style>
|
2011-11-26 14:30:56 +00:00
|
|
|
</head>
|
|
|
|
|
|
|
|
|
|
<body id="tpl{$templateName|ucfirst}">
|
|
|
|
|
{include file='header' sandbox=false}
|
|
|
|
|
|
|
|
|
|
<header class="mainHeading">
|
2011-11-29 15:46:41 +00:00
|
|
|
<img src="{icon size='L'}chat1{/icon}" alt="" />
|
2011-11-26 14:30:56 +00:00
|
|
|
<hgroup>
|
|
|
|
|
<h1>{lang}wcf.chat.title{/lang}</h1>
|
|
|
|
|
</hgroup>
|
|
|
|
|
</header>
|
|
|
|
|
|
2011-12-03 13:13:04 +00:00
|
|
|
<nav class="tabMenu">
|
|
|
|
|
<ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
|
2011-12-03 13:47:09 +00:00
|
|
|
<li class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active"><a title="{lang}wcf.chat.title{/lang}" href="{link controller="Chat"}{/link}">{lang}wcf.chat.title{/lang}</a></li>
|
2011-12-04 22:00:17 +00:00
|
|
|
<li class="ui-state-default ui-corner-top ui-tabs-selected"><a title="Log" href="{link controller="Chat" isRaw="true"}Log{/link}">{lang}wcf.chat.protocol{/lang}</a></li>
|
2011-12-03 13:13:04 +00:00
|
|
|
</ul>
|
|
|
|
|
</nav>
|
|
|
|
|
<div id="chatbox" class="border tabMenuContent ui-tabs-panel ui-widget-content ui-corner-bottom">
|
|
|
|
|
<div class="table border">
|
2011-12-03 13:41:41 +00:00
|
|
|
<div>
|
2011-12-03 13:13:04 +00:00
|
|
|
<div class="first column">
|
|
|
|
|
<div class="chatSidebar left">
|
|
|
|
|
<div id="chatChannelList">
|
2011-12-04 22:00:17 +00:00
|
|
|
<h1 data-menu-item="timwolla.wcf.chat.channellist" class="menuHeader activeMenuItem">{lang}wcf.chat.rooms{/lang}</h1>
|
2011-12-03 13:13:04 +00:00
|
|
|
<div class="sidebarMenuGroup">
|
|
|
|
|
<ul>
|
2011-12-03 13:41:41 +00:00
|
|
|
{foreach from=$rooms item='roomListRoom'}
|
|
|
|
|
<li{if $roomListRoom->roomID == $room->roomID} class="activeMenuItem"{/if}>
|
2011-12-03 23:50:04 +00:00
|
|
|
<a id="room-{$roomListRoom->roomID}" href="{link controller='Chat' object=$roomListRoom}{/link}" class="chatRoom">{$roomListRoom->title|language}</a>
|
2011-12-03 13:41:41 +00:00
|
|
|
</li>
|
|
|
|
|
{/foreach}
|
2011-12-03 13:13:04 +00:00
|
|
|
</ul>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2011-12-03 13:41:41 +00:00
|
|
|
</div>
|
2011-12-03 13:13:04 +00:00
|
|
|
<div class="second column">
|
|
|
|
|
<div>
|
2011-12-03 14:11:29 +00:00
|
|
|
|
2011-12-03 16:37:20 +00:00
|
|
|
<div class="border" id="topic"{if !$room->topic|language} style="display: none;"{/if}>
|
2011-12-03 14:11:29 +00:00
|
|
|
{$room->topic|language}
|
2011-12-03 13:58:30 +00:00
|
|
|
</div>
|
2011-12-03 13:13:04 +00:00
|
|
|
<div class="chatMessage border content">
|
2011-12-04 21:46:50 +00:00
|
|
|
<ul>
|
|
|
|
|
</ul>
|
2011-12-03 13:13:04 +00:00
|
|
|
</div>
|
2011-12-03 13:41:41 +00:00
|
|
|
<form style="margin-top: 10px;" id="chatForm" action="index.php?form=Chat" method="post">
|
|
|
|
|
<div class="table">
|
|
|
|
|
<div>
|
|
|
|
|
<div class="column" style="width: 95%;">
|
|
|
|
|
<input type="text" id="chatInput" class="inputText" style="width: 100%" name="text" autocomplete="off">
|
|
|
|
|
</div>
|
|
|
|
|
<div class="column" style="width: 5%; text-align: center;">
|
2011-12-03 13:50:34 +00:00
|
|
|
<input type="image" class="inputImage" alt="Absenden" src="{icon size=M}toRight1{/icon}" style="height: 24px; margin-left: 5px; vertical-align: sub;">
|
2011-12-03 13:41:41 +00:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</form>
|
2011-12-03 13:13:04 +00:00
|
|
|
<div id="smileyList" class="border">
|
|
|
|
|
<ul class="smilies">
|
|
|
|
|
{foreach from=$smilies item='smiley'}
|
|
|
|
|
<li>
|
2011-12-03 13:51:53 +00:00
|
|
|
<img src="{$smiley->getURL()}" alt="{$smiley->smileyCode}" title="{$smiley->smileyCode}" class="smiley" />
|
2011-12-03 13:13:04 +00:00
|
|
|
</li>
|
|
|
|
|
{/foreach}
|
|
|
|
|
</ul>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2011-12-03 13:41:41 +00:00
|
|
|
</div>
|
2011-12-03 13:13:04 +00:00
|
|
|
<div class="third column">
|
|
|
|
|
<div class="chatSidebar right">
|
|
|
|
|
<div id="chatUserList">
|
|
|
|
|
<h1 data-menu-item="timwolla.wcf.chat.userlist" class="menuHeader activeMenuItem">User</h1>
|
|
|
|
|
<div class="sidebarMenuGroup">
|
|
|
|
|
<ul>
|
2011-12-04 10:52:56 +00:00
|
|
|
{section name=user start=0 loop=10}
|
|
|
|
|
<li id="user-{$user + 1}" class="chatUser">
|
|
|
|
|
<a class="chatUserLink" href="javascript:void(0)">User {$user + 1}</a>
|
|
|
|
|
<ul class="chatUserMenu">
|
2011-12-03 13:13:04 +00:00
|
|
|
<li>
|
|
|
|
|
<a href="javascript:void(0)">Query</a>
|
|
|
|
|
<a href="javascript:void(0)">Kick</a>
|
|
|
|
|
<a href="javascript:void(0)">Ban</a>
|
|
|
|
|
<a href="javascript:void(0)">Profil</a>
|
|
|
|
|
</li>
|
|
|
|
|
</ul>
|
|
|
|
|
</li>
|
2011-12-04 10:52:56 +00:00
|
|
|
{/section}
|
2011-12-03 13:13:04 +00:00
|
|
|
</ul>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2011-12-03 13:41:41 +00:00
|
|
|
</div>
|
2011-12-03 13:13:04 +00:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2011-11-27 12:13:59 +00:00
|
|
|
|
|
|
|
|
<script type="text/javascript">
|
|
|
|
|
//<![CDATA[
|
2011-12-03 17:07:57 +00:00
|
|
|
TimWolla.WCF.Chat.titleTemplate = new WCF.Template('{ldelim}$title} - {'wcf.chat.title'|language|encodeJS} - {PAGE_TITLE|language|encodeJS}');
|
2011-12-04 22:12:12 +00:00
|
|
|
{capture assign='chatMessageTemplate'}{include file='chatMessage'}{/capture}
|
|
|
|
|
TimWolla.WCF.Chat.messageTemplate = new WCF.Template('{$chatMessageTemplate|encodeJS}');
|
2011-12-04 21:50:17 +00:00
|
|
|
TimWolla.WCF.Chat.init({$room->roomID}, 1);
|
2011-12-05 13:45:50 +00:00
|
|
|
TimWolla.WCF.Chat.handleMessages([
|
|
|
|
|
{implode from=$newestMessages item='message'}
|
|
|
|
|
{@$message->jsonify()}
|
|
|
|
|
{/implode}
|
|
|
|
|
]);
|
2011-11-27 12:13:59 +00:00
|
|
|
//]]>
|
|
|
|
|
</script>
|
2011-11-26 14:30:56 +00:00
|
|
|
|
|
|
|
|
{include file='footer' sandbox=false}
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
