[TikiWiki-commits] [Git][tikiwiki/tiki][master] [FIX] Menus: use Bootstrap dropdown-divider for separators

Benoit Grégoire pushed to branch master at Tiki Wiki CMS Groupware / Tiki


Commits:
d3dfc875 by Grace Nshokano at 2026-03-20T15:28:43+00:00
[FIX] Menus: use Bootstrap dropdown-divider for separators
---
* [FIX] Reuse strong placeholders in admin menu separator tip

* [FIX] Menus: align admin separator preview with Bootstrap divider

* [FIX] Menus: use Bootstrap dropdown-divider consistently in SmartMenus

* [FIX] SmartMenus: restore top-level menu separator border with Bootstrap classes

* [FIX] Menus: use tr variable substitution for separator help text

* Add margin px-3 on the separator

* add separator to submenu

* [ENH] Menus: improve separator feature discoverability in admin UI

* [FIX] Menus: restore visible separators using Bootstrap dividers

* [FIX] Menus: make separator items visible with Bootstrap dividers

* Remove some changes

* Delete trailing spaces

* [FIX] replase menu-separatir by dropdown-divider in tiki-admin_menu_options.tpl

* [FIX] Menu separators: render Bootstrap dropdown-divider correctly in smartmenu

* [FIX] Remove setCurrentSection in Menu/Controller.php

See merge request tikiwiki/tiki!9255

- - - - -


8 changed files:

- lib/core/Services/Menu/Controller.php
- templates/bootstrap_menu.tpl
- templates/bootstrap_smartmenu.tpl
- templates/bootstrap_smartmenu_children.tpl
- templates/bootstrap_smartmenu_megamenu_children.tpl
- templates/menu/edit_option.tpl
- templates/tiki-admin_menu_options.tpl
- themes/base_files/scss/_tiki-menus.scss


Changes:

=====================================
lib/core/Services/Menu/Controller.php
=====================================
@@ -5,8 +5,6 @@
 // All Rights Reserved. See copyright.txt for details and a complete list of authors.
 // Licensed under the GNU LESSER GENERAL PUBLIC LICENSE. See license.txt for details.
 
