diff --git a/lms/djangoapps/instructor/views/api.py b/lms/djangoapps/instructor/views/api.py index 84058dfeae49..c486ec2ea447 100644 --- a/lms/djangoapps/instructor/views/api.py +++ b/lms/djangoapps/instructor/views/api.py @@ -2516,6 +2516,9 @@ def _list_instructor_tasks(request, course_id, serialize_data=None): else: # Specifying for single problem's history tasks = task_api.get_instructor_task_history(course_id, module_state_key) + elif request.GET.get('include_canvas') is not None: + from ol_openedx_canvas_integration.task_helpers import get_filtered_instructor_tasks # pylint: disable=import-error + tasks = get_filtered_instructor_tasks(course_id, request.user) else: # If no problem or student, just get currently running tasks tasks = task_api.get_running_instructor_tasks(course_id) diff --git a/lms/djangoapps/instructor_task/views.py b/lms/djangoapps/instructor_task/views.py index 51e2812577fe..c1a31e089901 100644 --- a/lms/djangoapps/instructor_task/views.py +++ b/lms/djangoapps/instructor_task/views.py @@ -138,7 +138,9 @@ def get_task_completion_info(instructor_task): # lint-amnesty, pylint: disable= student = None problem_url = None + entrance_exam_url = None email_id = None + task_input = None try: task_input = json.loads(instructor_task.task_input) except ValueError: @@ -192,6 +194,10 @@ def get_task_completion_info(instructor_task): # lint-amnesty, pylint: disable= else: # num_succeeded < num_attempted # Translators: {action} is a past-tense verb that is localized separately. {succeeded} and {attempted} are counts. # lint-amnesty, pylint: disable=line-too-long msg_format = _("Problem {action} for {succeeded} of {attempted} students") + elif task_input and task_input.get('course_key'): + from ol_openedx_canvas_integration.utils import get_task_output_formatted_message # pylint: disable=import-error + msg_format = get_task_output_formatted_message(task_output) + succeeded = True elif email_id is not None: # this reports on actions on bulk emails if num_attempted == 0: diff --git a/lms/static/js/instructor_dashboard/instructor_dashboard.js b/lms/static/js/instructor_dashboard/instructor_dashboard.js index f87e9db8e814..14f47fce6f36 100644 --- a/lms/static/js/instructor_dashboard/instructor_dashboard.js +++ b/lms/static/js/instructor_dashboard/instructor_dashboard.js @@ -176,6 +176,9 @@ such that the value can be defined later than this assignment (file load order). }, { constructor: window.InstructorDashboard.sections.ECommerce, $element: idashContent.find('.' + CSS_IDASH_SECTION + '#e-commerce') + }, { + constructor: window.InstructorDashboard.sections.CanvasIntegration, + $element: idashContent.find('.' + CSS_IDASH_SECTION + '#canvas_integration') }, { constructor: window.InstructorDashboard.sections.Membership, $element: idashContent.find('.' + CSS_IDASH_SECTION + '#membership') diff --git a/lms/static/js/instructor_dashboard/util.js b/lms/static/js/instructor_dashboard/util.js index 4e24c44c77ec..3818ba189c76 100644 --- a/lms/static/js/instructor_dashboard/util.js +++ b/lms/static/js/instructor_dashboard/util.js @@ -51,7 +51,8 @@ enableColumnReorder: false, autoHeight: true, rowHeight: 100, - forceFitColumns: true + forceFitColumns: true, + enableTextSelectionOnCells: true }; columns = [ { @@ -492,7 +493,8 @@ enableCellNavigation: true, enableColumnReorder: false, rowHeight: 30, - forceFitColumns: true + forceFitColumns: true, + enableTextSelectionOnCells: true }; columns = [ { diff --git a/lms/templates/instructor/instructor_dashboard_2/html-datatable.underscore b/lms/templates/instructor/instructor_dashboard_2/html-datatable.underscore new file mode 100644 index 000000000000..89da91b17881 --- /dev/null +++ b/lms/templates/instructor/instructor_dashboard_2/html-datatable.underscore @@ -0,0 +1,16 @@ +

+

<%- title %>

+ + <%_.forEach(header, function (h) {%> + + <%})%> + + <%_.forEach(data, function (row) {%> + + <%_.forEach(row, function (value) {%> + + <%})%> + + <%})%> +
<%- h %>
<%- value %>
+

