From cb878020806ff4b64d23ea4d1d138350b695df3b Mon Sep 17 00:00:00 2001 From: Luke Towers Date: Wed, 13 Feb 2019 14:54:13 -0600 Subject: [PATCH] Added support for counter and counterLabel to main menu. Refs: #16, Refs: 7bcec1bd99a813a2fda8dfdc9f25ce51ed663bf8, Replaces: #4061 --- modules/backend/assets/css/october.css | 4 +++ .../backend/assets/less/layout/mainmenu.less | 33 +++++++++++++++++++ modules/backend/classes/NavigationManager.php | 33 ++++++++++++++----- modules/backend/layouts/_mainmenu.htm | 7 ++++ modules/backend/layouts/_sidenav.htm | 2 +- 5 files changed, 70 insertions(+), 9 deletions(-) diff --git a/modules/backend/assets/css/october.css b/modules/backend/assets/css/october.css index ffafe4792..9dc17d202 100644 --- a/modules/backend/assets/css/october.css +++ b/modules/backend/assets/css/october.css @@ -655,6 +655,10 @@ body.slim-container .layout .layout-container {padding-left:0 !important;padding .flex-layout-item.layout-container {max-width:none} body.mainmenu-open {overflow:hidden;position:fixed} .mainmenu-tooltip .tooltip-inner {font-size:13px;padding:6px 16px} +ul.mainmenu-nav {font-size:14px} +ul.mainmenu-nav li .svg-icon {-webkit-backface-visibility:hidden;backface-visibility:hidden} +ul.mainmenu-nav li span.counter {display:block;position:absolute;top:.143em;right:0;padding:.143em .429em .214em .286em;background-color:#d9350f;color:#fff;font-size:.786em;line-height:100%;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;opacity:1;filter:alpha(opacity=100);-webkit-transform:scale(1,);-ms-transform:scale(1,);transform:scale(1,);-webkit-transition:all 0.3s;transition:all 0.3s} +ul.mainmenu-nav li span.counter.empty {opacity:0;filter:alpha(opacity=0);-webkit-transform:scale(0,);-ms-transform:scale(0,);transform:scale(0,)} nav#layout-mainmenu {background-color:#000;padding:0 0 0 20px;line-height:0;white-space:nowrap;vertical-align:top} nav#layout-mainmenu a {text-decoration:none} nav#layout-mainmenu a:focus {background:transparent} diff --git a/modules/backend/assets/less/layout/mainmenu.less b/modules/backend/assets/less/layout/mainmenu.less index 1370e3b39..a1c46f600 100644 --- a/modules/backend/assets/less/layout/mainmenu.less +++ b/modules/backend/assets/less/layout/mainmenu.less @@ -75,6 +75,39 @@ body.mainmenu-open { } } +ul.mainmenu-nav { + font-size: @font-size-base; + + li { + /* Fix for SVG icons not rendering on initial page load until repaint (hover, move, etc) */ + .svg-icon { + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + } + + span.counter { + display: block; + position: absolute; + top: .143em; + right: 0; + padding: .143em .429em .214em .286em; + background-color: @color-sidebarnav-counter-bg; + color: @color-sidebarnav-counter-text; + font-size: .786em; + line-height: 100%; + .border-radius(3px); + .opacity(1); + .scale(1); + .transition(all 0.3s); + + &.empty { + .opacity(0); + .scale(0); + } + } + } +} + nav#layout-mainmenu { background-color: @color-mainmenu; padding: 0 0 0 20px; diff --git a/modules/backend/classes/NavigationManager.php b/modules/backend/classes/NavigationManager.php index 8af12ee33..fc12786bc 100644 --- a/modules/backend/classes/NavigationManager.php +++ b/modules/backend/classes/NavigationManager.php @@ -35,6 +35,8 @@ class NavigationManager 'label' => null, 'icon' => null, 'iconSvg' => null, + 'counter' => null, + 'counterLabel'=> null, 'url' => null, 'permissions' => [], 'order' => 500, @@ -168,17 +170,20 @@ class NavigationManager * - permissions - an array of permissions the back-end user should have, optional. * The item will be displayed if the user has any of the specified permissions. * - order - a position of the item in the menu, optional. - * - sideMenu - an array of side menu items, optional. If provided, the array items - * should represent the side menu item code, and each value should be an associative - * array with the following keys: - * - label - specifies the menu label localization string key, required. - * - icon - an icon name from the Font Awesome icon collection, required. - * - url - the back-end relative URL the menu item should point to, required. - * - attributes - an array of attributes and values to apply to the menu item, optional. - * - permissions - an array of permissions the back-end user should have, optional. * - counter - an optional numeric value to output near the menu icon. The value should be * a number or a callable returning a number. * - counterLabel - an optional string value to describe the numeric reference in counter. + * - sideMenu - an array of side menu items, optional. If provided, the array items + * should represent the side menu item code, and each value should be an associative + * array with the following keys: + * - label - specifies the menu label localization string key, required. + * - icon - an icon name from the Font Awesome icon collection, required. + * - url - the back-end relative URL the menu item should point to, required. + * - attributes - an array of attributes and values to apply to the menu item, optional. + * - permissions - an array of permissions the back-end user should have, optional. + * - counter - an optional numeric value to output near the menu icon. The value should be + * a number or a callable returning a number. + * - counterLabel - an optional string value to describe the numeric reference in counter. * @param string $owner Specifies the menu items owner plugin or module in the format Author.Plugin. * @param array $definitions An array of the menu item definitions. */ @@ -306,6 +311,15 @@ class NavigationManager $this->loadItems(); } + foreach ($this->items as $item) { + if ($item->counter !== null && is_callable($item->counter)) { + $item->counter = call_user_func($item->counter, $item); + if (empty($item->counter)) { + $item->counter = null; + } + } + } + return $this->items; } @@ -337,6 +351,9 @@ class NavigationManager foreach ($items as $item) { if ($item->counter !== null && is_callable($item->counter)) { $item->counter = call_user_func($item->counter, $item); + if (empty($item->counter)) { + $item->counter = null; + } } } diff --git a/modules/backend/layouts/_mainmenu.htm b/modules/backend/layouts/_mainmenu.htm index 9ed6912db..303b116cd 100644 --- a/modules/backend/layouts/_mainmenu.htm +++ b/modules/backend/layouts/_mainmenu.htm @@ -33,6 +33,13 @@ label)) ?> + counterLabel): ?>title="counterLabel)) ?>" + > + counter) ?> + diff --git a/modules/backend/layouts/_sidenav.htm b/modules/backend/layouts/_sidenav.htm index 85fcb9ea1..3b3a53786 100644 --- a/modules/backend/layouts/_sidenav.htm +++ b/modules/backend/layouts/_sidenav.htm @@ -36,7 +36,7 @@ class="counter counter === null ? 'empty' : null ?>" data-menu-id="mainMenuCode.'/'.$sideItemCode) ?>" counterLabel): ?>title="counterLabel)) ?>" - > + > counter) ?>