Add possibility to hide topic.

file/js/be.bastelstu.Chat.litcoffee

@@ -253,7 +253,7 @@ Toggle fullscreen mode.
 				else
 					$('html').removeClass 'fullscreen'
 
-Toggle checkboxes
+Toggle checkboxes.
 
 			$('#timsChatMark').click (event) ->
 				if $(@).data 'status'
@@ -261,6 +261,11 @@ Toggle checkboxes
 				else
 					$('.timsChatMessageContainer').removeClass 'markEnabled'
 
+Hide topic container.
+
+			$('.jsTopicCloser').on 'click', ->
+				$('#timsChatTopic').addClass 'hidden'
+
 Visibly mark the message once the associated checkbox is checked.
 
 			$(document).on 'click', '.timsChatMessage :checkbox', (event) ->
@@ -632,7 +637,9 @@ Joins a room.
 				success: (data) ->
 					loading = false
 					
-					$('#timsChatTopic').text data.returnValues.topic
+					$('#timsChatTopic').removeClass 'hidden'
+					
+					$('#timsChatTopic > .topic').text data.returnValues.topic
 					if data.returnValues.topic.trim() is ''
 						$('#timsChatTopic').addClass 'empty'
 					else

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

@@ -40,12 +40,21 @@
 		.transition(padding-top, .2s);
 		.transition(padding-bottom, .2s);
 		
-		&.empty {
+		&.empty, &.hidden {
 			height: 0px;
 			overflow: hidden;
 			border: 0px;
 			padding: 0px;
 			margin: 0px;
+			
+			~ #timsChatMessageContainer {
+				margin-top: 0;
+			}
+		}
+		
+		.jsTopicCloser {
+			cursor: pointer;
+			float: right;
 		}
 	}
 	

template/chat.tpl

@@ -70,7 +70,10 @@
 	{capture assign='headerNavigation'}{include application='chat' file='navigationInclude'}{/capture}
 	{include file='header' sandbox=false sidebarOrientation='right'}
 	
-	<div id="timsChatTopic" class="container{if $room->topic|language === ''} empty{/if}">{$room->topic|language}</div>
+	<div id="timsChatTopic" class="container{if $room->topic|language === ''} empty{/if}">
+		<span class="icon icon16 icon-remove jsTopicCloser"></span>
+		<span class="topic">{$room->topic|language}</span>
+	</div>
 	
 	<div id="timsChatMessageContainer" class="timsChatMessageContainer marginTop container active">
 		<p class="error noJsOnly" style="display: none;">{lang}chat.general.noJs{/lang}</p>