Bastelstube/Tims-Chat
1
0
Fork 0
mirror of https://github.com/wbbaddons/Tims-Chat.git synced 2024-10-31 14:10:08 +00:00
Code Issues Releases Wiki Activity

Use dropdown for usermenu, resort CSS, improve templates

Browse Source
This commit is contained in:
Tim Düsterhus 2012-10-19 22:26:12 +02:00
parent c23e35aa24
commit ca123d62b0
6 changed files with 286 additions and 321 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
file/js/be.bastelstu.WCF.Chat.coffee
View File

@ -369,6 +369,7 @@ window.console ?=
li.attr 'id', id li.attr 'id', id
li.addClass 'timsChatUser' li.addClass 'timsChatUser'
li.addClass 'jsTooltip' li.addClass 'jsTooltip'
li.addClass 'dropdown'
li.addClass 'you' if user.userID is WCF.User.userID li.addClass 'you' if user.userID is WCF.User.userID
li.addClass 'suspended' if user.suspended li.addClass 'suspended' if user.suspended
if user.awayStatus? if user.awayStatus?
@ -378,16 +379,15 @@ window.console ?=
a = $ '<a>' + WCF.String.escapeHTML(user.username) + '</a>' a = $ '<a>' + WCF.String.escapeHTML(user.username) + '</a>'
a.addClass 'userLink' a.addClass 'userLink'
a.addClass 'dropdownToggle'
a.data 'userID', user.userID a.data 'userID', user.userID
a.data 'toggle', id
a.click $.proxy (event) ->
event.preventDefault()
@toggleUserMenu $ event.target
, @
li.append a li.append a
menu = $ '<ul></ul>' menu = $ '<ul></ul>'
menu.addClass 'timsChatUserMenu' #menu.addClass 'timsChatUserMenu'
menu.addClass 'dropdownMenu'
menu.append $ '<li><a>' + WCF.Language.get('wcf.chat.query') + '</a></li>' menu.append $ '<li><a>' + WCF.Language.get('wcf.chat.query') + '</a></li>'
menu.append $ '<li><a>' + WCF.Language.get('wcf.chat.kick') + '</a></li>' menu.append $ '<li><a>' + WCF.Language.get('wcf.chat.kick') + '</a></li>'
menu.append $ '<li><a>' + WCF.Language.get('wcf.chat.ban') + '</a></li>' menu.append $ '<li><a>' + WCF.Language.get('wcf.chat.ban') + '</a></li>'
@ -549,20 +549,6 @@ window.console ?=
$('#timsChatUserList').hide() $('#timsChatUserList').hide()
$('#timsChatRoomList').show() $('#timsChatRoomList').show()
### ###
# Toggles the user-menu.
#
# @param jQuery-object target
###
toggleUserMenu: (target) ->
li = target.parent()
if li.hasClass 'activeMenuItem'
li.find('.timsChatUserMenu').wcfBlindOut 'vertical', () ->
li.removeClass 'activeMenuItem'
else
li.addClass 'activeMenuItem'
li.find('.timsChatUserMenu').wcfBlindIn 'vertical'
###
# Unloads the chat. # Unloads the chat.
### ###
unload: () -> unload: () ->

228
file/style/be.bastelstu.wcf.chat.less
View File

