Improved visuals of menus, support for another depth

diff --git a/wcfsetup/install/files/acp/style/acpMenu.css b/wcfsetup/install/files/acp/style/acpMenu.css
deleted file mode 100644 (file)
index 130db17..0000000
--- a/wcfsetup/install/files/acp/style/acpMenu.css
+++ /dev/null
@@ -1,99 +0,0 @@
-.wcfAcpMenu {
-       font-size: 13px;
-       font-weight: 400;
-       padding: 5px;
-}
-
-.wcfAcpMenu.doubleColumned {
-       -webkit-columns: 2;
-       -moz-columns: 2;
-       columns: 2;
-       
-       /* 11px = 5px + border + 5px */
-       -webkit-column-gap: 11px;
-       -moz-column-gap: 11px;
-       column-gap: 11px;
-       
-       -webkit-column-rule: 1px solid rgb(238, 238, 238);
-       -moz-column-rule: 1px solid rgb(238, 238, 238);
-       column-rule: 1px solid rgb(238, 238, 238);
-}
-
-.wcfAcpMenu.doubleColumned > li {
-       -webkit-column-break-inside: avoid;
-       page-break-inside: avoid;
-       break-inside: avoid;
-}
-
-.wcfAcpMenu > li {
-       min-width: 250px;
-}
-
-.wcfAcpMenu > li:not(:first-child) {
-       border-top: 1px solid rgb(238, 238, 238);
-}
-
-.wcfAcpMenu > li > span {
-       background-color: rgb(236, 240, 241);
-       color: rgb(127, 140, 141);
-       font-size: 11px;
-       display: block;
-       padding: 10px;
-       text-transform: uppercase;
-}
-
-.menuItemList > li > a {
-       color: rgb(54, 54, 54);
-       display: block;
-       font-size: 13px;
-       padding: 10px 20px;
-       white-space: nowrap;
-}
-
-.menuItemList > li > a:hover {
-       background-color: rgb(66, 129, 244);
-       color: #fff;
-       text-decoration: none;
-}
-
-.menuItemList > li.active > a {
-       background-color: rgb(217, 237, 247);
-}
-
-.menuItemWrapper {
-       display: flex;
-}
-
-.menuItemWrapper:hover > a,
-.menuItemWrapper > .active {
-       background-color: rgb(217, 237, 247);
-}
-
-.menuItemWrapper > a {
-       color: rgb(54, 54, 54);
-       display: block;
-       flex: 0 auto;
-       padding: 10px;
-       white-space: nowrap;
-}
-
-.menuItemWrapper > a:first-child {
-       flex: 1 auto;
-       padding: 10px 20px;
-}
-
-.menuItemWrapper > a > .icon {
-       color: rgb(54, 54, 54);
-       opacity: .6;
-}
-
-.menuItemList .menuItemWrapper > a:hover {
-       background-color: rgb(66, 129, 244);
-       color: #fff;
-       text-decoration: none;
-}
-
-.menuItemList .menuItemWrapper > a:hover > .icon {
-       color: #fff;
-       opacity: 1;
-}

diff --git a/wcfsetup/install/files/acp/style/mainMenu.scss b/wcfsetup/install/files/acp/style/mainMenu.scss
new file mode 100644 (file)
index 0000000..5f96943
--- /dev/null
+++ b/wcfsetup/install/files/acp/style/mainMenu.scss
@@ -0,0 +1,62 @@
+.wcfAcpMenu {
+       &.doubleColumned {
+               -webkit-columns: 2;
+               -moz-columns: 2;
+               columns: 2;
+               
+               -webkit-column-gap: 1px;
+               -moz-column-gap: 1px;
+               column-gap: 1px;
+               
+               -webkit-column-rule: 1px solid $wcfContentBorderInner;
+               -moz-column-rule: 1px solid $wcfContentBorderInner;
+               column-rule: 1px solid $wcfContentBorderInner;
+               
+               > li {
+                       -webkit-column-break-inside: avoid;
+                       page-break-inside: avoid;
+                       break-inside: avoid;
+               }
+       }
+       
+       > li {
+               min-width: 250px;
+       }
+}
+
+.boxMenuDepth1 > li > span {
+       color: $wcfTabularBoxHeadline;
+       cursor: default;
+       font-weight: 600 !important;
+       
+       @extend .wcfFontBold;
+}
+
+.menuItemWrapper {
+       display: flex;
+       
+       &:hover > a,
+       > .active {
+               background-color: $wcfDropdownBackgroundActive;
+               color: $wcfDropdownLinkActive;
+               
+               > .icon {
+                       color: $wcfDropdownLinkActive;
+               }
+       }
+       
+       > a {
+               color: $wcfDropdownLink;
+               display: block;
+               flex: 0 0 auto;
+               padding: 5px 10px;
+               white-space: nowrap;
+               
+               @extend .wcfFontDefault;
+               
+               &:first-child {
+                       flex: 1 1 auto;
+                       padding: 5px 20px 5px 40px;
+               }
+       }
+}

