Tims-Chat/template/chat.tpl

{include file='documentHeader'}

<head>
	<title>{$room} - {lang}wcf.chat.title{/lang} - {PAGE_TITLE|language}</title>
	
	{include file='headInclude' sandbox=false}
	
	<style type="text/css">
		#chatBox {
			padding: 0;
		}
		
		#chatBox > div {
			text-align: center;
		}
		
		#chatBox aside, #chatRoomContent {
			text-align: left;
		}
		
		aside {
			overflow: auto;
			padding: 0 1px 0 0;
			width: 190px;
		}
		
		aside h2 {
			margin: auto;
			text-align: center;
			font-size: 130%;
			color: #336699;
			cursor: default;
			font-weight: bold;
			margin-top: 5px;			
		}

		aside ul li a {
			color: #6699CC;
			display: block;
			padding: 5px 25px 7px 35px;
			text-shadow: 0 1px 0 #FFFFFF;
		}
		
		#topic, #smileyList, #chatOptions {
			padding: 5px;
		}	
		
		.chatMessageContainer {
			height: 200px;
			overflow-y: scroll;
		}
		
		#smileyList .smilies li, .smallButtons li {
			display: inline;
			margin-right: 5px;
			margin-top: 5px;
		}
		
		#chatForm {
			margin-top: 15px;
			white-space: nowrap;
			margin-top: 10px;
			/* Fix to align chatInput in center */
			text-align: center;
		}
		
		#chatInput {
			background-position: right center;
			background-repeat: no-repeat;
		}
		
		#chatOptions {
			display: inline-block;
		}

		#chatUserList > li > .bgFix a {
			background-image: url({icon size='S'}arrowRight{/icon});
			background-position: 15px center;
			background-repeat: no-repeat;
			background-size: 16px auto;
		}
		
		#chatUserList > li.activeMenuItem > .bgFix a {
			background-image: url({icon size='S'}arrowDown{/icon});
		}
		
		#chatUserList .chatUserMenu li a {
			margin-left: 30px !important;
		}
		
		#chatUserList .chatUserMenu {
			display: none;
		}
		
		#chatUserList > li a {
			margin-left: 20px;
		}
		
		.chatMessage time, .chatMessage time::before, .chatMessage time::after {
			font-size: .8em;
		}
		.chatMessage time::before {
			content: "[";
		}
		
		.chatMessage time::after {
			content: "]";
		}
		
		.chatMessage {
			padding-left: 16px;
			min-height: 16px;
		}
		{assign var='type' value='\wcf\data\chat\message\ChatMessage::TYPE_'}
		.chatMessage{$type|concat:'JOIN'|constant}, .chatMessage{$type|concat:'LEAVE'|constant} {
			background-position: left top;
			background-repeat: no-repeat;
			
		}
		
		.chatMessage{$type|concat:'JOIN'|constant} {
			background-image: url({icon size='S'}toRight1{/icon});
		}
		
		.chatMessage{$type|concat:'LEAVE'|constant} {
			background-image: url({icon size='S'}toLeft1{/icon});
		}
		
		.ajaxLoad {
			background-position: right center;
			background-repeat: no-repeat;
			background-image: url({icon size='S'}spinner1{/icon});
		}
		
		.bgFix {
			display: block;
		}
	</style>
</head>

<body id="tpl{$templateName|ucfirst}">
{capture assign='sidebar'}{/capture}
{capture assign='header'}{include file='header' sandbox=false}{/capture}
{assign var='header' value='class="main"'|str_replace:'class="main right"':$header}
{assign var='header' value='<!-- CONTENT -->'|str_replace:$sidebar:$header}
{assign var='header' value='<section id="content" class="content">'|str_replace:$sidebar:$header}
{@$header}
<aside class="sidebar">
	<div id="sidebar">
		<button title="{lang}wcf.chat.title{/lang}" value="{link controller="Chat"}{/link}">{lang}wcf.chat.title{/lang}</button>
		<button title="{lang}wcf.chat.protocol{/lang}" value="{link controller="Chat" action="Log"}{/link}">{lang}wcf.chat.protocol{/lang}</button>
		<h2>{lang}wcf.chat.users{/lang}</h2>
			<ul id="chatUserList">
			{section name=user start=1 loop=11}
				<li id="user-{$user}" class="chatUser">
					<span class="bgFix"><a class="chatUserLink" href="javascript:;">User {$user}</a></span>
					<ul class="chatUserMenu">
						<li>
							<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>
						</li>
					</ul>
				</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>
	</div>
