MDL-64821 mod_forum: add templates for modern display mode

mod/forum/amd/build/discussion_modern.min.js

@@ -0,0 +1,2 @@
+define ("mod_forum/discussion_modern",["exports","jquery","mod_forum/discussion","mod_forum/lock_toggle","mod_forum/favourite_toggle","mod_forum/pin_toggle"],function(a,b,c,d,e,f){"use strict";Object.defineProperty(a,"__esModule",{value:!0});a.init=void 0;b=g(b);c=g(c);d=g(d);e=g(e);f=g(f);function g(a){return a&&a.__esModule?a:{default:a}}var h=function(a){c.default.init(a);var g=(0,b.default)("[data-container=\"discussion-tools\"]");d.default.init(g);e.default.init(g);f.default.init(g)};a.init=h});
+//# sourceMappingURL=discussion_modern.min.js.map

mod/forum/amd/build/discussion_modern.min.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/discussion_modern.js"],"names":["init","root","Discussion","discussionToolsContainer","LockToggle","FavouriteToggle","Pin"],"mappings":"gQAuBA,OACA,OACA,OACA,OACA,O,mDAEO,GAAMA,CAAAA,CAAI,CAAG,SAACC,CAAD,CAAU,CAC1BC,UAAWF,IAAX,CAAgBC,CAAhB,EAEA,GAAIE,CAAAA,CAAwB,CAAG,cAAE,uCAAF,CAA/B,CACAC,UAAWJ,IAAX,CAAgBG,CAAhB,EACAE,UAAgBL,IAAhB,CAAqBG,CAArB,EACAG,UAAIN,IAAJ,CAASG,CAAT,CACH,CAPM,C","sourcesContent":["// This file is part of Moodle - http://moodle.org/\n//\n// Moodle is free software: you can redistribute it and/or modify\n// it under the terms of the GNU General Public License as published by\n// the Free Software Foundation, either version 3 of the License, or\n// (at your option) any later version.\n//\n// Moodle is distributed in the hope that it will be useful,\n// but WITHOUT ANY WARRANTY; without even the implied warranty of\n// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n// GNU General Public License for more details.\n//\n// You should have received a copy of the GNU General Public License\n// along with Moodle.  If not, see <http://www.gnu.org/licenses/>.\n\n/**\n * Module for viewing a discussion.\n *\n * @module     mod_forum/discussion_new\n * @package    mod_forum\n * @copyright  2019 Ryan Wyllie <ryan@moodle.com>\n * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later\n */\nimport $ from 'jquery';\nimport Discussion from 'mod_forum/discussion';\nimport LockToggle from 'mod_forum/lock_toggle';\nimport FavouriteToggle from 'mod_forum/favourite_toggle';\nimport Pin from 'mod_forum/pin_toggle';\n\nexport const init = (root) => {\n    Discussion.init(root);\n\n    var discussionToolsContainer = $('[data-container=\"discussion-tools\"]');\n    LockToggle.init(discussionToolsContainer);\n    FavouriteToggle.init(discussionToolsContainer);\n    Pin.init(discussionToolsContainer);\n};\n"],"file":"discussion_modern.min.js"}

mod/forum/amd/src/discussion_modern.js

@@ -0,0 +1,37 @@
+// 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/>.
+
+/**
+ * Module for viewing a discussion.
+ *
+ * @module     mod_forum/discussion_new
+ * @package    mod_forum
+ * @copyright  2019 Ryan Wyllie <ryan@moodle.com>
+ * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
+ */
+import $ from 'jquery';
+import Discussion from 'mod_forum/discussion';
+import LockToggle from 'mod_forum/lock_toggle';
+import FavouriteToggle from 'mod_forum/favourite_toggle';
+import Pin from 'mod_forum/pin_toggle';
+
+export const init = (root) => {
+    Discussion.init(root);
+
+    var discussionToolsContainer = $('[data-container="discussion-tools"]');
+    LockToggle.init(discussionToolsContainer);
+    FavouriteToggle.init(discussionToolsContainer);
+    Pin.init(discussionToolsContainer);
+};

