From 299eb8b4e1adb16f5feaf0e0a5b03a01d14cee7c Mon Sep 17 00:00:00 2001
From: Alexander Ebert <ebert@woltlab.com>
Date: Wed, 13 Jan 2016 14:06:03 +0100
Subject: [PATCH] Improved visuals of message tab menu

---
 .../templates/__messageFormPoll.tpl           | 140 +++++++++---------
 .../templates/messageFormAttachments.tpl      |   2 +-
 .../templates/messageFormSettings.tpl         |   4 +-
 .../templates/messageFormSettingsInline.tpl   |   4 +-
 .../templates/messageFormSmilies.tpl          |   4 +-
 .../files/style/ui/tabMenuMessage.scss        |  92 +++++++-----
 6 files changed, 132 insertions(+), 114 deletions(-)

diff --git a/com.woltlab.wcf/templates/__messageFormPoll.tpl b/com.woltlab.wcf/templates/__messageFormPoll.tpl
index 42aa7e7161..2a91151943 100644
--- a/com.woltlab.wcf/templates/__messageFormPoll.tpl
+++ b/com.woltlab.wcf/templates/__messageFormPoll.tpl
@@ -12,79 +12,77 @@
 		//]]>
 	</script>
 	
-	<div id="poll" class="jsOnly tabMenuContent container containerPadding">
-		<fieldset>
-			<dl{if $errorField == 'pollOptions'} class="formError"{/if}>
-				<dt>
-					<label for="pollQuestion">{lang}wcf.poll.question{/lang}</label>
-				</dt>
-				<dd>
-					<input type="text" name="pollQuestion" id="pollQuestion" value="{$pollQuestion}" class="long" maxlength="255" />
-					{if $errorField == 'pollQuestion'}
-						<small class="innerError">
-							{lang}wcf.global.form.error.empty{/lang}
-						</small>
-					{/if}
-				</dd>
-				<dt>
-					<label>{lang}wcf.poll.options{/lang}</label>
-				</dt>
-				<dd id="pollOptionContainer" class="sortableListContainer">
-					<ol class="sortableList"></ol>
-					{if $errorField == 'pollOptions'}
-						<small class="innerError">
-							{lang}wcf.global.form.error.empty{/lang}
-						</small>
-					{/if}
-					<small>{lang}wcf.poll.options.description{/lang}</small>
-				</dd>
-			</dl>
-			<dl{if $errorField == 'pollEndTime'} class="formError"{/if}>
-				<dt>
-					<label for="pollEndTime">{lang}wcf.poll.endTime{/lang}</label>
-				</dt>
-				<dd>
-					<input type="datetime" name="pollEndTime" id="pollEndTime" value="{if $pollEndTime}{@$pollEndTime|date:'c'}{/if}" class="medium" data-ignore-timezone="true" />
-					{if $errorField == 'pollEndTime'}
-						<small class="innerError">
-							{lang}wcf.poll.endTime.error.{@$errorType}{/lang}
-						</small>
-					{/if}
-				</dd>
-			</dl>
-			<dl{if $errorField == 'pollMaxVotes'} class="formError"{/if}>
-				<dt>
-					<label for="pollMaxVotes">{lang}wcf.poll.maxVotes{/lang}</label>
-				</dt>
-				<dd>
-					<input type="number" name="pollMaxVotes" id="pollMaxVotes" value="{@$pollMaxVotes}" min="1" class="tiny" />
-					{if $errorField == 'pollMaxVotes'}
-						<small class="innerError">
-							{lang}wcf.poll.maxVotes.error.{@$errorType}{/lang}
-						</small>
-					{/if}
-				</dd>
-			</dl>
-			<dl>
-				<dt></dt>
-				<dd>
-					<label><input type="checkbox" name="pollIsChangeable" value="1"{if $pollIsChangeable} checked="checked"{/if} /> {lang}wcf.poll.isChangeable{/lang}</label>
-				</dd>
-				{if !$pollID && $__wcf->getPollManager()->canStartPublicPoll()}
-					<dd>
-						<label><input type="checkbox" name="pollIsPublic" value="1"{if $pollIsPublic} checked="checked"{/if} /> {lang}wcf.poll.isPublic{/lang}</label>
-					</dd>
+	<div id="poll" class="jsOnly messageTabMenuContent">
+		<dl{if $errorField == 'pollOptions'} class="formError"{/if}>
+			<dt>
+				<label for="pollQuestion">{lang}wcf.poll.question{/lang}</label>
+			</dt>
+			<dd>
+				<input type="text" name="pollQuestion" id="pollQuestion" value="{$pollQuestion}" class="long" maxlength="255" />
+				{if $errorField == 'pollQuestion'}
+					<small class="innerError">
+						{lang}wcf.global.form.error.empty{/lang}
+					</small>
 				{/if}
