moodle/moodle
3
0
Fork 0
mirror of https://github.com/moodle/moodle.git synced 2025-08-05 00:46:50 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

MDL-54708 message: add notification popover to nav bar

Browse source
This commit is contained in:
Ryan Wyllie 2016-06-16 07:47:53 +00:00 • committed by Mark Nelson
parent 3274d5ca66
commit a0e358a64a
18 changed files with 2512 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

85
message/templates/notification_content_item.mustache Normal file
View file

@ -0,0 +1,85 @@
{{!
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 message/notification_content_item
This template will render the notification content item for the
navigation bar notification menu.
Classes required for JS:
* none
Data attributes required for JS:
* none
Context variables required for this template:
* userid the logged in user id
Example context (json):
{
}
}}
<div class="content-item-container"
role="listitem"
aria-expanded="false"
aria-label="{{subject}}"
tabindex="0"
{{#contexturl}}data-context-url="{{{.}}}"{{/contexturl}}>
<div class="content-item">
<div class="content-item-header">
<h3>
{{#userfromprofileurl}}<a href="{{{.}}}">{{/userfromprofileurl}}
{{userfromfullname}}
{{#userfromprofileurl}}</a>{{/userfromprofileurl}}
</h3>
</div>
<div class="content-item-body">
<div class="content-body-short">
<div class="notification-image">
<img src="{{{iconurl}}}" alt="{{#str}}notificationimage, message{{/str}}"/>
</div>
<p class="notification-message">{{subject}}</p>
</div>
<div class="content-body-full" aria-hidden="true">
<pre>{{fullmessage}}</pre>
</div>
</div>
<div class="content-item-footer">
<p>{{timecreatedpretty}}</p>
</div>
</div>
<div class="content-item-controls">
<span class="block-button">{{#pix}} t/block {{/pix}}</span>
<div class="expand-buttons">
<span class="show-button"
tabindex="0"
aria-role="button"
aria-label="{{#str}} expandnotification, message {{/str}}">
{{#pix}} t/sort_desc {{/pix}}
</span>
<span class="hide-button"
tabindex="0"
aria-role="button"
aria-hidden="true"
aria-label="{{#str}} collapsenotification, message {{/str}}">
{{#pix}} t/sort_asc {{/pix}}
</span>
</div>
</div>
</div>

86
message/templates/notification_popover.mustache Normal file
View file

@ -0,0 +1,86 @@
{{!
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 message/notification_popover
This template will render the notification popover for the navigation bar.
Classes required for JS:
* none
Data attributes required for JS:
* none
Context variables required for this template:
* userid the logged in user id
Example context (json):
{
}
}}
{{< core/mdl_popover }}
{{$classes}}mdl-popover-notifications unread-only{{/classes}}
{{$attributes}}id="nav-notification-popover-container" data-userid="{{userid}}"{{/attributes}}
{{$togglelabel}}{{#str}} shownotificationwindownonew, message {{/str}}{{/togglelabel}}
{{$togglecontent}}
{{#pix}} i/notifications, core, {{#str}} togglenotificationmenu, message {{/str}} {{/pix}}
<div class="count-container hidden"></div>
{{/togglecontent}}
{{$containerlabel}}{{#str}} notificationwindow, message {{/str}}{{/containerlabel}}
{{$headertext}}{{#str}} notifications, message {{/str}}{{/headertext}}
{{$headeractions}}
<div class="fancy-toggle on" tabindex="0" aria-label="{{#str}} showallnotifications, message {{/str}}">
<div class="slider-container"><div class="slider"></div></div>
<div class="off-text">{{#str}} all {{/str}}</div>
<div class="on-text">{{#str}} new {{/str}}</div>
</div>
<a id="mark-all-read-button"
href="#"
data-toggle="tooltip"
data-placement="top"
data-original-title="{{#str}} markallread {{/str}}"
aria-role="button">
<span class="normal-icon">{{#pix}} t/markasread, core, {{#str}} markallread {{/str}} {{/pix}}</span>
<span class="loading-icon">{{#pix}} y/loading, core, {{#str}} loading, mod_assign {{/str}} {{/pix}}</span>
</a>
<a href="{{{urls.preferences}}}"
data-toggle="tooltip"
data-placement="top"
data-original-title="{{#str}} notificationpreferences, message {{/str}}">
{{#pix}} i/settings, core, {{#str}} notificationpreferences, message {{/str}} {{/pix}}
</a>
{{/headeractions}}
{{$content}}
<div class="all-notifications" role="log" aria-busy="false" aria-atomic="false" aria-relevant="additions"></div>
<div class="empty-message" tabindex="0">{{#str}} nonotifications, message {{/str}}</div>
<div class="unread-notifications" role="log" aria-busy="false" aria-atomic="false" aria-relevant="additions"></div>
<div class="empty-message" tabindex="0">{{#str}} nonewnotifications, message {{/str}}</div>
{{/content}}
{{/ core/mdl_popover }}
{{#js}}
require(['jquery', 'message/notification_popover_controller'], function($, controller) {
var container = $('#nav-notification-popover-container');
var controller = new controller(container);
controller.registerEventListeners();
controller.registerListNavigationEventListeners();
});
{{/js}}