diff --git a/cms/djangoapps/contentstore/utils.py b/cms/djangoapps/contentstore/utils.py
index a4c69e55b7ea..190b7dca3473 100644
--- a/cms/djangoapps/contentstore/utils.py
+++ b/cms/djangoapps/contentstore/utils.py
@@ -1,7 +1,7 @@
"""
Common utility functions useful throughout the contentstore
"""
-
+from __future__ import annotations
import logging
from contextlib import contextmanager
from datetime import datetime
@@ -395,7 +395,7 @@ def get_taxonomy_list_url():
return taxonomy_list_url
-def get_taxonomy_tags_widget_url(course_locator) -> str:
+def get_taxonomy_tags_widget_url(course_locator=None) -> str | None:
"""
Gets course authoring microfrontend URL for taxonomy tags drawer widget view.
@@ -404,7 +404,9 @@ def get_taxonomy_tags_widget_url(course_locator) -> str:
taxonomy_tags_widget_url = None
# Uses the same waffle flag as taxonomy list page
if use_tagging_taxonomy_list_page():
- mfe_base_url = get_course_authoring_url(course_locator)
+ mfe_base_url = settings.COURSE_AUTHORING_MICROFRONTEND_URL
+ if course_locator:
+ mfe_base_url = get_course_authoring_url(course_locator)
if mfe_base_url:
taxonomy_tags_widget_url = f'{mfe_base_url}/tagging/components/widget/'
return taxonomy_tags_widget_url
diff --git a/cms/djangoapps/contentstore/views/block.py b/cms/djangoapps/contentstore/views/block.py
index ecaa6928c0b9..f27b3f955046 100644
--- a/cms/djangoapps/contentstore/views/block.py
+++ b/cms/djangoapps/contentstore/views/block.py
@@ -68,7 +68,8 @@
get_visibility_partition_info,
has_children_visible_to_specific_partition_groups,
is_currently_visible_to_students,
- is_self_paced
+ is_self_paced,
+ get_taxonomy_tags_widget_url,
)
from .helpers import (
create_xblock,
@@ -1141,7 +1142,7 @@ def _get_gating_info(course, xblock):
@pluggable_override('OVERRIDE_CREATE_XBLOCK_INFO')
def create_xblock_info(xblock, data=None, metadata=None, include_ancestor_info=False, include_child_info=False, # lint-amnesty, pylint: disable=too-many-statements
course_outline=False, include_children_predicate=NEVER, parent_xblock=None, graders=None,
- user=None, course=None, is_concise=False):
+ user=None, course=None, is_concise=False, tags=None):
"""
Creates the information needed for client-side XBlockInfo.
@@ -1362,6 +1363,10 @@ def create_xblock_info(xblock, data=None, metadata=None, include_ancestor_info=F
xblock_info['ancestor_has_staff_lock'] = ancestor_has_staff_lock(xblock, parent_xblock)
else:
xblock_info['ancestor_has_staff_lock'] = False
+ if tags is not None:
+ xblock_info["tags"] = tags
+ if use_tagging_taxonomy_list_page():
+ xblock_info["taxonomy_tags_widget_url"] = get_taxonomy_tags_widget_url()
if course_outline:
if xblock_info['has_explicit_staff_lock']:
diff --git a/cms/djangoapps/contentstore/views/component.py b/cms/djangoapps/contentstore/views/component.py
index b7dd09d5c7cb..6be62ed2b1f4 100644
--- a/cms/djangoapps/contentstore/views/component.py
+++ b/cms/djangoapps/contentstore/views/component.py
@@ -24,9 +24,13 @@
from common.djangoapps.student.auth import has_course_author_access
from common.djangoapps.xblock_django.api import authorable_xblocks, disabled_xblocks
from common.djangoapps.xblock_django.models import XBlockStudioConfigurationFlag
-from cms.djangoapps.contentstore.toggles import use_new_problem_editor
+from cms.djangoapps.contentstore.toggles import (
+ use_new_problem_editor,
+ use_tagging_taxonomy_list_page,
+)
from openedx.core.lib.xblock_utils import get_aside_from_xblock, is_xblock_aside
from openedx.core.djangoapps.discussions.models import DiscussionsConfiguration
+from openedx.core.djangoapps.content_tagging.api import get_object_tags
from xmodule.modulestore.django import modulestore # lint-amnesty, pylint: disable=wrong-import-order
from xmodule.modulestore.exceptions import ItemNotFoundError # lint-amnesty, pylint: disable=wrong-import-order
@@ -55,7 +59,7 @@
"editor-mode-button", "upload-dialog",
"add-xblock-component", "add-xblock-component-button", "add-xblock-component-menu",
"add-xblock-component-support-legend", "add-xblock-component-support-level", "add-xblock-component-menu-problem",
- "xblock-string-field-editor", "xblock-access-editor", "publish-xblock", "publish-history",
+ "xblock-string-field-editor", "xblock-access-editor", "publish-xblock", "publish-history", "tag-list",
"unit-outline", "container-message", "container-access", "license-selector", "copy-clipboard-button",
"edit-title-button",
]
@@ -103,7 +107,7 @@ def _load_mixed_class(category):
@require_GET
@login_required
-def container_handler(request, usage_key_string):
+def container_handler(request, usage_key_string): # pylint: disable=too-many-statements
"""
The restful handler for container xblock requests.
@@ -170,9 +174,14 @@ def container_handler(request, usage_key_string):
prev_url = quote_plus(prev_url) if prev_url else None
next_url = quote_plus(next_url) if next_url else None
+ show_unit_tags = use_tagging_taxonomy_list_page()
+ unit_tags = None
+ if show_unit_tags and is_unit_page:
+ unit_tags = get_unit_tags(usage_key)
+
# Fetch the XBlock info for use by the container page. Note that it includes information
# about the block's ancestors and siblings for use by the Unit Outline.
- xblock_info = create_xblock_info(xblock, include_ancestor_info=is_unit_page)
+ xblock_info = create_xblock_info(xblock, include_ancestor_info=is_unit_page, tags=unit_tags)
if is_unit_page:
add_container_page_publishing_info(xblock, xblock_info)
@@ -205,7 +214,8 @@ def container_handler(request, usage_key_string):
'xblock_info': xblock_info,
'draft_preview_link': preview_lms_link,
'published_preview_link': lms_link,
- 'templates': CONTAINER_TEMPLATES
+ 'templates': CONTAINER_TEMPLATES,
+ 'show_unit_tags': show_unit_tags,
})
else:
return HttpResponseBadRequest("Only supports HTML requests")
@@ -583,3 +593,84 @@ def component_handler(request, usage_key_string, handler, suffix=''):
)
return webob_to_django_response(resp)
+
+
+def get_unit_tags(usage_key):
+ """
+ Get the tags of a Unit and build a json to be read by the UI
+
+ Note: When migrating the `TagList` subview from `container_subview.js` to the course-authoring MFE,
+ this function can be simplified to use the REST API of openedx-learning,
+ which already provides this grouping + sorting logic.
+ """
+ # Get content tags from content tagging API
+ content_tags = get_object_tags(usage_key)
+
+ # Group content tags by taxonomy
+ taxonomy_dict = {}
+ for content_tag in content_tags:
+ taxonomy_id = content_tag.taxonomy_id
+ # When a taxonomy is deleted, the id here is None.
+ # In that case the tag is not shown in the UI.
+ if taxonomy_id:
+ if taxonomy_id not in taxonomy_dict:
+ taxonomy_dict[taxonomy_id] = []
+ taxonomy_dict[taxonomy_id].append(content_tag)
+
+ taxonomy_list = []
+ total_count = 0
+
+ def handle_tag(tags, root_ids, tag, child_tag_id=None):
+ """
+ Group each tag by parent to build a tree.
+ """
+ tag_processed_before = tag.id in tags
+ if not tag_processed_before:
+ tags[tag.id] = {
+ 'id': tag.id,
+ 'value': tag.value,
+ 'children': [],
+ }
+ if child_tag_id:
+ # Add a child into the children list
+ tags[tag.id].get('children').append(tags[child_tag_id])
+ if tag.parent_id is None:
+ if tag.id not in root_ids:
+ root_ids.append(tag.id)
+ elif not tag_processed_before:
+ # Group all the lineage of this tag.
+ #
+ # Skip this if the tag has been processed before,
+ # we don't need to process lineage again to avoid duplicates.
+ handle_tag(tags, root_ids, tag.parent, tag.id)
+
+ # Build a tag tree for each taxonomy
+ for content_tag_list in taxonomy_dict.values():
+ tags = {}
+ root_ids = []
+
+ for content_tag in content_tag_list:
+ # When a tag is deleted from the taxonomy, the `tag` here is None.
+ # In that case the tag is not shown in the UI.
+ if content_tag.tag:
+ handle_tag(tags, root_ids, content_tag.tag)
+
+ taxonomy = content_tag_list[0].taxonomy
+
+ if tags:
+ count = len(tags)
+ # Add the tree to the taxonomy list
+ taxonomy_list.append({
+ 'id': taxonomy.id,
+ 'value': taxonomy.name,
+ 'tags': [tags[tag_id] for tag_id in root_ids],
+ 'count': count,
+ })
+ total_count += count
+
+ unit_tags = {
+ 'count': total_count,
+ 'taxonomies': taxonomy_list,
+ }
+
+ return unit_tags
diff --git a/cms/static/js/models/xblock_info.js b/cms/static/js/models/xblock_info.js
index 983edc4e5648..d2227218fad3 100644
--- a/cms/static/js/models/xblock_info.js
+++ b/cms/static/js/models/xblock_info.js
@@ -167,7 +167,11 @@ define(
highlights_enabled: false,
highlights_enabled_for_messaging: false,
highlights_preview_only: true,
- highlights_doc_url: ''
+ highlights_doc_url: '',
+ /**
+ * List of tags of the unit. This list is managed by the content_tagging module.
+ */
+ tags: null,
},
initialize: function() {
diff --git a/cms/static/js/views/course_outline.js b/cms/static/js/views/course_outline.js
index ed30c1b34ddc..61ce21423aa1 100644
--- a/cms/static/js/views/course_outline.js
+++ b/cms/static/js/views/course_outline.js
@@ -9,10 +9,11 @@
* - adding units will automatically redirect to the unit page rather than showing them inline
*/
define(['jquery', 'underscore', 'js/views/xblock_outline', 'common/js/components/utils/view_utils', 'js/views/utils/xblock_utils',
- 'js/models/xblock_outline_info', 'js/views/modals/course_outline_modals', 'js/utils/drag_and_drop'],
+ 'js/models/xblock_outline_info', 'js/views/modals/course_outline_modals', 'js/utils/drag_and_drop',
+ 'js/views/utils/tagging_drawer_utils',],
function(
$, _, XBlockOutlineView, ViewUtils, XBlockViewUtils,
- XBlockOutlineInfo, CourseOutlineModalsFactory, ContentDragger
+ XBlockOutlineInfo, CourseOutlineModalsFactory, ContentDragger, TaggingDrawerUtils
) {
var CourseOutlineView = XBlockOutlineView.extend({
// takes XBlockOutlineInfo as a model
@@ -215,41 +216,12 @@ function(
}
},
- closeManageTagsDrawer(drawer, drawerCover) {
- $(drawerCover).css('display', 'none');
- $(drawer).empty();
- $(drawer).css('display', 'none');
- $('body').removeClass('drawer-open');
- },
-
- openManageTagsDrawer(event) {
- const drawer = document.querySelector("#manage-tags-drawer");
- const drawerCover = document.querySelector(".drawer-cover")
+ openManageTagsDrawer() {
const article = document.querySelector('[data-taxonomy-tags-widget-url]');
const taxonomyTagsWidgetUrl = $(article).attr('data-taxonomy-tags-widget-url');
const contentId = this.model.get('id');
- // Add handler to close drawer when dark background is clicked
- $(drawerCover).click(function() {
- this.closeManageTagsDrawer(drawer, drawerCover);
- }.bind(this));
-
- // Add event listen to close drawer when close button is clicked from within the Iframe
- window.addEventListener("message", function (event) {
- if (event.data === 'closeManageTagsDrawer') {
- this.closeManageTagsDrawer(drawer, drawerCover)
- }
- }.bind(this));
-
- $(drawerCover).css('display', 'block');
- // xss-lint: disable=javascript-jquery-html
- $(drawer).html(
- ``
- );
- $(drawer).css('display', 'block');
-
- // Prevent background from being scrollable when drawer is open
- $('body').addClass('drawer-open');
+ TaggingDrawerUtils.openDrawer(taxonomyTagsWidgetUrl, contentId);
},
addButtonActions: function(element) {
diff --git a/cms/static/js/views/pages/container.js b/cms/static/js/views/pages/container.js
index 4ce217ff0d35..5a69482c34c8 100644
--- a/cms/static/js/views/pages/container.js
+++ b/cms/static/js/views/pages/container.js
@@ -6,10 +6,11 @@ define(['jquery', 'underscore', 'backbone', 'gettext', 'js/views/pages/base_page
'common/js/components/utils/view_utils', 'js/views/container', 'js/views/xblock',
'js/views/components/add_xblock', 'js/views/modals/edit_xblock', 'js/views/modals/move_xblock_modal',
'js/models/xblock_info', 'js/views/xblock_string_field_editor', 'js/views/xblock_access_editor',
- 'js/views/pages/container_subviews', 'js/views/unit_outline', 'js/views/utils/xblock_utils'],
+ 'js/views/pages/container_subviews', 'js/views/unit_outline', 'js/views/utils/xblock_utils',
+ 'js/views/utils/tagging_drawer_utils'],
function($, _, Backbone, gettext, BasePage, ViewUtils, ContainerView, XBlockView, AddXBlockComponent,
EditXBlockModal, MoveXBlockModal, XBlockInfo, XBlockStringFieldEditor, XBlockAccessEditor,
- ContainerSubviews, UnitOutlineView, XBlockUtils) {
+ ContainerSubviews, UnitOutlineView, XBlockUtils, TaggingDrawerUtils) {
'use strict';
var XBlockContainerPage = BasePage.extend({
// takes XBlockInfo as a model
@@ -22,7 +23,8 @@ function($, _, Backbone, gettext, BasePage, ViewUtils, ContainerView, XBlockView
'click .move-button': 'showMoveXBlockModal',
'click .delete-button': 'deleteXBlock',
'click .show-actions-menu-button': 'showXBlockActionsMenu',
- 'click .new-component-button': 'scrollToNewComponentButtons'
+ 'click .new-component-button': 'scrollToNewComponentButtons',
+ 'click .tags-button': 'openManageTags',
},
options: {
@@ -92,6 +94,12 @@ function($, _, Backbone, gettext, BasePage, ViewUtils, ContainerView, XBlockView
});
this.viewLiveActions.render();
+ this.tagListView = new ContainerSubviews.TagList({
+ el: this.$('.unit-tags'),
+ model: this.model
+ });
+ this.tagListView.render();
+
this.unitOutlineView = new UnitOutlineView({
el: this.$('.wrapper-unit-overview'),
model: this.model
@@ -119,6 +127,7 @@ function($, _, Backbone, gettext, BasePage, ViewUtils, ContainerView, XBlockView
xblockView = this.xblockView,
loadingElement = this.$('.ui-loading'),
unitLocationTree = this.$('.unit-location'),
+ unitTags = this.$('.unit-tags'),
hiddenCss = 'is-hidden';
loadingElement.removeClass(hiddenCss);
@@ -144,6 +153,7 @@ function($, _, Backbone, gettext, BasePage, ViewUtils, ContainerView, XBlockView
// Refresh the views now that the xblock is visible
self.onXBlockRefresh(xblockView);
unitLocationTree.removeClass(hiddenCss);
+ unitTags.removeClass(hiddenCss);
// Re-enable Backbone events for any updated DOM elements
self.delegateEvents();
@@ -247,6 +257,13 @@ function($, _, Backbone, gettext, BasePage, ViewUtils, ContainerView, XBlockView
this.duplicateComponent(this.findXBlockElement(event.target));
},
+ openManageTags: function(event) {
+ const taxonomyTagsWidgetUrl = this.model.get('taxonomy_tags_widget_url');
+ const contentId = this.findXBlockElement(event.target).data('locator');
+
+ TaggingDrawerUtils.openDrawer(taxonomyTagsWidgetUrl, contentId);
+ },
+
showMoveXBlockModal: function(event) {
var xblockElement = this.findXBlockElement(event.target),
parentXBlockElement = xblockElement.parents('.studio-xblock-wrapper'),
diff --git a/cms/static/js/views/pages/container_subviews.js b/cms/static/js/views/pages/container_subviews.js
index cdcbca619f02..74a012732a76 100644
--- a/cms/static/js/views/pages/container_subviews.js
+++ b/cms/static/js/views/pages/container_subviews.js
@@ -2,8 +2,9 @@
* Subviews (usually small side panels) for XBlockContainerPage.
*/
define(['jquery', 'underscore', 'gettext', 'js/views/baseview', 'common/js/components/utils/view_utils',
- 'js/views/utils/xblock_utils', 'js/views/utils/move_xblock_utils', 'edx-ui-toolkit/js/utils/html-utils'],
-function($, _, gettext, BaseView, ViewUtils, XBlockViewUtils, MoveXBlockUtils, HtmlUtils) {
+ 'js/views/utils/xblock_utils', 'js/views/utils/move_xblock_utils', 'edx-ui-toolkit/js/utils/html-utils',
+ 'js/views/utils/tagging_drawer_utils'],
+function($, _, gettext, BaseView, ViewUtils, XBlockViewUtils, MoveXBlockUtils, HtmlUtils, TaggingDrawerUtils) {
'use strict';
var disabledCss = 'is-disabled';
@@ -294,11 +295,175 @@ function($, _, gettext, BaseView, ViewUtils, XBlockViewUtils, MoveXBlockUtils, H
}
});
+ /**
+ * TagList displays the tags of a unit.
+ */
+ var TagList = BaseView.extend({
+ // takes XBlockInfo as a model
+
+ events: {
+ 'click .wrapper-tag-header': 'expandTagContainer',
+ 'click .tagging-label': 'expandContentTag',
+ 'click .manage-tag-button': 'openManageTagDrawer',
+ 'keydown .wrapper-tag-header': 'handleKeyDownOnHeader',
+ 'keydown .tagging-label': 'handleKeyDownOnContentTag',
+ 'keydown .manage-tag-button': 'handleKeyDownOnTagDrawer',
+ },
+
+ initialize: function() {
+ BaseView.prototype.initialize.call(this);
+ this.template = this.loadTemplate('tag-list');
+ this.model.on('sync', this.onSync, this);
+ },
+
+ onSync: function(model) {
+ if (ViewUtils.hasChangedAttributes(model, ['tags'])) {
+ this.render();
+ }
+ },
+
+ handleKeyDownOnHeader: function(event) {
+ if (event.key === 'Enter' || event.key === ' ') {
+ event.preventDefault();
+ this.expandTagContainer();
+ }
+ },
+
+ handleKeyDownOnContentTag: function(event) {
+ if (event.key === 'Enter' || event.key === ' ') {
+ event.preventDefault();
+ this.expandContentTag(event);
+ }
+ },
+
+ handleKeyDownOnTagDrawer: function(event) {
+ if (event.key === 'Enter' || event.key === ' ') {
+ event.preventDefault();
+ this.openManageTagDrawer();
+ }
+ },
+
+ expandTagContainer: function() {
+ var $content = this.$('.wrapper-tags .wrapper-tag-content'),
+ $header = this.$('.wrapper-tags .wrapper-tag-header'),
+ $icon = this.$('.wrapper-tags .wrapper-tag-header .icon');
+
+ if ($content.hasClass('is-hidden')) {
+ $content.removeClass('is-hidden');
+ $icon.addClass('fa-caret-up');
+ $icon.removeClass('fa-caret-down');
+ $header.attr('aria-expanded', 'true');
+ } else {
+ $content.addClass('is-hidden');
+ $icon.removeClass('fa-caret-up');
+ $icon.addClass('fa-caret-down');
+ $header.attr('aria-expanded', 'false');
+ }
+ },
+
+ expandContentTag: function(event) {
+ var contentId = event.target.id,
+ $content = this.$(`.wrapper-tags .content-tags-${contentId}`),
+ $header = this.$(`.wrapper-tags .tagging-label-${contentId}`),
+ $icon = this.$(`.wrapper-tags .tagging-label-${contentId} .icon`);
+
+ if ($content.hasClass('is-hidden')) {
+ $content.removeClass('is-hidden');
+ $icon.addClass('fa-caret-up');
+ $icon.removeClass('fa-caret-down');
+ $header.attr('aria-expanded', 'true');
+ } else {
+ $content.addClass('is-hidden');
+ $icon.removeClass('fa-caret-up');
+ $icon.addClass('fa-caret-down');
+ $header.attr('aria-expanded', 'false');
+ }
+ },
+
+ renderTagElements: function(tags, depth, parentId) {
+ const tagListElement = this;
+ tags.forEach(function(tag) {
+ const parentElement = document.querySelector(`.content-tags-${parentId}`);
+ var tagContentElement = document.createElement('div'),
+ tagValueElement = document.createElement('span');
+
+ // Element that contains the tag value and the arrow icon
+ tagContentElement.style.marginLeft = `${depth}em`;
+ tagContentElement.className = `tagging-label tagging-label-tag-${tag.id}`;
+ tagContentElement.id = `tag-${tag.id}`;
+
+ // Element that contains the tag value
+ tagValueElement.textContent = tag.value;
+ tagValueElement.id = `tag-${tag.id}`;
+ tagValueElement.className = 'tagging-label-value';
+
+ tagContentElement.appendChild(tagValueElement);
+ parentElement.appendChild(tagContentElement);
+
+ if (tag.children.length > 0) {
+ var tagIconElement = document.createElement('span'),
+ tagChildrenElement = document.createElement('div');
+
+ // Arrow icon
+ tagIconElement.className = 'icon fa fa-caret-down';
+ tagIconElement.ariaHidden = 'true';
+ tagIconElement.id = `tag-${tag.id}`;
+
+ // Element that contains the children of this tag
+ tagChildrenElement.className = `content-tags-tag-${tag.id} is-hidden`;
+
+ tagContentElement.tabIndex = 0;
+ tagContentElement.role = "button";
+ tagContentElement.ariaExpanded = "false";
+ tagContentElement.setAttribute('aria-controls', `content-tags-tag-${tag.id}`);
+ tagContentElement.appendChild(tagIconElement);
+ parentElement.appendChild(tagChildrenElement);
+
+ // Render children
+ tagListElement.renderTagElements(tag.children, depth + 1, `tag-${tag.id}`);
+ }
+ });
+ },
+
+ renderTags: function() {
+ if (this.model.get('tags') !== null) {
+ const taxonomies = this.model.get('tags').taxonomies;
+ const tagListElement = this;
+ taxonomies.forEach(function(taxonomy) {
+ tagListElement.renderTagElements(taxonomy.tags, 1, `tax-${taxonomy.id}`);
+ });
+ }
+ },
+
+ openManageTagDrawer: function() {
+ const taxonomyTagsWidgetUrl = this.model.get('taxonomy_tags_widget_url');
+ const contentId = this.model.get('id');
+
+ TaggingDrawerUtils.openDrawer(taxonomyTagsWidgetUrl, contentId);
+ },
+
+ render: function() {
+ HtmlUtils.setHtml(
+ this.$el,
+ HtmlUtils.HTML(
+ this.template({
+ tags: this.model.get('tags'),
+ })
+ )
+ );
+
+ this.renderTags();
+
+ return this;
+ }
+ });
+
return {
MessageView: MessageView,
ViewLiveButtonController: ViewLiveButtonController,
Publisher: Publisher,
PublishHistory: PublishHistory,
- ContainerAccess: ContainerAccess
+ ContainerAccess: ContainerAccess,
+ TagList: TagList
};
}); // end define();
diff --git a/cms/static/js/views/utils/tagging_drawer_utils.js b/cms/static/js/views/utils/tagging_drawer_utils.js
new file mode 100644
index 000000000000..227c19e9cd2a
--- /dev/null
+++ b/cms/static/js/views/utils/tagging_drawer_utils.js
@@ -0,0 +1,55 @@
+/**
+ * Provides utilities to open and close the tagging drawer to manage tags.
+ *
+ * To use this drawer you need to add the following code into your template:
+ *
+ * ```
+ *
+ *
+ * ```
+ */
+define(['jquery'],
+function($) {
+ 'use strict';
+
+ var closeDrawer, openDrawer;
+
+ closeDrawer = function(drawer, drawerCover) {
+ $(drawerCover).css('display', 'none');
+ $(drawer).empty();
+ $(drawer).css('display', 'none');
+ $('body').removeClass('drawer-open');
+ };
+
+ openDrawer = function(taxonomyTagsWidgetUrl, contentId) {
+ const drawer = document.querySelector("#manage-tags-drawer");
+ const drawerCover = document.querySelector(".drawer-cover");
+
+ // Add handler to close drawer when dark background is clicked
+ $(drawerCover).click(function() {
+ closeDrawer(drawer, drawerCover);
+ }.bind(this));
+
+ // Add event listen to close drawer when close button is clicked from within the Iframe
+ window.addEventListener("message", function (event) {
+ if (event.data === 'closeManageTagsDrawer') {
+ closeDrawer(drawer, drawerCover)
+ }
+ }.bind(this));
+
+ $(drawerCover).css('display', 'block');
+ // xss-lint: disable=javascript-jquery-html
+ $(drawer).html(
+ ``
+ );
+ $(drawer).css('display', 'block');
+
+ // Prevent background from being scrollable when drawer is open
+ $('body').addClass('drawer-open');
+ };
+
+ return {
+ openDrawer: openDrawer,
+ closeDrawer: closeDrawer
+ };
+});
diff --git a/cms/static/sass/elements/_controls.scss b/cms/static/sass/elements/_controls.scss
index 8420961ab4ab..3a9c3af3db89 100644
--- a/cms/static/sass/elements/_controls.scss
+++ b/cms/static/sass/elements/_controls.scss
@@ -119,6 +119,34 @@
}
}
+// inverse primary button
+%btn-primary-inverse {
+ @extend %ui-btn-primary;
+
+ background: theme-color("inverse");
+ border-color: theme-color("primary");
+ color: theme-color("primary");
+
+ &:hover,
+ &:active {
+ background: theme-color("primary");
+ border-color: $uxpl-blue-hover-active;
+ color: theme-color("inverse");
+ }
+
+ &.current,
+ &.active {
+ background: theme-color("primary");
+ border-color: $uxpl-blue-hover-active;
+ color: theme-color("inverse");
+
+ &:hover,
+ &:active {
+ background: theme-color("primary");
+ }
+ }
+}
+
// +Secondary Button - Extends
// ====================
// gray secondary button
diff --git a/cms/static/sass/partials/cms/theme/_variables-v1.scss b/cms/static/sass/partials/cms/theme/_variables-v1.scss
index 96777b34f27a..9dd001d455cc 100644
--- a/cms/static/sass/partials/cms/theme/_variables-v1.scss
+++ b/cms/static/sass/partials/cms/theme/_variables-v1.scss
@@ -28,7 +28,7 @@ $fg-column: $gw-column;
$fg-gutter: $gw-gutter;
$fg-max-columns: 12;
$fg-max-width: 1280px;
-$fg-min-width: 900px;
+$fg-min-width: 995px;
// +Fonts
// ====================
diff --git a/cms/static/sass/views/_container.scss b/cms/static/sass/views/_container.scss
index cf8824ca5110..2b55b00cb6f4 100644
--- a/cms/static/sass/views/_container.scss
+++ b/cms/static/sass/views/_container.scss
@@ -242,6 +242,77 @@
}
}
+ .unit-tags {
+ .wrapper-tags {
+ margin-bottom: $baseline;
+ padding: ($baseline*0.75);
+ background-color: $white;
+
+ .wrapper-tag-header {
+ display: flex;
+ justify-content: space-between;
+
+ .tag-title {
+ font-weight: bold;
+ }
+
+ .count-badge {
+ background-color: $gray-l5;
+ border-radius: 50%;
+ display: inline-block;
+ padding: 0px 8px;
+ }
+ }
+
+ .wrapper-tag-header:focus {
+ border: 1px dotted gray;
+ }
+
+ .action-primary {
+ @extend %btn-primary-inverse;
+
+ width: 100%;
+ margin: 16px 2px 8px 2px;
+ }
+
+ .wrapper-tag-content {
+ background-color: $white;
+
+ .content-taxonomies {
+ display: flex;
+ flex-direction: column;
+ padding-top: 10px;
+
+ .tagging-label {
+ display: flex;
+ padding: 4px 0px;
+
+ .tagging-label-value {
+ display: inline-block;
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ }
+
+ .tagging-label-count {
+ display: inline-block;
+ margin: 0 0.5em;
+ }
+ }
+
+ .tagging-label:hover,
+ .tagging-label:focus {
+ color: $blue;
+ }
+
+ .icon {
+ margin-left: 5px;
+ }
+ }
+ }
+ }
+ }
+
// versioning widget
.unit-publish-history {
.wrapper-last-publish {
diff --git a/cms/templates/container.html b/cms/templates/container.html
index ffafa8d96e26..e5a99b11a0c1 100644
--- a/cms/templates/container.html
+++ b/cms/templates/container.html
@@ -206,7 +206,10 @@
${_("Location ID")}
Tip: ${Text(_('To create a link to this unit from an HTML component in this course, enter "/jump_to_id/" as the URL value.'))}
-
+
+ % if show_unit_tags:
+
+ % endif
% endif
@@ -231,4 +234,7 @@
${_("Location ID")}
+
+
+
diff --git a/cms/templates/js/tag-list.underscore b/cms/templates/js/tag-list.underscore
new file mode 100644
index 000000000000..a006eb111b5b
--- /dev/null
+++ b/cms/templates/js/tag-list.underscore
@@ -0,0 +1,32 @@
+<% if (tags !== null) { %>
+