From eae1a1eda7ac6d5fb45dc2fb76e0063bfbf19143 Mon Sep 17 00:00:00 2001 From: Bas Brands Date: Wed, 21 Nov 2018 11:06:27 +0100 Subject: [PATCH] MDL-64129 messaging: messaging accordion * fixes open / close chevron icons * add 1 pixel content for Bootstrap 2 accordion Javascript to work --- theme/bootstrapbase/less/moodle/message.less | 17 +++-- theme/bootstrapbase/style/moodle.css | 19 +++--- .../message_drawer_lazy_load_list.mustache | 63 +++++++++++++++++++ ...sage_drawer_view_overview_section.mustache | 9 ++- 4 files changed, 92 insertions(+), 16 deletions(-) create mode 100644 theme/bootstrapbase/templates/core_message/message_drawer_lazy_load_list.mustache diff --git a/theme/bootstrapbase/less/moodle/message.less b/theme/bootstrapbase/less/moodle/message.less index 1e500b71d88..fb52a7ece27 100644 --- a/theme/bootstrapbase/less/moodle/message.less +++ b/theme/bootstrapbase/less/moodle/message.less @@ -1289,20 +1289,20 @@ font-weight: normal; } - .overview-section-toggle { + .accordion-group { .collapsed-icon-container { - display: none; + display: inline-block; } .expanded-icon-container { - display: inline-block; + display: none; } - &.collapsed { + &.expanded { .collapsed-icon-container { - display: inline-block; + display: none; } .expanded-icon-container { - display: none; + display: inline-block; } } } @@ -1317,6 +1317,11 @@ } } } + .onepix { + height: 1px; + width: 1px; + position: absolute; + } .view-conversation { .content-message-container { diff --git a/theme/bootstrapbase/style/moodle.css b/theme/bootstrapbase/style/moodle.css index c2724a4779e..b8fd9aacdd2 100644 --- a/theme/bootstrapbase/style/moodle.css +++ b/theme/bootstrapbase/style/moodle.css @@ -9190,18 +9190,18 @@ a.ygtvspacer:hover { font-size: 14px; font-weight: normal; } -.message-drawer .overview-section-toggle .collapsed-icon-container { - display: none; -} -.message-drawer .overview-section-toggle .expanded-icon-container { +.message-drawer .accordion-group .collapsed-icon-container { display: inline-block; } -.message-drawer .overview-section-toggle.collapsed .collapsed-icon-container { - display: inline-block; +.message-drawer .accordion-group .expanded-icon-container { + display: none; } -.message-drawer .overview-section-toggle.collapsed .expanded-icon-container { +.message-drawer .accordion-group.expanded .collapsed-icon-container { display: none; } +.message-drawer .accordion-group.expanded .expanded-icon-container { + display: inline-block; +} .message-drawer .view-overview-body .section { display: block; } @@ -9209,6 +9209,11 @@ a.ygtvspacer:hover { display: flex; flex-direction: column; } +.message-drawer .onepix { + height: 1px; + width: 1px; + position: absolute; +} .message-drawer .view-conversation .content-message-container img { max-width: 100%; } diff --git a/theme/bootstrapbase/templates/core_message/message_drawer_lazy_load_list.mustache b/theme/bootstrapbase/templates/core_message/message_drawer_lazy_load_list.mustache new file mode 100644 index 00000000000..46b3b3ee6e2 --- /dev/null +++ b/theme/bootstrapbase/templates/core_message/message_drawer_lazy_load_list.mustache @@ -0,0 +1,63 @@ +{{! + 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 . +}} +{{! + @template core_message/message_drawer_lazy_load_list + + This template will render a lazy loaded list for the message drawer. + + 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 + + This is an overridden template + adding "div.onpix" to ensure content has a 1 px height for Bootstrap 2 JS to work. + + Example context (json): + {} + +}} +
+
+
+ + +
+ {{$placeholder}}{{/placeholder}} +
+ +
diff --git a/theme/bootstrapbase/templates/core_message/message_drawer_view_overview_section.mustache b/theme/bootstrapbase/templates/core_message/message_drawer_view_overview_section.mustache index 060d2878bfd..b4798a15e1a 100644 --- a/theme/bootstrapbase/templates/core_message/message_drawer_view_overview_section.mustache +++ b/theme/bootstrapbase/templates/core_message/message_drawer_view_overview_section.mustache @@ -33,19 +33,22 @@ This is an overridden template changing icon "t/collapsedcaret" to "t/collapsed" adding ".in" to ".show" + adding .accordion-group to the main container div + adding expanded to the .accordion-group if required for toggle icons to work. Example context (json): {} }}
-
+
{{< core_message/message_drawer_lazy_load_list }} - {{$rootclasses}}collapse border-bottom {{#expanded}}show in{{/expanded}}{{/rootclasses}} + {{$rootclasses}} accordion-body collapse border-bottom {{#expanded}}show in{{/expanded}}{{/rootclasses}} {{$rootattributes}} id="{{$region}}{{/region}}-target" aria-labelledby="{{$region}}{{/region}}-toggle" -- 2.43.0