Skip to content

Commit

Permalink
Make the whole submenu clickable
Browse files Browse the repository at this point in the history
  • Loading branch information
@prasanna-lmsace
prasanna-lmsace committed Jun 1, 2024
1 parent 7151778 commit 9346888
Show file tree
Hide file tree
Showing 5 changed files with 86 additions and 12 deletions.
34 changes: 28 additions & 6 deletions scss/boost_union/post.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1566,8 +1566,21 @@ body.theme_boost-union-footerbuttonnone.jsenabled {
}
/* The icon tag aligned top at the usermenu link */
.usermenu .dropdown-menu {
.submenu .items a.dropdown-item {
align-items: baseline;
.submenu {
/* Remove the padding on the User submenu header */
.header {
padding: 0;
/* Centered align the User submenu header, added padding and removed the underline for the link */
.carousel-navigation-link {
text-decoration: none;
padding: .1rem .75rem;
display: flex;
align-items: center;
}
}
.items a.dropdown-item {
align-items: baseline;
}
}
/* Usermenu dropdown item position relative for it's submenu */
.dropdown-item {
Expand All @@ -1579,7 +1592,7 @@ body.theme_boost-union-footerbuttonnone.jsenabled {
}
}
/* Dropdown more menu back button arrow margin */
.boost-union-moremenu.dropdown-menu button.carousel-navigation-link > * {
.boost-union-moremenu.dropdown-menu .carousel-navigation-link > * {
pointer-events: none;
img {
margin: 0;
Expand All @@ -1590,6 +1603,7 @@ body.theme_boost-union-footerbuttonnone.jsenabled {
.more-nav li.nav-item {
/* Menu link icon aligned center */
a {
display: flex;
align-items: center;
label {
margin-bottom: 0;
Expand Down Expand Up @@ -2079,13 +2093,12 @@ body.theme_boost-union-footerbuttonnone.jsenabled {
/* Added the arrow icon styles for the dropdown sub menu header */
.submenu .header {
font-size: .975rem;
padding: 0.25rem 0.75rem;
display: flex;
align-items: center;
}
}
/* Removed the margin for the carousel back button arrow */
&.fixed-bottom .boost-union-moremenu.dropdown-menu button.carousel-navigation-link > * {
&.fixed-bottom .boost-union-moremenu.dropdown-menu .carousel-navigation-link > * {
pointer-events: none;
img {
margin: 0;
Expand All @@ -2109,13 +2122,22 @@ body.theme_boost-union-footerbuttonnone.jsenabled {
.moremenu-carousel-item-header {
display: none;
}
button.carousel-navigation-link > * {
.carousel-navigation-link > * {
pointer-events: none;
/* Drop down more menu carousel item header image */
img {
margin: 0;
}
}
/* Make the carousel navigation link to full width and cursor as pointor */
.carousel-navigation-link {
width: 100%;
cursor: pointer;
/* Removed the underline on hovering the link */
&:hover {
text-decoration: none;
}
}
}
/* Dropdown carousel more menu*/
.dropdownmoremenu {
Expand Down
18 changes: 18 additions & 0 deletions templates/core/user_menu.mustache
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,6 +60,7 @@
* Include submenus custom return id, helps to get back to the submenus parent from third level child.
* Add icon support to items.
* Add user full name at the top of the user menu.
* Make submenu headers fully clickable.
}}
<div class="usermenu">
{{#unauthenticateduser}}
Expand Down Expand Up @@ -97,13 +98,30 @@
{{#submenus}}
<div id="carousel-item-{{id}}" role="menu" class="carousel-item submenu" tabindex="-1" aria-label="{{title}}">
<div class="d-flex flex-column h-100">

{{#includesmartmenu}}
<!-- Make submenu headers fully clickable. -->
<div class="header">
<a href="#" class="carousel-navigation-link" data-carousel-target-id="carousel-item-{{#returnid}}{{returnid}}{{/returnid}}{{^returnid}}main{{/returnid}}"
aria-label="{{#str}}usermenugoback{{/str}}">
<button type="button" class="btn btn-icon text-decoration-none text-body">
<span class="dir-rtl-hide">{{#pix}}i/arrow-left{{/pix}}</span>
<span class="dir-ltr-hide">{{#pix}}i/arrow-right{{/pix}}</span>
</button>
<span class="pl-2" id="carousel-item-title-{{id}}">{{#text}}{{{text}}}{{/text}}{{^text}}{{title}}{{/text}}</span>
</a>
</div>
{{/includesmartmenu}}
{{^includesmartmenu}}
<div class="header">
<button type="button" class="btn btn-icon carousel-navigation-link text-decoration-none text-body" data-carousel-target-id="carousel-item-{{#returnid}}{{returnid}}{{/returnid}}{{^returnid}}main{{/returnid}}" aria-label="{{#str}}usermenugoback{{/str}}">
<span class="dir-rtl-hide">{{#pix}}i/arrow-left{{/pix}}</span>
<span class="dir-ltr-hide">{{#pix}}i/arrow-right{{/pix}}</span>
</button>
<span class="pl-2" id="carousel-item-title-{{id}}">{{#text}}{{{text}}}{{/text}}{{^text}}{{title}}{{/text}}</span>
</div>
{{/includesmartmenu}}

<div class="dropdown-divider"></div>
<div class="items h-100 overflow-auto" role="menu" aria-labelledby="carousel-item-title-{{id}}">
{{> core/user_action_menu_submenu_items }}
Expand Down
14 changes: 9 additions & 5 deletions templates/smartmenus-moremenu-children.mustache
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@
* Added the carousel-target data to the li item.
* Main items are wrapped with carousel-item.
* Second-level submenus are rendered as separate carousel items.
* Make submenu headers fully clickable.
Example context (json):
{
Expand Down Expand Up @@ -90,14 +91,17 @@
{{/items}}
{{/children}}
{{#submenus}}
<!-- Make submenu headers fully clickable. -->
<div id="carousel-item-{{id}}" role="menu" class="carousel-item submenu" tabindex="-1" aria-label="{{title}}">
<div class="d-flex flex-column h-100">
<div class="header">
<button type="button" class="btn btn-icon carousel-navigation-link text-decoration-none text-body" data-carousel-target-id="carousel-item-{{#returnid}}{{returnid}}{{/returnid}}{{^returnid}}main{{/returnid}}" aria-label="{{#str}}usermenugoback{{/str}}">
<span class="dir-rtl-hide">{{#pix}}i/arrow-left{{/pix}}</span>
<span class="dir-ltr-hide">{{#pix}}i/arrow-right{{/pix}}</span>
</button>
<span class="pl-2" id="carousel-item-title-{{id}}">{{#title}}{{{title}}}{{/title}}{{^title}}{{{text}}}{{/title}}</span>
<a href="#" class=" carousel-navigation-link" data-carousel-target-id="carousel-item-{{#returnid}}{{returnid}}{{/returnid}}{{^returnid}}main{{/returnid}}" aria-label="{{#str}}usermenugoback{{/str}}">
<button type="button" class="btn btn-icon text-decoration-none text-body">
<span class="dir-rtl-hide">{{#pix}}i/arrow-left{{/pix}}</span>
<span class="dir-ltr-hide">{{#pix}}i/arrow-right{{/pix}}</span>
</button>
<span class="pl-2" id="carousel-item-title-{{id}}">{{#title}}{{{title}}}{{/title}}{{^title}}{{{text}}}{{/title}}</span>
</a>
</div>
<div class="dropdown-divider"></div>
<div class="items h-100 overflow-auto" role="menu" aria-labelledby="carousel-item-title-{{id}}">
Expand Down
30 changes: 30 additions & 0 deletions tests/behat/theme_boost_union_smartmenusettings_menuitems_presentation.feature
View file
Original file line number Diff line number Diff line change
Expand Up @@ -349,3 +349,33 @@ Feature: Configuring the theme_boost_union plugin on the "Smart menus" page, app
And ".dropdown-divider" "css_element" should exist in the ".bottom-navigation" "css_element"
# Divider in menubar.
And ".dropdown-divider" "css_element" should exist in the "nav.menubar" "css_element"

@javascript
Scenario: Smartmenu: Menus: Application - Make full submenu header clickable
When I log in as "admin"
And I set "Quick links" smart menu items with the following fields to these values:
| Title | Available courses |
| Menu item type | Dynamic courses |
| Dynamic courses: Course category | Category 1 |
| Menu item mode | Submenu |
And I click on "Quick links" "link" in the ".primary-navigation" "css_element"
And I click on "Available courses" "link" in the ".primary-navigation" "css_element"
And I should see "Test course1" in the ".primary-navigation" "css_element"
And I should see "Test course2" in the ".primary-navigation" "css_element"
And I should see "Available courses" in the ".primary-navigation .header .carousel-navigation-link" "css_element"
# Verify the full header element is clickable.
And I click on ".carousel-item.active .header" "css_element" in the ".primary-navigation" "css_element"
And I should see "Available courses" in the ".primary-navigation .carousel-item" "css_element"
And I should not see "Available courses" in the ".primary-navigation .header .carousel-navigation-link" "css_element"
And I should not see "Test course1" in the ".primary-navigation" "css_element"
# User menu
And I click on "#user-menu-toggle" "css_element"
And I click on "Quick links" "link" in the "#usermenu-carousel" "css_element"
And I click on "Available courses" "link" in the "#usermenu-carousel" "css_element"
And I should see "Test course1" in the "#usermenu-carousel" "css_element"
And I should see "Test course2" in the "#usermenu-carousel" "css_element"
And I should see "Available courses" in the "#usermenu-carousel .carousel-item.active .header .carousel-navigation-link" "css_element"
And I click on ".carousel-item.active .header" "css_element" in the "#usermenu-carousel" "css_element"
And I should see "Available courses" in the "#usermenu-carousel .carousel-item.active" "css_element"
And I should not see "Available courses" in the "#usermenu-carousel .carousel-item.active .header .carousel-navigation-link" "css_element"
And I should not see "Test course1" in the "#usermenu-carousel" "css_element"
2 changes: 1 addition & 1 deletion version.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@
defined('MOODLE_INTERNAL') || die();

$plugin->component = 'theme_boost_union';
$plugin->version = 2023102034;
$plugin->version = 2023102035;
$plugin->release = 'v4.3-r11';
$plugin->requires = 2023100900;
$plugin->supported = [403, 403];
Expand Down

0 comments on commit 9346888

Please sign in to comment.