</aside>
<!-- CONTENT -->
<section id="content" class="content">
			
{include file='breadcrumbs' sandbox=false}
<div id="chatRoomContent">
	<div id="topic" class="border"{if $room->topic|language === ''} style="display: none;"{/if}>{$room->topic|language}</div>
	<div class="chatMessageContainer border content">
		<ul></ul>
	</div>
	
	<form id="chatForm" action="{link controller="Chat" action="Send"}{/link}" method="post">
		<input type="text" id="chatInput" class="inputText long" name="text" autocomplete="off" required="required" placeholder="Submit with enter" />
	</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>
		<div id="chatOptions" class="border">
			<div class="smallButtons">
				<ul>
					<li>
						<a id="chatAutoscrollButton" href="javascript:;">
							<img alt="" src="{icon}enabled1{/icon}" /> <span>Scroll</span>
						</a>
					</li>
					<li>
						<a href="javascript:;">
							<img alt="" src="{icon}disabled1{/icon}" /> <span>Notify</span>
						</a>
					</li>
					<li>
						<a href="javascript:;">
							<img alt="" src="{icon}delete1{/icon}" /> <span>Clear</span>
						</a>
					</li>
					<li>
						<a href="javascript:;">
							<img alt="" src="{icon}check1{/icon}" /> <span>Mark</span>
						</a>
					</li>											
				</ul>
			</div>
		</div>
	</div>
</div>

<script type="text/javascript">
	//<![CDATA[
		TimWolla.WCF.Chat.titleTemplate = new WCF.Template('{ldelim}$title} - {'wcf.chat.title'|language|encodeJS} - {PAGE_TITLE|language|encodeJS}');
		{capture assign='chatMessageTemplate'}{include file='chatMessage'}{/capture}
		TimWolla.WCF.Chat.messageTemplate = new WCF.Template('{@$chatMessageTemplate|encodeJS}');
		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>
Adding chat.tpl It is a skeleton by now. 2011-11-26 14:30:56 +00:00			`{include file='documentHeader'}`

			`<head>`
Forgot to commit one line.. 2011-12-13 16:25:58 +00:00			`<title>{$room} - {lang}wcf.chat.title{/lang} - {PAGE_TITLE\|language}</title>`
Adding chat.tpl It is a skeleton by now. 2011-11-26 14:30:56 +00:00
			`{include file='headInclude' sandbox=false}`
Worked on a static frontend for the chat. 2011-12-03 13:13:04 +00:00
			`<style type="text/css">`
Completely reworked frontend 2011-12-11 22:29:43 +00:00			`#chatBox {`
Get some more space :) 2011-12-05 16:12:30 +00:00			`padding: 0;`
Worked on a static frontend for the chat. 2011-12-03 13:13:04 +00:00			`}`

Completely reworked frontend 2011-12-11 22:29:43 +00:00			`#chatBox > div {`
			`text-align: center;`
Worked on a static frontend for the chat. 2011-12-03 13:13:04 +00:00			`}`

Completely reworked frontend 2011-12-11 22:29:43 +00:00			`#chatBox aside, #chatRoomContent {`
			`text-align: left;`
Worked on a static frontend for the chat. 2011-12-03 13:13:04 +00:00			`}`

First try of redesign 2011-12-15 17:55:44 +00:00			`aside {`
Completely reworked frontend 2011-12-11 22:29:43 +00:00			`overflow: auto;`
			`padding: 0 1px 0 0;`
			`width: 190px;`
Worked on a static frontend for the chat. 2011-12-03 13:13:04 +00:00			`}`

First try of redesign 2011-12-15 17:55:44 +00:00			`aside h2 {`
			`margin: auto;`
			`text-align: center;`
