Allow setting custom unit icons

cms/djangoapps/contentstore/views/item.py

@@ -1191,6 +1191,7 @@ def create_xblock_info(xblock, data=None, metadata=None, include_ancestor_info=F
             'group_access': xblock.group_access,
             'user_partitions': user_partitions,
             'show_correctness': xblock.show_correctness,
+            'icon': xblock.icon,
         })
 
         if xblock.category == 'sequential':

cms/static/js/models/xblock_info.js

@@ -53,6 +53,10 @@ function(Backbone, _, str, ModuleUtils) {
              * True if the xblock is a parentable xblock.
              */
             has_children: null,
+            /**
+             * Meta icon of the unit.
+             */
+            icons: null,
             /**
              * True if the xblock has changes.
              * Note: this is not always provided as a performance optimization. It is only provided for

cms/static/js/spec/views/pages/course_outline_spec.js

@@ -270,7 +270,7 @@ describe('CourseOutlinePage', function() {
             'staff-lock-editor', 'unit-access-editor', 'content-visibility-editor',
             'settings-modal-tabs', 'timed-examination-preference-editor', 'access-editor',
             'show-correctness-editor', 'highlights-editor', 'highlights-enable-editor',
-            'course-highlights-enable'
+            'course-highlights-enable', 'icon-editor'
         ]);
         appendSetFixtures(mockOutlinePage);
         mockCourseJSON = createMockCourseJSON({}, [

cms/static/js/views/modals/course_outline_modals.js

@@ -17,7 +17,8 @@ define(['jquery', 'backbone', 'underscore', 'gettext', 'js/views/baseview',
         AbstractEditor, BaseDateEditor,
         ReleaseDateEditor, DueDateEditor, GradingEditor, PublishEditor, AbstractVisibilityEditor,
         StaffLockEditor, UnitAccessEditor, ContentVisibilityEditor, TimedExaminationPreferenceEditor,
-        AccessEditor, ShowCorrectnessEditor, HighlightsEditor, HighlightsEnableXBlockModal, HighlightsEnableEditor;
+        AccessEditor, ShowCorrectnessEditor, HighlightsEditor, HighlightsEnableXBlockModal, HighlightsEnableEditor,
+        IconEditor;
 
     CourseOutlineXBlockModal = BaseModal.extend({
         events: _.extend({}, BaseModal.prototype.events, {
@@ -1026,6 +1027,28 @@ define(['jquery', 'backbone', 'underscore', 'gettext', 'js/views/baseview',
         }
     });
 
+    IconEditor = BaseDateEditor.extend({
+        fieldName: 'icon',
+        templateName: 'icon-editor',
+
+        hasChanges: function() {
+            return this.model.get("icon") !== parseInt(this.$('#icon').val());
+        },
+
+        getValue: function () {
+            return (parseInt(this.$('#icon').val()));
+        },
+
+        getRequestData: function () {
+            return this.hasChanges() ? {
+                publish: 'republish',
+                metadata: {
+                    'icon': this.getValue()
+                }
+            } : {};
+        }
+    });
+
     return {
         getModal: function(type, xblockInfo, options) {
             if (type === 'edit') {
@@ -1050,7 +1073,7 @@ define(['jquery', 'backbone', 'underscore', 'gettext', 'js/views/baseview',
                 editors: []
             };
             if (xblockInfo.isVertical()) {
-                editors = [StaffLockEditor, UnitAccessEditor];
+                editors = [StaffLockEditor, UnitAccessEditor, IconEditor];
             } else {
                 tabs = [
                     {

cms/templates/course_outline.html

@@ -26,7 +26,7 @@
 
 <%block name="header_extras">
 <link rel="stylesheet" type="text/css" href="${static.url('js/vendor/timepicker/jquery.timepicker.css')}" />
-% for template_name in ['course-outline', 'xblock-string-field-editor', 'basic-modal', 'modal-button', 'course-outline-modal', 'due-date-editor', 'release-date-editor', 'grading-editor', 'publish-editor', 'staff-lock-editor', 'unit-access-editor', 'content-visibility-editor', 'verification-access-editor', 'timed-examination-preference-editor', 'access-editor', 'settings-modal-tabs', 'show-correctness-editor', 'highlights-editor', 'highlights-enable-editor', 'course-highlights-enable']:
+% for template_name in ['course-outline', 'xblock-string-field-editor', 'basic-modal', 'modal-button', 'course-outline-modal', 'due-date-editor', 'release-date-editor', 'grading-editor', 'publish-editor', 'staff-lock-editor', 'unit-access-editor', 'content-visibility-editor', 'verification-access-editor', 'timed-examination-preference-editor', 'access-editor', 'settings-modal-tabs', 'show-correctness-editor', 'highlights-editor', 'highlights-enable-editor', 'course-highlights-enable', 'icon-editor']:
 <script type="text/template" id="${template_name}-tpl">
     <%static:include path="js/${template_name}.underscore" />
 </script>
@@ -164,7 +164,7 @@ <h3 class="sr">${_("Page Actions")}</h3>
                     <div style="width: 50%" class="status-studio-frontend">
                 % endif
                     <%static:studiofrontend entry="courseOutlineHealthCheck">
-                        <% 
+                        <%
                             course_key = context_course.id
                         %>
                         {
@@ -188,7 +188,7 @@ <h3 class="sr">${_("Page Actions")}</h3>
                                 "settings": ${reverse('settings_handler', kwargs={'course_key_string': unicode(course_key)})| n, dump_js_escaped_json}
                             }
                         }
-                    </%static:studiofrontend> 
+                    </%static:studiofrontend>
                 </div>
                 <div class="status-highlights-enabled"></div>
             </div>

cms/templates/js/icon-editor.underscore

@@ -0,0 +1,8 @@
+<h3 class="modal-section-title">Select icon</h3>
+<select id="icon">
+  <option value="0" <% if (xblockInfo.get("icon") === 0) { %> selected <% } %> ><%- gettext('Default') %></option>
+  <option value="1" <% if (xblockInfo.get("icon") === 1) { %> selected <% } %> ><%- gettext('Other') %></option>
+  <option value="2" <% if (xblockInfo.get("icon") === 2) { %> selected <% } %> ><%- gettext('Problem') %></option>
+  <option value="3" <% if (xblockInfo.get("icon") === 3) { %> selected <% } %> ><%- gettext('Vertical') %></option>
+  <option value="4" <% if (xblockInfo.get("icon") === 4) { %> selected <% } %> ><%- gettext('Video') %></option>
+</select>

common/lib/xmodule/xmodule/modulestore/inheritance.py

@@ -51,6 +51,12 @@ class InheritanceMixin(XBlockMixin):
         default=False,
         scope=Scope.settings,
     )
+    icon = Integer(
+        display_name=_("Icon"),
+        default=0,
+        help=_("XBlock Icon ID"),
+        scope=Scope.settings,
+    )
     course_edit_method = String(
         display_name=_("Course Editor"),
         help=_("Enter the method by which this course is edited (\"XML\" or \"Studio\")."),

common/lib/xmodule/xmodule/seq_module.py

@@ -492,7 +492,8 @@ def _render_student_view_for_items(self, context, display_items, fragment, view=
                 'id': text_type(usage_id),
                 'bookmarked': is_bookmarked,
                 'path': " > ".join(display_names + [item.display_name_with_default]),
-                'graded': item.graded
+                'graded': item.graded,
+                'icon': item.icon,
             }
 
             if is_user_authenticated:

lms/templates/seq_module.html

@@ -38,8 +38,30 @@
         </li>
         % else:
         % for idx, item in enumerate(items):
+
+        <%
+            icon = item.get('icon', 0)
+            iconClass = 'null'
+        %>
+
+        % if icon == 0:
+          <% iconClass = item['type'] %>
+        % endif
+        % if icon == 1:
+          <% iconClass = 'other' %>
+        % endif
+        % if icon == 2:
+          <% iconClass = 'problem' %>
+        % endif
+        % if icon == 3:
+          <% iconClass = 'vertical' %>
+        % endif
+        % if icon == 4:
+          <% iconClass = 'video' %>
+        % endif
+
         <li role="presentation">
-          <button class="seq_${item['type']} inactive nav-item tab"
+          <button class="seq_${iconClass} inactive nav-item tab"
             role="tab"
             tabindex="-1"
             aria-selected="false"
@@ -52,10 +74,10 @@
             data-path="${item['path']}"
             data-graded="${item['graded']}"
             id="tab_${idx}">
-            <span class="icon fa seq_${item['type']}" aria-hidden="true"></span>
+            <span class="icon fa seq_${iconClass}" aria-hidden="true"></span>
             % if 'complete' in item:
-              <span 
-                class="fa fa-check-circle check-circle ${"is-hidden" if not item['complete'] else ""}" 
+              <span
+                class="fa fa-check-circle check-circle ${"is-hidden" if not item['complete'] else ""}"
                 style="color:green"
                 aria-hidden="true"
               ></span>