TNL-6929:

Improves navigation within Studio for Learning Sequences, speeding up authors who want to see how a learner progresses through content without needing to jump over to the LMS.

This adds a dropdown section navigator to the breadcrumbs on the unit page and copies the sequence navigator from LMS to the studio unit page.
This commit is contained in:
Dave St.Germain
2019-09-17 14:51:31 -04:00
parent 08877db858
commit 3e73ba3879
14 changed files with 520 additions and 73 deletions

View File

@@ -51,6 +51,28 @@ from openedx.core.djangolib.markup import HTML, Text
outlineURL: "${outline_url | n, js_escaped_string}"
}
);
require(["js/models/xblock_info", "js/views/xblock", "js/views/utils/xblock_utils", "common/js/components/utils/view_utils"], function (XBlockInfo, XBlockView, XBlockUtils, ViewUtils) {
var model = new XBlockInfo({
id: '${subsection.location|n, decode.utf8}'
});
var xblockView = new XBlockView({
model: model,
el: $('#sequence-nav'),
view: 'author_view?position=${position|n, decode.utf8}&next_url=${next_url|n, decode.utf8}&prev_url=${prev_url|n, decode.utf8}'
});
xblockView.xblockReady = function() {
$('.seq_new_button').click(function(evt) {
evt.preventDefault();
XBlockUtils.addXBlock($(evt.target)).done(function(locator) {
ViewUtils.redirect('/container/' + locator + '?action=new');
return false;
});
return false;
});
};
xblockView.render();
});
</%static:webpack>
</%block>
@@ -63,20 +85,34 @@ from openedx.core.djangolib.markup import HTML, Text
<div class="wrapper-mast wrapper">
<header class="mast has-actions has-navigation has-subtitle">
<div class="page-header">
<small class="navigation navigation-parents subtitle">
% for ancestor in ancestor_xblocks:
<%
ancestor_url = xblock_studio_url(ancestor)
%>
% if ancestor_url:
<a href="${ancestor_url}" class="navigation-item navigation-link navigation-parent">${ancestor.display_name_with_default}</a>
% else:
<span class="navigation-item navigation-parent">${ancestor.display_name_with_default}</span>
% endif
<div class="jump-nav">
<nav class="nav-dd title ui-left">
<ol>
% for block in ancestor_xblocks:
<li class="nav-item">
<span class="title label">${block['block'].display_name_with_default}
<span class="icon fa fa-caret-down ui-toggle-dd" aria-hidden="true"></span>
</span>
% if not block['is_last']:
<span class="spacer"> &rsaquo;</span>
% endif
<div class="wrapper wrapper-nav-sub">
<div class="nav-sub">
<ul>
% for child in block['children']:
<li class="nav-item">
<a href="${xblock_studio_url(child)}">${child.display_name_with_default}</a>
</li>
% endfor
</ul>
</div>
</div>
</li>
% endfor
</small>
<div class="wrapper-xblock-field incontext-editor is-editable"
</ol>
</nav>
<div class="wrapper-xblock-field incontext-editor is-editable"
data-field="display_name" data-field-display-name="${_("Display Name")}">
<h1 class="page-header-title xblock-field-value incontext-editor-value"><span class="title-value">${xblock.display_name_with_default}</span></h1>
</div>
@@ -108,6 +144,7 @@ from openedx.core.djangolib.markup import HTML, Text
% endif
</ul>
</nav>
<div id="sequence-nav"></div>
</header>
</div>
@@ -158,12 +195,7 @@ from openedx.core.djangolib.markup import HTML, Text
<span class="tip"><span class="sr">Tip: </span>${Text(_('To create a link to this unit from an HTML component in this course, enter "/jump_to_id/<location ID>" as the URL value.'))}</span>
</p>
</div>
<div class="wrapper-unit-tree-location bar-mod-content">
<h5 class="title">${_("Location in Course Outline")}</h5>
<div class="wrapper-unit-overview outline outline-simple">
</div>
</div>
</div>
</div>
% endif
</aside>
</section>