Add smiley overlay for mobile devices

file/js/be.bastelstu.Chat.litcoffee

@@ -50,6 +50,8 @@ exposed by a function if necessary.
 		
 		remainingFailures = 3
 		
+		overlaySmileyList = null
+		
 		events =
 			newMessage: $.Callbacks()
 			userMenu: $.Callbacks()
@@ -147,6 +149,26 @@ Insert the appropriate smiley code into the input when a smiley is clicked.
 
 			$('#smilies').on 'click', 'img', -> insertText " #{$(@).attr('alt')} "
 
+Copy the first loaded category of smilies so it won't get detached by wcfDialog
+
+			overlaySmileyList = $('<ul class="smileyList">').append $('#smilies .smileyList').clone().children()
+
+Add click event to smilies in the overlay
+
+			overlaySmileyList.on 'click', 'img', ->
+				insertText " #{$(@).attr('alt')} "
+				overlaySmileyList.wcfDialog 'close'
+
+Open the smiley wcfDialog
+
+			$('#timsChatSmileyPopupButton').on 'click', ->
+				overlaySmileyList.wcfDialog
+					title: WCF.Language.get 'chat.general.smilies'
+					
+				overlaySmileyList.css
+					'max-height': $(window).height() - overlaySmileyList.parent().siblings('.dialogTitlebar').outerHeight()
+					'overflow': 'auto'
+			
 Handle private channel menu
 
 			$('#timsChatMessageTabMenu > .tabMenu').on 'click', '.timsChatMessageTabMenuAnchor', ->

file/style/be.bastelstu.chat.less

@@ -425,7 +425,7 @@
 		
 		#timsChatUserList {
 			> ul {
-				> li {
+				> .timsChatUser {
 					&.you {
 						a {
 							&:hover {
@@ -435,6 +435,10 @@
 						}
 					}
 					
+					&.away {
+						opacity: 0.5;
+					}
+					
 					a {
 						img {
 							margin-right: @wcfGapTiny;
@@ -469,6 +473,18 @@
 	#fish {
 		font-size: 2rem;
 	}
+	
+	.dialogContent {
+		.smileyList {
+			> li {
+				> a {
+					img {
+						margin: @wcfGapTiny;
+					}
+				}
+			}
+		}
+	}
 }
 
 // TODO