Completely reworked frontend 2011-12-11 22:29:43 +00:00			`font-size: 130%;`
			`color: #336699;`
			`cursor: default;`
			`font-weight: bold;`
			`margin-top: 5px;`
Worked on a static frontend for the chat. 2011-12-03 13:13:04 +00:00			`}`

First try of redesign 2011-12-15 17:55:44 +00:00			`aside ul li a {`
Completely reworked frontend 2011-12-11 22:29:43 +00:00			`color: #6699CC;`
			`display: block;`
			`padding: 5px 25px 7px 35px;`
			`text-shadow: 0 1px 0 #FFFFFF;`
Worked on a static frontend for the chat. 2011-12-03 13:13:04 +00:00			`}`

Completely reworked frontend 2011-12-11 22:29:43 +00:00			`#topic, #smileyList, #chatOptions {`
			`padding: 5px;`
			`}`
Style the time :) 2011-12-05 20:17:01 +00:00
Fixed typo 2011-12-12 14:52:36 +00:00			`.chatMessageContainer {`
Y U Use min-height? 2011-12-13 20:10:10 +00:00			`height: 200px;`
Completely reworked frontend 2011-12-11 22:29:43 +00:00			`overflow-y: scroll;`
Style the time :) 2011-12-05 20:17:01 +00:00			`}`

Completely reworked frontend 2011-12-11 22:29:43 +00:00			`#smileyList .smilies li, .smallButtons li {`
			`display: inline;`
			`margin-right: 5px;`
			`margin-top: 5px;`
Style the time :) 2011-12-05 20:17:01 +00:00			`}`

Completely reworked frontend 2011-12-11 22:29:43 +00:00			`#chatForm {`
			`margin-top: 15px;`
			`white-space: nowrap;`
			`margin-top: 10px;`
Made sidebar collapseable 2011-12-15 20:45:37 +00:00			`/* Fix to align chatInput in center */`
			`text-align: center;`
			`}`

			`#chatInput {`
			`background-position: right center;`
			`background-repeat: no-repeat;`
Worked on a static frontend for the chat. 2011-12-03 13:13:04 +00:00			`}`
Made sidebar collapseable 2011-12-15 20:45:37 +00:00
Completely reworked frontend 2011-12-11 22:29:43 +00:00			`#chatOptions {`
			`display: inline-block;`
Worked on a static frontend for the chat. 2011-12-03 13:13:04 +00:00			`}`

First try of redesign 2011-12-15 17:55:44 +00:00			`#chatUserList > li > .bgFix a {`
Adding some styles to messages 2011-12-13 21:42:28 +00:00			`background-image: url({icon size='S'}arrowRight{/icon});`
Worked on a static frontend for the chat. 2011-12-03 13:13:04 +00:00			`background-position: 15px center;`
			`background-repeat: no-repeat;`
			`background-size: 16px auto;`
			`}`

First try of redesign 2011-12-15 17:55:44 +00:00			`#chatUserList > li.activeMenuItem > .bgFix a {`
Adding some styles to messages 2011-12-13 21:42:28 +00:00			`background-image: url({icon size='S'}arrowDown{/icon});`
Worked on a static frontend for the chat. 2011-12-03 13:13:04 +00:00			`}`

First try of redesign 2011-12-15 17:55:44 +00:00			`#chatUserList .chatUserMenu li a {`
Completely reworked frontend 2011-12-11 22:29:43 +00:00			`margin-left: 30px !important;`
Worked on a static frontend for the chat. 2011-12-03 13:13:04 +00:00			`}`

First try of redesign 2011-12-15 17:55:44 +00:00			`#chatUserList .chatUserMenu {`
Completely reworked frontend 2011-12-11 22:29:43 +00:00			`display: none;`
Worked on a static frontend for the chat. 2011-12-03 13:13:04 +00:00			`}`

First try of redesign 2011-12-15 17:55:44 +00:00			`#chatUserList > li a {`
Completely reworked frontend 2011-12-11 22:29:43 +00:00			`margin-left: 20px;`
Worked on a static frontend for the chat. 2011-12-03 13:13:04 +00:00			`}`