mod/forum/classes/local/factories/renderer.php

@@ -192,12 +192,17 @@ class renderer {
             // Post process the exported posts for our template. This function will add the "replies"
             // and "hasreplies" properties to the exported posts. It will also sort them into the
             // reply tree structure if the display mode requires it.
-            function($exportedposts, $forums) use ($displaymode, $readonly, $exportedpostssorter) {
+            function($exportedposts, $forums, $discussions) use ($displaymode, $readonly, $exportedpostssorter) {
                 $forum = array_shift($forums);
                 $seenfirstunread = false;
                 $postcount = count($exportedposts);
+                $discussionsbyid = array_reduce($discussions, function($carry, $discussion) {
+                    $carry[$discussion->get_id()] = $discussion;
+                    return $carry;
+                }, []);
                 $exportedposts = array_map(
-                    function($exportedpost) use ($forum, $readonly, $seenfirstunread) {
+                    function($exportedpost) use ($forum, $discussionsbyid, $readonly, $seenfirstunread) {
+                        $discussion = $discussionsbyid[$exportedpost->discussionid] ?? null;
                         if ($forum->get_type() == 'single' && !$exportedpost->hasparent) {
                             // Remove the author from any posts that don't have a parent.
                             unset($exportedpost->author);
@@ -209,6 +214,7 @@ class renderer {
                         $exportedpost->hasreplycount = false;
                         $exportedpost->hasreplies = false;
                         $exportedpost->replies = [];
+                        $exportedpost->discussionlocked = $discussion ? $discussion->is_locked() : null;
 
                         $exportedpost->isfirstunread = false;
                         if (!$seenfirstunread && $exportedpost->unread) {

mod/forum/lang/en/forum.php

@@ -24,6 +24,7 @@
  */
 
 $string['activityoverview'] = 'There are new forum posts';
+$string['actionsforpost'] = 'Actions for post';
 $string['addanewdiscussion'] = 'Add a new discussion topic';
 $string['addanewquestion'] = 'Add a new question';
 $string['addanewtopic'] = 'Add a new topic';
@@ -41,10 +42,13 @@ $string['areaattachment'] = 'Attachments';
 $string['areapost'] = 'Messages';
 $string['attachment'] = 'Attachment';
 $string['attachmentname'] = 'Attachment {$a}';
+$string['attachmentnameandfilesize'] = '{$a->name} ({$a->size})';
 $string['attachment_help'] = 'You can optionally attach one or more files to a forum post. If you attach an image, it will be displayed after the message.';
 $string['attachmentnopost'] = 'You cannot export attachments without a post id';
 $string['attachments'] = 'Attachments';
 $string['attachmentswordcount'] = 'Attachments and word count';
+$string['authorreplyingprivatelytoauthor'] = '{$a->respondant} replying privately to {$a->author}';
+$string['authorreplyingtoauthor'] = '{$a->respondant} replying to {$a->author}';
 $string['availability'] = 'Availability';
 $string['blockafter'] = 'Post threshold for blocking';
 $string['blockafter_help'] = 'This setting specifies the maximum number of posts which a user can post in the given time period. Users with the capability mod/forum:postwithoutthrottling are exempt from post limits.';
@@ -645,6 +649,7 @@ If set to optional, participants can choose whether to turn tracking on or off v
 If \'Allow forced read tracking\' is enabled in the site administration, then a further option is available - forced. This means that tracking is always on, regardless of users\' forum preferences.';
 $string['unlockdiscussion'] = 'Unlock this discussion';
 $string['unread'] = 'Unread';
+$string['unreadpost'] = 'Unread post';
 $string['unreadposts'] = 'Unread posts';
 $string['unreadpostsnumber'] = '{$a} unread posts';
 $string['unreadpostsone'] = '1 unread post';

mod/forum/templates/forum_action_menu.mustache

@@ -25,7 +25,7 @@
     }
 }}
 <div class="ml-auto dropdown">
-    <button class="{{^settings.excludetext}}dropdown-toggle{{/settings.excludetext}} m-t-0 p-t-0 btn btn-link btn-icon"
+    <button class="{{^settings.excludetext}}dropdown-toggle{{/settings.excludetext}} m-t-0 p-t-0 btn btn-link"
         type="button"
         role="button"
         data-toggle="dropdown"

mod/forum/templates/forum_discussion_modern.mustache

@@ -0,0 +1,62 @@
+{{!
+    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 mod_forum/forum_discussion_modern
+
+    Template for displaying a single forum discussion.
+
+    Classes required for JS:
+    * none
+
+    Data attributes required for JS:
+    * none
+
+    Example context (json):
+    {
+    }
+}}
+
+<div id="discussion-container-{{uniqid}}" data-content="forum-discussion">
+    {{#html}}
+        <div class="mb-5">
+            <div class="d-flex flex-wrap">
+                <div>{{{modeselectorform}}}</div>
+                <div class="ml-auto d-flex align-items-middle" data-container="discussion-tools">
+                    <div>{{{subscribe}}}</div>
+                    <div class="pl-1">{{> mod_forum/forum_action_menu}}</div>
+                </div>
+            </div>
+
+            <div class="d-flex mt-2">
+                <div>{{{movediscussion}}}</div>
+                <div {{#movediscussion}}class="ml-2"{{/movediscussion}}>{{{exportdiscussion}}}</div>
+            </div>
+        </div>
+    {{/html}}
+
+    {{#notifications}}
+        {{> core/notification}}
+    {{/notifications}}
+
+    {{{html.posts}}}
+</div>
+{{#js}}
+require(['jquery', 'mod_forum/discussion_modern'], function($, Discussion) {
+    var root = $('#discussion-container-{{uniqid}}');
+    Discussion.init(root);
+});
+{{/js}}

mod/forum/templates/forum_discussion_modern_first_post.mustache

@@ -0,0 +1,364 @@
+{{!
+    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 mod_forum/forum_discussion_modern_first_post
+
+    Template to render a single post from a discussion.
+
+    Classes required for JS:
+    * none
+
+    Data attributes required for JS:
+    * none
+
+    Example context (json):
+    {
+    }
+}}
+<article
+    id="p{{id}}"
+    class="forum-post-container"
+    data-post-id="{{id}}"
+    data-region="post"
+    data-target="{{id}}-target"
+    tabindex="0"
+    aria-labelledby="post-header-{{id}}"
+    aria-describedby="post-content-{{id}}"
+>
+    <!-- The firstpost and starter classes below aren't used for anything other than to identify the first post in behat -->
+    <div
+        class="d-flex focus-target mb-4 {{#firstpost}}firstpost starter{{/firstpost}}"
+        aria-label='{{#str}} postbyuser, mod_forum, {"post": "{{subject}}", "user": "{{author.fullname}}"} {{/str}}'
+        data-post-id="{{id}}" data-content="forum-post"
+    >
+        {{#isfirstunread}}<a id="unread" aria-hidden="true"></a>{{/isfirstunread}}
+
+        <div class="author-image-container d-inline-block pt-2">
+            {{^isdeleted}}
+                {{#author}}
+                    {{#urls.profileimage}}
+                        <img
+                            class="rounded-circle w-100"
+                            src="{{{.}}}"
+                            alt="{{#str}} pictureof, core, {{author.fullname}} {{/str}}"
+                            aria-hidden="true"
+                        >
+                    {{/urls.profileimage}}
+                {{/author}}
+            {{/isdeleted}}
+
+            {{#unread}}
+                <div class="icon-size-4 text-info text-center mt-3 icon-no-margin">
+                    <span
+                        data-toggle="tooltip"
+                        data-placement="left"
+                        title="{{#str}} unreadpost, mod_forum {{/str}}"
+                        tabindex="0"
+                    >{{#pix}} i/flagged, core {{/pix}}</span>
+                </div>
+            {{/unread}}
+        </div>
+
+        <div class="d-flex flex-column w-100"  data-region-content="forum-post-core">
+            <header id="post-header-{{uniqid}}">
+                {{^isdeleted}}
+                    <div class="d-flex flex-wrap align-items-center mb-3">
+                        <address class="mb-0 mr-2" tabindex="-1">
+                            {{#author}}
+                                <h4 class="h6 d-lg-inline-block mb-0 author-header mr-1">
+                                    {{#parentauthorname}}
+                                        {{#isprivatereply}}
+                                            <span class="text-danger">
+                                                {{#str}}
+                                                    authorreplyingprivatelytoauthor, mod_forum, {
+                                                        "respondant":"<a class='font-weight-bold author-name' data-region='author-name' href='{{{urls.profile}}}'>{{fullname}}</a>",
+                                                        "author":"{{parentauthorname}}"
+                                                    }
+                                                {{/str}}
+                                            </span>
+                                        {{/isprivatereply}}
+                                        {{^isprivatereply}}
+                                            {{#str}}
+                                                authorreplyingtoauthor, mod_forum, {
+                                                    "respondant":"<a class='font-weight-bold author-name' data-region='author-name' href='{{{urls.profile}}}'>{{fullname}}</a>",
+                                                    "author":"{{parentauthorname}}"
+                                                }
+                                            {{/str}}
+                                        {{/isprivatereply}}
+                                    {{/parentauthorname}}
+                                    {{^parentauthorname}}
+                                        <a class='font-weight-bold author-name' data-region='author-name' href="{{{urls.profile}}}">{{fullname}}</a>
+                                    {{/parentauthorname}}
+                                </h4>
+                            {{/author}}
+                            <time class="text-muted">
+                                {{#userdate}} {{timecreated}}, {{#str}} strftimerecentfull, core_langconfig {{/str}} {{/userdate}}
+                            </time>
+                        </address>
+
+                        <div class="d-flex align-items-center ml-auto">
+                            {{#author.groups}}
+                                {{#urls.image}}
+                                    <div class="mr-2">
+                                        {{#urls.group}}
+                                            <a href="{{urls.group}}" aria-label='{{#str}} memberofgroup, group, {{name}}{{/str}}'>
+                                                <img
+                                                    class="rounded-circle group-image"
+                                                    src="{{{urls.image}}}"
+                                                    alt="{{#str}} pictureof, core, {{name}} {{/str}}"
+                                                    aria-hidden="true"
+                                                    title="{{#str}} pictureof, core, {{name}} {{/str}}"
+                                                >
+                                            </a>
+                                        {{/urls.group}}
+                                        {{^urls.group}}
+                                            <img class="rounded-circle group-image"
+                                                src="{{{urls.image}}}"
+                                                alt="{{#str}} pictureof, core, {{name}} {{/str}}"
+                                                title="{{#str}} pictureof, core, {{name}} {{/str}}"
+                                            >
+                                        {{/urls.group}}
+                                    </div>
+                                {{/urls.image}}
+                            {{/author.groups}}
+
+                            {{^readonly}}
+                                {{#capabilities.view}}
+                                    <a
+                                        href="{{{urls.view}}}"
+                                        class="d-inline-block mr-1 icon-no-margin"
+                                        title="{{#str}} permanentlinktopost, mod_forum {{/str}}"
+                                    >
+                                        {{#pix}} e/insert_edit_link, core {{/pix}}
+                                    </a>
+                                {{/capabilities.view}}
+
+                                {{#showactionmenu}}
+                                    <div class="dropdown">
+                                        <button
+                                            class="btn btn-icon text-muted icon-no-margin icon-size-3"
+                                            type="button"
+                                            id="post-actions-menu-{{uniqid}}"
+                                            data-toggle="dropdown"
+                                            aria-haspopup="true"
+                                            aria-expanded="false"
+                                            aria-label="{{#str}} actionsforpost, mod_forum {{/str}}"
+                                        >
+                                            {{#pix}} i/moremenu {{/pix}}
+                                        </button>
+                                        <!-- inline style to fix RTL placement bug -->
+                                        <div class="dropdown-menu" aria-labelledby="post-actions-menu-{{uniqid}}" style="right: auto">
+                                            {{#capabilities}}
+                                                {{#controlreadstatus}}
+                                                    {{#unread}}
+                                                        <a
+                                                            href="{{{urls.markasread}}}"
+                                                            class="dropdown-item"
+                                                            role="menuitem"
+                                                        >
+                                                            {{#str}} markread, mod_forum {{/str}}
+                                                        </a>
+                                                    {{/unread}}
+                                                    {{^unread}}
+                                                        <a
+                                                            href="{{{urls.markasunread}}}"
+                                                            class="dropdown-item"
+                                                            role="menuitem"
+                                                        >
+                                                            {{#str}} markunread, mod_forum {{/str}}
+                                                        </a>
+                                                    {{/unread}}
+                                                {{/controlreadstatus}}
+                                                {{#urls.viewparent}}
+                                                    <a
+                                                        href="{{{.}}}"
+                                                        class="dropdown-item"
+                                                        title="{{#str}} permanentlinktoparentpost, mod_forum {{/str}}"
+                                                        role="menuitem"
+                                                    >
+                                                        {{#str}} parent, mod_forum {{/str}}
+                                                    </a>
+                                                {{/urls.viewparent}}
+                                                {{#edit}}
+                                                    <a
+                                                        href="{{{urls.edit}}}"
+                                                        class="dropdown-item"
+                                                        role="menuitem"
+                                                    >
+                                                        {{#str}} edit, mod_forum {{/str}}
+                                                    </a>
+                                                {{/edit}}
+                                                {{#split}}
+                                                    <a
+                                                        href="{{{urls.split}}}"
+                                                        class="dropdown-item"
+                                                        role="menuitem"
+                                                    >
+                                                        {{#str}} prune, mod_forum {{/str}}
+                                                    </a>
+                                                {{/split}}
+                                                {{#delete}}
+                                                    <a
+                                                        href="{{{urls.delete}}}"
+                                                        class="dropdown-item"
+                                                        role="menuitem"
+                                                    >
+                                                        {{#str}} delete, mod_forum {{/str}}
+                                                    </a>
+                                                {{/delete}}
+                                                {{#export}}
+                                                    <a
+                                                        href="{{{urls.export}}}"
+                                                        class="dropdown-item"
+                                                        role="menuitem"
+                                                    >
+                                                        {{#str}} addtoportfolio, core_portfolio {{/str}}
+                                                    </a>
+                                                {{/export}}
+                                            {{/capabilities}}
+                                        </div>
+                                    </div>
+                                {{/showactionmenu}}
+                            {{/readonly}}
+                            </div>
+                    </div>
+                    {{$subject}}
+                        <h2
+                            class="h1 font-weight-bold post-subject mt-n2"
+                            data-region-content="forum-post-core-subject"
+                            data-reply-subject="{{replysubject}}"
+                        >{{{subject}}}</h2>
+                    {{/subject}}
+                {{/isdeleted}}
+                {{#hasreplycount}}
+                    <span class="sr-only">{{#str}} numberofreplies, mod_forum, {{replycount}} {{/str}}</span>
+                {{/hasreplycount}}
+            </header>
+
+            <div class="post-message" id="post-content-{{id}}">
+                {{{message}}}
+            </div>
+
+            {{^isdeleted}}
+                {{#attachments}}
+                    {{#isimage}}
+                        <div class="attachedimages">
+                            <img
+                                src="{{{url}}}"
+                                alt="{{#str}} attachmentname, mod_forum, {{filename}} {{/str}}"
+                                style="max-width: 100%"
+                            >
+                            {{#urls.export}}
+                                <a href="{{{.}}}" title="{{#str}} addtoportfolio, core_portfolio {{/str}}">
+                                    {{#pix}} t/portfolioadd, core {{/pix}}
+                                </a>
+                            {{/urls.export}}
+                            {{#html.plagiarism}}
+                                <div>{{{.}}}</div>
+                            {{/html.plagiarism}}
+                        </div>
+                    {{/isimage}}
+                {{/attachments}}
+
+                {{#attachments}}
+                    {{^isimage}}
+                        <div class="mt-3">
+                            <span class="icon-size-5">{{#pix}} {{icon}}, core {{/pix}}</span>
+                            <div class="align-bottom d-inline-block">
+                                <a
+                                    href="{{{url}}}"
+                                    aria-label="{{#str}} attachmentname, mod_forum, {{filename}} {{/str}}"
+                                    class="font-weight-bold"
+                                >
+                                    {{#str}} attachmentnameandfilesize, mod_forum, {"name": "{{filename}}", "size": "{{filesizeformatted}}"} {{/str}}
+                                </a>
+                                {{#urls.export}}
+                                    <a class="icon-no-margin" href="{{{.}}}" title="{{#str}} exportattachmentname, mod_forum, {{filename}} {{/str}}">
+                                        {{#pix}} t/portfolioadd, core {{/pix}}
+                                    </a>
+                                {{/urls.export}}
+                                {{#html.plagiarism}}
+                                    <div>{{{.}}}</div>
+                                {{/html.plagiarism}}
+                            </div>
+                        </div>
+                    {{/isimage}}
+                {{/attachments}}
+
+                <div class="d-flex mt-3 align-items-center">
+                    {{#html.rating}}
+                        <div>{{{.}}}</div>
+                    {{/html.rating}}
+                    <div class="ml-auto d-flex flex-column">
+                        {{#haswordcount}}
+                            <span class="ml-auto badge badge-light">
+                                {{#str}} numwords, core, {{wordcount}} {{/str}}
+                            </span>
+                        {{/haswordcount}}
+                        {{#html.taglist}}
+                            <div class="d-inline-block ml-auto {{#haswordcount}}mt-2{{/haswordcount}}">{{{.}}}</div>
+                        {{/html.taglist}}
+                    </div>
+                </div>
+            {{/isdeleted}}
+
+            {{$footer}}
+                {{^isdeleted}}
+                    {{^readonly}}
+                        <div class="d-flex mt-3">
+                            {{#capabilities.reply}}
+                                <button
+                                    class="btn btn-primary btn-lg"
+                                    data-href="{{{urls.reply}}}"
+                                    data-post-id="{{id}}"
+                                    data-action="collapsible-link"
+                                    data-can-reply-privately="{{capabilities.canreplyprivately}}"
+                                >
+                                    {{#str}} reply, mod_forum {{/str}}
+                                </button>
+                            {{/capabilities.reply}}
+                            {{^capabilities.reply}}
+                                {{#discussionlocked}}
+                                    <button class="btn btn-secondary btn-lg disabled" disabled>
+                                        {{#str}} reply, mod_forum {{/str}}
+                                    </button>
+                                {{/discussionlocked}}
+                            {{/capabilities.reply}}
+                        </div>
+                    {{/readonly}}
+                {{/isdeleted}}
+                {{#discussionlocked}}
+                    <div><span class="badge badge-danger mt-2">{{#str}} locked, mod_forum {{/str}}</span></div>
+                {{/discussionlocked}}
+            {{/footer}}
+        </div>
+    </div>
+
+    {{$replies}}
+        <div class="indent inline-reply-container" data-region="inpage-reply-container"></div>
+
+        <div class="indent replies-container" data-region="replies-container">
+            {{#hasreplies}}
+                {{#replies}}
+                    <div class="mt-4">
+                        {{> mod_forum/forum_discussion_modern_post_reply }}
+                    </div>
+                {{/replies}}
+            {{/hasreplies}}
+        </div>
+    {{/replies}}
+</article>

mod/forum/templates/forum_discussion_modern_post_reply.mustache

@@ -0,0 +1,65 @@
+{{!
+    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 mod_forum/forum_discussion_post
+
+    Template to render a single post from a discussion.
+
+    Classes required for JS:
+    * none
+
+    Data attributes required for JS:
+    * none
+
+    Example context (json):
+    {
+    }
+}}
+{{< mod_forum/forum_discussion_modern_first_post }}
+    {{$subject}}
+        <h3 class="sr-only" data-region-content="forum-post-core-subject">{{{subject}}}</h3>
+    {{/subject}}
+    {{$footer}}
+        {{^isdeleted}}
+            {{^readonly}}
+                {{#capabilities.reply}}
+                    <div class="d-flex mt-1">
+                        <button
+                            class="font-weight-bold btn btn-link btn-lg px-0"
+                            data-href="{{{urls.reply}}}"
+                            data-post-id="{{id}}"
+                            data-action="create-inpage-reply"
+                            data-can-reply-privately="{{capabilities.canreplyprivately}}"
+                        >
+                            {{#str}} reply, mod_forum {{/str}}
+                        </button>
+                    </div>
+                {{/capabilities.reply}}
+            {{/readonly}}
+        {{/isdeleted}}
+    {{/footer}}
+    {{$replies}}
+        <div class="indent replies-container" data-region="replies-container">
+            {{#hasreplies}}
+                {{#replies}}
+                    {{> mod_forum/forum_discussion_modern_post_reply }}
+                {{/replies}}
+            {{/hasreplies}}
+        </div>
+        <div class="indent inline-reply-container" data-region="inpage-reply-container"></div>
+    {{/replies}}
+{{/ mod_forum/forum_discussion_modern_first_post }}

mod/forum/templates/forum_discussion_modern_posts.mustache

@@ -0,0 +1,34 @@
+{{!
+    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 mod_forum/forum_discussion_modern_posts
+
+    Template to render a list of posts for a discussion.
+
+    Classes required for JS:
+    * none
+
+    Data attributes required for JS:
+    * none
+
+    Example context (json):
+    {
+    }
+}}
+{{#posts}}
+    {{> mod_forum/forum_discussion_modern_first_post }}
+{{/posts}}

theme/boost/scss/moodle/modules.scss

@@ -173,6 +173,210 @@ select {
     }
 }
 
+$author-image-width: 70px;
+$author-image-margin: 24px;
+$author-image-width-sm: 30px;
+$author-image-margin-sm: 8px;
+
+/** Gently highlight the selected post by changing it's background to blue and then fading it out. */
+@keyframes background-highlight {
+    from {
+        background-color: rgba(0, 123, 255, 0.5);
+    }
+    to {
+        background-color: inherit;
+    }
+}
+
+#page-mod-forum-discuss.modern-display-mode {
+    &.path-mod-forum {
+        .discussionsubscription {
+            margin-top: 0;
+            text-align: inherit;
+            margin-bottom: 0;
+        }
+
+        .preload-subscribe,
+        .preload-unsubscribe {
+            display: none;
+        }
+    }
+
+    .post-message {
+        line-height: 1.6;
+    }
+
+    .indent {
+        margin-left: 0;
+    }
+
+    /** Reset the badge styling back to pill style. */
+    .badge {
+        font-size: inherit;
+        font-weight: inherit;
+        padding-left: .5rem;
+        padding-right: .5rem;
+        border-radius: 10rem;
+    }
+
+    .badge-light {
+        background-color: #f6f6f6;
+        color: #5b5b5b;
+    }
+
+    /** Style the ratings like a badge. */
+    .rating-aggregate-container {
+        background-color: #f6f6f6;
+        color: #5b5b5b;
+        padding: .25em .5em;
+        line-height: 1;
+        margin-right: .5rem;
+        vertical-align: middle;
+        border-radius: 10rem;
+        text-align: center;
+    }
+
+    .ratinginput {
+        padding: .25em 1.75rem 0.25em .75em;
+        line-height: 1;
+        height: auto;
+        border-radius: 10rem;
+    }
+
+    .group-image {
+        width: 35px;
+        height: 35px;
+        margin-right: 0;
+        float: none;
+        display: inline-block;
+    }
+
+    /** Don't show the discussion locked alert in this mode because it's already indicated with a badge. */
+    .alert.discussionlocked {
+        @extend .sr-only;
+    }
+
+    /** Fix muted text contrast ratios for accessibility. */
+    .text-muted,
+    .dimmed_text {
+        color: #707070 !important; /* stylelint-disable-line declaration-no-important */
+    }
+
+    .author-header {
+        font-style: italic;
+
+        .author-name {
+            font-style: normal;
+        }
+    }
+
+    /** Make the tag list text screen reader visible only */
+    .tag_list > b {
+        @extend .sr-only;
+    }
+
+    :target > .focus-target {
+        animation-name: background-highlight;
+        animation-duration: 1s;
+        animation-timing-function: ease-in-out;
+        animation-iteration-count: 1;
+    }
+
+    .forum-post-container {
+        .replies-container {
+            .forum-post-container {
+                border-top: 1px solid #dee2e6;
+                padding-top: 1.5rem;
+
+                .replies-container .forum-post-container {
+                    border-top: none;
+                    padding-top: 0;
+                }
+            }
+
+            .inline-reply-container .reply-author {
+                display: none;
+            }
+        }
+
+        .post-message p:last-of-type {
+            margin-bottom: 0;
+        }
+
+        .author-image-container {
+            width: $author-image-width;
+            margin-right: $author-image-margin;
+            flex-shrink: 0;
+        }
+
+        .inline-reply-container textarea {
+            border: 0;
+            resize: none;
+        }
+
+        .indent {
+            /**
+             * The first post and first set of replies have a larger author image so offset the 2nd
+             * set of replies by the image width + margin to ensure they align.
+             */
+            .indent {
+                padding-left: $author-image-width + $author-image-margin;
+
+                /**
+                 * Reduce the size of the the author image for all second level replies (and below).
+                 */
+                .author-image-container {
+                    width: $author-image-width-sm;
+                    margin-right: $author-image-margin-sm;
+                }
+
+                /**
+                 * Adjust the indentation offset for all 3rd level replies and below for the smaller author image.
+                 */
+                .indent {
+                    padding-left: $author-image-width-sm + $author-image-margin-sm;
+
+                    /**
+                     * Stop indenting the replies after the 5th reply.
+                     */
+                    .indent .indent .indent {
+                        padding-left: 0;
+                    }
+                }
+            }
+        }
+    }
+}
+
+/** Extra small devices (portrait phones, less than 576px). */
+@include media-breakpoint-down(sm) {
+    #page-mod-forum-discuss.modern-display-mode {
+        .forum-post-container {
+            .author-image-container {
+                width: $author-image-width-sm;
+                margin-right: $author-image-margin-sm;
+            }
+
+            .indent {
+                .indent {
+                    padding-left: $author-image-width-sm + $author-image-margin-sm;
+
+                    .indent .indent {
+                        padding-left: 0;
+                    }
+                }
+            }
+        }
+
+        .group-image {
+            width: 30px;
+            height: 30px;
+        }
+    }
+}
+
+// End styling for mod_forum.
+
 .maincalendar .calendarmonth td,
 .maincalendar .calendarmonth th {
     border: 1px dotted $table-border-color;