From 0edf9f6cb9315b26a6bc6bbe79c9fda062ee5c3a Mon Sep 17 00:00:00 2001 From: Alexander Ebert Date: Fri, 22 Jan 2016 18:56:14 +0100 Subject: [PATCH] Improved visuals of menus, support for another depth --- wcfsetup/install/files/acp/style/acpMenu.css | 99 ------------------- .../install/files/acp/style/mainMenu.scss | 62 ++++++++++++ .../install/files/acp/templates/header.tpl | 3 +- .../files/acp/templates/pageHeaderMenu.tpl | 4 +- .../lib/system/style/StyleCompiler.class.php | 5 + .../files/style/layout/pageHeader.scss | 72 +++++++++----- 6 files changed, 118 insertions(+), 127 deletions(-) delete mode 100644 wcfsetup/install/files/acp/style/acpMenu.css create mode 100644 wcfsetup/install/files/acp/style/mainMenu.scss diff --git a/wcfsetup/install/files/acp/style/acpMenu.css b/wcfsetup/install/files/acp/style/acpMenu.css deleted file mode 100644 index 130db172d0..0000000000 --- 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 index 0000000000..5f96943d8d --- /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 bdfcd879fe..d130cd8a42 100644 --- a/wcfsetup/install/files/acp/templates/header.tpl +++ b/wcfsetup/install/files/acp/templates/header.tpl @@ -7,9 +7,8 @@ {if $pageTitle|isset}{@$pageTitle|language} - {/if}{lang}wcf.global.acp{/lang}{if PACKAGE_ID} - {PAGE_TITLE|language}{/if} - + {@$__wcf->getStyleHandler()->getStylesheet(true)} - {event name='stylesheets'} diff --git a/wcfsetup/install/files/acp/templates/pageHeaderMenu.tpl b/wcfsetup/install/files/acp/templates/pageHeaderMenu.tpl index 6e468aab0f..f4d455611c 100644 --- a/wcfsetup/install/files/acp/templates/pageHeaderMenu.tpl +++ b/wcfsetup/install/files/acp/templates/pageHeaderMenu.tpl @@ -4,10 +4,10 @@
    {foreach from=$__wcf->getACPMenu()->getMenuItems('') item=_sectionMenuItem}
  1. - {@$_sectionMenuItem} + {@$_sectionMenuItem} {assign var=_menuItemCategories value=$__wcf->getACPMenu()->getMenuItems($_sectionMenuItem->menuItem)} -
      +
        {foreach from=$_menuItemCategories item=_menuItemCategory}
      1. {@$_menuItemCategory} diff --git a/wcfsetup/install/files/lib/system/style/StyleCompiler.class.php b/wcfsetup/install/files/lib/system/style/StyleCompiler.class.php index 7eb48b1f58..bfa32e053a 100644 --- 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 0354a08e5f..2abef8151f 100644 --- 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; } } } -- 2.20.1