@ -10,10 +10,44 @@
#tplChat { #tplChat {
#content { #content {
position: relative; position: relative;
}
#timsChatRoomContent { #timsChatRoomContent {
text-align: left; text-align: left;
#timsChatTopic {
padding: 5px;
}
.timsChatMessageContainer {
height: 200px;
overflow-y: scroll;
overflow-x: hidden;
padding-left: 7px !important;
.timsChatMessage {
padding-left: 16px;
min-height: 16px;
clear: both;
time {
font-size: .8em;
&::before, &::after {
font-size: .8em;
}
&::before {
content: "[";
}
&::after {
content: "]";
}
}
&.unloaded {
opacity: 0.4;
}
}
}
}
} }
.sidebar { .sidebar {
@ -36,16 +70,21 @@
} }
} }
#timsChatTopic { #timsChatForm {
padding: 5px; white-space: nowrap;
margin-top: 10px;
// Fix to align chatInput in center
text-align: center;
#timsChatInput {
position: relative;
z-index: 10;
}
} }
.timsChatMessageContainer { #timsChatControls {
height: 200px; position: relative;
overflow-y: scroll; .borderRadius(5px, 5px, 0, 5px);
overflow-x: hidden;
padding-left: 7px !important;
}
#smilies { #smilies {
padding: 14px 21px 7px; padding: 14px 21px 7px;
@ -63,23 +102,6 @@
} }
} }
#timsChatForm {
white-space: nowrap;
margin-top: 10px;
// Fix to align chatInput in center
text-align: center;
}
#timsChatInput {
position: relative;
z-index: 10;
}
#timsChatControls {
position: relative;
.borderRadius(5px, 5px, 0, 5px);
}
#timsChatOptions { #timsChatOptions {
top: -1px; top: -1px;
right: 1px; right: 1px;
@ -117,69 +139,6 @@
} }
} }
} }
#timsChatUserList {
.timsChatUserMenu {
display: none;
background-color: rgba(0, 0, 0, 0.1);
margin-bottom: -5px;
padding: 1px 0 6px;
.boxShadowNative(0px 0px 5px 0px rgba(0, 0, 0, 0.1) inset);
border-bottom: 1px solid @wcfContentBackgroundColor;
color: rgba(0, 0, 0, 0.4);
> li {
a {
background-color: rgba(255, 255, 255, 0.22);
.textShadow(@wcfSidebarBackgroundColor + rgba(0, 0, 0, 0.1) + rgba(255, 255, 255, 0.22)) !important;
.borderRadius(5px, 0, 0, 5px);
margin-left: 35px;
padding: 1px 0 1px 15px;
color: @wcfColor;
}
}
}
.timsChatAway {
opacity: .5;
}
> li {
> a {
background-image: url("../icon/arrowRight.svg");
background-position: 15px center;
background-repeat: no-repeat;
}
&.activeMenuItem {
> a {
background-image: url("../icon/arrowDown.svg");
}
}
}
}
.timsChatMessage {
padding-left: 16px;
min-height: 16px;
clear: both;
time {
font-size: .8em;
&::before, &::after {
font-size: .8em;
}
&::before {
content: "[";
}
&::after {
content: "]";
}
}
&.unloaded {
opacity: 0.4;
}
} }
.ajaxLoad { .ajaxLoad {
@ -189,6 +148,21 @@
background-image: url("../icon/spinner.svg"); background-image: url("../icon/spinner.svg");
} }
#timsChatCopyright {
bottom: 5px;
position: absolute;
.textShadow(@wcfContentBackgroundColor);
}
#timsChatCopyrightDialog {
background-position: right 45px;
background-repeat: no-repeat;
min-height: 50%;
}
#sidebarContent {
padding-top: 0px;
.timsChatSidebarTabs { .timsChatSidebarTabs {
height: 34px; height: 34px;
z-index: 131; z-index: 131;
@ -232,9 +206,6 @@
color: @wcfColor; color: @wcfColor;
font-size: 130%; font-size: 130%;
font-weight: bold; font-weight: bold;
height: 23px;
padding: 7px 0 0;
} }
&:first-child.active a { &:first-child.active a {
@ -255,7 +226,7 @@
} }
} }
& .badge { .badge {
.badgeBG(@wcfSidebarBackgroundColor + rgba(0, 0, 0, 0.2)); .badgeBG(@wcfSidebarBackgroundColor + rgba(0, 0, 0, 0.2));
.badgeShadow(@wcfSidebarBackgroundColor + rgba(0, 0, 0, 0.2)); .badgeShadow(@wcfSidebarBackgroundColor + rgba(0, 0, 0, 0.2));
position: relative; position: relative;
@ -272,14 +243,6 @@
} }
} }
#timsChatRoomList {
margin-top: 5px;
> div > div {
margin-top: 10px;
}
}
#sidebarContainer { #sidebarContainer {
overflow-y: auto; overflow-y: auto;
height: 420px; height: 420px;
@ -287,29 +250,13 @@
border-top: 1px solid darken(@wcfSidebarBackgroundColor, 8%); border-top: 1px solid darken(@wcfSidebarBackgroundColor, 8%);
z-index: 131; z-index: 131;
position: relative; position: relative;
}
#sidebarContainer a { a {
outline: none; outline: none;
overflow: hidden; overflow: hidden;
} }
#timsChatCopyright { ul:not(.dropdownMenu) {
bottom: 5px;
position: absolute;
.textShadow(@wcfContentBackgroundColor);
}
#timsChatCopyrightDialog {
background-position: right 45px;
background-repeat: no-repeat;
min-height: 50%;
}
.sidebarContent {
padding-top: 0px;
> div {
ul {
> li { > li {
margin-top: 5px; margin-top: 5px;
background-color: transparent !important; background-color: transparent !important;
@ -319,14 +266,9 @@
background-color: fade(@wcfContentBackgroundColor, 33.33%); background-color: fade(@wcfContentBackgroundColor, 33.33%);
.textShadow(fade(@wcfContentBackgroundColor, 33.33%)); .textShadow(fade(@wcfContentBackgroundColor, 33.33%));
.transition(background-color, .2s); .transition(background-color, .2s);
&:hover {
background-color: @wcfContentBackgroundColor;
}
}
} }
> li.activeMenuItem { &.activeMenuItem, &.dropdownOpen, &:hover {
> a { > a {
background-color: @wcfContentBackgroundColor !important; background-color: @wcfContentBackgroundColor !important;
.boxShadowNative(0 0 5px rgba(0, 0, 0, 0.1)); .boxShadowNative(0 0 5px rgba(0, 0, 0, 0.1));
@ -334,6 +276,42 @@
} }
} }
} }
#timsChatRoomList {
margin-top: 5px;
> div {
> div {
text-align: center;
margin-top: 10px;
}
}
}
#timsChatUserList {
.timsChatUserMenu {
display: none;
background-color: rgba(0, 0, 0, 0.1);
border-bottom: 1px solid @wcfContentBackgroundColor;
color: rgba(0, 0, 0, 0.4);
> li {
a {
background-color: rgba(255, 255, 255, 0.22);
.textShadow(@wcfSidebarBackgroundColor + rgba(0, 0, 0, 0.1) + rgba(255, 255, 255, 0.22)) !important;
.borderRadius(5px, 0, 0, 5px);
margin-left: 35px;
padding: 1px 0 1px 15px;
color: @wcfColor;
}
}
}
.timsChatAway {
opacity: .5;
}
}
}
} }
.badgeBG(@backgroundColor) when (lightness(@backgroundColor) < 50%) { .badgeBG(@backgroundColor) when (lightness(@backgroundColor) < 50%) {

12
template/chat.tpl
View File

@ -86,32 +86,32 @@
<nav id="timsChatOptions"> <nav id="timsChatOptions">
<ul class="smallButtons"> <ul class="smallButtons">
<li> <li>
<a id="timsChatAutoscroll" accesskey="d" 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"> <a id="timsChatAutoscroll" accesskey="d" 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'}enabled{/icon}" /> <span>{lang}wcf.chat.scroll{/lang}</span> <img alt="" src="{icon size='S'}enabled{/icon}" /> <span>{lang}wcf.chat.scroll{/lang}</span>
</a> </a>
</li> </li>
<li> <li>
<a id="timsChatFullscreen" accesskey="f" 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="0"> <a id="timsChatFullscreen" accesskey="f" 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="0">
<img alt="" src="{icon size='S'}disabled{/icon}" /> <span>{lang}wcf.chat.fullscreen{/lang}</span> <img alt="" src="{icon size='S'}disabled{/icon}" /> <span>{lang}wcf.chat.fullscreen{/lang}</span>
</a> </a>
</li> </li>
<li> <li>
<a id="timsChatNotify" accesskey="n" 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"> <a id="timsChatNotify" accesskey="n" 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'}disabled{/icon}" /> <span>{lang}wcf.chat.notify{/lang}</span> <img alt="" src="{icon size='S'}disabled{/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" accesskey="e" href="javascript:;" class="timsChatToggle jsTooltip button" title="{lang}wcf.global.button.{if ENABLE_SMILIES_DEFAULT_VALUE}dis{else}en{/if}able{/lang}" data-disable-message="{lang}wcf.global.button.disable{/lang}" data-enable-message="{lang}wcf.global.button.enable{/lang}" data-status="{@ENABLE_SMILIES_DEFAULT_VALUE}"> <a id="timsChatSmilies" accesskey="e" class="timsChatToggle jsTooltip button" title="{lang}wcf.global.button.{if ENABLE_SMILIES_DEFAULT_VALUE}dis{else}en{/if}able{/lang}" data-disable-message="{lang}wcf.global.button.disable{/lang}" data-enable-message="{lang}wcf.global.button.enable{/lang}" data-status="{@ENABLE_SMILIES_DEFAULT_VALUE}">
<img alt="" src="{icon size='S'}{if ENABLE_SMILIES_DEFAULT_VALUE}en{else}dis{/if}abled{/icon}" /> <span>{lang}wcf.chat.smilies{/lang}</span> <img alt="" src="{icon size='S'}{if ENABLE_SMILIES_DEFAULT_VALUE}en{else}dis{/if}abled{/icon}" /> <span>{lang}wcf.chat.smilies{/lang}</span>
</a> </a>
</li> </li>
<li> <li>
<a id="timsChatClear" href="javascript:;" class="jsTooltip button" title="{lang}wcf.chat.clear.description{/lang}"> <a id="timsChatClear" class="jsTooltip button" title="{lang}wcf.chat.clear.description{/lang}">
<img alt="" src="{icon size='S'}delete{/icon}" /> <span>{lang}wcf.chat.clear{/lang}</span> <img alt="" src="{icon size='S'}delete{/icon}" /> <span>{lang}wcf.chat.clear{/lang}</span>
</a> </a>
</li> </li>
<li> <li>
<a id="timsChatMark" href="javascript:;" class="jsTooltip button" title="{lang}wcf.chat.mark.description{/lang}"> <a id="timsChatMark" class="jsTooltip button" title="{lang}wcf.chat.mark.description{/lang}">
<img alt="" src="{icon size='S'}check{/icon}" /> <span>{lang}wcf.chat.mark{/lang}</span> <img alt="" src="{icon size='S'}check{/icon}" /> <span>{lang}wcf.chat.mark{/lang}</span>
</a> </a>
</li> </li>

1
template/chatJavascriptInclude.tpl
View File

@ -1,3 +1,4 @@
<script type="text/javascript" src="{@$__wcf->getPath('wcf')}js/be.bastelstu.WCF.Chat.js{if $chatVersion|isset}?version={$chatVersion|urlencode}{/if}"></script> <script type="text/javascript" src="{@$__wcf->getPath('wcf')}js/be.bastelstu.WCF.Chat.js{if $chatVersion|isset}?version={$chatVersion|urlencode}{/if}"></script>
<script type="text/javascript" src="{@$__wcf->getPath('wcf')}js/jCounter.jQuery.js"></script> <script type="text/javascript" src="{@$__wcf->getPath('wcf')}js/jCounter.jQuery.js"></script>
{if CHAT_SOCKET_IO_PATH}<script type="text/javascript" src="{CHAT_SOCKET_IO_PATH}/socket.io/socket.io.js"></script>{/if} {if CHAT_SOCKET_IO_PATH}<script type="text/javascript" src="{CHAT_SOCKET_IO_PATH}/socket.io/socket.io.js"></script>{/if}
{event name='javascript'}

6
template/chatSidebar.tpl
View File

@ -1,8 +1,8 @@
<div id="sidebarContent" class="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="badge">0</span></a></li> <li id="toggleUsers" class="active"><a 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="badge">{#$rooms|count}</span></a></li> <li id="toggleRooms"><a 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>
@ -20,7 +20,7 @@
{/if} {/if}
{/foreach} {/foreach}
</ul> </ul>
<div style="text-align: center;"><button type="button">{lang}wcf.chat.forceRefresh{/lang}</button></div> <div><button type="button">{lang}wcf.chat.forceRefresh{/lang}</button></div>
</div> </div>
</nav> </nav>
</div> </div>