Modal messages.

less/moodle-fixes/message.less

@@ -19,4 +19,19 @@
 .message .message-contacts li > div.pix {
     float: none;
 }
+
+.message-drawer {
+     height: 90%;
+}
+
+@media (min-width: 980px) {
+    .message-drawer {
+        height: ~"calc(90% - 42px)";
+    }
+}
+
+#essentialnavbar.modal-layer { // Used to make the navbar with the same z-index as the message modal.
+    z-index: @zindexModal;
+}
+
 /* Moodle fixes message end */

style/essential.css

@@ -20300,6 +20300,17 @@ input[type="color"],
 .message .message-contacts li > div.pix {
   float: none;
 }
+.message-drawer {
+  height: 90%;
+}
+@media (min-width: 980px) {
+  .message-drawer {
+    height: calc(90% - 42px);
+  }
+}
+#essentialnavbar.modal-layer {
+  z-index: 1050;
+}
 /* Moodle fixes message end */
 /* Moodle fixes mod-assign begin */
 .path-mod-assign .gradingtable tr.selectedrow td,

templates/core_message/message_drawer.mustache

@@ -39,26 +39,26 @@
 }}
 <div
     id="message-drawer-{{uniqid}}"
-    class="message-drawer bg-light hidden"
+    class="message-drawer bg-light hidden modal essential-message-drawer"
     aria-expanded="false"
     aria-hidden="true"
     data-region="message-drawer"
     role="region"
 >
-    <div class="drawer-top p-2 border-bottom bg-secondary">
+    <div class="p-2 border-bottom bg-secondary modal-header">
         {{#str}} messages, message {{/str}}
         <a id="message-drawer-close-{{uniqid}}" class="pull-right" href="#">
             {{#pix}} i/window_close, core, {{#str}} togglemessagemenu, message {{/str}} {{/pix}}
         </a>
     </div>
-    <div class="header-container position-relative" data-region="header-container">
+    <div class="header-container position-relative modal-body" data-region="header-container">
         {{> core_message/message_drawer_view_contacts_header }}
         {{> core_message/message_drawer_view_conversation_header }}
         {{> core_message/message_drawer_view_overview_header }}
         {{> core_message/message_drawer_view_search_header }}
         {{> core_message/message_drawer_view_settings_header }}
     </div>
-    <div class="body-container position-relative" data-region="body-container">
+    <div class="body-container position-relative modal-body" data-region="body-container">
         {{> core_message/message_drawer_view_contact_body }}
         {{> core_message/message_drawer_view_contacts_body }}
         {{> core_message/message_drawer_view_conversation_body }}
@@ -67,10 +67,11 @@
         {{> core_message/message_drawer_view_search_body }}
         {{> core_message/message_drawer_view_settings_body }}
     </div>
-    <div class="footer-container position-relative" data-region="footer-container">
+    <div class="footer-container position-relative modal-footer" data-region="footer-container">
         {{> core_message/message_drawer_view_conversation_footer }}
     </div>
 </div>
+<div id="message-drawer-backdrop" class="modal-backdrop fade in hidden"></div>
 
 {{#js}}
 require(
@@ -90,5 +91,24 @@ function(
 
     var toggle = $('#message-drawer-close-{{uniqid}}');
     Popover.init(toggle);
+
+    $(document).ready(function() {
+        var backdrop = $('#message-drawer-backdrop');
+        var navbar = $('#essentialnavbar');
+        var checkState = function() {
+            if (root.hasClass('hidden')) {
+                backdrop.addClass('hidden');
+                navbar.removeClass('modal-layer');
+            } else {
+                backdrop.removeClass('hidden');
+                navbar.addClass('modal-layer');
+            }
+        };
+
+        toggle.click(function() {
+            checkState();
+        });
+    });
+
 });
 {{/js}}

templates/core_message/message_popover.mustache

@@ -0,0 +1,77 @@
+{{!
+    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="pull-right popover-region collapsed">
+    <a id="message-drawer-toggle-{{uniqid}}" class="nav-link d-inline-block popover-region-toggle position-relative" href="#">
+        {{#pix}} t/message, core, {{#str}} messages, message {{/str}} {{/pix}}
+        <div class="count-container {{^unreadcount}}hidden{{/unreadcount}}" data-region="count-container">{{unreadcount}}</div>
+    </a>
+</div>
+
+{{#js}}
+require(
+[
+    'jquery',
+    'core_message/message_popover'
+],
+function(
+    $,
+    Popover
+) {
+    var toggle = $('#message-drawer-toggle-{{uniqid}}');
+    Popover.init(toggle);
+
+    $(document).ready(function() {
+        var backdrop = $('#message-drawer-backdrop');
+        var navbar = $('#essentialnavbar');
+        var root = $('.essential-message-drawer');
+        var checkState = function() {
+            if (root.hasClass('hidden')) {
+                backdrop.addClass('hidden');
+                navbar.removeClass('modal-layer');
+            } else {
+                backdrop.removeClass('hidden');
+                navbar.addClass('modal-layer');
+            }
+        };
+
+        toggle.click(function() {
+            checkState();
+        });
+    });
+});
+{{/js}}