-use Tiki\Sections;
-
 class Services_Menu_Controller
 {
     /** @var  MenuLib */
@@ -270,7 +268,6 @@ class Services_Menu_Controller
 
             $url = $input->url->text();
             $section = $input->section->text();
-            Sections::setCurrentSection($section);
             $perm = $input->perm->text();
             $groupname = $input->asArray('groupname');
             $groupname = implode(',', $groupname);


=====================================
templates/bootstrap_menu.tpl
=====================================
@@ -21,12 +21,16 @@
                         </a>
                         <div class="dropdown-menu {if !empty($item.selected)}show{/if}" aria-labelledby="menu_option{$item.optionId|escape}">
                             {foreach from=$item.children item=sub}
-                                <a class="dropdown-item {$sub.class|escape} {if $sub.selected|default:null}active{/if}" href="{$sub.sefurl|escape}">
-                                    {if $menu_info.use_items_icons eq "y" && $sub.icon}
-                                        {icon name=$sub.icon}
-                                    {/if}
-                                    {tr}{$sub.name}{/tr}
-                                </a>
+                                {if $sub.type eq '-' or ($sub.type eq 's' and empty($sub.name))}
+                                    <div role="separator" class="dropdown-divider my-2"></div>
+                                {else}
+                                    <a class="dropdown-item {$sub.class|escape} {if $sub.selected|default:null}active{/if}" href="{$sub.sefurl|escape}">
+                                        {if $menu_info.use_items_icons eq "y" && $sub.icon}
+                                            {icon name=$sub.icon}
+                                        {/if}
+                                        {tr}{$sub.name}{/tr}
+                                    </a>
+                                {/if}
                             {/foreach}
                         </div>
                     </li>
@@ -40,24 +44,30 @@
                         </a>
                         <ul id="menu_option{$item.optionId|escape}" class="nav flex-column collapse {if !empty($item.selected)}show{/if}" aria-labelledby="#menu_option{$item.optionId|escape}">
                             {foreach from=$item.children item=sub}
-                                <li class="nav-item {$sub.class|escape|default:null} {if !empty($sub.selected)}active{/if}">
-                                    <a class="nav-link {$sub.class|escape} {if $sub.selected|default:null}active{/if}" href="{$sub.sefurl|escape}">
-                                        <small>
-                                            {if $menu_info.use_items_icons eq "y" && $sub.icon}
-                                                {icon name=$sub.icon}
-                                            {/if}
-                                            {tr}{$sub.name}{/tr}
-                                        </small>
-                                    </a>
-                                </li>
+                                {if $sub.type eq '-' or ($sub.type eq 's' and empty($sub.name))}
+                                    <li class="nav-item" role="separator">
+                                        <hr class="dropdown-divider my-2">
+                                    </li>
+                                {else}
+                                    <li class="nav-item {$sub.class|escape|default:null} {if !empty($sub.selected)}active{/if}">
+                                        <a class="nav-link {$sub.class|escape} {if $sub.selected|default:null}active{/if}" href="{$sub.sefurl|escape}">
+                                            <small>
+                                                {if $menu_info.use_items_icons eq "y" && $sub.icon}
+                                                    {icon name=$sub.icon}
+                                                {/if}
+                                                {tr}{$sub.name}{/tr}
+                                            </small>
+                                        </a>
+                                    </li>
+                                {/if}
                             {/foreach}
                         </ul>
                     </li>
                 {/if}
             {else}
-                {if $item.type eq '-'}
-                    <li class="nav-item">
-                        <hr class="menu-separator my-2">
+                {if $item.type eq '-' or ($item.type eq 's' and empty($item.name))}
+                    <li class="nav-item" role="separator">
+                        <hr class="dropdown-divider my-2">
                     </li>
                 {else}
                     <li class="nav-item {$item.class|escape|default:null} {if !empty($item.selected)}active{/if}">


=====================================
templates/bootstrap_smartmenu.tpl
=====================================
@@ -1,6 +1,6 @@
-{if $item.type eq '-'}
-    <li class="sm-nav-item nav-item">
-        <hr class="menu-separator my-2">
+{if $item.type eq '-' or ($item.type eq 's' and empty($item.name))}
+    <li class="sm-nav-item nav-item" role="separator">
+        <hr class="dropdown-divider my-2">
     </li>
 {elseif not empty($item.children)}
     <li class="sm-nav-item nav-item{if $item.selected|default:null} active{/if} {$item.class|escape} {if $module_params.megamenu eq 'y' and $module_params.megamenu_static eq 'y' }static{/if}">
@@ -35,7 +35,7 @@
         {/if}
     </li>
 {else}
-    <li class="sm-nav-item nav-item{$item.class|escape}{if $item.selected|default:null} active{/if}">
+    <li class="sm-nav-item nav-item {$item.class|escape}{if $item.selected|default:null} active{/if}">
         <a class="sm-nav-link nav-link" href="{$item.sefurl|escape}">
             {if $menu_info.use_items_icons eq "y" && $item.icon}
                 <span class="me-2">{icon name=$item.icon}</span>


=====================================
templates/bootstrap_smartmenu_children.tpl
=====================================
@@ -1,5 +1,5 @@
-{if $item.type eq '-'}
-    <li class="dropdown-divider"></li>
+{if $item.type eq '-' or ($item.type eq 's' and empty($item.name)) or (empty($item.name) and empty($item.sefurl) and empty($item.children) and empty($item.block))}
+    <li role="separator" class="px-3"><hr class="dropdown-divider my-2"></li>
 {elseif not empty($item.children)}
     <li class="sm-sub-item {if $item.selected|default:null} active{/if} {$item.class|escape}">
         <a href="#sm_submenu_{$item.optionId|escape}" class="sm-sub-link dropdown-item sm-sub-toggler" data-bs-toggle="collapse" aria-expanded="false">


=====================================
templates/bootstrap_smartmenu_megamenu_children.tpl
=====================================
@@ -1,5 +1,5 @@
-{if $item.type eq '-'}
-    <li class="dropdown-divider"></li>
+{if $item.type eq '-' or ($item.type eq 's' and empty($item.name))}
+    <li role="separator"><hr class="dropdown-divider my-2"></li>
 {elseif not empty($item.children)}
     <li class="mega-menu--item mega-menu--item-level-{$item.sectionLevel}">
         <a href="{$item.sefurl|escape}" class="" data-bs-toggle="dropdown">


=====================================
templates/menu/edit_option.tpl
=====================================
@@ -39,6 +39,7 @@
                         <option value="r" {if $info.type eq 'r'}selected="selected"{/if}>{tr}sorted section level 0{/tr}</option>
                         <option value="-" {if $info.type eq '-'}selected="selected"{/if}>{tr}separator{/tr}</option>
                     </select>
+                    <div class="form-text">{tr _0='<strong>' _1='</strong>'}Choose %0separator%1 to add a visual divider line in a menu or submenu.{/tr}</div>
                 </div>
             </div>
             <div class="mb-3 row">


=====================================
templates/tiki-admin_menu_options.tpl
=====================================
@@ -19,6 +19,9 @@
         </a>
     {/if}
 </div>
+{remarksbox type="tip" title="{tr}Tip{/tr}" close="y"}
+    {tr _0='<strong>' _1='</strong>'}To add a visual separator, click %0Create menu option%1, set %0Type%1 to %0separator%1, then save your menu.{/tr}
+{/remarksbox}
 
 {tabset name="admin_menu_options"}
 {tab name="{tr}Manage menu{/tr} {$editable_menu_info.name}"}
@@ -100,9 +103,9 @@
                                 <div class="label-group">
                                     <div class="input-group input-group-sm">
                                         <span class="input-group-text">{icon name='sort'}</span>
-                                        {if $option.type eq '-'}
-                                            <div class="form-control d-flex align-items-center" style="background-color: #f8f9fa; padding: 0.5rem;">
-                                                <hr class="menu-separator">
+                                        {if $option.type eq '-' or ($option.type eq 's' and empty($option.name))}
+                                            <div class="form-control d-flex align-items-center bg-body-tertiary py-2">
+                                                <hr class="dropdown-divider my-0 w-100">
                                             </div>
                                         {else}
                                             <input type="text" class="field-label form-control" value="{$option.name|escape}" placeholder="{tr}Label{/tr}">


=====================================
themes/base_files/scss/_tiki-menus.scss
=====================================
@@ -186,23 +186,14 @@
     z-index: 3000;
 }
 
-/* Menu separator styling */
-.menu-separator {
-    height: 0;
-    margin: var(--bs-dropdown-divider-margin-y) 0;
-    overflow: hidden;
-    border-top: 1px solid var(--bs-dropdown-divider-bg);
-    opacity: 1;
-}
-
-.form-control .menu-separator {
-    margin: 0;
-}
-
 .sm-sub-toggler[data-bs-toggle="collapse"]::after {
     display: none;
 }
 
 .sm-sub.collapse.show {
     display: block;
-}
\ No newline at end of file
+}
+
+.dropdown-divider {
+    --bs-dropdown-divider-bg: var(--bs-border-color-translucent);
+}



View it on GitLab: https://gitlab.com/tikiwiki/tiki/-/commit/d3dfc87517105033d2eae06506ec2e192a82f8c1

-- 
View it on GitLab: https://gitlab.com/tikiwiki/tiki/-/commit/d3dfc87517105033d2eae06506ec2e192a82f8c1
You're receiving this email because of your account on gitlab.com. Manage all notifications: https://gitlab.com/-/profile/notifications | Help: https://gitlab.com/help

_______________________________________________
TikiWiki-cvs mailing list
[email protected]
https://lists.sourceforge.net/lists/listinfo/tikiwiki-cvs