From: Alexander Ebert Date: Mon, 11 May 2015 22:09:16 +0000 (+0200) Subject: Tab menus are now based upon .messageTabMenu X-Git-Tag: 3.0.0_Beta_1~2406 X-Git-Url: https://git.stricted.de/?a=commitdiff_plain;h=8013265ad5d6250831c1a00dc3a852b88e3ba8ea;p=GitHub%2FWoltLab%2FWCF.git Tab menus are now based upon .messageTabMenu .messageTabMenu has still to be reduced to incorporate .tabMenuContainer with required changes. In fact .messageTabMenu should only be a modifier for .tabMenuContainer to alter the appearance w/o reinventing the wheel like it does right now. --- diff --git a/wcfsetup/install/files/js/WoltLab/WCF/UI/Dialog.js b/wcfsetup/install/files/js/WoltLab/WCF/UI/Dialog.js index e8556a8653..13f11e5bb0 100644 --- a/wcfsetup/install/files/js/WoltLab/WCF/UI/Dialog.js +++ b/wcfsetup/install/files/js/WoltLab/WCF/UI/Dialog.js @@ -66,6 +66,7 @@ define(['jquery', 'Core', 'Dictionary', 'DOM/Util'], function($, Core, Dictionar closable: true, closeButtonLabel: WCF.Language.get('wcf.global.button.close'), closeConfirmMessage: '', + disableContentPadding: false, disposeOnClose: false, title: '', @@ -161,6 +162,7 @@ define(['jquery', 'Core', 'Dictionary', 'DOM/Util'], function($, Core, Dictionar var contentContainer = document.createElement('div'); contentContainer.classList.add('dialogContent'); + if (options.disableContentPadding) contentContainer.classList.add('dialogContentNoPadding'); dialog.appendChild(contentContainer); var content; @@ -244,6 +246,11 @@ define(['jquery', 'Core', 'Dictionary', 'DOM/Util'], function($, Core, Dictionar WCF.DOMNodeInsertedHandler.execute(); }, + /** + * Rebuilds dialog identified by given id. + * + * @param {string} id element id + */ rebuild: function(id) { var data = _dialogs.get(id); if (typeof data === 'undefined') { @@ -257,7 +264,9 @@ define(['jquery', 'Core', 'Dictionary', 'DOM/Util'], function($, Core, Dictionar // fix for a calculation bug in Chrome causing the scrollbar to overlap the border if ($.browser.chrome) { - data.content.style.setProperty('margin-right', '-1px'); + if (data.content.scrollHeight > data.content.clientHeight) { + data.content.style.setProperty('margin-right', '-1px'); + } } var contentContainer = data.content.parentNode; diff --git a/wcfsetup/install/files/style/dialog.less b/wcfsetup/install/files/style/dialog.less index 78f107ebc7..041d6e48ed 100644 --- a/wcfsetup/install/files/style/dialog.less +++ b/wcfsetup/install/files/style/dialog.less @@ -89,17 +89,20 @@ box-sizing: border-box; color: @wcfColor; overflow: auto; - padding: 10px; - padding-bottom: 0; - &:after { - content: ""; - display: block; - height: 10px; - } - - &.dialogForm:after { - height: 17px; + &:not(.dialogContentNoPadding) { + padding: 10px; + padding-bottom: 0; + + &:after { + content: ""; + display: block; + height: 10px; + } + + &.dialogForm:after { + height: 17px; + } } &:not(.dialogForm) { diff --git a/wcfsetup/install/files/style/tabMenu.less b/wcfsetup/install/files/style/tabMenu.less index 0d92174364..7da4bbe5b8 100644 --- a/wcfsetup/install/files/style/tabMenu.less +++ b/wcfsetup/install/files/style/tabMenu.less @@ -1,194 +1,150 @@ -.tabMenu { - display: block; - margin-top: @wcfGapLarge; - position: relative; - text-align: left; +.tabMenuContainer { + line-height: @wcfBaseLineHeight; - > ul { - background-color: @wcfContainerAccentBackgroundColor; - border-color: @wcfContainerBorderColor; - border-style: solid; - border-width: 1px 1px 0 1px; - display: inline-block; - font-size: 0; - position: relative; - white-space: nowrap; - word-wrap: normal; - - .textShadow(@wcfContainerBackgroundColor); - - > li { - display: inline-block; - outline: 0; - - &.ui-state-active { - > a { - background-color: @wcfContainerBackgroundColor; - border-color: @wcfContainerBorderColor @wcfContainerBorderColor @wcfContainerBackgroundColor; - border-style: solid; - border-width: 1px; - color: @wcfLinkColor; - font-weight: bold; - z-index: 30; - } - } + > .tabMenu { + > ul { + font-size: 0; + white-space: nowrap; - > a { - color: @wcfDimmedColor; + > li { + border: 1px solid @wcfContainerBorderColor; + border-bottom-color: transparent; display: inline-block; - font-size: 1.1rem; - outline: 0; - padding: 7px 10px; - position: relative; - text-decoration: none; - z-index: 10; + margin-bottom: -2px; - > .badge { - top: -1px; + &:first-child { + border-top-left-radius: @wcfContainerBorderRadius; + + > a { + border-top-left-radius: @wcfContainerBorderRadius - 1; + } } - } - - &:not(.ui-state-active) { - > a:hover { - color: @wcfLinkColor; + + &:last-child { + border-top-right-radius: @wcfContainerBorderRadius; + + > a { + border-top-right-radius: @wcfContainerBorderRadius - 1; + } } - } - } - } -} - -@media only screen and (max-width: 800px) { - .tabMenu { - > ul > li.ui-state-active { - margin-top: -1px; - - &:first-child { - margin-left: -1px; - } - - &:last-child { - margin-right: -1px; - } - } - - } -} - -@media all and (min-width: 801px) { - .tabMenu > ul { - padding: 0 5px 3px 5px; - - > li { - > a { - bottom: -3px; - padding: 1px 10px 3px; - } - - &.ui-state-active { - > a { - font-size: 1.3rem; - margin-top: -10px; - padding: 10px 15px 5px; + + &:not(:first-child) { + border-left-width: 0; } - &:first-child { - margin-left: -6px; + > a { + color: @wcfButtonColor; + display: block; + font-size: 1rem; + line-height: @wcfBaseLineHeight; + padding: 7px 14px 8px 14px; + text-decoration: none; + + .userSelectNone; + + &:hover { + color: @wcfLinkColor; + } } - &:last-child { - margin-right: -6px; + &.active { + > a { + background-color: @wcfContainerBackgroundColor; + color: @wcfLinkColor; + } } } } } -} - -.tabMenu > ul > li.ui-state-active > a, -.tabMenu > ul > li.ui-state-disabled > a, -.tabMenu > ul > li.ui-state-processing > a { - cursor: default; -} - -.tabMenuContent { - display: block; - margin-top: -1px; - min-height: @wcfGapLarge; - position: relative; - z-index: 20; /* Prevents border overlay during transition */ - &.hidden { + > div, + > fieldset{ + background-color: @wcfContainerBackgroundColor; + border-width: 0; + border-radius: 0; + border: 1px solid @wcfContainerBorderColor; display: none; - } -} - -/* sub tabs */ -.tabMenuContainer { - &.containerPadding > .menu { - margin: -@wcfGapMedium -@wcfGapLarge @wcfGapMedium -@wcfGapLarge; /* reverse paddings from .containerPadding */ + position: static; + + &.active { + display: block; + } } - > .menu { - border-bottom: 1px solid @wcfContainerBorderColor; - padding: @wcfGapTiny @wcfGapSmall; - - .linearGradient(@wcfContainerBackgroundColor, @wcfContainerBackgroundColor, @wcfContainerAccentBackgroundColor); - - ul { - display: inline-block; - font-size: 0; - white-space: nowrap; + > div { + > nav { + background-color: @wcfContainerBackgroundColor; + border-bottom: 1px solid @wcfContainerBorderColor; + margin: -14px -21px 14px -21px; + padding: @wcfGapTiny @wcfGapSmall; - li { + ul { display: inline-block; - outline: 0; - vertical-align: bottom; - - &.ui-state-active a, - &.ui-state-active a:hover { - background-color: @wcfButtonPrimaryBackgroundColor; - border-color: @wcfButtonPrimaryBorderColor; - color: @wcfButtonPrimaryColor; - cursor: default; - } + font-size: 0; + white-space: nowrap; - a { - background-color: @wcfContainerBackgroundColor; - border: 1px solid @wcfContainerBorderColor; - border-radius: @wcfButtonBorderRadius; - color: @wcfButtonColor; - display: block; - font-size: @wcfSmallFontSize; - margin: @wcfGapTiny 0; + li { + display: inline-block; outline: 0; - padding: @wcfGapTiny @wcfGapSmall; + vertical-align: baseline; - &:hover { - background-color: @wcfButtonHoverBackgroundColor; - border-color: @wcfButtonHoverBorderColor; - color: @wcfButtonHoverColor; - text-decoration: none; + &.active a, + &.active a:hover { + color: @wcfButtonPrimaryColor; + cursor: default; + } + + a { + color: @wcfButtonColor; + display: block; + font-size: @wcfSmallFontSize; + outline: 0; + padding: 0 @wcfGapSmall; + + .userSelectNone; + + &:hover { + color: @wcfButtonHoverColor; + text-decoration: none; + } + } + + &:not(:last-child) { + padding-right: @wcfGapTiny; + } + + &.dropdown > a { + font-size: 1.0rem; + padding: 4px 7px 2px; } - } - - &:not(:last-child) { - padding-right: @wcfGapTiny; - } - - &.dropdown > a { - font-size: 1.0rem; - padding: 4px 7px 2px; } } } + + > div, + > fieldset { + border-top-width: 0; + } } } @media only screen and (max-width: 800px) { - .tabMenuContainer.containerPadding > .menu { - margin: -@wcfGapSmall -@wcfGapMedium @wcfGapSmall -@wcfGapMedium; /* reverse paddings from .containerPadding */ + .messageTabMenu > div > nav { + margin: (@wcfGapTiny - @wcfGapSmall) -@wcfGapSmall @wcfGapSmall -@wcfGapSmall; } } -.containerPadding > .tabMenuContainer:last-child { - margin-bottom: @wcfGapSmall; +.dialogContentNoPadding .tabMenuContainer { + > nav > ul > li { + border-top-width: 0; + + &:first-child { + border-left-width: 0; + } + } + + > div, + > fieldset { + border-width: 1px 0 0 0; + } }