Merge branch 'master' of github.com:wbbaddons/Tims-Chat

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') + ' '
 			, @
 			

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.
@@ -86,7 +94,8 @@ public function assignVariables() {
 			'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();
 	}
 	

file/style/be.bastelstu.wcf.chat.scss

@@ -36,7 +36,7 @@ .sidebar {
 	}
 }
 
-#timsChatTopic, #smileyList {
+#timsChatTopic {
 	padding: 5px;
 }
 
@@ -47,10 +47,20 @@ .timsChatMessageContainer {
 	padding-left: 7px !important;
 }
 
-#smileyList .smilies {
+#smilies {
+  padding: 14px 21px 7px;
+  border-bottom-right-radius: 0px;
+  
+  > div {
     li {
       display: inline;
       margin: 5px 5px 0 0;
+        
+      .icon24 {
+        //width: 16px;
+        //height: 16px;
+      }
+    }
   }
 }
 
@@ -72,9 +82,10 @@ #timsChatControls {
 }
 
 #timsChatOptions {
-	bottom: -29px;
+	top: -1px;
+	right: 1px;
 	margin-left: 0;
-	position: absolute;
+	position: relative;
 	width: 100%;
 	
 	> ul {
@@ -111,15 +122,21 @@ #timsChatOptions {
 #timsChatUserList {
 	.timsChatUserMenu {
 		display: none;
-		li {
+		background-color: rgba(0, 0, 0, 0.1);
-			a {
+		margin-bottom: -5px;
-				margin-left: 30px !important;
+		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;
   			}
 		}
 	}
@@ -160,9 +177,10 @@ .ajaxLoad {
 }
 
 .timsChatSidebarTabs {
-	height: 32px;
+	height: 34px;
-	z-index: 101;
+	z-index: 131;
 	position: relative;
+	box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1);
 	
 	.left & {
 		margin-right: 1px;
@@ -174,8 +192,7 @@ .timsChatSidebarTabs {
 	
 	ul {
 		background-color: rgba(0, 0, 0, 0.2);
-		border-bottom: 1px solid #FFFFFF;
+		height: 33px;
-		height: 31px;
 
 		li {
 			width: 50%;
@@ -190,6 +207,7 @@ .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;
         }        
@@ -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);
 				}
 			}

template/chat.tpl

@@ -72,16 +72,33 @@
 		<input type="text" id="timsChatInput" class="inputText long" name="text" autocomplete="off" maxlength="{@CHAT_MAX_LENGTH}" disabled="disabled" required="required" placeholder="{lang}wcf.chat.submit.default{/lang}" />
 	</form>
 	
-	<div id="timsChatControls" class="marginTop container">
+	<div id="timsChatControls" class="marginTop">
 		{if MODULE_SMILEY}
-			<div id="smileyList">
+                        {capture assign=__defaultSmilies}
-				<ul class="smilies">
+                                {include file='__messageFormSmilies' smilies=$defaultSmilies}
-					{foreach from=$smilies item='smiley'}
+                        {/capture}
-						<li>
+                        
-							<img src="{$smiley->getURL()}" alt="{$smiley->smileyCode}" title="{$smiley->smileyTitle}" class="jsSmiley jsTooltip" />
+                        <div id="smilies" class="smiliesContent tabMenuContent container {if $smileyCategories|count} tabMenuContainer{/if} data-store="activeTabMenuItem" data-active="smilies-default">
-						</li>
+                                {if $smileyCategories|count}
+                                        <nav class="menu">
+                                                <ul>
+                                                        <li><a href="#smilies-default">{lang}wcf.smilies.default{/lang}</a></li>
+                                                        {foreach from=$smileyCategories item=smileyCategory}
+                                                                <li><a href="#smilies-{@$smileyCategory->smileyCategoryID}" data-smiley-category-id="{@$smileyCategory->smileyCategoryID}">{$smileyCategory->title|language}</a></li>
                                                         {/foreach}
                                                 </ul>
+                                        </nav>
+                                        
+                                        <div id="smilies-default" class="hidden">
+                                                {@$__defaultSmilies}
+                                        </div>
+                                        
+        				{foreach from=$smileyCategories  item='smileyCategory'}
+        				   <div id="smilies-{$smileyCategory->smileyCategoryID}" class="hidden"></div>
+        				{/foreach}
+        			{else}
+        			     {@$__defaultSmilies}
+        			{/if}
 			</div>
 		{/if}
 		<nav id="timsChatOptions">
@@ -151,6 +168,8 @@
 			});
 			{event name='shouldInit'}
 			// Boot the chat
+			WCF.TabMenu.init();
+			new WCF.Message.Smilies();
 			be.bastelstu.WCF.Chat.init();
 			{event name='didInit'}