+			</dd>
+			<dt>
+				<label>{lang}wcf.poll.options{/lang}</label>
+			</dt>
+			<dd id="pollOptionContainer" class="sortableListContainer">
+				<ol class="sortableList"></ol>
+				{if $errorField == 'pollOptions'}
+					<small class="innerError">
+						{lang}wcf.global.form.error.empty{/lang}
+					</small>
+				{/if}
+				<small>{lang}wcf.poll.options.description{/lang}</small>
+			</dd>
+		</dl>
+		<dl{if $errorField == 'pollEndTime'} class="formError"{/if}>
+			<dt>
+				<label for="pollEndTime">{lang}wcf.poll.endTime{/lang}</label>
+			</dt>
+			<dd>
+				<input type="datetime" name="pollEndTime" id="pollEndTime" value="{if $pollEndTime}{@$pollEndTime|date:'c'}{/if}" class="medium" data-ignore-timezone="true" />
+				{if $errorField == 'pollEndTime'}
+					<small class="innerError">
+						{lang}wcf.poll.endTime.error.{@$errorType}{/lang}
+					</small>
+				{/if}
+			</dd>
+		</dl>
+		<dl{if $errorField == 'pollMaxVotes'} class="formError"{/if}>
+			<dt>
+				<label for="pollMaxVotes">{lang}wcf.poll.maxVotes{/lang}</label>
+			</dt>
+			<dd>
+				<input type="number" name="pollMaxVotes" id="pollMaxVotes" value="{@$pollMaxVotes}" min="1" class="tiny" />
+				{if $errorField == 'pollMaxVotes'}
+					<small class="innerError">
+						{lang}wcf.poll.maxVotes.error.{@$errorType}{/lang}
+					</small>
+				{/if}
+			</dd>
+		</dl>
+		<dl>
+			<dt></dt>
+			<dd>
+				<label><input type="checkbox" name="pollIsChangeable" value="1"{if $pollIsChangeable} checked="checked"{/if} /> {lang}wcf.poll.isChangeable{/lang}</label>
+			</dd>
+			{if !$pollID && $__wcf->getPollManager()->canStartPublicPoll()}
 				<dd>
-					<label><input type="checkbox" name="pollResultsRequireVote" value="1"{if $pollResultsRequireVote} checked="checked"{/if} /> {lang}wcf.poll.resultsRequireVote{/lang}</label>
-					<small>{lang}wcf.poll.resultsRequireVote.description{/lang}</small>
-				</dd>
-				<dd>
-					<label><input type="checkbox" name="pollSortByVotes" value="1"{if $pollSortByVotes} checked="checked"{/if} /> {lang}wcf.poll.sortByVotes{/lang}</label>
+					<label><input type="checkbox" name="pollIsPublic" value="1"{if $pollIsPublic} checked="checked"{/if} /> {lang}wcf.poll.isPublic{/lang}</label>
 				</dd>
-			</dl>
-			
-			{event name='fields'}
-		</fieldset>
+			{/if}
+			<dd>
+				<label><input type="checkbox" name="pollResultsRequireVote" value="1"{if $pollResultsRequireVote} checked="checked"{/if} /> {lang}wcf.poll.resultsRequireVote{/lang}</label>
+				<small>{lang}wcf.poll.resultsRequireVote.description{/lang}</small>
+			</dd>
+			<dd>
+				<label><input type="checkbox" name="pollSortByVotes" value="1"{if $pollSortByVotes} checked="checked"{/if} /> {lang}wcf.poll.sortByVotes{/lang}</label>
+			</dd>
+		</dl>
+		
+		{event name='fields'}
 	</div>
 {/if}
