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.addClass 'timsChatUser'
li.addClass 'jsTooltip'
li.addClass 'dropdown'
li.addClass 'you' if user.userID is WCF.User.userID
li.addClass 'suspended' if user.suspended
if user.awayStatus?
@ -378,16 +379,15 @@ window.console ?=
a = $ '<a>' + WCF.String.escapeHTML(user.username) + '</a>'
a.addClass 'userLink'
a.addClass 'dropdownToggle'
a.data 'userID', user.userID
a.data 'toggle', id
a.click $.proxy (event) ->
event.preventDefault()
@toggleUserMenu $ event.target
, @
li.append a
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.kick') + '</a></li>'
menu.append $ '<li><a>' + WCF.Language.get('wcf.chat.ban') + '</a></li>'
@ -549,20 +549,6 @@ window.console ?=
$('#timsChatUserList').hide()
$('#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.
###
unload: () ->

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

@ -10,10 +10,44 @@
#tplChat {
#content {
position: relative;
}
#timsChatRoomContent {
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 {
@ -36,16 +70,21 @@
}
}
#timsChatTopic {
padding: 5px;
#timsChatForm {
white-space: nowrap;
margin-top: 10px;
// Fix to align chatInput in center
text-align: center;
#timsChatInput {
position: relative;
z-index: 10;
}
}
.timsChatMessageContainer {
height: 200px;
overflow-y: scroll;
overflow-x: hidden;
padding-left: 7px !important;
}
#timsChatControls {
position: relative;
.borderRadius(5px, 5px, 0, 5px);
#smilies {
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 {
top: -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 {
@ -189,6 +148,21 @@
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 {
height: 34px;
z-index: 131;
@ -232,9 +206,6 @@
color: @wcfColor;
font-size: 130%;
font-weight: bold;
height: 23px;
padding: 7px 0 0;
}
&:first-child.active a {
@ -255,7 +226,7 @@
}
}
& .badge {
.badge {
.badgeBG(@wcfSidebarBackgroundColor + rgba(0, 0, 0, 0.2));
.badgeShadow(@wcfSidebarBackgroundColor + rgba(0, 0, 0, 0.2));
position: relative;
@ -272,14 +243,6 @@
}
}
#timsChatRoomList {
margin-top: 5px;
> div > div {
margin-top: 10px;
}
}
#sidebarContainer {
overflow-y: auto;
height: 420px;
@ -287,29 +250,13 @@
border-top: 1px solid darken(@wcfSidebarBackgroundColor, 8%);
z-index: 131;
position: relative;
}
#sidebarContainer a {
a {
outline: none;
overflow: hidden;
}
#timsChatCopyright {
bottom: 5px;
position: absolute;
.textShadow(@wcfContentBackgroundColor);
}
#timsChatCopyrightDialog {
background-position: right 45px;
background-repeat: no-repeat;
min-height: 50%;
}
.sidebarContent {
padding-top: 0px;
> div {
ul {
ul:not(.dropdownMenu) {
> li {
margin-top: 5px;
background-color: transparent !important;
@ -319,14 +266,9 @@
background-color: fade(@wcfContentBackgroundColor, 33.33%);
.textShadow(fade(@wcfContentBackgroundColor, 33.33%));
.transition(background-color, .2s);
&:hover {
background-color: @wcfContentBackgroundColor;
}
}
}
> li.activeMenuItem {
&.activeMenuItem, &.dropdownOpen, &:hover {
> a {
background-color: @wcfContentBackgroundColor !important;
.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%) {

12
template/chat.tpl
View File

@ -86,32 +86,32 @@
<nav id="timsChatOptions">
<ul class="smallButtons">
<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>
</a>
</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>
</a>
</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>
</a>
</li>
<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>
</a>
</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>
</a>
</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>
</a>
</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/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}
{event name='javascript'}

6
template/chatSidebar.tpl
View File

@ -1,8 +1,8 @@
<div id="sidebarContent" class="sidebarContent">
<nav class="timsChatSidebarTabs">
<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="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="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 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>
</nav>
@ -20,7 +20,7 @@
{/if}
{/foreach}
</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>
</nav>
</div>