Skip to content
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

Jump to bottom

XWIKI-21878: Various close button modals do not use intended icons #2888

Open
wants to merge 10 commits into
base: master
Choose a base branch
from
Open

XWIKI-21878: Various close button modals do not use intended icons #2888

Show file tree
Hide file tree
Changes from 8 commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
883e07d
XWIKI-21878: Various close button modals do not use intended icons
Sereza7 Feb 14, 2024
6af9611
Merge branch 'xwiki:master' into XWIKI-21878
Sereza7 Mar 4, 2024
b95e57d
XWIKI-21878: Various close button modals do not use intended icons
Sereza7 Mar 4, 2024
0bfc237
Merge branch 'xwiki:master' into XWIKI-21878
Sereza7 Mar 6, 2024
505952d
Merge branch 'xwiki:master' into XWIKI-21878
Sereza7 Mar 7, 2024
b1e19f5
XWIKI-21878: Various close button modals do not use intended icons
Sereza7 Mar 7, 2024
f6c9424
XWIKI-21878: Various close button modals do not use intended icons
Sereza7 Mar 8, 2024
44e650d
XWIKI-21878: Various close button modals do not use intended icons
Sereza7 Mar 8, 2024
217df8a
XWIKI-21878: Various close button modals do not use intended icons
Sereza7 Mar 8, 2024
9546f19
Merge branch 'master' into XWIKI-21878
Sereza7 May 16, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
2 changes: 1 addition & 1 deletion ...chment/xwiki-platform-attachment-api/src/main/resources/templates/attachment/moveStep1.vm
View file
Open in desktop
Expand Up @@ -124,7 +124,7 @@
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
<span aria-hidden="true">$services.icon.renderHTML('cross')</span>
</button>
<h5 class="modal-title">
$escapetool.xml($services.localization.render('attachment.move.targetLocation.modal.title'))
Expand Down
63 changes: 45 additions & 18 deletions ...i-platform-ckeditor/xwiki-platform-ckeditor-plugins/src/main/webjar/xwiki-dialog/modal.js
View file
Open in desktop
Expand Up @@ -25,33 +25,60 @@ define('modalTranslationKeys', [], [

define('modal', ['jquery', 'l10n!modal', 'bootstrap'], function($, translations) {
'use strict';
var modalTemplate =
'<div class="modal" tabindex="-1" role="dialog" data-backdrop="static">' +
'<div class="modal-dialog" role="document">' +
'<div class="modal-content">' +
'<div class="modal-header">' +
'<button type="button" class="close" data-dismiss="modal" aria-label="Close">' +
'<span aria-hidden="true">&times;</span>' +
'</button>' +
'<h4 class="modal-title"></h4>' +
'</div>' +
'<div class="modal-body"></div>' +
'<div class="modal-footer">' +
'<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>' +
'<button type="button" class="btn btn-primary" disabled="disabled">OK</button>' +
'</div>' +
// Fetch the cross icon from the icon theme to fill up the modal template.
let iconURL = `${XWiki.contextPath}/rest/wikis/${XWiki.currentWiki}/iconThemes/icons?name=cross`;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think the wiki name should be URL-encoded to protect against wiki names with special characters (not sure if we allow them, though).

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

https://github.com/search?q=repo%3Axwiki%2Fxwiki-platform%20%24%7BXWiki.currentWiki%7D&type=code
It's already used a few times in the codebase.

I took the opportunity to fix those other uses in 4 files in 217df8a .

I rebuilt the ckeditor plugin with the change, and it didn't break anything when testing on the main wiki :)

// Default value taken until the fetch is fulfilled
var closeIconTemplate = `<span aria-hidden="true">&times;</span>`;
$.get(iconURL, function(response) {
// We override the close button content template if the request is successful
let iconMetadata = response.getElementsByTagName('icon')[0];
console.log(iconMetadata);
if (iconMetadata.getElementsByTagName('iconSetType')[0].textContent === 'IMAGE') {
closeIconTemplate = '<img src="' + iconMetadata.getElementsByTagName('url')[0].textContent +
'" alt="" />';
} else if (iconMetadata.getElementsByTagName('iconSetType')[0].textContent === 'FONT') {
closeIconTemplate = '<span class="' +
iconMetadata.getElementsByTagName('cssClass')[0].textContent +
'" aria-hidden="true"></span>';
}
// Once we retrieve the icon value, we
// 1. Replace all the uses of the icon in the DOM already generated
const closeButtons = document.querySelectorAll(
'.modal > .modal-dialog > .modal-content > .modal-header > button.close');
closeButtons.forEach((button)=> {
button.innerHTML = closeIconTemplate;
});
// 2. replace the modal template used to create new modals
closeButtonTemplate = closeIconTemplate;
});
let closeButtonTemplate = '<span aria-hidden="true">&times;</span>';
let modalTemplate = '<div class="modal" tabindex="-1" role="dialog" data-backdrop="static">' +
'<div class="modal-dialog" role="document">' +
'<div class="modal-content">' +
'<div class="modal-header">' +
'<button type="button" class="close" data-dismiss="modal" aria-label="Close">' +
closeButtonTemplate +
'</button>' +
'<h4 class="modal-title"></h4>' +
'</div>' +
'<div class="modal-body"></div>' +
'<div class="modal-footer">' +
'<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>' +
'<button type="button" class="btn btn-primary" disabled="disabled">OK</button>' +
Sereza7 marked this conversation as resolved.
Show resolved Hide resolved
'</div>' +
'</div>' +
'</div>',
'</div>' +
'</div>',


createModal = function(definition) {
createModal = function (definition) {
definition = $.extend({
title: '',
content: '',
acceptLabel: translations.get('ok'),
dismissLabel: translations.get('cancel')
}, definition);
var modal = $(modalTemplate).addClass(definition['class']).appendTo(document.body);
let modal = $(modalTemplate).addClass(definition['class']).appendTo(document.body);
modal.find('.close').attr({
title: translations.get('close'),
'aria-label': translations.get('close')
Expand Down
2 changes: 1 addition & 1 deletion ...extension-security-api/src/main/resources/templates/extension/security/liveData/advice.vm
View file
Open in desktop
Expand Up @@ -42,7 +42,7 @@
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
<span aria-hidden="true">$services.icon.renderHTML('cross')</span>
</button>
<h2 class="modal-title">
$escapetool.xml($services.localization.render('extension.security.liveData.advice'))
Expand Down
2 changes: 1 addition & 1 deletion ...-extension-security-api/src/main/resources/templates/extension/security/liveData/cveID.vm
View file
Open in desktop
Expand Up @@ -43,7 +43,7 @@
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
<span aria-hidden="true">$services.icon.renderHTML('cross')</span>
</button>
<h2 class="modal-title">
$escapetool.xml($services.localization.render(
Expand Down
4 changes: 2 additions & 2 deletions ...skin/xwiki-platform-flamingo-skin-resources/src/main/resources/flamingo/commentsinline.vm
View file
Open in desktop
Expand Up @@ -336,7 +336,7 @@ $xwiki.ssfx.use('uicomponents/viewers/comments.css', true)
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<button type="button" class="close" data-dismiss="modal">$services.icon.renderHTML('cross')</button>
<div class="modal-title">$services.localization.render('core.viewers.comments.permalink')</div>
</div>
<div class="modal-body">
Expand All @@ -363,7 +363,7 @@ $xwiki.ssfx.use('uicomponents/viewers/comments.css', true)
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<button type="button" class="close" data-dismiss="modal">$services.icon.renderHTML('cross')</button>
<div class="modal-title">$services.localization.render('core.viewers.comments.delete')</div>
</div>
<div class="modal-body">
Expand Down
2 changes: 1 addition & 1 deletion ...o-skin/xwiki-platform-flamingo-skin-resources/src/main/resources/flamingo/export_modal.vm
View file
Open in desktop
Expand Up @@ -208,7 +208,7 @@
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">$services.icon.renderHTML('cross')</button>
<div class="modal-title" id="exportTreeModalLabel">
<span class="modal-title-icon">$services.icon.renderHTML('download')</span>
#set ($title = $escapetool.xml($services.localization.render('core.exporter.exportAs', ['__format__'])))
Expand Down
2 changes: 1 addition & 1 deletion ...go-skin/xwiki-platform-flamingo-skin-resources/src/main/resources/flamingo/previewdiff.vm
View file
Open in desktop
Expand Up @@ -59,7 +59,7 @@
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">$services.icon.renderHTML('cross')</button>
<div class="modal-title" id="previewDiffModalTitle">$services.localization.render('core.editors.save.previewDiff.title')</div>
<hr />
<div class="xHint">
Expand Down
15 changes: 10 additions & 5 deletions ...o-skin/xwiki-platform-flamingo-skin-resources/src/main/resources/flamingo/syntaxPicker.js
View file
Open in desktop
Expand Up @@ -49,9 +49,14 @@
#set ($discard = $l10n.put($key, $services.localization.render($key)))
#end
#end
#set ($iconNames = ['cross'])
#set ($icons = {})
#foreach ($iconName in $iconNames)
#set ($discard = $icons.put($iconName, $services.icon.renderHTML($iconName)))
#end
#[[*/
// Start JavaScript-only code.
(function(l10n) {
(function(l10n, icons) {
"use strict";

/**
Expand Down Expand Up @@ -114,9 +119,9 @@ require(['jquery', 'xwiki-syntax-converter', 'bootstrap'], function($, syntaxCon
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">`
+ icons.cross +
`</button>
<h4 class="modal-title"></h4>
</div>
<div class="modal-body"></div>
Expand Down Expand Up @@ -360,4 +365,4 @@ require(['jquery'], function($) {
});

// End JavaScript-only code.
}).apply(']]#', $jsontool.serialize([$l10n]));
}).apply(']]#', $jsontool.serialize([$l10n, $icons]));
2 changes: 1 addition & 1 deletion ...atform-web/xwiki-platform-web-templates/src/main/resources/templates/attachment_macros.vm
View file
Open in desktop
Expand Up @@ -229,7 +229,7 @@
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<button type="button" class="close" data-dismiss="modal">$services.icon.renderHTML('cross')</button>
<div class="modal-title">$services.localization.render('core.viewers.attachments.delete')</div>
</div>
<div class="modal-body">
Expand Down
4 changes: 3 additions & 1 deletion ...tform-tools/xwiki-platform-tool-standards-validator/src/test/resources/xwiki-invalid.html
View file
Open in desktop
Expand Up @@ -389,7 +389,9 @@
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
<span class="fa fa-times" aria-hidden="true"></span>
</button>
<div class="modal-title" id="exportModalLabel">Export</div>
</div>
<div class="modal-body">
Expand Down
4 changes: 3 additions & 1 deletion ...latform-tools/xwiki-platform-tool-standards-validator/src/test/resources/xwiki-valid.html
View file
Open in desktop
Expand Up @@ -392,7 +392,9 @@
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
<span class="fa fa-times" aria-hidden="true"></span>
</button>
<div class="modal-title" id="exportModalLabel">Export</div>
</div>
<div class="modal-body">
Expand Down