Overhaul UI

TODO: Sidebar overhaul/y-scroll

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'
+						$('.active .timsChatRoom').parent().removeClass 'active'
-						target.parent().addClass 'activeMenuItem'
+						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></li>'
-							li.addClass 'activeMenuItem' if room.active
+							li.addClass 'active' if room.active
 							$("""<a href="#{room.link}">#{room.title}</a>""").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.
 

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;
+			fieldset {
-			overflow: hidden;
+				padding-top: 0px;
+				padding-bottom: 0px;
+			}
 			
-			.timsChatSidebarTabs {
+			nav {
-				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;
-				}
-				
 				ul {
-					height: 33px;
+					> li {
-					
+						> a {
-					li {
+							padding: @wcfGapTiny @wcfGapMedium @wcfGapTiny @wcfGapLarge;
-						width: 50%;
+							height: 24px; // height of avatar image
-						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;
-							}
 						}
 						
-						&.active a {
+						> a:before {
-							background-color: @wcfContentBackgroundColor;
+							display: inline-block;
-							border-bottom: 1px solid darken(@wcfSidebarBackgroundColor, 6%);
+							content: "";
-							.borderRadius(0, 7px);
+							height: 100%;
-							color: @wcfColor;
+							vertical-align: middle;
-							font-size: 130%;
-							font-weight: bold;
 						}
 						
-						&:first-child.active a {
+						> &.active {
-							.borderRadius(0, 0, 7px, 0);
+							margin-top: @wcfGapSmall;
-							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);
 						}
 					}
 				}
 			}
 			
-			#sidebarContainer {
+			ul:not(.dropdownMenu) {
-				overflow-y: auto;
+				> li {
-				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 {
 					margin-top: @wcfGapSmall;
-					
-					> div {
-						> div {
-							text-align: center;
-							margin-top: @wcfGapMedium;
-						}
-					}
 				}
-				
+			}
-				#timsChatUserList {
+			
-					.timsChatUser {
+			#timsChatUserList {
-						&.away {
+				.timsChatUser {
-							opacity: .5;
+					> a {
-						}
+						background: @wcfContentBackgroundColor;
 						
-						&.suspended a {
+						img {
-							text-decoration: line-through;
+							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 {
+		margin-top: @wcfGapMedium;
-			li {
-				a {
-					color: @wcfLinkColor;
-					display: block;
-					padding: 5px 25px 7px 35px;
-				}
-			}
-		}
 	}
 	
-	#timsChatControls {
+	@media only screen and (min-width: 801px) {
-		#smilies {
+		
-			li {
-				.transition(opacity, .2s);
-			}
-			
-			&.disabled {
-				li {
-					opacity: .5;
-				}
-			}
-		}
 	}
 	
-	/*@media only screen and (min-width: 641px) {
+	@media only screen and (max-width: 800px) {
-		#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) {
 		#timsChatMessageContainer {
 			overflow: auto;
 			
@@ -339,62 +234,18 @@
 				}
 			}
 		}
-		
+	}
-		#timsChatOptions {
+	
-			margin-top: 5px;
+	#timsChatOptions {
-			position: relative;
+		> ul {
-			
+			text-align: right;
-			&: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;
-						}
-					}
-				}
-			}
 		}
-	}*/
+	}
 	
 	#toggleRooms .ajaxLoad {
 		position: absolute;
-		right: 5px;
+		right: 10px;
-		top: 3px;
+		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;

template/chat.tpl

@@ -94,7 +94,7 @@
 	{include file='header' sandbox=false sidebarOrientation='right'}
 	
 	<div>
-		<p id="timsChatTopic" class="container{if $room->topic|language === ''} empty{/if}">{$room->topic|language}</p>
+		<div id="timsChatTopic" class="container{if $room->topic|language === ''} empty{/if}">{$room->topic|language}</div>
 		
 		<div id="timsChatMessageContainer" class="timsChatMessageContainer marginTop container active">
 			<p class="error noJsOnly" style="display: none;">{lang}chat.general.noJs{/lang}</p>
@@ -113,23 +113,22 @@
 			</fieldset>
 			<button type="submit" class="invisible" accesskey="s"></button>
 		</form>
+
+		{if MODULE_SMILEY && $smileyCategories|count}
+			{include file='messageFormSmilies' wysiwygSelector=''}
+		{/if}
 		
-		<div id="timsChatControls" class="marginTop">
+		<nav id="timsChatOptions" class="marginTop">
-			{if MODULE_SMILEY && $smileyCategories|count}
+			<span class="invisible">{lang}chat.general.controls{/lang}</span>
-				{include file='messageFormSmilies' wysiwygSelector=''}
+			<ul class="smallButtons buttonGroup">
-			{/if}
+				<li><a id="timsChatAutoscroll" accesskey="d" class="button active timsChatToggle jsTooltip" title="{lang}chat.general.scroll{/lang}" data-status="1"><span class="icon icon16 icon-arrow-down"></span><span class="invisible">{lang}chat.general.scroll{/lang}</span></a></li>{*
-			<nav id="timsChatOptions">
+				*}<li><a id="timsChatFullscreen" accesskey="f" class="button timsChatToggle jsTooltip" title="{lang}chat.general.fullscreen{/lang}" data-status="0"><span class="icon icon16 icon-fullscreen"></span><span class="invisible">{lang}chat.general.fullscreen{/lang}</span></a></li>{*
-				<span class="invisible">{lang}chat.general.controls{/lang}</span>
+				*}<li><a id="timsChatNotify" accesskey="n" class="button timsChatToggle jsTooltip" title="{lang}chat.general.notify{/lang}" data-status="0"><span class="icon icon16 icon-bell-alt"></span><span class="invisible">{lang}chat.general.notify{/lang}</span></a></li>{*
-				<ul class="smallButtons buttonGroup">
+				*}<li{if !MODULE_SMILEY || !$smileyCategories|count} style="display: none;"{/if}><a id="timsChatSmilies" accesskey="e" class="button{if ENABLE_SMILIES_DEFAULT_VALUE} active{/if} timsChatToggle jsTooltip" title="{lang}chat.general.smilies{/lang}" data-enable-message="{lang}wcf.global.button.enable{/lang}" data-status="{@ENABLE_SMILIES_DEFAULT_VALUE}"><span class="icon icon16 icon-{if ENABLE_SMILIES_DEFAULT_VALUE}circle-blank{else}off{/if}"></span><span class="invisible">{lang}chat.general.smilies{/lang}</span></a></li>{*
-					<li><a id="timsChatAutoscroll" accesskey="d" class="button active timsChatToggle jsTooltip" title="{lang}wcf.global.button.disable{/lang}" data-disable-message="{lang}wcf.global.button.disable{/lang}" data-enable-message="{lang}wcf.global.button.enable{/lang}" data-status="1"><span class="icon icon16 icon-arrow-down"></span><span>{lang}chat.general.scroll{/lang}</span></a></li>{*
+				*}<li><a id="timsChatClear" class="button jsTooltip" title="{lang}chat.general.clear{/lang}"><span class="icon icon16 icon-remove"></span><span class="invisible">{lang}chat.general.clear{/lang}</span></a></li>{*
-					*}<li><a id="timsChatFullscreen" accesskey="f" class="button timsChatToggle jsTooltip" title="{lang}wcf.global.button.disable{/lang}" data-disable-message="{lang}wcf.global.button.disable{/lang}" data-enable-message="{lang}wcf.global.button.enable{/lang}" data-status="0"><span class="icon icon16 icon-fullscreen"></span><span>{lang}chat.general.fullscreen{/lang}</span></a></li>{*
+				*}<li><a id="timsChatMark" class="button timsChatToggle jsTooltip" title="{lang}chat.general.mark{/lang}" data-status="0"><span class="icon icon16 icon-check"></span><span class="invisible">{lang}chat.general.mark{/lang}</span></a></li>
-					*}<li><a id="timsChatNotify" accesskey="n" class="button timsChatToggle jsTooltip" title="{lang}wcf.global.button.enable{/lang}" data-disable-message="{lang}wcf.global.button.disable{/lang}" data-enable-message="{lang}wcf.global.button.enable{/lang}" data-status="0"><span class="icon icon16 icon-bell-alt"></span><span>{lang}chat.general.notify{/lang}</span></a></li>{*
+			</ul>
-					*}<li{if !MODULE_SMILEY || !$smileyCategories|count} style="display: none;"{/if}><a id="timsChatSmilies" accesskey="e" class="button{if ENABLE_SMILIES_DEFAULT_VALUE} active{/if} timsChatToggle jsTooltip" title="{lang}wcf.global.button.{if ENABLE_SMILIES_DEFAULT_VALUE}dis{else}en{/if}able{/lang}" data-disable-message="{lang}wcf.global.button.disable{/lang}" data-enable-message="{lang}wcf.global.button.enable{/lang}" data-status="{@ENABLE_SMILIES_DEFAULT_VALUE}"><span class="icon icon16 icon-{if ENABLE_SMILIES_DEFAULT_VALUE}circle-blank{else}off{/if}"></span><span>{lang}chat.general.smilies{/lang}</span></a></li>{*
+		</nav>
-					*}<li><a id="timsChatClear" class="button"><span class="icon icon16 icon-remove"></span><span>{lang}chat.general.clear{/lang}</span></a></li>{*
-					*}<li><a id="timsChatMark" class="button timsChatToggle jsTooltip" title="{lang}wcf.global.button.disable{/lang}" data-disable-message="{lang}wcf.global.button.disable{/lang}" data-enable-message="{lang}wcf.global.button.enable{/lang}" data-status="0"><span class="icon icon16 icon-check"></span><span>{lang}chat.general.mark{/lang}</span></a></li>
-				</ul>
-			</nav>
-		</div>
 	</div>
 	
 	{include file='footer' sandbox=false}

template/sidebar.tpl

@@ -1,27 +1,34 @@
-<div id="sidebarContent" class="sidebarContent">
+<div class="tabMenuContainer chatTabMenuContainer containerPadding">
-	<nav class="timsChatSidebarTabs">
+	<nav class="menu chatSidebarMenu">
 		<ul>
-			<li id="toggleUsers" class="active"><a title="{lang}chat.general.users{/lang}">{lang}chat.general.users{/lang} <span class="badge">0</span></a></li>
+			<li id="toggleUsers" class="ui-state-active"><a href="{@$__wcf->getAnchor('timsChatUserList')}" title="{lang}chat.general.users{/lang}">{lang}chat.general.users{/lang} <span class="badge">0</span></a></li>
-			<li id="toggleRooms"><a title="{lang}chat.general.rooms{/lang}">{lang}chat.general.rooms{/lang} <span class="badge">{#$rooms|count}</span><span class="ajaxLoad icon icon32 icon-spinner"></span></a></li>
+			<li id="toggleRooms"><a href="{@$__wcf->getAnchor('timsChatRoomList')}" title="{lang}chat.general.rooms{/lang}">{lang}chat.general.rooms{/lang} <span class="badge">{#$rooms|count}</span><span class="ajaxLoad icon icon32 icon-spinner"></span></a></li>
 		</ul>
 	</nav>
 	
-	<div id="sidebarContainer">
+	<section id="sidebarContent">
-		<ul id="timsChatUserList">
+		<fieldset>
-		</ul>
+			<nav id="timsChatUserList">
-		<nav id="timsChatRoomList" class="sidebarMenu" style="display: none;">
-			<div>
 				<ul>
-				{foreach from=$rooms item='roomListRoom'}
-					{if $roomListRoom->canEnter()}
-						<li{if $roomListRoom->roomID == $room->roomID} class="activeMenuItem"{/if}>
-							<a href="{link application='chat' controller='Chat' object=$roomListRoom}{/link}" class="timsChatRoom">{$roomListRoom}</a>
-						</li>
-					{/if}
-				{/foreach}
 				</ul>
-				<div><button type="button">{lang}chat.general.forceRefresh{/lang}</button></div>
+			</nav>
-			</div>
+		</fieldset>
-		</nav>
+		
-	</div>
+		<fieldset>
+			<nav id="timsChatRoomList" style="display: none;">
+				<div>
+					<ul>
+					{foreach from=$rooms item='roomListRoom'}
+						{if $roomListRoom->canEnter()}
+							<li{if $roomListRoom->roomID == $room->roomID} class="active"{/if}>
+								<a href="{link application='chat' controller='Chat' object=$roomListRoom}{/link}" class="timsChatRoom">{$roomListRoom}</a>
+							</li>
+						{/if}
+					{/foreach}
+					</ul>
+					<div><button type="button">{lang}chat.general.forceRefresh{/lang}</button></div>
+				</div>
+			</nav>
+		</fieldset>
+	</section>
 </div>

template/userListUser.tpl

@@ -1 +1 @@
-{literal}<a class="dropdownToggle userLink" data-user-id="{$userID.toString()}">{@$avatar['24']} {$username}</a>{/literal}
+{literal}<a class="dropdownToggle userLink" data-user-id="{$userID.toString()}">{@$avatar['24']}{$username}</a>{/literal}