Skip to content

Commit

Permalink
style: UX Refinements on tagging components (#33884)
Browse files Browse the repository at this point in the history
  • Loading branch information
@ChrisChV
ChrisChV authored Dec 13, 2023
1 parent 8ce5d83 commit 6763928
Show file tree
Hide file tree
Showing 7 changed files with 31 additions and 22 deletions.
2 changes: 1 addition & 1 deletion cms/djangoapps/contentstore/rest_api/v1/views/tests/test_home.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -100,5 +100,5 @@ def test_taxonomy_list_link(self):
self.assertTrue(response.data['taxonomies_enabled'])
self.assertEqual(
response.data['taxonomy_list_mfe_url'],
f'{settings.COURSE_AUTHORING_MICROFRONTEND_URL}/taxonomy-list'
f'{settings.COURSE_AUTHORING_MICROFRONTEND_URL}/taxonomies'
)
2 changes: 1 addition & 1 deletion cms/djangoapps/contentstore/utils.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -440,7 +440,7 @@ def get_taxonomy_list_url():
if use_tagging_taxonomy_list_page():
mfe_base_url = settings.COURSE_AUTHORING_MICROFRONTEND_URL
if mfe_base_url:
taxonomy_list_url = f'{mfe_base_url}/taxonomy-list'
taxonomy_list_url = f'{mfe_base_url}/taxonomies'
return taxonomy_list_url


Expand Down
1 change: 1 addition & 0 deletions cms/static/js/views/pages/container_subviews.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -465,6 +465,7 @@ function($, _, gettext, BaseView, ViewUtils, XBlockViewUtils, MoveXBlockUtils, H
tagContentElement.ariaExpanded = "false";
tagContentElement.setAttribute('aria-controls', `content-tags-tag-${tag.id}`);
tagContentElement.appendChild(tagIconElement);
tagContentElement.className += ' tagging-label-link';
parentElement.appendChild(tagChildrenElement);

// Render children
Expand Down
16 changes: 12 additions & 4 deletions cms/static/sass/views/_container.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -264,6 +264,7 @@
.wrapper-tag-header {
display: flex;
justify-content: space-between;
border: 1px dotted transparent;

.tag-title {
font-weight: bold;
Expand All @@ -277,8 +278,8 @@
}
}

.wrapper-tag-header:focus {
border: 1px dotted gray;
.wrapper-tag-header:focus-visible {
border-color: $gray;
}

.action-primary {
Expand Down Expand Up @@ -313,11 +314,18 @@
}
}

.tagging-label:hover,
.tagging-label:focus {
.tagging-label-link {
border: 1px dotted transparent;
}

.tagging-label-link:hover {
color: $blue;
}

.tagging-label-link:focus-visible {
border-color: $gray;
}

.icon {
margin-left: 5px;
}
Expand Down
6 changes: 3 additions & 3 deletions cms/templates/js/course-outline.underscore
View file
Original file line number Diff line number Diff line change
Expand Up @@ -201,14 +201,14 @@ if (is_proctored_exam) {
</li>
<% } %>
<% if (xblockInfo.isVertical()) { %>
<li class="nav-item">
<a class="copy-button" href="#" role="button"><%- gettext('Copy to Clipboard') %></a>
</li>
<% if (typeof useTaggingTaxonomyListPage !== "undefined" && useTaggingTaxonomyListPage) { %>
<li class="nav-item">
<a class="manage-tags-button" href="#" role="button"><%- gettext('Manage Tags') %></a>
</li>
<% } %>
<li class="nav-item">
<a class="copy-button" href="#" role="button"><%- gettext('Copy to Clipboard') %></a>
</li>
<% } %>
<% if (xblockInfo.isDuplicable()) { %>
<li class="nav-item">
Expand Down
2 changes: 1 addition & 1 deletion cms/templates/js/tag-list.underscore
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@
<% for (var i = 0; i < tags.taxonomies.length; i++) {
var taxonomy = tags.taxonomies[i];
%>
<div class="tagging-label tagging-label-tax-<%- taxonomy.id %>" id="tax-<%- taxonomy.id %>" tabindex=0 role="button" aria-controls="content-tags-tax-<%- taxonomy.id %>" aria-expanded=false>
<div class="tagging-label tagging-label-link tagging-label-tax-<%- taxonomy.id %>" id="tax-<%- taxonomy.id %>" tabindex=0 role="button" aria-controls="content-tags-tax-<%- taxonomy.id %>" aria-expanded=false>
<span class="tagging-label-value" id="tax-<%- taxonomy.id %>"><%- taxonomy.value %></span>
<span class="tagging-label-count" id="tax-<%- taxonomy.id %>">(<%- taxonomy.count %>)</span>
<span class="icon fa fa-caret-down" aria-hidden="true" id="tax-<%- taxonomy.id %>"></span>
Expand Down
24 changes: 12 additions & 12 deletions cms/templates/studio_xblock_wrapper.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -116,33 +116,33 @@
<div class="nav-sub">
<ul>
% if not show_inline:
% if is_course:
<!--
Only show the "Copy to Clipboard" button for xblocks inside courses since
the copy/paste functionality is not yet implemented for LibraryContent.
-->
% if can_edit_visibility:
<li class="nav-item">
<a class="copy-button" href="#" role="button">${_("Copy to Clipboard")}</a>
<a class="access-button" href="#" role="button">${_("Manage Access")}</a>
</li>
% endif
% if can_add:
% if can_move:
<li class="nav-item">
<a class="duplicate-button" href="#" role="button">${_("Duplicate")}</a>
<a class="move-button" href="#" role="button">${_("Move")}</a>
</li>
% endif
% if use_tagging:
<li class="nav-item">
<a class="tags-button" href="#" role="button">${_("Manage tags")}</a>
</li>
% endif
% if can_move:
% if is_course:
<!--
Only show the "Copy to Clipboard" button for xblocks inside courses since
the copy/paste functionality is not yet implemented for LibraryContent.
-->
<li class="nav-item">
<a class="move-button" href="#" role="button">${_("Move")}</a>
<a class="copy-button" href="#" role="button">${_("Copy to Clipboard")}</a>
</li>
% endif
% if can_edit_visibility:
% if can_add:
<li class="nav-item">
<a class="access-button" href="#" role="button">${_("Manage Access")}</a>
<a class="duplicate-button" href="#" role="button">${_("Duplicate")}</a>
</li>
% endif
% endif
Expand Down

0 comments on commit 6763928

Please sign in to comment.