Skip to content

Commit

Permalink
Fix issue with nested menu items (#16450)
Browse files Browse the repository at this point in the history 
* Add setting for maximum of nested menu items

* Add styles for "more" menu item

* Added lexicons for "topmenu_subitems_max" setting

* grunt build

---------

Co-authored-by: Jason Coward <jason@opengeek.com>
  • Loading branch information
@Ruslan-Aleev @opengeek
Ruslan-Aleev and opengeek authored Sep 27, 2023
1 parent 0eddd0f commit fa690a3
Show file tree
Hide file tree
Showing 6 changed files with 86 additions and 75 deletions.
9 changes: 9 additions & 0 deletions _build/data/transport.core.system_settings.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1894,6 +1894,15 @@
'area' => 'manager',
'editedon' => null,
), '', true, true);
$settings['topmenu_subitems_max']= $xpdo->newObject('modSystemSetting');
$settings['topmenu_subitems_max']->fromArray(array (
'key' => 'topmenu_subitems_max',
'value' => '10',
'xtype' => 'textfield',
'namespace' => 'core',
'area' => 'manager',
'editedon' => null,
), '', true, true);
$settings['tree_default_sort']= $xpdo->newObject('modSystemSetting');
$settings['tree_default_sort']->fromArray(array (
'key' => 'tree_default_sort',
Expand Down
72 changes: 33 additions & 39 deletions _build/templates/default/sass/_navbar.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -131,6 +131,23 @@
top: 50%;
transform: translateY(-50%);
}

& .more {
top: unset !important;
bottom: -1px;
}
}

#modx-navbar #modx-user-menu .sub {
&:after {
border: 5px solid transparent;
border-right: 5px solid rgb(96,114,124);
position: absolute;
content: ' ';
left: 0px;
top: 50%;
transform: translateY(-50%);
}
}

#modx-user-menu li.top > a,
Expand Down Expand Up @@ -159,11 +176,6 @@
}
}

#modx-navbar #modx-user-menu ul.modx-subnav {
left: auto;
right: 0;
}

#modx-navbar ul.modx-subnav {
border-radius: 0 $borderRadius $borderRadius $borderRadius;
border: 1px solid $navbarBorder;
Expand All @@ -188,11 +200,25 @@
display: none;
list-style: none;
padding-left: 0;
position: absolute; left: 270px; top: -1px;
position: absolute;
left: 270px;
top: -1px;
z-index: 24;
}
}

#modx-navbar #modx-user-menu ul.modx-subnav {
border-radius: $borderRadius 0 $borderRadius $borderRadius;
left: auto;
right: 0;

ul.modx-subsubnav {
border-radius: $borderRadius 0 $borderRadius $borderRadius;
right: 270px;
left: auto;
}
}

#modx-navbar #modx-home-dashboard {
background-image: url($imgPath + 'modx-icon-color.svg'),none;
background-position:center center;
Expand All @@ -211,9 +237,6 @@
display: block;
float: left;
}
/*#user-username {
}*/

#modx-navbar #modx-home-dashboard a {
overflow: hidden;
Expand Down Expand Up @@ -302,36 +325,7 @@
width: 100%;
}

#modx-navbar ul.modx-subnav li:first-child,
#modx-navbar ul.modx-subnav li:first-child a {
border-radius: 0 $borderRadius 0 0;
}

#modx-navbar ul.modx-subnav ul li:first-child,
#modx-navbar ul.modx-subnav ul li:first-child a {
border-radius: 0 $borderRadius 0 0;
}

#modx-navbar ul.modx-subnav ul li:last-child,
#modx-navbar ul.modx-subnav ul li:last-child a {
border-radius: 0 0 $borderRadius 0;
}

#modx-navbar ul.modx-subnav ul ul li:last-child,
#modx-navbar ul.modx-subnav ul ul li:last-child a {
border-radius: 0 0 $borderRadius $borderRadius;
}

#modx-navbar ul.modx-subnav li:hover ul ul,
#modx-navbar ul.modx-subnav ul li:hover ul ul,
#modx-navbar ul.modx-subnav ul ul li:hover ul ul {
display: none;
}

#modx-navbar ul.modx-subnav li:hover ul,
#modx-navbar ul.modx-subnav ul li:hover ul,
#modx-navbar ul.modx-subnav ul ul li:hover ul,
#modx-navbar ul.modx-subnav ul ul ul li:hover ul {
#modx-navbar ul.modx-subnav li:hover > ul {
display: block;
}

Expand Down
3 changes: 3 additions & 0 deletions core/lexicon/en/setting.inc.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -765,6 +765,9 @@
$_lang['setting_topmenu_show_descriptions'] = 'Show Descriptions in Top Menu';
$_lang['setting_topmenu_show_descriptions_desc'] = 'If set to \'No\', MODX will hide the descriptions from top menu items in the manager.';

$_lang['setting_topmenu_subitems_max'] = 'Maximum items in the drop-down lists of the top menu bar';
$_lang['setting_topmenu_subitems_max_desc'] = 'The maximum number of items displayed in the drop-down lists of the top menu bar. The remaining items will be hidden in the \'...\' item.';

$_lang['setting_tree_default_sort'] = 'Resource Tree Default Sort Field';
$_lang['setting_tree_default_sort_desc'] = 'The default sort field for the Resource tree when loading the manager.';

Expand Down
19 changes: 16 additions & 3 deletions manager/controllers/default/header.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,6 +61,7 @@ public function __construct(modManagerController &$controller)
$this->controller =& $controller;
$this->modx =& $controller->modx;
$this->showDescriptions = (boolean) $this->modx->getOption('topmenu_show_descriptions', null, true);
$this->subItemsMax = abs((int) $this->modx->getOption('topmenu_subitems_max', null, 0, true));
}

