mirror of
https://github.com/wbbaddons/Tims-Chat.git
synced 2024-12-30 22:50:08 +00:00
Overhaul UI
TODO: Sidebar overhaul/y-scroll
This commit is contained in:
max-m
parent
ee1114935a
commit
b14b1e8c57
@ -145,7 +145,7 @@ Mark chat as `@isActive` and reset `document.title` to default title, thus remov
|
||||
|
||||
$(window).focus =>
|
||||
document.title = @titleTemplate.fetch
|
||||
title: $('#timsChatRoomList .activeMenuItem a').text()
|
||||
title: $('#timsChatRoomList .active a').text()
|
||||
@newMessageCount = 0
|
||||
@isActive = true
|
||||
|
||||
@ -165,14 +165,6 @@ Inserts a smiley into the input.
|
||||
$('#smilies').on 'click', 'img', (event) =>
|
||||
@insertText ' ' + $(event.target).attr('alt') + ' '
|
||||
|
||||
|
||||
Switches the active sidebar tab.
|
||||
|
||||
$('.timsChatSidebarTabs li').click (event) =>
|
||||
event.preventDefault()
|
||||
@toggleSidebarContents $ event.target
|
||||
|
||||
|
||||
Calls the submit handler (`@submit`) when the `#timsChatForm` is `submit`ted.
|
||||
|
||||
$('#timsChatForm').submit (event) =>
|
||||
@ -230,7 +222,7 @@ Resets autocompleter to default status, when input is `click`ed, as the position
|
||||
Refreshes the room list when the associated button is `click`ed.
|
||||
|
||||
$('#timsChatRoomList button').click =>
|
||||
@refreshRoomList
|
||||
@refreshRoomList()
|
||||
|
||||
Clears the chat, by removing every single message.
|
||||
|
||||
@ -320,8 +312,8 @@ Update URL to target URL by using `window.history.replaceState()`.
|
||||
target.parent().removeClass 'loading'
|
||||
|
||||
# Mark as active
|
||||
$('.activeMenuItem .timsChatRoom').parent().removeClass 'activeMenuItem'
|
||||
target.parent().addClass 'activeMenuItem'
|
||||
$('.active .timsChatRoom').parent().removeClass 'active'
|
||||
target.parent().addClass 'active'
|
||||
|
||||
Update topic, hiding and showing the topic container when necessary.
|
||||
|
||||
@ -357,7 +349,7 @@ Reload the whole page when an error occurs. The users thus sees the error messag
|
||||
Show loading icon and prevent switching the room in parallel.
|
||||
|
||||
beforeSend: =>
|
||||
return false if target.parent().hasClass('loading') or target.parent().hasClass 'activeMenuItem'
|
||||
return false if target.parent().hasClass('loading') or target.parent().hasClass 'active'
|
||||
|
||||
@loading = true
|
||||
target.parent().addClass 'loading'
|
||||
@ -512,7 +504,7 @@ Move the user, to prevent rebuilding the entire user list.
|
||||
else
|
||||
element.removeClass 'suspended'
|
||||
|
||||
$('#timsChatUserList').append element
|
||||
$('#timsChatUserList > ul').append element
|
||||
|
||||
Build HTML of new user and append it.
|
||||
|
||||
@ -542,7 +534,7 @@ Build HTML of new user and append it.
|
||||
@events.userMenu.fire user, menu
|
||||
li.append menu
|
||||
|
||||
li.appendTo $ '#timsChatUserList'
|
||||
li.appendTo $ '#timsChatUserList > ul'
|
||||
|
||||
foundUsers[id] = true
|
||||
|
||||
@ -607,7 +599,7 @@ Sends out notifications for the given `message`. The number of unread messages w
|
||||
@newMessageCount++
|
||||
|
||||
document.title = '(' + @newMessageCount + ') ' + @titleTemplate.fetch
|
||||
title: $('#timsChatRoomList .activeMenuItem a').text()
|
||||
title: $('#timsChatRoomList .active a').text()
|
||||
|
||||
# Desktop Notifications
|
||||
title = WCF.Language.get 'chat.general.notify.title'
|
||||
@ -645,7 +637,7 @@ Updates the room list.
|
||||
|
||||
for room in data.returnValues
|
||||
li = $ '<li></li>'
|
||||
li.addClass 'activeMenuItem' if room.active
|
||||
li.addClass 'active' if room.active
|
||||
$("""<a href="#{room.link}">#{room.title}</a>""").addClass('timsChatRoom').appendTo li
|
||||
$('#timsChatRoomList ul').append li
|
||||
|
||||
@ -692,27 +684,12 @@ Submits the message.
|
||||
return true if not (data?.returnValues?.errorType?) and not (data?.message?)
|
||||
|
||||
$('#timsChatInputContainer').addClass('formError').find('.innerError').show().html (data?.returnValues?.errorType) ? data.message
|
||||
setTimeout ->
|
||||
$('#timsChatInputContainer').removeClass('formError').find('.innerError').hide().html("")
|
||||
, 3000
|
||||
|
||||
false
|
||||
|
||||
**toggleSidebarContents(target)**
|
||||
Switches the active sidebar tab to the one belonging to `target`.
|
||||
|
||||
toggleSidebarContents: (target) ->
|
||||
return if target.parents('li').hasClass 'active'
|
||||
|
||||
if target.parents('li').attr('id') is 'toggleUsers'
|
||||
$('#toggleUsers').addClass 'active'
|
||||
$('#toggleRooms').removeClass 'active'
|
||||
|
||||
$('#timsChatRoomList').hide()
|
||||
$('#timsChatUserList').show()
|
||||
else if target.parents('li').attr('id') is 'toggleRooms'
|
||||
$('#toggleRooms').addClass 'active'
|
||||
$('#toggleUsers').removeClass 'active'
|
||||
|
||||
$('#timsChatUserList').hide()
|
||||
$('#timsChatRoomList').show()
|
||||
|
||||
**unload()**
|
||||
Sends leave notification to the server.
|
||||
|
||||
|
||||
@ -7,6 +7,11 @@
|
||||
* @package be.bastelstu.wcf.chat
|
||||
*/
|
||||
#tplChat {
|
||||
#main > div {
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#content {
|
||||
text-align: left;
|
||||
|
||||
@ -21,6 +26,7 @@
|
||||
overflow: hidden;
|
||||
border: 0px;
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -113,219 +119,108 @@
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
padding-top: 0;
|
||||
overflow: auto;
|
||||
position: absolute !important;
|
||||
right: 0;
|
||||
height: 100%;
|
||||
|
||||
padding-top: 0px !important;
|
||||
|
||||
> div {
|
||||
> .chatTabMenuContainer {
|
||||
padding: 14px 0 21px;
|
||||
|
||||
> .chatSidebarMenu {
|
||||
background: @wcfContentBackgroundColor;
|
||||
margin: -14px 0 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#sidebarContent {
|
||||
padding-top: 0px;
|
||||
overflow: hidden;
|
||||
fieldset {
|
||||
padding-top: 0px;
|
||||
padding-bottom: 0px;
|
||||
}
|
||||
|
||||
.timsChatSidebarTabs {
|
||||
height: 34px;
|
||||
z-index: 131;
|
||||
position: relative;
|
||||
.boxShadowNative(0 0 5px 0 rgba(0, 0, 0, 0.1));
|
||||
|
||||
.left & {
|
||||
margin-right: 1px;
|
||||
}
|
||||
|
||||
.right & {
|
||||
margin-left: 1px;
|
||||
}
|
||||
|
||||
nav {
|
||||
ul {
|
||||
height: 33px;
|
||||
|
||||
li {
|
||||
width: 50%;
|
||||
float: left;
|
||||
text-align: center;
|
||||
|
||||
a {
|
||||
color: fade(@wcfColor, 80%);
|
||||
.textShadow(@wcfContentBackgroundColor);
|
||||
height: 22px;
|
||||
padding: 9px 0 0;
|
||||
|
||||
.transition(border-radius, .2s);
|
||||
.transition(background-color, .2s);
|
||||
.transition(font-size, .2s);
|
||||
|
||||
|
||||
.collapsed & {
|
||||
border: none !important;
|
||||
}
|
||||
> li {
|
||||
> a {
|
||||
padding: @wcfGapTiny @wcfGapMedium @wcfGapTiny @wcfGapLarge;
|
||||
height: 24px; // height of avatar image
|
||||
}
|
||||
|
||||
&.active a {
|
||||
background-color: @wcfContentBackgroundColor;
|
||||
border-bottom: 1px solid darken(@wcfSidebarBackgroundColor, 6%);
|
||||
.borderRadius(0, 7px);
|
||||
color: @wcfColor;
|
||||
font-size: 130%;
|
||||
font-weight: bold;
|
||||
> a:before {
|
||||
display: inline-block;
|
||||
content: "";
|
||||
height: 100%;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
&:first-child.active a {
|
||||
.borderRadius(0, 0, 7px, 0);
|
||||
border-right: 1px solid darken(@wcfSidebarBackgroundColor, 6%);
|
||||
|
||||
.right & {
|
||||
margin-left: -1px;
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child.active a {
|
||||
.borderRadius(0, 0, 0, 7px);
|
||||
border-left: 1px solid darken(@wcfSidebarBackgroundColor, 6%);
|
||||
|
||||
.left & {
|
||||
margin-right: -1px;
|
||||
}
|
||||
}
|
||||
|
||||
.badge {
|
||||
.badgeBG(@wcfSidebarBackgroundColor + rgba(0, 0, 0, 0.2));
|
||||
.badgeShadow(@wcfSidebarBackgroundColor + rgba(0, 0, 0, 0.2));
|
||||
position: relative;
|
||||
top: -1px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
&.active .badge {
|
||||
font-size: 65% !important;
|
||||
.badgeBG(@wcfContentBackgroundColor);
|
||||
.badgeShadow(@wcfContentBackgroundColor);
|
||||
> &.active {
|
||||
margin-top: @wcfGapSmall;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#sidebarContainer {
|
||||
overflow-y: auto;
|
||||
height: 420px;
|
||||
width: 100%;
|
||||
border-top: 1px solid darken(@wcfSidebarBackgroundColor, 8%);
|
||||
z-index: 131;
|
||||
position: relative;
|
||||
|
||||
a {
|
||||
outline: none;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
ul:not(.dropdownMenu) {
|
||||
> li {
|
||||
margin-top: @wcfGapSmall;
|
||||
background-color: transparent !important;
|
||||
box-shadow: none !important;
|
||||
|
||||
> a {
|
||||
background-color: fade(@wcfContentBackgroundColor, 33.33%);
|
||||
.textShadow(fade(@wcfContentBackgroundColor, 33.33%));
|
||||
.transition(background-color, .2s);
|
||||
}
|
||||
|
||||
&.activeMenuItem, &.dropdownOpen, &:hover {
|
||||
> a {
|
||||
background-color: @wcfContentBackgroundColor !important;
|
||||
.boxShadowNative(0 0 5px rgba(0, 0, 0, 0.1));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#timsChatRoomList {
|
||||
ul:not(.dropdownMenu) {
|
||||
> li {
|
||||
margin-top: @wcfGapSmall;
|
||||
|
||||
> div {
|
||||
> div {
|
||||
text-align: center;
|
||||
margin-top: @wcfGapMedium;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#timsChatUserList {
|
||||
.timsChatUser {
|
||||
&.away {
|
||||
opacity: .5;
|
||||
}
|
||||
}
|
||||
|
||||
#timsChatUserList {
|
||||
.timsChatUser {
|
||||
> a {
|
||||
background: @wcfContentBackgroundColor;
|
||||
|
||||
&.suspended a {
|
||||
text-decoration: line-through;
|
||||
img {
|
||||
margin-right: @wcfGapSmall;
|
||||
}
|
||||
}
|
||||
|
||||
&.away {
|
||||
opacity: .5;
|
||||
}
|
||||
|
||||
&.suspended a {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#timsChatRoomList {
|
||||
> div {
|
||||
> div {
|
||||
margin-top: @wcfGapMedium;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#smilies {
|
||||
li {
|
||||
.transition(opacity, .2s);
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
li {
|
||||
opacity: .5;
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
li {
|
||||
a {
|
||||
color: @wcfLinkColor;
|
||||
display: block;
|
||||
padding: 5px 25px 7px 35px;
|
||||
}
|
||||
}
|
||||
}
|
||||
margin-top: @wcfGapMedium;
|
||||
}
|
||||
|
||||
#timsChatControls {
|
||||
#smilies {
|
||||
li {
|
||||
.transition(opacity, .2s);
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
li {
|
||||
opacity: .5;
|
||||
}
|
||||
}
|
||||
}
|
||||
@media only screen and (min-width: 801px) {
|
||||
|
||||
}
|
||||
|
||||
/*@media only screen and (min-width: 641px) {
|
||||
#timsChatOptions {
|
||||
top: -1px;
|
||||
right: 1px;
|
||||
margin-left: 0;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
|
||||
> ul {
|
||||
.smallButtons;
|
||||
margin-right: -1px;
|
||||
text-align: right;
|
||||
|
||||
> li {
|
||||
> a {
|
||||
.button;
|
||||
.borderRadius(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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 640px) {
|
||||
@media only screen and (max-width: 800px) {
|
||||
#timsChatMessageContainer {
|
||||
overflow: auto;
|
||||
|
||||
@ -339,62 +234,18 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#timsChatOptions {
|
||||
margin-top: 5px;
|
||||
position: relative;
|
||||
|
||||
&:hover > ul {
|
||||
display: block;
|
||||
}
|
||||
|
||||
> .invisible {
|
||||
.button;
|
||||
margin-left: @wcfGapSmall;
|
||||
padding-left: 28px;
|
||||
|
||||
&:before {
|
||||
content: "\f03a";
|
||||
font-family: FontAwesome;
|
||||
font-size: 14px;
|
||||
left: 9px;
|
||||
position: absolute;
|
||||
top: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
> ul {
|
||||
.dropdown .dropdownMenu;
|
||||
font-size: 120%;
|
||||
left: @wcfGapSmall;
|
||||
|
||||
> li.active {
|
||||
> ul.invisible {
|
||||
display: block;
|
||||
font-size: 85%;
|
||||
padding-left: 14px;
|
||||
}
|
||||
|
||||
> a {
|
||||
position: relative;
|
||||
|
||||
&:after {
|
||||
content: "\f00c";
|
||||
font-family: FontAwesome;
|
||||
font-size: 14px;
|
||||
position: absolute;
|
||||
right: 7px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#timsChatOptions {
|
||||
> ul {
|
||||
text-align: right;
|
||||
}
|
||||
}*/
|
||||
}
|
||||
|
||||
#toggleRooms .ajaxLoad {
|
||||
position: absolute;
|
||||
right: 5px;
|
||||
top: 3px;
|
||||
right: 10px;
|
||||
top: 7px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
@ -407,18 +258,6 @@
|
||||
background-repeat: no-repeat;
|
||||
min-height: 150px;
|
||||
}
|
||||
|
||||
.badgeBG(@backgroundColor) when (lightness(@backgroundColor) < 50%) {
|
||||
background-color: lighten(@backgroundColor, lightness(@backgroundColor) / 2);
|
||||
}
|
||||
|
||||
.badgeBG(@backgroundColor) when (lightness(@backgroundColor) < 20%) {
|
||||
background-color: lighten(@backgroundColor, 20%);
|
||||
}
|
||||
|
||||
.badgeBG(@backgroundColor) when (lightness(@backgroundColor) >= 50%) {
|
||||
background-color: darken(@backgroundColor, lightness(@backgroundColor) / 2);
|
||||
}
|
||||
}
|
||||
|
||||
html.fullscreen {
|
||||
@ -457,13 +296,13 @@ html.fullscreen {
|
||||
-ms-flex: 1 0 auto;
|
||||
flex: 1 0 auto;
|
||||
}
|
||||
|
||||
#timsChatControls {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#timsChatOptions {
|
||||
margin-bottom: @wcfGapMedium;
|
||||
}
|
||||
|
||||
#tplChat, #tplChatLog {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
|
||||
@ -94,7 +94,7 @@
|
||||
{include file='header' sandbox=false sidebarOrientation='right'}
|
||||
|
||||
<div>
|
||||
<p id="timsChatTopic" class="container{if $room->topic|language === ''} empty{/if}">{$room->topic|language}</p>
|
||||
<div id="timsChatTopic" class="container{if $room->topic|language === ''} empty{/if}">{$room->topic|language}</div>
|
||||
|
||||
<div id="timsChatMessageContainer" class="timsChatMessageContainer marginTop container active">
|
||||
<p class="error noJsOnly" style="display: none;">{lang}chat.general.noJs{/lang}</p>
|
||||
@ -113,23 +113,22 @@
|
||||
</fieldset>
|
||||
<button type="submit" class="invisible" accesskey="s"></button>
|
||||
</form>
|
||||
|
||||
{if MODULE_SMILEY && $smileyCategories|count}
|
||||
{include file='messageFormSmilies' wysiwygSelector=''}
|
||||
{/if}
|
||||
|
||||
<div id="timsChatControls" class="marginTop">
|
||||
{if MODULE_SMILEY && $smileyCategories|count}
|
||||
{include file='messageFormSmilies' wysiwygSelector=''}
|
||||
{/if}
|
||||
<nav id="timsChatOptions">
|
||||
<span class="invisible">{lang}chat.general.controls{/lang}</span>
|
||||
<ul class="smallButtons buttonGroup">
|
||||
<li><a id="timsChatAutoscroll" accesskey="d" class="button active timsChatToggle jsTooltip" 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"><span class="icon icon16 icon-arrow-down"></span><span>{lang}chat.general.scroll{/lang}</span></a></li>{*
|
||||
*}<li><a id="timsChatFullscreen" accesskey="f" class="button timsChatToggle jsTooltip" 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"><span class="icon icon16 icon-fullscreen"></span><span>{lang}chat.general.fullscreen{/lang}</span></a></li>{*
|
||||
*}<li><a id="timsChatNotify" accesskey="n" class="button timsChatToggle jsTooltip" 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"><span class="icon icon16 icon-bell-alt"></span><span>{lang}chat.general.notify{/lang}</span></a></li>{*
|
||||
*}<li{if !MODULE_SMILEY || !$smileyCategories|count} style="display: none;"{/if}><a id="timsChatSmilies" accesskey="e" class="button{if ENABLE_SMILIES_DEFAULT_VALUE} active{/if} timsChatToggle jsTooltip" 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}"><span class="icon icon16 icon-{if ENABLE_SMILIES_DEFAULT_VALUE}circle-blank{else}off{/if}"></span><span>{lang}chat.general.smilies{/lang}</span></a></li>{*
|
||||
*}<li><a id="timsChatClear" class="button"><span class="icon icon16 icon-remove"></span><span>{lang}chat.general.clear{/lang}</span></a></li>{*
|
||||
*}<li><a id="timsChatMark" class="button timsChatToggle jsTooltip" 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"><span class="icon icon16 icon-check"></span><span>{lang}chat.general.mark{/lang}</span></a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
<nav id="timsChatOptions" class="marginTop">
|
||||
<span class="invisible">{lang}chat.general.controls{/lang}</span>
|
||||
<ul class="smallButtons buttonGroup">
|
||||
<li><a id="timsChatAutoscroll" accesskey="d" class="button active timsChatToggle jsTooltip" title="{lang}chat.general.scroll{/lang}" data-status="1"><span class="icon icon16 icon-arrow-down"></span><span class="invisible">{lang}chat.general.scroll{/lang}</span></a></li>{*
|
||||
*}<li><a id="timsChatFullscreen" accesskey="f" class="button timsChatToggle jsTooltip" title="{lang}chat.general.fullscreen{/lang}" data-status="0"><span class="icon icon16 icon-fullscreen"></span><span class="invisible">{lang}chat.general.fullscreen{/lang}</span></a></li>{*
|
||||
*}<li><a id="timsChatNotify" accesskey="n" class="button timsChatToggle jsTooltip" title="{lang}chat.general.notify{/lang}" data-status="0"><span class="icon icon16 icon-bell-alt"></span><span class="invisible">{lang}chat.general.notify{/lang}</span></a></li>{*
|
||||
*}<li{if !MODULE_SMILEY || !$smileyCategories|count} style="display: none;"{/if}><a id="timsChatSmilies" accesskey="e" class="button{if ENABLE_SMILIES_DEFAULT_VALUE} active{/if} timsChatToggle jsTooltip" title="{lang}chat.general.smilies{/lang}" data-enable-message="{lang}wcf.global.button.enable{/lang}" data-status="{@ENABLE_SMILIES_DEFAULT_VALUE}"><span class="icon icon16 icon-{if ENABLE_SMILIES_DEFAULT_VALUE}circle-blank{else}off{/if}"></span><span class="invisible">{lang}chat.general.smilies{/lang}</span></a></li>{*
|
||||
*}<li><a id="timsChatClear" class="button jsTooltip" title="{lang}chat.general.clear{/lang}"><span class="icon icon16 icon-remove"></span><span class="invisible">{lang}chat.general.clear{/lang}</span></a></li>{*
|
||||
*}<li><a id="timsChatMark" class="button timsChatToggle jsTooltip" title="{lang}chat.general.mark{/lang}" data-status="0"><span class="icon icon16 icon-check"></span><span class="invisible">{lang}chat.general.mark{/lang}</span></a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
{include file='footer' sandbox=false}
|
||||
|
||||
@ -1,27 +1,34 @@
|
||||
<div id="sidebarContent" class="sidebarContent">
|
||||
<nav class="timsChatSidebarTabs">
|
||||
<div class="tabMenuContainer chatTabMenuContainer containerPadding">
|
||||
<nav class="menu chatSidebarMenu">
|
||||
<ul>
|
||||
<li id="toggleUsers" class="active"><a title="{lang}chat.general.users{/lang}">{lang}chat.general.users{/lang} <span class="badge">0</span></a></li>
|
||||
<li id="toggleRooms"><a title="{lang}chat.general.rooms{/lang}">{lang}chat.general.rooms{/lang} <span class="badge">{#$rooms|count}</span><span class="ajaxLoad icon icon32 icon-spinner"></span></a></li>
|
||||
<li id="toggleUsers" class="ui-state-active"><a href="{@$__wcf->getAnchor('timsChatUserList')}" title="{lang}chat.general.users{/lang}">{lang}chat.general.users{/lang} <span class="badge">0</span></a></li>
|
||||
<li id="toggleRooms"><a href="{@$__wcf->getAnchor('timsChatRoomList')}" title="{lang}chat.general.rooms{/lang}">{lang}chat.general.rooms{/lang} <span class="badge">{#$rooms|count}</span><span class="ajaxLoad icon icon32 icon-spinner"></span></a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<div id="sidebarContainer">
|
||||
<ul id="timsChatUserList">
|
||||
</ul>
|
||||
<nav id="timsChatRoomList" class="sidebarMenu" style="display: none;">
|
||||
<div>
|
||||
<section id="sidebarContent">
|
||||
<fieldset>
|
||||
<nav id="timsChatUserList">
|
||||
<ul>
|
||||
{foreach from=$rooms item='roomListRoom'}
|
||||
{if $roomListRoom->canEnter()}
|
||||
<li{if $roomListRoom->roomID == $room->roomID} class="activeMenuItem"{/if}>
|
||||
<a href="{link application='chat' controller='Chat' object=$roomListRoom}{/link}" class="timsChatRoom">{$roomListRoom}</a>
|
||||
</li>
|
||||
{/if}
|
||||
{/foreach}
|
||||
</ul>
|
||||
<div><button type="button">{lang}chat.general.forceRefresh{/lang}</button></div>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</nav>
|
||||
</fieldset>
|
||||
|
||||
<fieldset>
|
||||
<nav id="timsChatRoomList" style="display: none;">
|
||||
<div>
|
||||
<ul>
|
||||
{foreach from=$rooms item='roomListRoom'}
|
||||
{if $roomListRoom->canEnter()}
|
||||
<li{if $roomListRoom->roomID == $room->roomID} class="active"{/if}>
|
||||
<a href="{link application='chat' controller='Chat' object=$roomListRoom}{/link}" class="timsChatRoom">{$roomListRoom}</a>
|
||||
</li>
|
||||
{/if}
|
||||
{/foreach}
|
||||
</ul>
|
||||
<div><button type="button">{lang}chat.general.forceRefresh{/lang}</button></div>
|
||||
</div>
|
||||
</nav>
|
||||
</fieldset>
|
||||
</section>
|
||||
</div>
|
||||
@ -1 +1 @@
|
||||
{literal}<a class="dropdownToggle userLink" data-user-id="{$userID.toString()}">{@$avatar['24']} {$username}</a>{/literal}
|
||||
{literal}<a class="dropdownToggle userLink" data-user-id="{$userID.toString()}">{@$avatar['24']}{$username}</a>{/literal}
|
||||
Loading…
Reference in New Issue
Block a user