diff --git a/file/js/be.bastelstu.Chat.litcoffee b/file/js/be.bastelstu.Chat.litcoffee index da04385..ffb1f8a 100644 --- a/file/js/be.bastelstu.Chat.litcoffee +++ b/file/js/be.bastelstu.Chat.litcoffee @@ -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.addClass 'activeMenuItem' if room.active + li.addClass 'active' if room.active $("""#{room.title}""").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. diff --git a/file/style/be.bastelstu.wcf.chat.less b/file/style/be.bastelstu.wcf.chat.less index f796f97..46b64e6 100644 --- a/file/style/be.bastelstu.wcf.chat.less +++ b/file/style/be.bastelstu.wcf.chat.less @@ -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; diff --git a/template/chat.tpl b/template/chat.tpl index 63d5c15..383ea0c 100644 --- a/template/chat.tpl +++ b/template/chat.tpl @@ -94,7 +94,7 @@ {include file='header' sandbox=false sidebarOrientation='right'}
    -

    {$room->topic|language}

    +
    {$room->topic|language}
    @@ -113,23 +113,22 @@ + + {if MODULE_SMILEY && $smileyCategories|count} + {include file='messageFormSmilies' wysiwygSelector=''} + {/if} -
    - {if MODULE_SMILEY && $smileyCategories|count} - {include file='messageFormSmilies' wysiwygSelector=''} - {/if} - -
    +
    {include file='footer' sandbox=false} diff --git a/template/sidebar.tpl b/template/sidebar.tpl index dc15c8e..1b16603 100644 --- a/template/sidebar.tpl +++ b/template/sidebar.tpl @@ -1,27 +1,34 @@ -
    - + + +
    + +
    +
    \ No newline at end of file diff --git a/template/userListUser.tpl b/template/userListUser.tpl index a885e22..cdcbb3f 100644 --- a/template/userListUser.tpl +++ b/template/userListUser.tpl @@ -1 +1 @@ -{literal}{@$avatar['24']} {$username}{/literal} \ No newline at end of file +{literal}{@$avatar['24']}{$username}{/literal} \ No newline at end of file