1
0
mirror of https://github.com/wbbaddons/Tims-Chat.git synced 2024-10-31 14:10:08 +00:00
Tims-Chat/template/chat.tpl

285 lines
6.8 KiB
Smarty
Raw Normal View History

{include file='documentHeader'}
<head>
2011-12-13 16:25:58 +00:00
<title>{$room} - {lang}wcf.chat.title{/lang} - {PAGE_TITLE|language}</title>
{include file='headInclude' sandbox=false}
<style type="text/css">
2011-12-11 22:29:43 +00:00
#chatBox {
2011-12-05 16:12:30 +00:00
padding: 0;
}
2011-12-11 22:29:43 +00:00
#chatBox > div {
text-align: center;
}
2011-12-11 22:29:43 +00:00
#chatBox aside, #chatRoomContent {
text-align: left;
}
2011-12-11 22:29:43 +00:00
#chatRoomContent {
margin: auto;
padding: 1px 10px 10px;
background-color: #FFFFFF;
width: 68%;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}
2011-12-11 22:29:43 +00:00
.chatSidebar.left {
float: left;
margin-left: -1px;
}
2011-12-11 22:29:43 +00:00
.chatSidebar.right {
float: right;
margin-right: -1px;
}
2011-12-11 22:29:43 +00:00
.chatSidebar {
overflow: auto;
padding: 0 1px 0 0;
width: 190px;
}
2011-12-11 22:29:43 +00:00
#chatRoomContent:after {
clear: both;
height: 0;
content: "";
display: block;
}
2011-12-11 22:29:43 +00:00
.chatSidebar h2 {
background-image: url({icon}arrowDown{/icon});
font-size: 130%;
padding: 7px 25px 7px 35px;
background-position: 15px center;
background-repeat: no-repeat;
background-size: 16px auto;
color: #336699;
cursor: default;
font-weight: bold;
margin-top: 5px;
}
2011-12-11 22:29:43 +00:00
.chatSidebar ul li a {
color: #6699CC;
display: block;
padding: 5px 25px 7px 35px;
text-shadow: 0 1px 0 #FFFFFF;
}
2011-12-11 22:29:43 +00:00
.chatSidebar ul li.activeMenuItem a {
color: #336699;
font-weight: bold;
}
2011-12-11 22:29:43 +00:00
.chatSidebar.left ul li.activeMenuItem, .chatSidebar.right ul li.activeMenuItem .bgFix {
background-color: #FFFFFF;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
margin-right: -1px;
overflow: hidden;
}
2011-12-11 22:29:43 +00:00
#topic, #smileyList, #chatOptions {
padding: 5px;
}
2011-12-05 20:17:01 +00:00
2011-12-12 14:52:36 +00:00
.chatMessageContainer {
2011-12-13 20:10:10 +00:00
height: 200px;
2011-12-11 22:29:43 +00:00
overflow-y: scroll;
2011-12-05 20:17:01 +00:00
}
2011-12-11 22:29:43 +00:00
#smileyList .smilies li, .smallButtons li {
display: inline;
margin-right: 5px;
margin-top: 5px;
2011-12-05 20:17:01 +00:00
}
2011-12-11 22:29:43 +00:00
#chatForm {
margin-top: 15px;
white-space: nowrap;
margin-right: 34px;
margin-top: 10px;
height: 28px;
}
2011-12-11 22:29:43 +00:00
#chatForm .inputImage {
height: 100%;
margin-bottom: -8px;
}
2011-12-11 22:29:43 +00:00
#chatOptions {
display: inline-block;
}
2011-12-11 22:29:43 +00:00
#chatUserList > ul > li > .bgFix a {
background-image: url("wcf/icon/arrowRight.svg");
background-position: 15px center;
background-repeat: no-repeat;
background-size: 16px auto;
}
2011-12-11 22:29:43 +00:00
#chatUserList > ul > li.activeMenuItem > .bgFix a {
background-image: url("wcf/icon/arrowDown.svg");
}
2011-12-11 22:29:43 +00:00
.chatSidebar .chatUserMenu li a {
margin-left: 30px !important;
}
2011-12-11 22:29:43 +00:00
.chatUserMenu {
display: none;
}
2011-12-11 22:29:43 +00:00
#chatUserList > ul li a {
margin-left: 20px;
}
2011-12-11 22:29:43 +00:00
.chatMessage time, .chatMessage time::before, .chatMessage time::after {
font-size: .8em;
}
2011-12-11 22:29:43 +00:00
.chatMessage time::before {
content: "[";
}
2011-12-03 23:50:04 +00:00
2011-12-11 22:29:43 +00:00
.chatMessage time::after {
content: "]";
2011-12-04 10:52:56 +00:00
}
2011-12-11 22:29:43 +00:00
.chatSidebar a {
outline: none;
2011-12-04 10:52:56 +00:00
}
2011-12-11 22:29:43 +00:00
.ajaxLoad {
background-position: right center;
background-repeat: no-repeat;
background-image: url({icon}spinner1{/icon});
2011-12-04 10:52:56 +00:00
}
2011-12-11 22:29:43 +00:00
.bgFix {
display: block;
2011-12-03 23:50:04 +00:00
}
</style>
</head>
<body id="tpl{$templateName|ucfirst}">
{include file='header' sandbox=false}
<header class="mainHeading">
<img src="{icon size='L'}chat1{/icon}" alt="" />
<hgroup>
<h1>{lang}wcf.chat.title{/lang}</h1>
</hgroup>
</header>
2011-12-13 16:22:54 +00:00
<div class="tabMenuContainer">
2011-12-11 22:29:43 +00:00
<nav class="tabMenu">
<ul>
<li class="ui-state-active"><a href="{link controller="Chat"}{/link}" title="{lang}wcf.chat.title{/lang}">{lang}wcf.chat.title{/lang}</a></li>
<li><a href="{link controller="Chat" action="Log"}{/link}" title="{lang}wcf.chat.protocol{/lang}">{lang}wcf.chat.protocol{/lang}</a></li>
</ul>
</nav>
2011-12-13 16:22:54 +00:00
<section id="chatBox" class="border tabMenuContent hidden">
2011-12-11 22:29:43 +00:00
<div>
<aside id="chatRoomList" class="chatSidebar left">
2011-12-13 16:22:54 +00:00
<h2>{lang}wcf.chat.rooms{/lang}</h2>
<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>
2011-12-11 22:29:43 +00:00
</aside>
<aside id="chatUserList" class="chatSidebar right">
<h2>{lang}wcf.chat.users{/lang}</h2>
<ul>
{section name=user start=1 loop=11}
<li id="user-{$user}" class="chatUser">
2011-12-13 16:22:54 +00:00
<span class="bgFix"><a class="chatUserLink" href="javascript:;">User {$user}</a></span>
2011-12-11 22:29:43 +00:00
<ul class="chatUserMenu">
<li>
2011-12-13 16:22:54 +00:00
<a href="javascript:;">Query</a>
<a href="javascript:;">Kick</a>
<a href="javascript:;">Ban</a>
<a href="{link controller="User" id=$user}{/link}">Profile</a>
2011-12-11 22:29:43 +00:00
</li>
</ul>
2011-12-11 22:29:43 +00:00
</li>
{/section}
</ul>
</aside>
<div id="chatRoomContent">
2011-12-13 16:22:54 +00:00
<div id="topic" class="border">{$room->topic|language}</div>
2011-12-12 14:52:36 +00:00
<div class="chatMessageContainer border content">
2011-12-11 22:29:43 +00:00
<ul></ul>
</div>
<form id="chatForm" action="{link controller="Chat" action="Send"}{/link}" method="post">
<input type="text" id="chatInput" class="inputText" style="width: 100%" name="text" autocomplete="off" />
<input type="image" class="inputImage" alt="Absenden" src="{icon size=M}toRight1{/icon}" />
</form>
<div id="chatControls">
<div id="smileyList" class="border">
<ul class="smilies">
{foreach from=$smilies item='smiley'}
<li>
<img src="{$smiley->getURL()}" alt="{$smiley->smileyCode}" title="{$smiley->smileyCode}" class="smiley" />
</li>
{/foreach}
</ul>
</div>
2011-12-11 22:29:43 +00:00
<div id="chatOptions" class="border">
<div class="smallButtons">
<ul>
2011-12-11 22:29:43 +00:00
<li>
2011-12-13 16:22:54 +00:00
<a id="chatAutoscrollButton" href="javascript:;">
<img alt="" src="{icon}enabled1{/icon}" /> <span>Scroll</span>
2011-12-11 22:29:43 +00:00
</a>
</li>
<li>
2011-12-13 16:22:54 +00:00
<a href="javascript:;">
<img alt="" src="{icon}disabled1{/icon}" /> <span>Notify</span>
2011-12-11 22:29:43 +00:00
</a>
</li>
2011-12-11 22:29:43 +00:00
<li>
2011-12-13 16:22:54 +00:00
<a href="javascript:;">
<img alt="" src="{icon}delete1{/icon}" /> <span>Clear</span>
2011-12-11 22:29:43 +00:00
</a>
</li>
<li>
2011-12-13 16:22:54 +00:00
<a href="javascript:;">
<img alt="" src="{icon}check1{/icon}" /> <span>Mark</span>
2011-12-11 22:29:43 +00:00
</a>
</li>
</ul>
</div>
</div>
</div>
2011-12-11 22:29:43 +00:00
</div>
</div>
2011-12-11 22:29:43 +00:00
</section>
</div>
<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}
2011-12-05 14:40:30 +00:00
TimWolla.WCF.Chat.messageTemplate = new WCF.Template('{@$chatMessageTemplate|encodeJS}');
2011-12-04 21:50:17 +00:00
TimWolla.WCF.Chat.init({$room->roomID}, 1);
TimWolla.WCF.Chat.handleMessages([
{implode from=$newestMessages item='message'}
{@$message->jsonify()}
{/implode}
]);
//]]>
</script>
{include file='footer' sandbox=false}
</body>
</html>