diff --git a/lms/templates/instructor/instructor_dashboard_2/instructor_dashboard_2.html b/lms/templates/instructor/instructor_dashboard_2/instructor_dashboard_2.html index 27ed2d3dadcd..1479677245a1 100644 --- a/lms/templates/instructor/instructor_dashboard_2/instructor_dashboard_2.html +++ b/lms/templates/instructor/instructor_dashboard_2/instructor_dashboard_2.html @@ -91,7 +91,7 @@ ## Include Underscore templates <%block name="header_extras"> -% for template_name in ["cohorts", "discussions", "enrollment-code-lookup-links", "cohort-editor", "cohort-group-header", "cohort-selector", "cohort-form", "notification", "cohort-state", "divided-discussions-inline", "divided-discussions-course-wide", "cohort-discussions-category", "cohort-discussions-subcategory", "certificate-allowlist", "certificate-allowlist-editor", "certificate-bulk-allowlist", "certificate-invalidation", "membership-list-widget"]: +% for template_name in ["cohorts", "discussions", "enrollment-code-lookup-links", "cohort-editor", "cohort-group-header", "cohort-selector", "cohort-form", "notification", "cohort-state", "divided-discussions-inline", "divided-discussions-course-wide", "cohort-discussions-category", "cohort-discussions-subcategory", "certificate-allowlist", "certificate-allowlist-editor", "certificate-bulk-allowlist", "certificate-invalidation", "membership-list-widget", "html-datatable"]: diff --git a/lms/templates/seq_block.html b/lms/templates/seq_block.html index 3c8699bc8f18..9c7c900e5084 100644 --- a/lms/templates/seq_block.html +++ b/lms/templates/seq_block.html @@ -4,6 +4,23 @@ from django.conf import settings %> + +
% else: % for idx, item in enumerate(items): -
  • +
    • % endif + % if show_dropdown: + ## <%include file='seq_dropdown.html' args="items=items[15:], start_index=15"/> + % endif
    diff --git a/xmodule/js/src/sequence/display.js b/xmodule/js/src/sequence/display.js index 0c136a5b580f..c8a692fbbf95 100644 --- a/xmodule/js/src/sequence/display.js +++ b/xmodule/js/src/sequence/display.js @@ -4,6 +4,8 @@ (function() { 'use strict'; + const { HtmlUtils } = window.edx; + this.Sequence = (function() { function Sequence(element, runtime) { var self = this; @@ -26,6 +28,9 @@ this.goto = function(event) { return Sequence.prototype.goto.apply(self, [event]); }; + this.toggleDropdown = function(event) { + return Sequence.prototype.toggleDropdown.apply(self, [event]); + }; this.toggleArrows = function() { return Sequence.prototype.toggleArrows.apply(self); }; @@ -38,6 +43,12 @@ this.displayTabTooltip = function(event) { return Sequence.prototype.displayTabTooltip.apply(self, [event]); }; + this.renderDropdown = function() { + return Sequence.prototype.renderDropdown.apply(self); + } + this.handleClickOutsideDropdown = function(event) { + return Sequence.prototype.handleClickOutsideDropdown.apply(self, [event]); + } this.arrowKeys = { LEFT: 37, UP: 38, @@ -62,23 +73,87 @@ this.showCompletion = this.el.data('show-completion'); this.keydownHandler($(element).find('#sequence-list .tab')); this.base_page_title = ($('title').data('base-title') || '').trim(); + this.dropdownButtonTpl = _.template($('#dropdown-button-tpl').text())({}); + this.renderDropdown(); this.bind(); this.render(parseInt(this.el.data('position'), 10)); } + Sequence.prototype.renderDropdown = function() { + // Renders the dropdown when there isn't enough space for all units in the bar + // Hide the dropdown by default and only show if needed. + this.$('#sequence-list > #dropdown-container').hide(); + this.$(`#sequence-list > li.sequence-list-item`).show(); + // Calculate the number of tabs that can fit comfortably and if the + // number of units is greater we show the dropdown. + const tabListWidth = this.$('#sequence-list').width(); + const singleTabWidth = this.$('#sequence-list > li:first').width(); + const tabCount = this.$('#sequence-list > li.sequence-list-item').length; + const overFlowCount = Math.floor(tabListWidth / singleTabWidth); + // Reduce 1 to offsets index and another one to accommodate the button + const overFlowIdx = overFlowCount - 2; + const showDropdown = overFlowCount < tabCount; + if (!showDropdown) { + return; + } + // If the dropdown button doesn't exist add it, otherwise move the + // existing button to the correct place. + if (this.$('#sequence-list > #dropdown-container').length === 0) { + // xss-lint: disable=javascript-jquery-insertion + this.$('#sequence-list > li.sequence-list-item').eq(overFlowIdx).after(this.dropdownButtonTpl); + } else { + this.$('#sequence-list > li.sequence-list-item').eq(overFlowIdx) + // xss-lint: disable=javascript-jquery-insertion + .after(this.$('#sequence-list > #dropdown-container')); + } + // Show the dropdown UX and hide all the overflowing unit buttons. + this.$('#sequence-list > #dropdown-container').show(); + this.$(`#sequence-list > li.sequence-list-item:lt(${overFlowIdx + 1})`).show(); + this.$(`#sequence-list > li.sequence-list-item:gt(${overFlowIdx})`).hide(); + const dropdownList = this.$('#dropdown-sequence-list > ol'); + // The dropdown buttons are modified copies of the unit nav buttons. + dropdownList.empty(); + this.$(`#sequence-list > li.sequence-list-item:gt(${overFlowIdx})`).each((idx, el) => { + const cloneEl = $(el).clone(); + const navButton = cloneEl.find("button"); + const unitTitle = navButton.data('page-title'); + navButton.click(self.goto); + navButton.find(".sequence-tooltip").remove(); + navButton.find("span.icon").after( + HtmlUtils.joinHtml(HtmlUtils.HTML(''), unitTitle, HtmlUtils.HTML('')).toString() + ); + //xss-lint: disable=javascript-jquery-insert-into-target + cloneEl.show().appendTo(dropdownList); + }); + } + Sequence.prototype.$ = function(selector) { return $(selector, this.el); }; Sequence.prototype.bind = function() { this.$('#sequence-list .nav-item').click(this.goto); + $(document).click(this.handleClickOutsideDropdown); + this.$('#dropdown-sequence-list .dropdown-item').click(this.goto); + this.$('#dropdown-sequence-list-button').click(this.toggleDropdown); this.$('#sequence-list .nav-item').keypress(this.keyDownHandler); this.el.on('bookmark:add', this.addBookmarkIconToActiveNavItem); this.el.on('bookmark:remove', this.removeBookmarkIconFromActiveNavItem); this.$('#sequence-list .nav-item').on('focus mouseenter', this.displayTabTooltip); this.$('#sequence-list .nav-item').on('blur mouseleave', this.hideTabTooltip); + $(window).on('resize', _.debounce(this.renderDropdown.bind(this), 200)); }; + Sequence.prototype.handleClickOutsideDropdown = function(event) { + if(!this.$('#dropdown-container')?.[0]?.contains(event.target)) { + this.$('#dropdown-sequence-list').hide(); + } + } + + Sequence.prototype.toggleDropdown = function() { + $('#dropdown-sequence-list').toggle(); + } + Sequence.prototype.previousNav = function(focused, index) { var $navItemList, $sequenceList = $(focused).parent().parent(); @@ -289,6 +364,7 @@ Sequence.prototype.goto = function(event) { var alertTemplate, alertText, isBottomNav, newPosition, widgetPlacement; event.preventDefault(); + this.$('#dropdown-sequence-list').hide(); // Links from courseware ..., was .target_tab if ($(event.currentTarget).hasClass('seqnav')) { diff --git a/xmodule/static/css-builtin-blocks/SequenceBlockDisplay.css b/xmodule/static/css-builtin-blocks/SequenceBlockDisplay.css index 53671879f6ec..cbc5b19f7994 100644 --- a/xmodule/static/css-builtin-blocks/SequenceBlockDisplay.css +++ b/xmodule/static/css-builtin-blocks/SequenceBlockDisplay.css @@ -78,6 +78,13 @@ position: relative; height: 100%; flex-grow: 1; + max-width: calc(100% - 80px); +} + +@media (min-width: 768px) { + .xmodule_display.xmodule_SequenceBlock .sequence-nav .sequence-list-wrapper { + max-width: calc(100% - 160px); + } } @media (max-width: 575.98px) { @@ -91,7 +98,7 @@ display: flex; } -.xmodule_display.xmodule_SequenceBlock .sequence-nav ol li { +.xmodule_display.xmodule_SequenceBlock .sequence-nav ol li, .dropdown-toggle { box-sizing: border-box; min-width: 40px; flex-grow: 1; @@ -104,7 +111,11 @@ border-right-style: solid; } -.xmodule_display.xmodule_SequenceBlock .sequence-nav ol li button { +.xmodule_display.xmodule_SequenceBlock .sequence-nav ol li .dropdown-toggle { + height: 49px !important; +} + +.xmodule_display.xmodule_SequenceBlock .sequence-nav ol li button, .dropdown-toggle { width: 100%; height: 49px; position: relative; @@ -119,6 +130,22 @@ overflow: visible; } +.xmodule_display.xmodule_SequenceBlock .sequence-nav #dropdown-container ol li button { + display: flex; + align-items: center; + padding-left: 0.5rem; + padding-right: 0.5rem; +} + +.xmodule_display.xmodule_SequenceBlock .sequence-nav #dropdown-container ol li button .unit-title { + display: flex; + flex-grow: 1; + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + margin: 0 0.5rem; +} + .xmodule_display.xmodule_SequenceBlock .sequence-nav ol li button .icon { display: inline-block; line-height: 100%;