\ No newline at end of file
diff --git a/com.woltlab.wcf/templates/messageFormAttachments.tpl b/com.woltlab.wcf/templates/messageFormAttachments.tpl
index b9f48218b2..2cd347a4e7 100644
--- a/com.woltlab.wcf/templates/messageFormAttachments.tpl
+++ b/com.woltlab.wcf/templates/messageFormAttachments.tpl
@@ -1,4 +1,4 @@
-<div class="jsOnly formAttachmentContent container containerPadding" id="attachments_{if $wysiwygSelector|isset}{$wysiwygSelector}{else}text{/if}">
+<div class="jsOnly formAttachmentContent messageTabMenuContent" id="attachments_{if $wysiwygSelector|isset}{$wysiwygSelector}{else}text{/if}">
 	<ul class="formAttachmentList clearfix"{if !$attachmentHandler->getAttachmentList()|count} style="display: none"{/if}>
 		{foreach from=$attachmentHandler->getAttachmentList() item=$attachment}
 			<li class="box64" data-object-id="{@$attachment->attachmentID}" data-height="{@$attachment->height}" data-width="{@$attachment->width}">
diff --git a/com.woltlab.wcf/templates/messageFormSettings.tpl b/com.woltlab.wcf/templates/messageFormSettings.tpl
index 7f427ba9b0..2da8f1a448 100644
--- a/com.woltlab.wcf/templates/messageFormSettings.tpl
+++ b/com.woltlab.wcf/templates/messageFormSettings.tpl
@@ -1,4 +1,4 @@
-<fieldset id="settings_{if $wysiwygSelector|isset}{$wysiwygSelector}{else}text{/if}" class="settingsContent tabMenuContent container containerPadding">
+<div id="settings_{if $wysiwygSelector|isset}{$wysiwygSelector}{else}text{/if}" class="settingsContent messageTabMenuContent">
 	<dl class="wide">
 		{if $__wcf->getSession()->getPermission($permissionCanUseBBCodes)}
 			<dt></dt>
@@ -38,4 +38,4 @@
 		
 		{event name='settings'}
 	</dl>
-</fieldset>
+</div>
diff --git a/com.woltlab.wcf/templates/messageFormSettingsInline.tpl b/com.woltlab.wcf/templates/messageFormSettingsInline.tpl
index eeb28f4f42..29eae3cf5f 100644
--- a/com.woltlab.wcf/templates/messageFormSettingsInline.tpl
+++ b/com.woltlab.wcf/templates/messageFormSettingsInline.tpl
@@ -1,5 +1,5 @@
 {hascontent}
-	<fieldset id="settings_{if $wysiwygSelector|isset}{$wysiwygSelector}{else}text{/if}" class="container containerPadding">
+	<div id="settings_{if $wysiwygSelector|isset}{$wysiwygSelector}{else}text{/if}" class="messageTabMenuContent">
 		{content}
 			{event name='beforeSettings'}
 			
@@ -14,7 +14,7 @@
 			
 			{event name='afterSettings'}
 		{/content}