Completely reworked frontend 2011-12-11 22:29:43 +00:00			`.chatMessage time, .chatMessage time::before, .chatMessage time::after {`
			`font-size: .8em;`
Worked on a static frontend for the chat. 2011-12-03 13:13:04 +00:00			`}`
Completely reworked frontend 2011-12-11 22:29:43 +00:00			`.chatMessage time::before {`
			`content: "[";`
Worked on a static frontend for the chat. 2011-12-03 13:13:04 +00:00			`}`
Changed CSS a bit. 2011-12-03 23:50:04 +00:00
Completely reworked frontend 2011-12-11 22:29:43 +00:00			`.chatMessage time::after {`
			`content: "]";`
Made userlist toggleable. 2011-12-04 10:52:56 +00:00			`}`

Adding some styles to messages 2011-12-13 21:42:28 +00:00			`.chatMessage {`
			`padding-left: 16px;`
			`min-height: 16px;`
			`}`
			`{assign var='type' value='\wcf\data\chat\message\ChatMessage::TYPE_'}`
			`.chatMessage{$type\|concat:'JOIN'\|constant}, .chatMessage{$type\|concat:'LEAVE'\|constant} {`
			`background-position: left top;`
			`background-repeat: no-repeat;`

			`}`

			`.chatMessage{$type\|concat:'JOIN'\|constant} {`
			`background-image: url({icon size='S'}toRight1{/icon});`
			`}`

			`.chatMessage{$type\|concat:'LEAVE'\|constant} {`
			`background-image: url({icon size='S'}toLeft1{/icon});`
			`}`

Completely reworked frontend 2011-12-11 22:29:43 +00:00			`.ajaxLoad {`
			`background-position: right center;`
			`background-repeat: no-repeat;`
Adding some styles to messages 2011-12-13 21:42:28 +00:00			`background-image: url({icon size='S'}spinner1{/icon});`
Made userlist toggleable. 2011-12-04 10:52:56 +00:00			`}`

Completely reworked frontend 2011-12-11 22:29:43 +00:00			`.bgFix {`
			`display: block;`
Changed CSS a bit. 2011-12-03 23:50:04 +00:00			`}`
Worked on a static frontend for the chat. 2011-12-03 13:13:04 +00:00			`</style>`
Adding chat.tpl It is a skeleton by now. 2011-11-26 14:30:56 +00:00			`</head>`

			`<body id="tpl{$templateName\|ucfirst}">`
Made sidebar collapseable 2011-12-15 20:45:37 +00:00			`{capture assign='sidebar'}{/capture}`
			`{capture assign='header'}{include file='header' sandbox=false}{/capture}`
			`{assign var='header' value='class="main"'\|str_replace:'class="main right"':$header}`
			`{assign var='header' value='<!-- CONTENT -->'\|str_replace:$sidebar:$header}`
			`{assign var='header' value='<section id="content" class="content">'\|str_replace:$sidebar:$header}`
			`{@$header}`
			`<aside class="sidebar">`
			`<div id="sidebar">`
			`<button title="{lang}wcf.chat.title{/lang}" value="{link controller="Chat"}{/link}">{lang}wcf.chat.title{/lang}</button>`
			`<button title="{lang}wcf.chat.protocol{/lang}" value="{link controller="Chat" action="Log"}{/link}">{lang}wcf.chat.protocol{/lang}</button>`
			`<h2>{lang}wcf.chat.users{/lang}</h2>`
			`<ul id="chatUserList">`
			`{section name=user start=1 loop=11}`
			`<li id="user-{$user}" class="chatUser">`
			`<span class="bgFix"><a class="chatUserLink" href="javascript:;">User {$user}</a></span>`
			`<ul class="chatUserMenu">`
			`<li>`
			`<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>`
			`</li>`
First try of redesign 2011-12-15 17:55:44 +00:00			`</ul>`
Made sidebar collapseable 2011-12-15 20:45:37 +00:00			`</li>`
			`{/section}`
			`</ul>`
			`<h2>{lang}wcf.chat.rooms{/lang}</h2>`
			`<nav class="sidebarMenu">`
First try of redesign 2011-12-15 17:55:44 +00:00			`<div>`
			`<ul>`
