diff --git a/file/js/be.bastelstu.WCF.Chat.coffee b/file/js/be.bastelstu.WCF.Chat.coffee index bdae299..4b5dc16 100644 --- a/file/js/be.bastelstu.WCF.Chat.coffee +++ b/file/js/be.bastelstu.WCF.Chat.coffee @@ -113,7 +113,7 @@ window.console ?= , @ # Insert a smiley - $('.jsSmiley').click $.proxy (event) -> + $('#smilies').on 'click', 'img', $.proxy (event) -> @insertText ' ' + $(event.target).attr('alt') + ' ' , @ diff --git a/file/lib/page/ChatPage.class.php b/file/lib/page/ChatPage.class.php index d3ae064..80dffec 100644 --- a/file/lib/page/ChatPage.class.php +++ b/file/lib/page/ChatPage.class.php @@ -65,7 +65,15 @@ class ChatPage extends AbstractPage { * @var array<\wcf\data\smiley\Smiley> * @see \wcf\data\smiley\SmileyCache */ - public $smilies = array(); + public $defaultSmilies = array(); + + /** + * List of all smiley categories. + * + * @var array<\wcf\data\smiley\SmileyCategory> + * @see \wcf\data\smiley\SmileyCache + */ + public $smileyCategories = array(); /** * Values read from the UserStorage of the current user. @@ -79,14 +87,15 @@ class ChatPage extends AbstractPage { */ public function assignVariables() { parent::assignVariables(); - + WCF::getTPL()->assign(array( 'chatVersion' => $this->chatVersion, 'newestMessages' => $this->newestMessages, 'room' => $this->room, 'roomID' => $this->roomID, 'rooms' => $this->rooms, - 'smilies' => $this->smilies + 'defaultSmilies' => $this->defaultSmilies, + 'smileyCategories' => $this->smileyCategories )); } @@ -146,7 +155,13 @@ public function readData() { \wcf\util\ChatUtil::writeUserData(array('lastSeen' => 0)); } - $this->smilies = \wcf\data\smiley\SmileyCache::getInstance()->getCategorySmilies(); + $smileyCategories = \wcf\data\smiley\SmileyCache::getInstance()->getCategories(); + + foreach($smileyCategories as $category) { + if(!$category->disabled) $this->smileyCategories[] = $category; + } + + $this->defaultSmilies = \wcf\data\smiley\SmileyCache::getInstance()->getCategorySmilies(); $this->readChatVersion(); } diff --git a/file/style/be.bastelstu.wcf.chat.scss b/file/style/be.bastelstu.wcf.chat.scss index 7e3862c..832fb86 100644 --- a/file/style/be.bastelstu.wcf.chat.scss +++ b/file/style/be.bastelstu.wcf.chat.scss @@ -36,7 +36,7 @@ .sidebar { } } -#timsChatTopic, #smileyList { +#timsChatTopic { padding: 5px; } @@ -47,11 +47,21 @@ .timsChatMessageContainer { padding-left: 7px !important; } -#smileyList .smilies { - li { - display: inline; - margin: 5px 5px 0 0; - } +#smilies { + padding: 14px 21px 7px; + border-bottom-right-radius: 0px; + + > div { + li { + display: inline; + margin: 5px 5px 0 0; + + .icon24 { + //width: 16px; + //height: 16px; + } + } + } } #timsChatForm { @@ -72,9 +82,10 @@ #timsChatControls { } #timsChatOptions { - bottom: -29px; + top: -1px; + right: 1px; margin-left: 0; - position: absolute; + position: relative; width: 100%; > ul { @@ -111,16 +122,22 @@ #timsChatOptions { #timsChatUserList { .timsChatUserMenu { display: none; - li { - a { - margin-left: 30px !important; - } - } - + background-color: rgba(0, 0, 0, 0.1); + margin-bottom: -5px; + padding: 1px 0 6px; + box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1) inset; + border-bottom: 1px solid #FFFFFF; + color: rgba(0, 0, 0, 0.4); + text-shadow: none; + > li { a { - margin-left: 20px; - } + background-color: rgba(255, 255, 255, 0.22); + border-radius: 5px 0 0 5px; + margin-left: 35px; + padding: 1px 0 1px 15px; + color: #555; + } } } .timsChatAway { @@ -160,9 +177,10 @@ .ajaxLoad { } .timsChatSidebarTabs { - height: 32px; - z-index: 101; + height: 34px; + z-index: 131; position: relative; + box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1); .left & { margin-right: 1px; @@ -174,14 +192,13 @@ .timsChatSidebarTabs { ul { background-color: rgba(0, 0, 0, 0.2); - border-bottom: 1px solid #FFFFFF; - height: 31px; - + height: 33px; + li { width: 50%; float: left; text-align: center; - + a { color: rgba(0, 0, 0, 0.4); text-shadow: none; @@ -190,9 +207,10 @@ .timsChatSidebarTabs { -moz-transition-property: border-radius, background-color, font-size; -moz-transition-duration: .2s; -webkit-transition-property: border-radius, background-color, font-size; -webkit-transition-duration: .2s; - .collapsed & { - border: none !important; - } + + .collapsed & { + border: none !important; + } } &.active a { @@ -225,6 +243,11 @@ .timsChatSidebarTabs { } } + & .badge { + position: relative; + top: -1px; + } + &.active .badge { font-size: 65% !important; color: #fff; @@ -242,12 +265,19 @@ .timsChatSidebarTabs { #timsChatRoomList { margin-top: 5px; + + > div > div { + margin-top: 10px; + } } #sidebarContainer { overflow-y: auto; height: 420px; width: 100%; + border-top: 1px solid #B8D3ED; + z-index: 131; + position: relative; } #sidebarContainer a { @@ -268,11 +298,21 @@ .sidebarContent { margin-top: 5px; background-color: transparent !important; box-shadow: none !important; + + > a { + background-color: rgba(255, 255, 255, 0.3); + -moz-transition-property: background-color; -moz-transition-duration: .2s; + -webkit-transition-property: background-color; -webkit-transition-duration: .2s; + } + + > a:hover { + background-color: rgb(255, 255, 255); + } } > li.activeMenuItem { > a { - background-color: #FFFFFF; + background-color: #FFFFFF !important; box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); } } diff --git a/template/chat.tpl b/template/chat.tpl index 57c6b56..0ca3e86 100644 --- a/template/chat.tpl +++ b/template/chat.tpl @@ -72,16 +72,33 @@ -
+
{if MODULE_SMILEY} -
-
    - {foreach from=$smilies item='smiley'} -
  • - {$smiley->smileyCode} -
    • - {/foreach} -
+ {capture assign=__defaultSmilies} + {include file='__messageFormSmilies' smilies=$defaultSmilies} + {/capture} + +
+ {if $smileyCategories|count} + + + + + {foreach from=$smileyCategories item='smileyCategory'} + + {/foreach} + {else} + {@$__defaultSmilies} + {/if}
{/if}