Improved visuals of message tab menu

diff --git a/com.woltlab.wcf/templates/__messageFormPoll.tpl b/com.woltlab.wcf/templates/__messageFormPoll.tpl
index 42aa7e716142aa4302f40b78688fd2f8cade5085..2a911519435f00b1b7ff184d947867e72e1bece6 100644 (file)
--- 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 b9f48218b25325e9e3a3dd3653a0d6be0da25f45..2cd347a4e7bb5792d612e2daa53c5332a96e8860 100644 (file)
--- 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 7f427ba9b03670b86271c5b0d1ce5dd6733a7b46..2da8f1a448fef5b108ebaa29788ed73a7600fd69 100644 (file)
--- 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 eeb28f4f429e35a85acf8b8a2b20fe381def261e..29eae3cf5fb336f35130782fef4ca1e00f7b5ff4 100644 (file)
--- 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 56f254a3ad88ada24b58c862127699fbcf484e55..909fecdc82b9321ec16d1a8fed0ecc20e75a8ca1 100644 (file)
--- 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 4b3c77dfd1d471a1fbd1bf64778e9e066d5e7876..cbd6d08bfbb55e66ce813e39ea8f9deb7fafecfc 100644 (file)
--- 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;
        }
 }