moodle/message/templates/message_popover.mustache
Mikel Martín f9abc562f5 MDL-81825 theme_boost: Refactor .sr-only usages for BS5
- Add .visually-hidden to the Boostratp 5 bridge SCSS file
- Replace .sr-only occurrences with .visually-hidden
- Replace .dropzone-sr-only-focusable  with .dropzone-visually-hidden-focusable
  for consistency
2024-12-10 14:02:32 +01:00

66 lines
2 KiB
Text

{{!
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_message/message_popover
This template will render the message popover for the navigation bar.
Classes required for JS:
* none
Data attributes required for JS:
* All data attributes are required
Context variables required for this template:
* userid The logged in user id
* urls The URLs for the popover
Example context (json):
{
"unreadcount": 3
}
}}
<div class="popover-region collapsed" data-region="popover-region-messages">
<a id="message-drawer-toggle-{{uniqid}}" class="nav-link popover-region-toggle position-relative icon-no-margin" href="#"
role="button">
{{#pix}} t/message, core, {{#str}} togglemessagemenu, message {{/str}} {{/pix}}
<div
class="count-container {{^unreadcount}}hidden{{/unreadcount}}"
data-region="count-container"
>
<span aria-hidden="true">{{unreadcount}}</span>
<span class="visually-hidden">{{#str}} unreadconversations, core_message, {{unreadcount}} {{/str}}</span>
</div>
</a>
{{> core_message/message_jumpto }}
</div>
{{#js}}
require(
[
'jquery',
'core_message/message_popover'
],
function(
$,
Popover
) {
var toggle = $('#message-drawer-toggle-{{uniqid}}');
Popover.init(toggle);
});
{{/js}}