MDL-66477 message: Use the generic drawer for the message drawer
authorJun Pataleta <jun@moodle.com>
Thu, 12 Sep 2019 04:39:12 +0000 (12:39 +0800)
committerJun Pataleta <jun@moodle.com>
Fri, 27 Sep 2019 07:38:54 +0000 (15:38 +0800)
message/amd/build/message_drawer.min.js
message/amd/build/message_drawer.min.js.map
message/amd/src/message_drawer.js
message/templates/message_drawer.mustache
theme/boost/scss/moodle/message.scss
theme/boost/style/moodle.css
theme/classic/style/moodle.css

index dfd6f74..4f4b552 100644 (file)
Binary files a/message/amd/build/message_drawer.min.js and b/message/amd/build/message_drawer.min.js differ
index af10271..21f448a 100644 (file)
Binary files a/message/amd/build/message_drawer.min.js.map and b/message/amd/build/message_drawer.min.js.map differ
index 87d4a31..4ae6d0e 100644 (file)
@@ -36,6 +36,7 @@ define(
     'core_message/message_drawer_routes',
     'core_message/message_drawer_events',
     'core/pending',
+    'core/drawer',
 ],
 function(
     $,
@@ -51,7 +52,8 @@ function(
     Router,
     Routes,
     Events,
-    Pending
+    Pending,
+    Drawer
 ) {
 
     var SELECTORS = {
@@ -134,9 +136,10 @@ function(
             root.attr('data-shown', true);
         }
 
-        root.removeClass('hidden');
-        root.attr('aria-expanded', true);
-        root.attr('aria-hidden', false);
+        var drawerRoot = Drawer.getDrawerRoot(root);
+        if (drawerRoot) {
+            Drawer.show(drawerRoot);
+        }
     };
 
     /**
@@ -145,19 +148,24 @@ function(
      * @param {Object} root The message drawer container.
      */
     var hide = function(root) {
-        root.addClass('hidden');
-        root.attr('aria-expanded', false);
-        root.attr('aria-hidden', true);
+        var drawerRoot = Drawer.getDrawerRoot(root);
+        if (drawerRoot) {
+            Drawer.hide(drawerRoot);
+        }
     };
 
     /**
      * Check if the drawer is visible.
      *
      * @param {Object} root The message drawer container.
-     * @return {bool}
+     * @return {boolean}
      */
     var isVisible = function(root) {
-        return !root.hasClass('hidden');
+        var drawerRoot = Drawer.getDrawerRoot(root);
+        if (drawerRoot) {
+            return Drawer.isVisible(drawerRoot);
+        }
+        return true;
     };
 
     /**
index 3556cef..71c18ec 100644 (file)
     {}
 
 }}
+{{< core/drawer}}
+    {{$rootId}}message-drawer-{{uniqid}}{{/rootId}}
+    {{$drawerContent}}
+        <div id="message-drawer-{{uniqid}}" class="message-app" data-region="message-drawer" role="region">
+            <div class="header-container position-relative" 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">
+                {{> core_message/message_drawer_view_contact_body }}
+                {{> core_message/message_drawer_view_contacts_body }}
+                {{> core_message/message_drawer_view_conversation_body }}
+                {{> core_message/message_drawer_view_group_info_body }}
+                {{> core_message/message_drawer_view_overview_body }}
+                {{> 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">
+                {{> core_message/message_drawer_view_conversation_footer }}
+                {{> core_message/message_drawer_view_overview_footer }}
+            </div>
+        </div>
+    {{/drawerContent}}
+{{/core/drawer}}
 
-<div
-    id="message-drawer-{{uniqid}}"
-    class="message-app drawer hidden"
-    aria-expanded="false"
-    aria-hidden="true"
-    data-region="message-drawer"
-    role="region"
->
-    <div class="header-container position-relative" 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">
-        {{> core_message/message_drawer_view_contact_body }}
-        {{> core_message/message_drawer_view_contacts_body }}
-        {{> core_message/message_drawer_view_conversation_body }}
-        {{> core_message/message_drawer_view_group_info_body }}
-        {{> core_message/message_drawer_view_overview_body }}
-        {{> 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">
-        {{> core_message/message_drawer_view_conversation_footer }}
-        {{> core_message/message_drawer_view_overview_footer }}
-    </div>
-</div>
 {{#js}}
 require(['jquery', 'core_message/message_drawer'], function($, MessageDrawer) {
     var root = $('#message-drawer-{{uniqid}}');
index 8116c00..314e97e 100644 (file)
     }
 }
 
-$message-drawer-width: 320px;
 $message-send-bg: $gray-300 !default;
 $message-send-color: color-yiq($message-send-bg) !default;
 $message-send-time-color: mix($message-send-color, $message-send-bg, 100%) !default;
@@ -428,41 +427,31 @@ $message-received-color-muted: mix($message-received-color, $message-received-bg
 $message-app-bg: mix($message-send-bg, $message-received-bg, 50%) !default;
 $message-day-color: color-yiq($message-app-bg) !default;
 
+.drawer {
+    .message-app {
+        height: 100%;
+        .icon-back-in-app {
+            display: none;
+        }
+        .icon-back-in-drawer {
+            display: inherit;
+        }
+    }
+}
+
 .message-app {
     display: flex;
     flex-direction: column;
     background-color: $message-app-bg;
-    @include transition();
 
     .icon-back-in-drawer {
         display: none;
     }
 
-    &.drawer {
-        z-index: $zindex-sticky;
-        position: fixed;
-        top: $navbar-height;
-        right: 0;
-        height: calc(100% - #{$navbar-height});
-        width: $message-drawer-width;
-        box-shadow: -2px 2px 4px rgba(0, 0, 0, .08);
-        .icon-back-in-app {
-            display: none;
-        }
-        .icon-back-in-drawer {
-            display: inherit;
-        }
-    }
-
     &.main {
         min-height: 400px;
     }
 
-    &.hidden {
-        display: block;
-        right: $message-drawer-width * -1;
-    }
-
     .header-container {
         flex-shrink: 0;
     }
index 2329e7f..c67e146 100644 (file)
@@ -14649,33 +14649,21 @@ a.ygtvspacer:hover {
       visibility: visible;
       transition: right 0.25s; } }
 
+.drawer .message-app {
+  height: 100%; }
+  .drawer .message-app .icon-back-in-app {
+    display: none; }
+  .drawer .message-app .icon-back-in-drawer {
+    display: inherit; }
+
 .message-app {
   display: flex;
   flex-direction: column;
-  background-color: #eff1f3;
-  transition: all 0.2s ease-in-out; }
-  @media (prefers-reduced-motion: reduce) {
-    .message-app {
-      transition: none; } }
+  background-color: #eff1f3; }
   .message-app .icon-back-in-drawer {
     display: none; }
-  .message-app.drawer {
-    z-index: 1020;
-    position: fixed;
-    top: 50px;
-    right: 0;
-    height: calc(100% - 50px);
-    width: 320px;
-    box-shadow: -2px 2px 4px rgba(0, 0, 0, 0.08); }
-    .message-app.drawer .icon-back-in-app {
-      display: none; }
-    .message-app.drawer .icon-back-in-drawer {
-      display: inherit; }
   .message-app.main {
     min-height: 400px; }
-  .message-app.hidden {
-    display: block;
-    right: -320px; }
   .message-app .header-container {
     flex-shrink: 0; }
   .message-app .body-container {
index c62d803..a578438 100644 (file)
@@ -14911,33 +14911,21 @@ a.ygtvspacer:hover {
       visibility: visible;
       transition: right 0.25s; } }
 
+.drawer .message-app {
+  height: 100%; }
+  .drawer .message-app .icon-back-in-app {
+    display: none; }
+  .drawer .message-app .icon-back-in-drawer {
+    display: inherit; }
+
 .message-app {
   display: flex;
   flex-direction: column;
-  background-color: #eff1f3;
-  transition: all 0.2s ease-in-out; }
-  @media (prefers-reduced-motion: reduce) {
-    .message-app {
-      transition: none; } }
+  background-color: #eff1f3; }
   .message-app .icon-back-in-drawer {
     display: none; }
-  .message-app.drawer {
-    z-index: 1020;
-    position: fixed;
-    top: 50px;
-    right: 0;
-    height: calc(100% - 50px);
-    width: 320px;
-    box-shadow: -2px 2px 4px rgba(0, 0, 0, 0.08); }
-    .message-app.drawer .icon-back-in-app {
-      display: none; }
-    .message-app.drawer .icon-back-in-drawer {
-      display: inherit; }
   .message-app.main {
     min-height: 400px; }
-  .message-app.hidden {
-    display: block;
-    right: -320px; }
   .message-app .header-container {
     flex-shrink: 0; }
   .message-app .body-container {