Skip to content

Commit

Permalink
MDL-66477 message: Use the generic drawer for the message drawer
Browse files Browse the repository at this point in the history
  • Loading branch information
@junpataleta
junpataleta committed Sep 27, 2019
1 parent a251722 commit 8aca180
Show file tree
Hide file tree
Showing 7 changed files with 74 additions and 103 deletions.
2 changes: 1 addition & 1 deletion message/amd/build/message_drawer.min.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion message/amd/build/message_drawer.min.js.map
View file

Large diffs are not rendered by default.

26 changes: 17 additions & 9 deletions message/amd/src/message_drawer.js
View file
Expand Up @@ -36,6 +36,7 @@ define(
'core_message/message_drawer_routes',
'core_message/message_drawer_events',
'core/pending',
'core/drawer',
],
function(
$,
Expand All @@ -51,7 +52,8 @@ function(
Router,
Routes,
Events,
Pending
Pending,
Drawer
) {

var SELECTORS = {
Expand Down Expand Up @@ -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);
}
};

/**
Expand All @@ -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;
};

/**
Expand Down
56 changes: 27 additions & 29 deletions message/templates/message_drawer.mustache
View file
Expand Up @@ -33,36 +33,34 @@
{}

}}
{{< 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}}');
Expand Down
35 changes: 12 additions & 23 deletions theme/boost/scss/moodle/message.scss
View file
Expand Up @@ -418,7 +418,6 @@
}
}

$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;
Expand All @@ -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;
}
Expand Down
28 changes: 8 additions & 20 deletions theme/boost/style/moodle.css
View file
Expand Up @@ -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 {
Expand Down
28 changes: 8 additions & 20 deletions theme/classic/style/moodle.css
View file
Expand Up @@ -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 {
Expand Down

0 comments on commit 8aca180

Please sign in to comment.