/**
Expand Down Expand Up @@ -194,7 +195,7 @@ public function buildMenu($name, $placeholder)

if (!empty($menu['children'])) {
$menuTpl .= '<ul class="modx-subnav">'."\n";
$this->processSubMenus($menuTpl, $menu['children']);
$this->processSubMenus($menuTpl, $menu['children'], $this->subItemsMax);
$menuTpl .= '</ul>'."\n";
}
$menuTpl .= '</li>'."\n";
Expand Down Expand Up @@ -303,9 +304,14 @@ public function hasPermission($perms)
*
* @return void
*/
public function processSubMenus(&$output, array $menus = array())
public function processSubMenus(&$output, array $menus = array(), $maxItems = false)
{
//$output .= '<ul class="modx-subnav">'."\n";
$moreMenu = '';
if ($maxItems && count($menus) > $maxItems) {
$moreMenu = array_slice($menus, $maxItems);
$menus = array_slice($menus, 0, $maxItems);
}

foreach ($menus as $menu) {
if (!$this->hasPermission($menu['permissions'])) {
Expand Down Expand Up @@ -333,14 +339,21 @@ public function processSubMenus(&$output, array $menus = array())

if (!empty($menu['children'])) {
$smTpl .= '<ul class="modx-subsubnav">'."\n";
$this->processSubMenus($smTpl, $menu['children']);
$this->processSubMenus($smTpl, $menu['children'], $this->subItemsMax);
$smTpl .= '</ul>'."\n";
}
$smTpl .= '</li>';
$output .= $smTpl;
$this->childrenCt++;
}

if (!empty($moreMenu)) {
$output .= '<li class="sub"><a href="#">...</a>'."\n";
$output .= '<ul class="modx-subsubnav more">'."\n";
$this->processSubMenus($output, $moreMenu, $this->subItemsMax);
$output .= '</ul>'."\n";
}

//$output .= '</ul>'."\n";
}

Expand Down
2 changes: 1 addition & 1 deletion manager/templates/default/css/index-min.css
View file

Large diffs are not rendered by default.

56 changes: 24 additions & 32 deletions manager/templates/default/css/index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6288,6 +6288,20 @@ ul.x-tab-strip-bottom {
-ms-transform: translateY(-50%);
transform: translateY(-50%); }

#modx-navbar .sub .more {
top: unset !important;
bottom: -1px; }

#modx-navbar #modx-user-menu .sub:after {
border: 5px solid transparent;
border-right: 5px solid #60727c;
position: absolute;
content: ' ';
left: 0px;
top: 50%;
-ms-transform: translateY(-50%);
transform: translateY(-50%); }

#modx-user-menu li.top > a,
#modx-topnav li.top > a {
cursor: default; }
Expand All @@ -6308,10 +6322,6 @@ ul.x-tab-strip-bottom {
#modx-navbar li:hover a:hover.modx-help {
color: #3697cd; }

#modx-navbar #modx-user-menu ul.modx-subnav {
left: auto;
right: 0; }

#modx-navbar ul.modx-subnav {
border-radius: 0 3px 3px 3px;
border: 1px solid #2F4150;
Expand Down Expand Up @@ -6342,6 +6352,15 @@ ul.x-tab-strip-bottom {
top: -1px;
z-index: 24; }

#modx-navbar #modx-user-menu ul.modx-subnav {
border-radius: 3px 0 3px 3px;
left: auto;
right: 0; }
#modx-navbar #modx-user-menu ul.modx-subnav ul.modx-subsubnav {
border-radius: 3px 0 3px 3px;
right: 270px;
left: auto; }

#modx-navbar #modx-home-dashboard {
background-image: url("../images/modx-icon-color.svg"), none;
background-position: center center;
Expand All @@ -6360,9 +6379,6 @@ ul.x-tab-strip-bottom {
display: block;
float: left; }

/*#user-username {
}*/
#modx-navbar #modx-home-dashboard a {
overflow: hidden;
padding: 0;
Expand Down Expand Up @@ -6438,31 +6454,7 @@ ul.x-tab-strip-bottom {
margin-top: 6px;
width: 100%; }

#modx-navbar ul.modx-subnav li:first-child,
#modx-navbar ul.modx-subnav li:first-child a {
border-radius: 0 3px 0 0; }

#modx-navbar ul.modx-subnav ul li:first-child,
#modx-navbar ul.modx-subnav ul li:first-child a {
border-radius: 0 3px 0 0; }

#modx-navbar ul.modx-subnav ul li:last-child,
#modx-navbar ul.modx-subnav ul li:last-child a {
border-radius: 0 0 3px 0; }

#modx-navbar ul.modx-subnav ul ul li:last-child,
#modx-navbar ul.modx-subnav ul ul li:last-child a {
border-radius: 0 0 3px 3px; }

#modx-navbar ul.modx-subnav li:hover ul ul,
#modx-navbar ul.modx-subnav ul li:hover ul ul,
#modx-navbar ul.modx-subnav ul ul li:hover ul ul {
display: none; }

#modx-navbar ul.modx-subnav li:hover ul,
#modx-navbar ul.modx-subnav ul li:hover ul,
#modx-navbar ul.modx-subnav ul ul li:hover ul,
#modx-navbar ul.modx-subnav ul ul ul li:hover ul {
#modx-navbar ul.modx-subnav li:hover > ul {
display: block; }

.ext-ie7 #modx-header {
Expand Down

0 comments on commit fa690a3

Please sign in to comment.