MDL-64129 messaging: messaging accordion
[moodle.git] / theme / bootstrapbase / templates / core_message / message_drawer_view_overview_section.mustache
CommitLineData
6f96c063
RW
1{{!
2 This file is part of Moodle - http://moodle.org/
3
4 Moodle is free software: you can redistribute it and/or modify
5 it under the terms of the GNU General Public License as published by
6 the Free Software Foundation, either version 3 of the License, or
7 (at your option) any later version.
8
9 Moodle is distributed in the hope that it will be useful,
10 but WITHOUT ANY WARRANTY; without even the implied warranty of
11 MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
12 GNU General Public License for more details.
13
14 You should have received a copy of the GNU General Public License
15 along with Moodle. If not, see <http://www.gnu.org/licenses/>.
16}}
17{{!
18 @template core_message/message_drawer_view_overview_section
19
20 This template is a base template to render a collapsible "section" on the
21 overview page of the message drawer, for example the messages section.
22
23 Classes required for JS:
24 * none
25
26 Data attributes required for JS:
27 * All data attributes are required
28
29 Context variables required for this template:
30 * userid The logged in user id
31 * urls The URLs for the popover
32
33 This is an overridden template
34 changing icon "t/collapsedcaret" to "t/collapsed"
35 adding ".in" to ".show"
eae1a1ed
BB
36 adding .accordion-group to the main container div
37 adding expanded to the .accordion-group if required for toggle icons to work.
6f96c063
RW
38
39 Example context (json):
40 {}
41
42}}
43<div
eae1a1ed 44 class="accordion-group section border-0 {{#expanded}}expanded{{/expanded}}"
6f96c063
RW
45 data-region="{{$region}}{{/region}}"
46>
eae1a1ed 47 <div id="{{$region}}{{/region}}-toggle" class="accordion-heading" data-region="toggle">
6f96c063
RW
48 <button
49 class="btn btn-link w-100 text-left p-2 m-0 d-flex align-items-center overview-section-toggle {{^expanded}}collapsed{{/expanded}}"
50 data-toggle="collapse"
eae1a1ed 51 data-parent="#message-drawer-view-overview-container"
6f96c063
RW
52 data-target="#{{$region}}{{/region}}-target"
53 aria-expanded="{{#expanded}}true{{/expanded}}{{^expanded}}false{{/expanded}}"
54 aria-controls="{{$region}}{{/region}}-target"
55 >
56 <span class="collapsed-icon-container">
57 {{#pix}} t/collapsed, core {{/pix}}
58 </span>
59 <span class="expanded-icon-container">
60 {{#pix}} t/expanded, core {{/pix}}
61 </span>
62 {{$title}}{{/title}} (<span data-region="section-total-count">{{count.total}}</span>)
63 <span class="hidden ml-2" data-region="loading-icon-container">
64 {{> core/loading }}
65 </span>
66 <span class="{{^count.unread}}hidden{{/count.unread}} badge badge-pill badge-primary ml-auto bg-primary" data-region="section-unread-count">
67 {{count.unread}}
68 </span>
69 </button>
70 </div>
71 {{< core_message/message_drawer_lazy_load_list }}
eae1a1ed 72 {{$rootclasses}} accordion-body collapse border-bottom {{#expanded}}show in{{/expanded}}{{/rootclasses}}
6f96c063
RW
73 {{$rootattributes}}
74 id="{{$region}}{{/region}}-target"
75 aria-labelledby="{{$region}}{{/region}}-toggle"
76 data-parent="#message-drawer-view-overview-container"
77 {{/rootattributes}}
78 {{/ core_message/message_drawer_lazy_load_list }}
79</div>