mirror of
https://github.com/wbbaddons/Tims-Chat.git
synced 2024-12-22 21:40:08 +00:00
Completely reworked frontend
This commit is contained in:
max-m
parent
9e08160a18
commit
29174e5afc
@ -16,12 +16,20 @@ if (typeof TimWolla.WCF == 'undefined') TimWolla.WCF = {};
|
||||
messageTemplate: null,
|
||||
init: function(roomID, messageID) {
|
||||
this.bindEvents();
|
||||
$('#chatBox').css('background-color', $('div.main').css('background-color'));
|
||||
$('#chatRoomContent').width($('#chatBox').width() - 400);
|
||||
},
|
||||
bindEvents: function () {
|
||||
$('.smiley').click($.proxy(function (event) {
|
||||
this.insertText($(event.target).attr('alt'));
|
||||
}, this));
|
||||
|
||||
var chatRoomContent = $('#chatRoomContent');
|
||||
var chatBox = $('#chatBox');
|
||||
$(window).resize(function() {
|
||||
chatRoomContent.width(chatBox.width() - 400);
|
||||
});
|
||||
|
||||
// $(window).bind('beforeunload', function() {
|
||||
// return false;
|
||||
// });
|
||||
@ -52,14 +60,8 @@ if (typeof TimWolla.WCF == 'undefined') TimWolla.WCF = {};
|
||||
type: 'POST',
|
||||
success: $.proxy(function (data, textStatus, jqXHR) {
|
||||
this.loading = false;
|
||||
target.css({
|
||||
'float' : 'none',
|
||||
'padding' : '5px 25px 7px 35px',
|
||||
'width' : '',
|
||||
'overflow' : 'visible'
|
||||
})
|
||||
.siblings('.ajaxLoad')
|
||||
.remove();
|
||||
|
||||
target.parent().removeClass('ajaxLoad');
|
||||
|
||||
// mark as active;
|
||||
$('.activeMenuItem .chatRoom').parent().removeClass('activeMenuItem');
|
||||
@ -94,15 +96,7 @@ if (typeof TimWolla.WCF == 'undefined') TimWolla.WCF = {};
|
||||
|
||||
this.loading = true;
|
||||
|
||||
target.css({
|
||||
'width' : target.width() - 19,
|
||||
'float' : 'left',
|
||||
'padding' : '5px 0 7px 35px',
|
||||
'overflow': 'hidden'
|
||||
})
|
||||
.parent()
|
||||
.append('<img class="ajaxLoad" src="' + WCF.Icon.get('wcf.icon.loading') + '" alt="" />')
|
||||
.css({'marginTop' : function (index) {return (target.parent().height() / 2) - ($(this).height() / 2);}});
|
||||
target.parent().addClass('ajaxLoad');
|
||||
}, this)
|
||||
});
|
||||
},
|
||||
@ -112,20 +106,21 @@ if (typeof TimWolla.WCF == 'undefined') TimWolla.WCF = {};
|
||||
output = this.messageTemplate.fetch(message);
|
||||
|
||||
li = $('<li></li>');
|
||||
li.addClass('chatMessage'+message.type);
|
||||
li.addClass('chatMessage chatMessage'+message.type);
|
||||
if (message.sender == WCF.User.userID) li.addClass('ownMessage');
|
||||
li.append(output);
|
||||
|
||||
$('.chatMessage ul').append(li);
|
||||
$('.chatMessageConainer ul').append(li);
|
||||
}
|
||||
$('.chatMessage').animate({scrollTop: $('.chatMessage ul').height()}, 10000);
|
||||
$('.chatMessageConainer').animate({scrollTop: $('.chatMessageConainer ul').height()}, 10000);
|
||||
},
|
||||
insertText: function (text) {
|
||||
// TODO: Add options here
|
||||
$('#chatInput').val(text);
|
||||
var input = $('#chatInput');
|
||||
input.val(input.val() + ' ' + text + ' ');
|
||||
},
|
||||
toggleUserMenu: function (target) {
|
||||
liUserID = '#' + target.parent().attr('id');
|
||||
liUserID = '#' + target.parent().parent().attr('id');
|
||||
if ($(liUserID).hasClass('activeMenuItem')) {
|
||||
$(liUserID + ' .chatUserMenu').wcfBlindOut('vertical', function () {
|
||||
$(liUserID).removeClass('activeMenuItem');
|
||||
|
||||
@ -66,7 +66,7 @@ public function __toString() {
|
||||
* @see \wcf\system\request\IRouteController
|
||||
*/
|
||||
public function getTitle() {
|
||||
return WCF::getLanguage()->get($this->title);
|
||||
return \wcf\system\WCF::getLanguage()->get($this->title);
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
@ -6,72 +6,141 @@
|
||||
{include file='headInclude' sandbox=false}
|
||||
|
||||
<style type="text/css">
|
||||
#chatbox {
|
||||
#chatBox {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.table {
|
||||
display: table;
|
||||
table-layout: fixed;
|
||||
width: 100%;
|
||||
#chatBox > div {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.table > div {
|
||||
display: table-row;
|
||||
#chatBox aside, #chatRoomContent {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.first {
|
||||
width: 15%;
|
||||
background-color: #D8E7F5;
|
||||
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1) inset;
|
||||
#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);
|
||||
}
|
||||
|
||||
.second {
|
||||
width: 70%;
|
||||
.chatSidebar.left {
|
||||
float: left;
|
||||
margin-left: -1px;
|
||||
}
|
||||
|
||||
.third {
|
||||
width: 15%;
|
||||
background-color: #D8E7F5;
|
||||
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1) inset;
|
||||
.chatSidebar.right {
|
||||
float: right;
|
||||
margin-right: -1px;
|
||||
}
|
||||
|
||||
.column {
|
||||
display: table-cell;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
.chatSidebar {
|
||||
overflow: auto;
|
||||
padding: 0 1px 0 0;
|
||||
width: 190px;
|
||||
}
|
||||
|
||||
.second.column > div {
|
||||
padding: 0px 15px 25px;
|
||||
#chatRoomContent:after {
|
||||
clear: both;
|
||||
height: 0;
|
||||
content: "";
|
||||
display: block;
|
||||
}
|
||||
|
||||
#topic, #smileyList {
|
||||
.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;
|
||||
}
|
||||
|
||||
.chatSidebar ul li a {
|
||||
color: #6699CC;
|
||||
display: block;
|
||||
padding: 5px 25px 7px 35px;
|
||||
text-shadow: 0 1px 0 #FFFFFF;
|
||||
}
|
||||
|
||||
.chatSidebar ul li.activeMenuItem a {
|
||||
color: #336699;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
#topic, #smileyList, #chatOptions {
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.smilies li {
|
||||
.chatMessageConainer {
|
||||
min-height: 200px;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
#smileyList .smilies li, .smallButtons li {
|
||||
display: inline;
|
||||
margin-right: 5px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
/*
|
||||
.tabMenu {
|
||||
padding: 0 15px;
|
||||
text-align: left;
|
||||
#chatForm {
|
||||
margin-top: 15px;
|
||||
white-space: nowrap;
|
||||
margin-right: 34px;
|
||||
margin-top: 10px;
|
||||
height: 28px;
|
||||
}
|
||||
*/
|
||||
|
||||
.chatMessage {
|
||||
height: 200px;
|
||||
overflow-y: scroll;
|
||||
#chatForm .inputImage {
|
||||
height: 100%;
|
||||
margin-bottom: -8px;
|
||||
}
|
||||
|
||||
#chatOptions {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#chatUserList > ul > li > .bgFix a {
|
||||
background-image: url("wcf/icon/arrowRight.svg");
|
||||
background-position: 15px center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 16px auto;
|
||||
}
|
||||
|
||||
#chatUserList > ul > li.activeMenuItem > .bgFix a {
|
||||
background-image: url("wcf/icon/arrowDown.svg");
|
||||
}
|
||||
|
||||
.chatSidebar .chatUserMenu li a {
|
||||
margin-left: 30px !important;
|
||||
}
|
||||
|
||||
.chatUserMenu {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#chatUserList > ul li a {
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
.chatMessage time, .chatMessage time::before, .chatMessage time::after {
|
||||
font-size: .8em;
|
||||
}
|
||||
|
||||
.chatMessage time::before {
|
||||
content: "[";
|
||||
}
|
||||
@ -84,92 +153,14 @@
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/*
|
||||
.chatSidebar > div h1.activeMenuItem {
|
||||
background-image: url("wcf/icon/arrowDown.svg");
|
||||
}
|
||||
*/
|
||||
|
||||
.chatSidebar > div h2 {
|
||||
font-size: 130%;
|
||||
padding: 7px 25px 7px 35px;
|
||||
}
|
||||
|
||||
.chatSidebar > div h2 {
|
||||
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;
|
||||
}
|
||||
|
||||
.chatUserMenu {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#chatUserList .sidebarMenuGroup > ul li a {
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
/*
|
||||
.chatUser.activeMenuItem {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
*/
|
||||
|
||||
.ajaxLoad {
|
||||
margin-right: 2px;
|
||||
float: right;
|
||||
background-position: right center;
|
||||
background-repeat: no-repeat;
|
||||
background-image: url({icon}spinner1{/icon});
|
||||
}
|
||||
|
||||
.bgFix {
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
@ -184,53 +175,58 @@
|
||||
</hgroup>
|
||||
</header>
|
||||
|
||||
<div class="tabMenuContainer" data-active="chatBox" data-store="activeTabMenuItem">
|
||||
<nav class="tabMenu">
|
||||
<ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
|
||||
<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>
|
||||
<li class="ui-state-default ui-corner-top ui-tabs-selected"><a title="{lang}wcf.chat.protocol{/lang}" href="{link controller="Chat" isRaw="true"}Log{/link}">{lang}wcf.chat.protocol{/lang}</a></li>
|
||||
<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>
|
||||
<div id="chatbox" class="border tabMenuContent ui-tabs-panel ui-widget-content ui-corner-bottom">
|
||||
<div class="table">
|
||||
|
||||
<section id="chatBox" class="border tabMenuContent hidden" data-menu-item="chatBox">
|
||||
<div>
|
||||
<div class="first column">
|
||||
<div class="chatSidebar left">
|
||||
<div id="chatChannelList">
|
||||
<h2 class="menuHeader activeMenuItem">{lang}wcf.chat.rooms{/lang}</h1>
|
||||
<div class="sidebarMenuGroup">
|
||||
<aside id="chatRoomList" class="chatSidebar left">
|
||||
<div>
|
||||
<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->getTitle()}</a>
|
||||
<a id="room-{$roomListRoom->roomID}" href="{link controller='Chat' object=$roomListRoom}{/link}" class="chatRoom">{$roomListRoom->getTitle()}</a>
|
||||
</li>
|
||||
{/foreach}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="second column">
|
||||
<div>
|
||||
|
||||
<div class="border" id="topic"{if !$room->topic|language} style="display: none;"{/if}>
|
||||
{$room->topic|language}
|
||||
</div>
|
||||
<div class="chatMessage border content">
|
||||
</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">
|
||||
<span class="bgFix"><a class="chatUserLink" href="javascript:void(0)">User {$user}</a></span>
|
||||
<ul class="chatUserMenu">
|
||||
<li>
|
||||
<a href="javascript:void(0)">Query</a>
|
||||
<a href="javascript:void(0)">Kick</a>
|
||||
<a href="javascript:void(0)">Ban</a>
|
||||
<a href="{link controller="User" id=$user}{/link}">Profil</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
{/section}
|
||||
</ul>
|
||||
</aside>
|
||||
<div id="chatRoomContent">
|
||||
<div id="topic" class="border">Dieser Raum ist zum Testen da.</div>
|
||||
<div class="chatMessageConainer border content">
|
||||
<ul></ul>
|
||||
</div>
|
||||
<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" placeholder="Insert message here…" />
|
||||
</div>
|
||||
<div class="column" style="width: 5%; text-align: center;">
|
||||
<input type="image" class="inputImage" alt="Absenden" src="{icon size=M}toRight1{/icon}" style="height: 100%; margin-left: 5px;" />
|
||||
</div>
|
||||
</div>
|
||||
</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'}
|
||||
@ -240,34 +236,36 @@
|
||||
{/foreach}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="third column">
|
||||
<div class="chatSidebar right">
|
||||
<div id="chatUserList">
|
||||
<h2 class="menuHeader activeMenuItem">User</h1>
|
||||
<div class="sidebarMenuGroup">
|
||||
<div id="chatOptions" class="border">
|
||||
<div class="smallButtons">
|
||||
<ul>
|
||||
{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">
|
||||
<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>
|
||||
<a id="chatAutoscrollButton" href="javascript: void(0);">
|
||||
<img alt="" src="{icon}enabled1{/icon}"> <span>Scrollen</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="javascript: void(0);">
|
||||
<img alt="" src="{icon}disabled1{/icon}"> <span>Benachrichtigen</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="javascript: void(0)">
|
||||
<img alt="" src="{icon}delete1{/icon}"> <span>Chat leeren</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="javascript: void(0)">
|
||||
<img alt="" src="{icon}check1{/icon}"> <span>Markieren</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
{/section}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user