Skip to content

fix: Nits on styles of library icon [FC-0114] #37980

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
ChrisChV wants to merge 5 commits into
base: master
Choose a base branch
from
+20 −10
Open

fix: Nits on styles of library icon [FC-0114] #37980

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
10be594
fix: Nits on styles of library icon
ChrisChV Feb 5, 2026
7c8ce14
fix: punctuation in the library icon tooltip
ChrisChV Feb 5, 2026
74842d2
fix: Nits on the code
ChrisChV Feb 5, 2026
4e01220
fix: Bolding in library icon tooltip
ChrisChV Feb 5, 2026
968e057
fix: Broken lint
ChrisChV Feb 5, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 8 additions & 0 deletions cms/static/sass/course-unit-mfe-iframe-bundle.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1174,3 +1174,11 @@ select {
@extend %button-primary-outline;
}
}

.tooltip {
background: $primary-base;
white-space: normal;
max-width: 200px;
line-height: 1.5;
text-align: center;
}
18 changes: 9 additions & 9 deletions cms/templates/studio_xblock_wrapper.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<%page expression_filter="h"/>
<%!
from django.utils.translation import gettext as _
from openedx.core.djangolib.markup import Text
from openedx.core.djangolib.markup import HTML, Text
from cms.djangoapps.contentstore.helpers import xblock_studio_url
from cms.djangoapps.contentstore.utils import is_visible_to_specific_partition_groups, get_editor_page_base_url, determine_label
from lms.lib.utils import is_unit
Expand Down Expand Up @@ -111,7 +111,7 @@
% else:
% if upstream_info.upstream_ref:
% if upstream_info.error_message:
<div class="library-info-icon two-icons" data-tooltip="${_("The referenced library or library object is not available.")}">
<div class="library-info-icon two-icons" data-tooltip="${_("The referenced library or library object is not available")}">
<!-- "library" icon from https://fonts.google.com/icons?selected=Material+Symbols+Outlined:newsstand:FILL@0;wght@400;GRAD@0;opsz@24&icon.size=24 -->
<svg role="img" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 -960 960 960" fill="currentColor" style="vertical-align: middle;">
<path d="M80-160v-80h800v80H80Zm80-160v-320h80v320h-80Zm160 0v-480h80v480h-80Zm160 0v-480h80v480h-80Zm280 0L600-600l70-40 160 280-70 40Z"/>
Expand All @@ -120,10 +120,10 @@
<svg role="img" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 -960 960 960" fill="currentColor" style="vertical-align: middle;">
<path d="m770-302-60-62q40-11 65-42.5t25-73.5q0-50-35-85t-85-35H520v-80h160q83 0 141.5 58.5T880-480q0 57-29.5 105T770-302ZM634-440l-80-80h86v80h-6ZM792-56 56-792l56-56 736 736-56 56ZM440-280H280q-83 0-141.5-58.5T80-480q0-69 42-123t108-71l74 74h-24q-50 0-85 35t-35 85q0 50 35 85t85 35h160v80ZM320-440v-80h65l79 80H320Z"/>
</svg>
<span class="sr-only">${_("The referenced library or library object is not available.")}</span>
<span class="sr-only">${_("The referenced library or library object is not available")}</span>
</div>
% elif upstream_info.ready_to_sync:
<button class="library-info-icon two-icons library-sync-button sync-state" data-tooltip="${Text(_("The linked {upstream_name} has updates available.")).format(upstream_name=upstream_info.upstream_name)}">
<button class="library-info-icon two-icons library-sync-button sync-state" data-tooltip="${Text(_("The linked {upstream_name} has updates available")).format(upstream_name=HTML('<strong>{name}</strong>').format(name=upstream_info.upstream_name))}">
<!-- "library" icon from https://fonts.google.com/icons?selected=Material+Symbols+Outlined:newsstand:FILL@0;wght@400;GRAD@0;opsz@24&icon.size=24 -->
<svg role="img" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 -960 960 960" fill="currentColor" style="vertical-align: middle;">
<path d="M80-160v-80h800v80H80Zm80-160v-320h80v320h-80Zm160 0v-480h80v480h-80Zm160 0v-480h80v480h-80Zm280 0L600-600l70-40 160 280-70 40Z"/>
Expand All @@ -132,10 +132,10 @@
<svg role="img" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 -960 960 960" fill="currentColor" style="vertical-align: middle;">
<path d="M160-160v-80h110l-16-14q-52-46-73-105t-21-119q0-111 66.5-197.5T400-790v84q-72 26-116 88.5T240-478q0 45 17 87.5t53 78.5l10 10v-98h80v240H160Zm400-10v-84q72-26 116-88.5T720-482q0-45-17-87.5T650-648l-10-10v98h-80v-240h240v80H690l16 14q49 49 71.5 106.5T800-482q0 111-66.5 197.5T560-170Z"/>
</svg>
<span class="sr-only">${_("The linked library object has updates available.")}</span>
<span class="sr-only">${_("The linked library object has updates available")}</span>
</button>
% elif len(upstream_info.downstream_customized) > 0:
<div class="library-info-icon two-icons" data-tooltip="${_("This library reference has course overrides applied.")}">
<div class="library-info-icon two-icons" data-tooltip="${_("This library reference has course overrides applied")}">
<!-- "library" icon from https://fonts.google.com/icons?selected=Material+Symbols+Outlined:newsstand:FILL@0;wght@400;GRAD@0;opsz@24&icon.size=24 -->
<svg role="img" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 -960 960 960" fill="currentColor" style="vertical-align: middle;">
<path d="M80-160v-80h800v80H80Zm80-160v-320h80v320h-80Zm160 0v-480h80v480h-80Zm160 0v-480h80v480h-80Zm280 0L600-600l70-40 160 280-70 40Z"/>
Expand All @@ -144,15 +144,15 @@
<svg role="img" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 -960 960 960" fill="currentColor" style="vertical-align: middle;">
<path d="M440-160v-304L240-664v104h-80v-240h240v80H296l224 224v336h-80Zm154-376-58-58 128-126H560v-80h240v240h-80v-104L594-536Z"/>
</svg>
<span class="sr-only">${_("This library reference has course overrides applied.")}</span>
<span class="sr-only">${_("This library reference has course overrides applied")}</span>
</div>
% else:
<div class="library-info-icon" data-tooltip="${Text(_("This is referenced via {upstream_name}")).format(upstream_name=upstream_info.upstream_name)}">
<div class="library-info-icon" data-tooltip="${Text(_("This is referenced via {upstream_name}")).format(upstream_name=HTML('<strong>{name}</strong>').format(name=upstream_info.upstream_name))}">
<!-- "library" icon from https://fonts.google.com/icons?selected=Material+Symbols+Outlined:newsstand:FILL@0;wght@400;GRAD@0;opsz@24&icon.size=24 -->
<svg role="img" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 -960 960 960" fill="currentColor" style="vertical-align: middle;">
<path d="M80-160v-80h800v80H80Zm80-160v-320h80v320h-80Zm160 0v-480h80v480h-80Zm160 0v-480h80v480h-80Zm280 0L600-600l70-40 160 280-70 40Z"/>
</svg>
<span class="sr-only">${_("This item is linked to a library item.")}</span>
<span class="sr-only">${_("This item is linked to a library item")}</span>
</div>
% endif
% endif
Expand Down
4 changes: 3 additions & 1 deletion common/static/js/src/tooltip_manager.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,8 +69,10 @@
pageX = typeof pageX !== 'undefined' ? pageX : element.offset().left + element.width() / 2;
pageY = typeof pageY !== 'undefined' ? pageY : element.offset().top + element.height() / 2;
var tooltipText = $(element).attr('data-tooltip');
// Tooltip content comes from data-tooltip attributes which are server-rendered
// with proper escaping using Text() and HTML() from openedx.core.djangolib.markup
this.tooltip
.text(tooltipText)
.html(tooltipText) // xss-lint: disable=javascript-jquery-html
.css(this.getCoords(pageX, pageY));
},

Expand Down
Loading