-	</fieldset>
+	</div>
 	<script data-relocate="true">
 		$(function() {
 			WCF.System.Event.addListener('com.woltlab.wcf.messageOptionsInline', 'submit_{if $wysiwygSelector|isset}{$wysiwygSelector}{else}text{/if}', function(parameters) {
diff --git a/com.woltlab.wcf/templates/messageFormSmilies.tpl b/com.woltlab.wcf/templates/messageFormSmilies.tpl
index 56f254a3ad..909fecdc82 100644
--- a/com.woltlab.wcf/templates/messageFormSmilies.tpl
+++ b/com.woltlab.wcf/templates/messageFormSmilies.tpl
@@ -7,7 +7,7 @@
 	{/foreach}
 {/capture}
 
-<div class="container containerPadding{if $__tabCount} messageTabMenu{/if}" data-preselect="true" data-collapsible="false" id="smilies-{if $wysiwygSelector|isset}{$wysiwygSelector}{else}text{/if}">
+<div class="messageTabMenuContent{if $__tabCount} messageTabMenu{/if}" data-preselect="true" data-collapsible="false" id="smilies-{if $wysiwygSelector|isset}{$wysiwygSelector}{else}text{/if}">
 	{capture assign=__defaultSmilies}
 		{assign var='__firstSmileyCategory' value=$smileyCategories|reset}
 		{if $__firstSmileyCategory->categoryID}
@@ -25,7 +25,7 @@
 		</nav>
 		
 		{foreach from=$smileyCategories item=smileyCategory}
-			<div id="smilies-{if $wysiwygSelector|isset}{$wysiwygSelector|encodeJS}{else}text{/if}-{@$smileyCategory->categoryID}">
+			<div class="messageTabMenuContent" id="smilies-{if $wysiwygSelector|isset}{$wysiwygSelector|encodeJS}{else}text{/if}-{@$smileyCategory->categoryID}">
 				{if !$smileyCategory->categoryID}{@$__defaultSmilies}{/if}
 			</div>
 		{/foreach}
diff --git a/wcfsetup/install/files/style/ui/tabMenuMessage.scss b/wcfsetup/install/files/style/ui/tabMenuMessage.scss
index 4b3c77dfd1..cbd6d08bfb 100644
--- a/wcfsetup/install/files/style/ui/tabMenuMessage.scss
+++ b/wcfsetup/install/files/style/ui/tabMenuMessage.scss
@@ -1,39 +1,47 @@
 .messageTabMenu {
-	> div,
-	> fieldset,
-	> section {
+	> .messageTabMenuContent {
 		display: none;
 		
 		&.active {
+			background-color: $wcfContentBackground;
 			display: block;
+			margin-top: 0;
 		}
 	}
 	
-	> div {
-		> nav {
-			ul {
-				white-space: nowrap;
+	// prevent double formatting with nested tab menus
+	&:not(.messageTabMenuContent) > .messageTabMenuContent.active {
+		border: 1px solid $wcfContentBorderInner;
+		border-top-width: 0;
+		padding: 20px;
+	}
+	
+	// sub tab menu
+	&.messageTabMenuContent > nav {
+		border-bottom: 1px solid $wcfContentBorderInner;
+		margin: -20px -20px 20px -20px;
+		padding: 5px 20px;
+		
+		> ul {
+			@extend .inlineList;
+			
+			> li {
+				outline: 0;
 				
-				li {
+				&:not(:last-child) {
+					margin-right: 20px;
+				}
+				
+				&.active > a {
+					color: $wcfContentLinkActive;
+				}
+				
+				> a {
+					display: block;
 					outline: 0;
 					
-					&.active a,
-					&.active a:hover {
-						color: $wcfContentLinkActive;
-					}
-					
-					a {
-						color: $wcfContentLinkActive;
-						display: block;
-						outline: 0;
-						
-						@extend .userSelectNone;
-						@extend .wcfFontSmall;
-						
-						&:hover {
-							color: $wcfContentLinkActive;
-						}
-					}
+					@extend .userSelectNone;
+					@extend .wcfFontSmall;
 				}
 			}
 		}
@@ -46,22 +54,38 @@
 }
 
 .messageTabMenuNavigation {
-	position: relative;
-	
 	> ul {
-		border-bottom: 1px solid $wcfContentBorderInner;
-		margin-bottom: 10px;
-		padding: 10px 0;
+		background-color: $wcfContentBackground;
+		border: 1px solid $wcfContentBorderInner;
+		border-top-width: 0;
 		
 		@extend .inlineList;
 		
 		> li {
+			border-right: 1px solid $wcfContentBorderInner;
+			
 			&:not(:last-child) {
-				margin-right: 20px;
+				margin-right: 0;
+			}
+			
+			&.active > a {
+				color: $wcfContentLinkActive;
+				position: relative;
+				
+				&::after {
+					border-bottom: 1px solid $wcfContentBackground;
+					bottom: -1px;
+					content: "";
+					display: block;
+					left: 0;
+					position: absolute;
+					right: 0;
+				}
 			}
 			
 			> a {
 				display: block;
+				padding: 10px 20px;
 				
 				@extend .userSelectNone;
 				
@@ -73,11 +97,7 @@
 	}
 	
 	> span {
-		border-top: 1px solid $wcfContentLink;
-		bottom: 0;
-		content: "";
-		position: absolute;
-		transition: transform .2s linear, width .2s linear;
+		display: none;
 	}
 }
 
-- 
2.20.1