diff --git a/wcfsetup/install/files/acp/templates/header.tpl b/wcfsetup/install/files/acp/templates/header.tpl
index bdfcd879fe8883b9aec54864b42bf9c2440c7cc1..d130cd8a42f0cd02ae54341809cc370b5cdedd4b 100644 (file)
--- a/wcfsetup/install/files/acp/templates/header.tpl
+++ b/wcfsetup/install/files/acp/templates/header.tpl
@@ -7,9 +7,8 @@
        <title>{if $pageTitle|isset}{@$pageTitle|language} - {/if}{lang}wcf.global.acp{/lang}{if PACKAGE_ID} - {PAGE_TITLE|language}{/if}</title>
        
        <!-- Stylesheets -->
-       <link href='//fonts.googleapis.com/css?family=Open+Sans:400,300,600' rel='stylesheet' type='text/css'>
+       <link href="//fonts.googleapis.com/css?family=Open+Sans:400,300,600" rel="stylesheet">
        {@$__wcf->getStyleHandler()->getStylesheet(true)}
-       <link href="{@$__wcf->getPath()}acp/style/acpMenu.css" type="text/css" rel="stylesheet">
        {event name='stylesheets'}
        
        <!-- Icons -->

diff --git a/wcfsetup/install/files/acp/templates/pageHeaderMenu.tpl b/wcfsetup/install/files/acp/templates/pageHeaderMenu.tpl
index 6e468aab0f210d40df07032441649976b162f856..f4d455611c7e7f156d6fee84aceebc4080c561a6 100644 (file)
--- a/wcfsetup/install/files/acp/templates/pageHeaderMenu.tpl
+++ b/wcfsetup/install/files/acp/templates/pageHeaderMenu.tpl
@@ -4,10 +4,10 @@
                <ol class="boxMenu">
                        {foreach from=$__wcf->getACPMenu()->getMenuItems('') item=_sectionMenuItem}
                                <li class="boxMenuHasChildren{if $_sectionMenuItem->menuItem|in_array:$_activeMenuItems} active{/if}" data-menu-item="{$_sectionMenuItem->menuItem}">
-                                       <a>{@$_sectionMenuItem}</a>
+                                       <span>{@$_sectionMenuItem}</span>
                                        
                                        {assign var=_menuItemCategories value=$__wcf->getACPMenu()->getMenuItems($_sectionMenuItem->menuItem)}
-                                       <ol class="wcfAcpMenu boxMenuDepth1 subMenu{if $_menuItemCategories|count > 3} doubleColumned {/if}">
+                                       <ol class="wcfAcpMenu boxMenuDepth1 subMenu{if $_menuItemCategories|count > 3} doubleColumned{/if}">
                                                {foreach from=$_menuItemCategories item=_menuItemCategory}
                                                        <li>
                                                                <span>{@$_menuItemCategory}</span>

diff --git a/wcfsetup/install/files/lib/system/style/StyleCompiler.class.php b/wcfsetup/install/files/lib/system/style/StyleCompiler.class.php
index 7eb48b1f58d27c3918254ed5dbd04b7df81173dc..bfa32e053ad132801d99a7c70f865dc328d2c626 100644 (file)
--- a/wcfsetup/install/files/lib/system/style/StyleCompiler.class.php
+++ b/wcfsetup/install/files/lib/system/style/StyleCompiler.class.php
@@ -177,6 +177,11 @@ class StyleCompiler extends SingletonFactory {
                        
                        closedir($handle);
                }
