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)} -