Bastelstube/Tims-Chat
1
0
Fork 0
mirror of https://github.com/wbbaddons/Tims-Chat.git synced 2024-12-22 21:40:08 +00:00
Code Issues Releases Wiki Activity

Fixed frontend (still some tiny quirks remaining, but they aren' important for now)

Browse Source
This commit is contained in:
max-m 2012-04-15 00:21:33 +02:00
parent 6de5e5a6da
commit c3c1cf414a
3 changed files with 61 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
file/style/be.bastelstu.wcf.chat.scss
View File

@ -7,11 +7,15 @@
* @package be.bastelstu.wcf.chat * @package be.bastelstu.wcf.chat
*/ */
#content {
position: relative;
}
#timsChatRoomContent { #timsChatRoomContent {
text-align: left; text-align: left;
} }
.wcf-sidebar { .sidebar {
margin-bottom: -20px !important; margin-bottom: -20px !important;
overflow: auto; overflow: auto;
padding: 0; padding: 0;
@ -62,9 +66,45 @@ #timsChatInput {
z-index: 10; z-index: 10;
} }
#timsChatControls {
position: relative;
border-radius: 5px 5px 0 5px;
}
#timsChatOptions { #timsChatOptions {
bottom: -29px;
margin-left: 0;
position: absolute;
width: 100%;
> ul { > ul {
margin-right: -1px;
text-align: right; text-align: right;
> li {
> a {
&.button {
border-radius: 0 0 0 0;
margin: 0;
padding-right: 7px;
}
}
display: inline-block;
margin-left: -5px;
}
> li:first-child {
> a {
border-bottom-left-radius: 14px;
}
}
> li:last-child {
> a {
border-bottom-right-radius: 14px;
}
}
} }
} }
@ -184,7 +224,7 @@ .timsChatSidebarTabs {
} }
} }
&.active .wcf-badge { &.active .badge {
font-size: 65% !important; font-size: 65% !important;
color: #fff; color: #fff;
background-color: #369; background-color: #369;
@ -220,6 +260,7 @@ #timsChatCopyright {
} }
.sidebarContent { .sidebarContent {
padding-top: 0px;
> div { > div {
ul { ul {
> li { > li {
@ -227,13 +268,7 @@ .sidebarContent {
background-color: transparent !important; background-color: transparent !important;
box-shadow: none !important; box-shadow: none !important;
} }
}
}
}
.sidebarContent {
> div {
ul {
> li.activeMenuItem { > li.activeMenuItem {
> a { > a {
background-color: #FFFFFF; background-color: #FFFFFF;
@ -242,4 +277,4 @@ .sidebarContent {
} }
} }
} }
} }

24
template/chat.tpl
View File

@ -49,10 +49,10 @@
{include file='header' sandbox=false sidebarOrientation='right'} {include file='header' sandbox=false sidebarOrientation='right'}
<div id="timsChatRoomContent"> <div id="timsChatRoomContent">
<div id="timsChatTopic" class="wcf-box wcf-marginBottom"{if $room->topic|language === ''} style="display: none;"{/if}>{$room->topic|language}</div> <div id="timsChatTopic" class="container box16"{if $room->topic|language === ''} style="display: none;"{/if}>{$room->topic|language}</div>
<div class="timsChatMessageContainer wcf-box wcf-shadow1 wcf-boxPadding"> <div class="timsChatMessageContainer container box shadow1 containerPadding marginTop">
<ul> <ul>
<noscript><li class="wcf-error">{lang}wcf.chat.noJs{/lang}</li></noscript> <noscript><li class="error">{lang}wcf.chat.noJs{/lang}</li></noscript>
</ul> </ul>
</div> </div>
@ -60,7 +60,7 @@
<input type="text" id="timsChatInput" class="inputText long" name="text" autocomplete="off" maxlength="{@CHAT_MAX_LENGTH}" disabled="disabled" required="required" placeholder="{lang}wcf.chat.submit.default{/lang}" /> <input type="text" id="timsChatInput" class="inputText long" name="text" autocomplete="off" maxlength="{@CHAT_MAX_LENGTH}" disabled="disabled" required="required" placeholder="{lang}wcf.chat.submit.default{/lang}" />
</form> </form>
<div id="timsChatControls" class="wcf-box wcf-marginTop"> <div id="timsChatControls" class="box24 marginTop container">
{if MODULE_SMILEY} {if MODULE_SMILEY}
<div id="smileyList"> <div id="smileyList">
<ul class="smilies"> <ul class="smilies">
@ -73,36 +73,36 @@
</div> </div>
{/if} {/if}
<nav id="timsChatOptions"> <nav id="timsChatOptions">
<ul class="wcf-smallButtons"> <ul class="smallButtons">
<li> <li>
<a id="timsChatAutoscroll" href="javascript:;" class="timsChatToggle jsTooltip wcf-button" title="{lang}wcf.global.button.disable{/lang}" data-disable-message="{lang}wcf.global.button.disable{/lang}" data-enable-message="{lang}wcf.global.button.enable{/lang}" data-status="1"> <a id="timsChatAutoscroll" href="javascript:;" class="timsChatToggle jsTooltip button" title="{lang}wcf.global.button.disable{/lang}" data-disable-message="{lang}wcf.global.button.disable{/lang}" data-enable-message="{lang}wcf.global.button.enable{/lang}" data-status="1">
<img alt="" src="{icon size='S'}enabled1{/icon}" /> <span>{lang}wcf.chat.scroll{/lang}</span> <img alt="" src="{icon size='S'}enabled1{/icon}" /> <span>{lang}wcf.chat.scroll{/lang}</span>
</a> </a>
</li> </li>
<li> <li>
<a id="timsChatNotify" href="javascript:;" class="timsChatToggle jsTooltip wcf-button" title="{lang}wcf.global.button.enable{/lang}" data-disable-message="{lang}wcf.global.button.disable{/lang}" data-enable-message="{lang}wcf.global.button.enable{/lang}" data-status="0"> <a id="timsChatNotify" href="javascript:;" class="timsChatToggle jsTooltip button" title="{lang}wcf.global.button.enable{/lang}" data-disable-message="{lang}wcf.global.button.disable{/lang}" data-enable-message="{lang}wcf.global.button.enable{/lang}" data-status="0">
<img alt="" src="{icon size='S'}disabled1{/icon}" /> <span>{lang}wcf.chat.notify{/lang}</span> <img alt="" src="{icon size='S'}disabled1{/icon}" /> <span>{lang}wcf.chat.notify{/lang}</span>
</a> </a>
</li> </li>
<li{if !MODULE_SMILEY} style="display: none;"{/if}> <li{if !MODULE_SMILEY} style="display: none;"{/if}>
<a id="timsChatSmilies" href="javascript:;" class="timsChatToggle jsTooltip wcf-button" title="{lang}wcf.global.button.disable{/lang}" data-disable-message="{lang}wcf.global.button.disable{/lang}" data-enable-message="{lang}wcf.global.button.enable{/lang}" data-status="1"> <a id="timsChatSmilies" href="javascript:;" class="timsChatToggle jsTooltip button" title="{lang}wcf.global.button.disable{/lang}" data-disable-message="{lang}wcf.global.button.disable{/lang}" data-enable-message="{lang}wcf.global.button.enable{/lang}" data-status="1">
<img alt="" src="{icon size='S'}enabled1{/icon}" /> <span>{lang}wcf.chat.smilies{/lang}</span> <img alt="" src="{icon size='S'}enabled1{/icon}" /> <span>{lang}wcf.chat.smilies{/lang}</span>
</a> </a>
</li> </li>
<li> <li>
<a id="timsChatClear" href="javascript:;" class="jsTooltip wcf-button" title="{lang}wcf.chat.clear.description{/lang}"> <a id="timsChatClear" href="javascript:;" class="jsTooltip button" title="{lang}wcf.chat.clear.description{/lang}">
<img alt="" src="{icon size='S'}delete1{/icon}" /> <span>{lang}wcf.chat.clear{/lang}</span> <img alt="" src="{icon size='S'}delete1{/icon}" /> <span>{lang}wcf.chat.clear{/lang}</span>
</a> </a>
</li> </li>
<li> <li>
<a id="timsChatMark" href="javascript:;" class="jsTooltip wcf-button" title="{lang}wcf.chat.mark.description{/lang}"> <a id="timsChatMark" href="javascript:;" class="jsTooltip button" title="{lang}wcf.chat.mark.description{/lang}">
<img alt="" src="{icon size='S'}check1{/icon}" /> <span>{lang}wcf.chat.mark{/lang}</span> <img alt="" src="{icon size='S'}check1{/icon}" /> <span>{lang}wcf.chat.mark{/lang}</span>
</a> </a>
</li> </li>
</ul> </ul>
</nav> </nav>
{include file='chatCopyright'}
</div> </div>
{include file='chatCopyright'}
</div> </div>
{include file='chatJavascriptInclude'} {include file='chatJavascriptInclude'}
<script type="text/javascript"> <script type="text/javascript">
@ -142,7 +142,7 @@
// enable user-interface // enable user-interface
$('#timsChatInput').enable().jCounter().focus(); $('#timsChatInput').enable().jCounter().focus();
$('#timsChatControls .copyright').click(function (event) { $('#timsChatCopyright').click(function (event) {
event.preventDefault(); event.preventDefault();
if ($.wcfIsset('timsChatCopyrightDialog')) return WCF.showDialog('timsChatCopyrightDialog', { title: 'Tims Chat{if CHAT_SHOW_VERSION} {$chatVersion}{/if}' }); if ($.wcfIsset('timsChatCopyrightDialog')) return WCF.showDialog('timsChatCopyrightDialog', { title: 'Tims Chat{if CHAT_SHOW_VERSION} {$chatVersion}{/if}' });
var container = $('<div id="timsChatCopyrightDialog"></div>'); var container = $('<div id="timsChatCopyrightDialog"></div>');

8
template/chatSidebar.tpl
View File

@ -1,15 +1,15 @@
<div id="sidebarContent" class="wcf-sidebarContent"> <div id="sidebarContent" class="sidebarContent">
<nav class="timsChatSidebarTabs"> <nav class="timsChatSidebarTabs">
<ul> <ul>
<li id="toggleUsers" class="active"><a href="javascript:;" title="{lang}wcf.chat.users{/lang}">{lang}wcf.chat.users{/lang} <span class="wcf-badge">0</span></a></li> <li id="toggleUsers" class="active"><a href="javascript:;" title="{lang}wcf.chat.users{/lang}">{lang}wcf.chat.users{/lang} <span class="badge">0</span></a></li>
<li id="toggleRooms"><a href="javascript:;" title="{lang}wcf.chat.rooms{/lang}" data-refresh-url="{link controller="Chat" action="RefreshRoomList"}{/link}">{lang}wcf.chat.rooms{/lang} <span class="wcf-badge">{#$rooms|count}</span></a></li> <li id="toggleRooms"><a href="javascript:;" title="{lang}wcf.chat.rooms{/lang}" data-refresh-url="{link controller="Chat" action="RefreshRoomList"}{/link}">{lang}wcf.chat.rooms{/lang} <span class="badge">{#$rooms|count}</span></a></li>
</ul> </ul>
</nav> </nav>
<div id="sidebarContainer"> <div id="sidebarContainer">
<ul id="timsChatUserList"> <ul id="timsChatUserList">
</ul> </ul>
<nav id="timsChatRoomList" class="wcf-sidebarMenu" style="display: none;"> <nav id="timsChatRoomList" class="sidebarMenu" style="display: none;">
<div> <div>
<ul> <ul>
{foreach from=$rooms item='roomListRoom'} {foreach from=$rooms item='roomListRoom'}