moodle/lib/templates/action_menu_trigger.mustache
Ferran Recio 105324e6fd MDL-78665 output: add subpanels to action menu
Many times the action menu item triggers modals to show more information
to the user. In most cases this is enough, however, a modal will close
the menu and the user is not able to see the modal content in the page
context. To solve this now menus can define subpanels that are displayed
next the the menu item when the item is focused or hover. This will be
used to group options like the group mode in activities or to replace
the adhoc solution implemented to select language in the user menu.
2023-08-04 16:09:29 +02:00

134 lines
4.7 KiB
Plaintext

{{!
This file is part of Moodle - http://moodle.org/
Moodle is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.
Moodle is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with Moodle. If not, see <http://www.gnu.org/licenses/>.
}}
{{!
@template core/action_menu_trigger
Action menu trigger.
Example context (json):
{
"actiontext": "Example link text",
"title": "Example link title",
"triggerrole": "button",
"triggerattributes": [
{"name": "data-boundary", "value": "window" }
],
"url": "http://example.com/link",
"classes": "icon menu-action",
"instance": "1",
"triggerextraclasses": "",
"attributes": [
{"name": "role", "value": "menuitem" },
{"name": "data-title", "value": "mymoodle,admin" }
],
"secondary": {
"classes": "menu align-tr-br",
"dropdownalignment": "dropdown-menu-right",
"attributes": [
{"name": "id", "value": "action-menu-0-menu"},
{"name": "data-rel", "value": "menu-content"},
{"name": "role", "value": "menu"},
{"name": "data-align", "value": "tr-br"}
],
"items": [
{"actionmenulink":
{
"id": "action_link59ecf8394a68078",
"disabled": false,
"text": "Dashboard",
"url": "http://example.com/link",
"icon": {
"key": "i/dashboard",
"component": null,
"title": "Dashboard"
},
"classes": "menu-action",
"attributes": [
{"name": "role", "value": "menuitem"},
{"name": "data-title", "value": "mymoodle,admin"}
],
"instance": 1,
"showtext": true
}
},
{"actionmenufiller":
{
"id": "action_link59ecf8394a68079",
"disabled": false,
"text": "",
"url": "",
"icon": null,
"classes": "",
"attributes": [
{"name": "role", "value": "menuitem"}
]
}
}
]
}
}
}}
<div class="dropdown{{^secondary.items}} hidden{{/secondary.items}}">
<a
href="#"
tabindex="0"
class="{{triggerextraclasses}} dropdown-toggle icon-no-margin"
id="action-menu-toggle-{{instance}}"
aria-label="{{title}}"
data-toggle="dropdown"
role="{{triggerrole}}"
aria-haspopup="true"
aria-expanded="false"
aria-controls="action-menu-{{instance}}-menu"
{{#triggerattributes}}
{{name}}="{{value}}"
{{/triggerattributes}}
>
{{{actiontext}}}
{{{menutrigger}}}
{{#icon}}
{{#pix}}
{{key}},{{component}},{{title}}
{{/pix}}
{{/icon}}
{{#rawicon}}{{{.}}}{{/rawicon}}
{{#menutrigger}}
<b class="caret"></b>
{{/menutrigger}}
</a>
{{#secondary}}
<div class="dropdown-menu {{classes}} {{dropdownalignment}}"{{#attributes}} {{name}}="{{value}}"{{/attributes}}>
{{#items}}
{{#actionmenulink}}
{{< core/action_menu_link}}
{{$actionmenulinkclasses}}dropdown-item {{classes}}{{/actionmenulinkclasses}}
{{/ core/action_menu_link}}
{{/actionmenulink}}
{{#actionmenufiller}}
<div class="dropdown-divider" role="presentation"><span class="filler">&nbsp;</span></div>
{{/actionmenufiller}}
{{#subpanel}}
{{> core/local/action_menu/subpanel}}
{{/subpanel}}
{{#simpleitem}}
<div class="dropdown-item">{{> core/action_menu_item }}</div>
{{/simpleitem}}
{{/items}}
</div>
{{/secondary}}
</div>