+               
+               $additional = ['mainMenu'];
+               for ($i = 0, $length = count($additional); $i < $length; $i++) {
+                       $files[] = WCF_DIR . 'acp/style/' . $additional[$i] . '.scss';
+               }
                // TESTING ONLY
                
                //$files = glob(WCF_DIR.'style/*.less');

diff --git a/wcfsetup/install/files/style/layout/pageHeader.scss b/wcfsetup/install/files/style/layout/pageHeader.scss
index 0354a08e5ff72ed711df71e52a4a223df0780f67..2abef8151f810e89c8ad1f8afe731b90ad9db9db 100644 (file)
--- a/wcfsetup/install/files/style/layout/pageHeader.scss
+++ b/wcfsetup/install/files/style/layout/pageHeader.scss
@@ -52,7 +52,8 @@
                                margin-right: 12px;
                        }
                        
-                       > a {
+                       > a,
+                       > span {
                                background-color: $wcfHeaderMenuBackground;
                                color: $wcfHeaderMenuLink;
                                display: block;
@@ -61,8 +62,14 @@
                                padding: 4px 12px;
                        }
                        
+                       > span {
+                               cursor: default;
+                       }
+                       
                        &.active > a,
-                       &:hover > a {
+                       &:hover > a,
+                       &.active > span,
+                       &:hover > span {
                                background-color: $wcfHeaderMenuBackgroundActive;
                                color: $wcfHeaderMenuLinkActive;
                        }
@@ -82,35 +89,34 @@
                        }
                        
                        > a {
-                               padding-right: 21px;
+                               padding-right: 30px;
                                
-                               &::after {
-                                       content: $fa-var-caret-down;
+                               &::before {
+                                       border-left: 1px solid $wcfHeaderBackground;
+                                       bottom: 0;
+                                       content: "";
                                        display: block;
-                                       font-family: FontAwesome;
                                        position: absolute;
-                                       right: 6px;
-                                       top: 3px;
-                                       transition: transform .12s ease-out;
+                                       right: 22px;
+                                       top: 0;
                                }
                        }
-               }
-               
-               // TESTING
-               > .boxMenuHasChildren > a {
-                       padding-right: 30px;
                        
-                       &::before {
-                               border-left: 1px solid $wcfHeaderBackground;
-                               bottom: 0;
-                               content: "";
+                       > span {
+                               padding-right: 21px;
+                       }
+                       
+                       > a::after,
+                       > span::after {
+                               content: $fa-var-caret-down;
                                display: block;
+                               font-family: FontAwesome;
                                position: absolute;
-                               right: 22px;
-                               top: 0;
+                               right: 6px;
+                               top: 3px;
+                               transition: transform .12s ease-out;
                        }
                }
-               // TESTING
                
                .boxMenuDepth1 {
                        background-color: $wcfHeaderMenuDropdownBackground;
@@ -131,6 +137,10 @@
                        > li {
                                > a {
                                        color: $wcfHeaderMenuDropdownLink;
+                               }
+                               
+                               > a,
+                               > span {
                                        display: block;
                                        padding: 5px 20px;
                                        white-space: nowrap;
@@ -144,10 +154,24 @@
                                        color: $wcfHeaderMenuDropdownLinkActive;
                                        text-decoration: none;
                                }
+                       }
+               }
+               
+               .boxMenuDepth2 > li {
+                       > a {
+                               color: $wcfHeaderMenuDropdownLink;
+                               display: block;
+                               padding: 5px 20px 5px 40px;
+                               white-space: nowrap;
                                
-                               &.active > a {
-                                       cursor: default;
-                               }
+                               @extend .wcfFontDefault;
+                       }
+                       
+                       &.active > a,
+                       > a:hover {
+                               background-color: $wcfHeaderMenuDropdownBackgroundActive;
+                               color: $wcfHeaderMenuDropdownLinkActive;
+                               text-decoration: none;
                        }
                }
        }