Made sidebar collapseable 2011-12-15 20:45:37 +00:00			`{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}`
First try of redesign 2011-12-15 17:55:44 +00:00			`</ul>`
			`</div>`
			`</nav>`
			`</div>`
			`</aside>`
			`<!-- CONTENT -->`
			`<section id="content" class="content">`

			`{include file='breadcrumbs' sandbox=false}`
			`<div id="chatRoomContent">`
			`<div id="topic" class="border"{if $room->topic\|language === ''} style="display: none;"{/if}>{$room->topic\|language}</div>`
			`<div class="chatMessageContainer border content">`
			`<ul></ul>`
			`</div>`
Completely reworked frontend 2011-12-11 22:29:43 +00:00
First try of redesign 2011-12-15 17:55:44 +00:00			`<form id="chatForm" action="{link controller="Chat" action="Send"}{/link}" method="post">`
			`<input type="text" id="chatInput" class="inputText long" name="text" autocomplete="off" required="required" placeholder="Submit with enter" />`
			`</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" />`
Cleanup our template 2011-12-13 16:22:54 +00:00			`</li>`
			`{/foreach}`
First try of redesign 2011-12-15 17:55:44 +00:00			`</ul>`
			`</div>`
			`<div id="chatOptions" class="border">`
			`<div class="smallButtons">`
Completely reworked frontend 2011-12-11 22:29:43 +00:00			`<ul>`
First try of redesign 2011-12-15 17:55:44 +00:00			`<li>`
			`<a id="chatAutoscrollButton" href="javascript:;">`
			`<img alt="" src="{icon}enabled1{/icon}" /> <span>Scroll</span>`
			`</a>`
			`</li>`
			`<li>`
			`<a href="javascript:;">`
			`<img alt="" src="{icon}disabled1{/icon}" /> <span>Notify</span>`
			`</a>`
			`</li>`
			`<li>`
			`<a href="javascript:;">`
			`<img alt="" src="{icon}delete1{/icon}" /> <span>Clear</span>`
			`</a>`
Completely reworked frontend 2011-12-11 22:29:43 +00:00			`</li>`
First try of redesign 2011-12-15 17:55:44 +00:00			`<li>`
			`<a href="javascript:;">`
			`<img alt="" src="{icon}check1{/icon}" /> <span>Mark</span>`
			`</a>`
			`</li>`
Completely reworked frontend 2011-12-11 22:29:43 +00:00			`</ul>`
			`</div>`
Worked on a static frontend for the chat. 2011-12-03 13:13:04 +00:00			`</div>`
First try of redesign 2011-12-15 17:55:44 +00:00			`</div>`
Worked on a static frontend for the chat. 2011-12-03 13:13:04 +00:00			`</div>`
Alert smiley-code on click. Will be replaced with inserting into input lateron. 2011-11-27 12:13:59 +00:00
			`<script type="text/javascript">`
			`//<![CDATA[`
Change Page-Title as well 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}');`
Adding chatMessage-Template 2011-12-04 22:12:12 +00:00			`{capture assign='chatMessageTemplate'}{include file='chatMessage'}{/capture}`
Wrap the time into <time> 2011-12-05 14:40:30 +00:00			`TimWolla.WCF.Chat.messageTemplate = new WCF.Template('{@$chatMessageTemplate\|encodeJS}');`
Initialize title template first 2011-12-04 21:50:17 +00:00			`TimWolla.WCF.Chat.init({$room->roomID}, 1);`
Optimizing use of chatMessage-Template. We can now insert messages via JS 2011-12-05 13:45:50 +00:00			`TimWolla.WCF.Chat.handleMessages([`
			`{implode from=$newestMessages item='message'}`
			`{@$message->jsonify()}`
			`{/implode}`
			`]);`
Alert smiley-code on click. Will be replaced with inserting into input lateron. 2011-11-27 12:13:59 +00:00			`//]]>`
			`</script>`
Adding chat.tpl It is a skeleton by now. 2011-11-26 14:30:56 +00:00
			`{include file='footer' sandbox=false}`
			`</body>`
			`</html>`