From 0a9f8bcf03a8f5317a77e5e67f756e07b6f014a4 Mon Sep 17 00:00:00 2001 From: Sereza7 Date: Thu, 23 Nov 2023 15:40:06 +0100 Subject: [PATCH 1/4] XWIKI-21597: Make the rights UI use icon themes * Updated icons in the rights UI --- .../src/main/resources/XWiki/AdminSheet.xml | 2 +- .../src/main/resources/flamingo/rightsUI.vm | 19 ++++----- .../xwiki/usersandgroups/usersandgroups.css | 9 ++-- .../js/xwiki/usersandgroups/usersandgroups.js | 41 ++++++++++--------- 4 files changed, 36 insertions(+), 35 deletions(-) diff --git a/xwiki-platform-core/xwiki-platform-administration/xwiki-platform-administration-ui/src/main/resources/XWiki/AdminSheet.xml b/xwiki-platform-core/xwiki-platform-administration/xwiki-platform-administration-ui/src/main/resources/XWiki/AdminSheet.xml index 5385e0c4ae70..64fadd533d15 100644 --- a/xwiki-platform-core/xwiki-platform-administration/xwiki-platform-administration-ui/src/main/resources/XWiki/AdminSheet.xml +++ b/xwiki-platform-core/xwiki-platform-administration/xwiki-platform-administration-ui/src/main/resources/XWiki/AdminSheet.xml @@ -888,7 +888,7 @@ require(['jquery'], function($) { #admin-page-content label > input[type="checkbox"], #admin-page-content label > input[type="radio"] { - vertical-align: bottom; + vertical-align: middle; } /** diff --git a/xwiki-platform-core/xwiki-platform-flamingo/xwiki-platform-flamingo-skin/xwiki-platform-flamingo-skin-resources/src/main/resources/flamingo/rightsUI.vm b/xwiki-platform-core/xwiki-platform-flamingo/xwiki-platform-flamingo-skin/xwiki-platform-flamingo-skin-resources/src/main/resources/flamingo/rightsUI.vm index 916dd4a847a5..8d427e722eb5 100644 --- a/xwiki-platform-core/xwiki-platform-flamingo/xwiki-platform-flamingo-skin/xwiki-platform-flamingo-skin-resources/src/main/resources/flamingo/rightsUI.vm +++ b/xwiki-platform-core/xwiki-platform-flamingo/xwiki-platform-flamingo-skin/xwiki-platform-flamingo-skin-resources/src/main/resources/flamingo/rightsUI.vm @@ -257,30 +257,30 @@ $xwiki.ssfx.use('js/xwiki/table/livetable.css', true) #if ("$!request.editor" == 'globaladmin' || "$!editor" == 'globaladmin') #set ($auth_view = $targetDocument.getObject('XWiki.XWikiPreferences').getProperty('authenticate_view').getValue()) #if ("$!auth_view" == '1') - #set ($view_icon = $xwiki.getSkinFile('js/xwiki/usersandgroups/img/allow-black.png')) #set ($view_alt = 'yes') + #set ($view_checked = 'checked') #else - #set ($view_icon = $xwiki.getSkinFile('js/xwiki/usersandgroups/img/none.png')) #set ($view_alt = 'no') + #set ($view_checked = '') #end
#* A
must be present after a
to be HTML5 valid *#
#set ($auth_edit = $targetDocument.getObject('XWiki.XWikiPreferences').getProperty('authenticate_edit').getValue()) #if ("$!auth_edit" == '1') - #set ($edit_icon = $xwiki.getSkinFile('js/xwiki/usersandgroups/img/allow-black.png')) #set ($edit_alt = 'yes') + #set ($edit_checked = 'checked') #else - #set ($edit_icon = $xwiki.getSkinFile('js/xwiki/usersandgroups/img/none.png')) #set ($edit_alt = 'no') + #set ($edit_checked = '') #end
#* A
must be present after a
to be HTML5 valid *# @@ -294,16 +294,15 @@ $xwiki.ssfx.use('js/xwiki/table/livetable.css', true) #set ($guest_comment_requires_captcha = $xwiki.getSpacePreferenceAsInt('guest_comment_requires_captcha', 0)) #end #if($guest_comment_requires_captcha == 1) - #set ($guest_comment_requires_captcha_icon = $xwiki.getSkinFile('js/xwiki/usersandgroups/img/allow-black.png')) #set ($guest_comment_requires_captcha_alt = 'yes') + #set ($captcha_checked = 'checked') #else - #set ($guest_comment_requires_captcha_icon = $xwiki.getSkinFile('js/xwiki/usersandgroups/img/none.png')) #set ($guest_comment_requires_captcha_alt = 'no') + #set ($captcha_checked = '') #end
diff --git a/xwiki-platform-core/xwiki-platform-web/xwiki-platform-web-war/src/main/webapp/resources/js/xwiki/usersandgroups/usersandgroups.css b/xwiki-platform-core/xwiki-platform-web/xwiki-platform-web-war/src/main/webapp/resources/js/xwiki/usersandgroups/usersandgroups.css index 531110a5b456..d86c2dc594b3 100644 --- a/xwiki-platform-core/xwiki-platform-web/xwiki-platform-web-war/src/main/webapp/resources/js/xwiki/usersandgroups/usersandgroups.css +++ b/xwiki-platform-core/xwiki-platform-web/xwiki-platform-web-war/src/main/webapp/resources/js/xwiki/usersandgroups/usersandgroups.css @@ -51,10 +51,11 @@ width: 15% !important; } -/* This button has no border or background, but wraps an image to allow keyboard navigation. */ -#usersandgroupstable button.rights-edit { - border-color: transparent; - background: transparent; +#usersandgroupstable button.rights-edit.yes { + color: $theme.notificationSuccessColor; +} +#usersandgroupstable button.rights-edit.no { + color: $theme.notificationErrorColor; } .spaceName { diff --git a/xwiki-platform-core/xwiki-platform-web/xwiki-platform-web-war/src/main/webapp/resources/js/xwiki/usersandgroups/usersandgroups.js b/xwiki-platform-core/xwiki-platform-web/xwiki-platform-web-war/src/main/webapp/resources/js/xwiki/usersandgroups/usersandgroups.js index 957d427e36cf..3d38329ece5b 100644 --- a/xwiki-platform-core/xwiki-platform-web/xwiki-platform-web-war/src/main/webapp/resources/js/xwiki/usersandgroups/usersandgroups.js +++ b/xwiki-platform-core/xwiki-platform-web/xwiki-platform-web-war/src/main/webapp/resources/js/xwiki/usersandgroups/usersandgroups.js @@ -57,44 +57,42 @@ window.MSCheckbox = Class.create({ this.state = defaultState; this.states = [0,1,2]; // 0 = undefined; 1 = allow, 2 = deny this.nrstates = this.states.length; - this.images = [ - "$xwiki.getSkinFile('js/xwiki/usersandgroups/img/none.png')", - "$xwiki.getSkinFile('js/xwiki/usersandgroups/img/allow.png')", - "$xwiki.getSkinFile('js/xwiki/usersandgroups/img/deny1.png')" + this.icons = [ + "", + "$escapetool.javascript($services.icon.renderHTML('check'))", + "$escapetool.javascript($services.icon.renderHTML('cross'))" + ]; + this.stateClasses = [ + "none", + "yes", + "no" ]; this.button = document.createElement("button"); - this.button.className = "rights-edit"; + this.button.className = "btn btn-default btn-xs rights-edit"; this.button.addEventListener('click', this.createClickHandler(this)); - var img = document.createElement("img"); - - this.button.appendChild(img); - $(domNode).appendChild(this.button); - this.draw(this.state); + this.draw(); }, - - /** - * @todo Draw with the current this.state, don't pass as an argument. - */ - draw: function(state) + + draw: function() { - //Change display image - var img = this.button.firstChild; - img.src = this.images[state]; + //Change display icon + this.button.innerHTML = this.icons[this.state]; + this.button.classList.add(this.stateClasses[this.state]); //Update the description of the button for accessibility. var button = this.button; + var state = this.state; require(['xwiki-l10n!users-and-groups-translation-keys'], function(l10n) { var alts = [ l10n['undefined'], l10n['allowed'], l10n['denied'] ]; - img.alt = alts[state]; button.title = alts[state]; }); }, @@ -105,13 +103,16 @@ window.MSCheckbox = Class.create({ next: function() { + // Reinitialize class list + this.button.classList.remove(this.stateClasses[this.state]); + this.state = this.nextState(); if (this.table != undefined) { // TODO: Just update the cache, don't invalidate the row, once the rights are as stored as an // array, and not as a string. delete this.table.fetchedRows[this.idx]; } - this.draw(this.state); + this.draw(); }, /* Confirmation cases: From f584f338bb2dbcc7dca26faa6e409ac99057f338 Mon Sep 17 00:00:00 2001 From: Sereza7 Date: Thu, 23 Nov 2023 15:49:31 +0100 Subject: [PATCH 2/4] XWIKI-21597: Make the rights UI use icon themes * Removed the logic to update the source for the checkbox image --- .../resources/js/xwiki/usersandgroups/usersandgroups.js | 7 ------- 1 file changed, 7 deletions(-) diff --git a/xwiki-platform-core/xwiki-platform-web/xwiki-platform-web-war/src/main/webapp/resources/js/xwiki/usersandgroups/usersandgroups.js b/xwiki-platform-core/xwiki-platform-web/xwiki-platform-web-war/src/main/webapp/resources/js/xwiki/usersandgroups/usersandgroups.js index 3d38329ece5b..ee4c5f9b9253 100644 --- a/xwiki-platform-core/xwiki-platform-web/xwiki-platform-web-war/src/main/webapp/resources/js/xwiki/usersandgroups/usersandgroups.js +++ b/xwiki-platform-core/xwiki-platform-web/xwiki-platform-web-war/src/main/webapp/resources/js/xwiki/usersandgroups/usersandgroups.js @@ -554,11 +554,9 @@ function setBooleanPropertyFromLiveCheckbox(self, saveDocumentURL, configuration } var pivot = self; var newAlt = "yes"; - var newSrc = "$xwiki.getSkinFile('js/xwiki/usersandgroups/img/allow-black.png')"; var setValue = "1"; if (self.getAttribute('alt') == "yes") { newAlt = "no"; - newSrc = "$xwiki.getSkinFile('js/xwiki/usersandgroups/img/none.png')"; setValue = "0"; } var paramMap = {}; @@ -568,7 +566,6 @@ function setBooleanPropertyFromLiveCheckbox(self, saveDocumentURL, configuration paramMap["parameters"]["comment"] = "$services.localization.render('authenticate_viewedit_savecomment')"; paramMap["onSuccess"] = function() { pivot.alt = newAlt; - pivot.src = newSrc; } new Ajax.Request(saveURL, paramMap); }; @@ -590,7 +587,6 @@ function setGuestExtendedRights(self) parameters: {"XWiki.XWikiPreferences_0_authenticate_view" : "0"}, onSuccess: function() { pivot.alt = "no"; - pivot.src = "$xwiki.getSkinFile('js/xwiki/usersandgroups/img/none.png')"; }}); } else { new Ajax.Request(url, { @@ -598,7 +594,6 @@ function setGuestExtendedRights(self) parameters: {"XWiki.XWikiPreferences_0_authenticate_edit" : "0"}, onSuccess: function() { pivot.alt = "no"; - pivot.src = "$xwiki.getSkinFile('js/xwiki/usersandgroups/img/none.png')"; }}); } } else { @@ -608,7 +603,6 @@ function setGuestExtendedRights(self) parameters: {"XWiki.XWikiPreferences_0_authenticate_view" : "1"}, onSuccess: function() { pivot.alt = "yes"; - pivot.src = "$xwiki.getSkinFile('js/xwiki/usersandgroups/img/allow-black.png')"; }}); } else { new Ajax.Request(url, { @@ -616,7 +610,6 @@ function setGuestExtendedRights(self) parameters: {"XWiki.XWikiPreferences_0_authenticate_edit" : "1"}, onSuccess: function() { pivot.alt = "yes"; - pivot.src = "$xwiki.getSkinFile('js/xwiki/usersandgroups/img/allow-black.png')"; }}); } } From 78ca48e9fb3ed17d074ec0d0aefd8f615db47672 Mon Sep 17 00:00:00 2001 From: Sereza7 Date: Thu, 11 Jan 2024 17:58:54 +0100 Subject: [PATCH 3/4] XWIKI-21597: Make the rights UI use icon themes * Removed velocity calls from inside the javascript --- .../js/xwiki/usersandgroups/usersandgroups.js | 32 +++++++++++++------ 1 file changed, 22 insertions(+), 10 deletions(-) diff --git a/xwiki-platform-core/xwiki-platform-web/xwiki-platform-web-war/src/main/webapp/resources/js/xwiki/usersandgroups/usersandgroups.js b/xwiki-platform-core/xwiki-platform-web/xwiki-platform-web-war/src/main/webapp/resources/js/xwiki/usersandgroups/usersandgroups.js index ee4c5f9b9253..313362aab97e 100644 --- a/xwiki-platform-core/xwiki-platform-web/xwiki-platform-web-war/src/main/webapp/resources/js/xwiki/usersandgroups/usersandgroups.js +++ b/xwiki-platform-core/xwiki-platform-web/xwiki-platform-web-war/src/main/webapp/resources/js/xwiki/usersandgroups/usersandgroups.js @@ -18,7 +18,16 @@ * 02110-1301 USA, or see the FSF site: http://www.fsf.org. */ /* this represent a triple state checkbox */ - +/*! +#set ($iconNames = ['check', 'cross']) +#set ($icons = {}) +#foreach ($iconName in $iconNames) + #set ($discard = $icons.put($iconName, $services.icon.renderHTML($iconName))) +#end +#[[*/ +// Start JavaScript-only code. +(function(icons) { + "use strict"; define('users-and-groups-translation-keys', { prefix: 'platform.core.rightsManagement.', keys: [ @@ -57,18 +66,11 @@ window.MSCheckbox = Class.create({ this.state = defaultState; this.states = [0,1,2]; // 0 = undefined; 1 = allow, 2 = deny this.nrstates = this.states.length; - this.icons = [ - "", - "$escapetool.javascript($services.icon.renderHTML('check'))", - "$escapetool.javascript($services.icon.renderHTML('cross'))" - ]; this.stateClasses = [ "none", "yes", "no" ]; - - this.button = document.createElement("button"); this.button.className = "btn btn-default btn-xs rights-edit"; @@ -80,8 +82,17 @@ window.MSCheckbox = Class.create({ draw: function() { - //Change display icon - this.button.innerHTML = this.icons[this.state]; + //Change the display icon + if(this.state === 0) { + this.button.innerHTML = ''; + } + if(this.state === 1) { + this.button.innerHTML = icons.check; + } + if(this.state === 2) { + this.button.innerHTML = icons.cross; + } + this.button.classList.add(this.stateClasses[this.state]); //Update the description of the button for accessibility. @@ -231,6 +242,7 @@ window.MSCheckbox = Class.create({ } } }); +}).apply(']]#', $jsontool.serialize([$icons])); /** * user list element creator. Used in adminusers.vm. From b2f2a7a69e78ee3d533bfe4b27eea204f13b02d6 Mon Sep 17 00:00:00 2001 From: Sereza7 Date: Mon, 22 Jan 2024 11:27:46 +0100 Subject: [PATCH 4/4] XWIKI-21597: Make the rights UI use icon themes * Removed the alt - didn't add an alternative because what it used to be is already supported by the default checkbox behaviour * Updated the javascript to fit this change in marking even when checking/unchecking the boxes. --- .../src/main/resources/flamingo/rightsUI.vm | 12 +++--------- .../js/xwiki/usersandgroups/usersandgroups.js | 14 +++++++------- 2 files changed, 10 insertions(+), 16 deletions(-) diff --git a/xwiki-platform-core/xwiki-platform-flamingo/xwiki-platform-flamingo-skin/xwiki-platform-flamingo-skin-resources/src/main/resources/flamingo/rightsUI.vm b/xwiki-platform-core/xwiki-platform-flamingo/xwiki-platform-flamingo-skin/xwiki-platform-flamingo-skin-resources/src/main/resources/flamingo/rightsUI.vm index 8d427e722eb5..ac59cde803b4 100644 --- a/xwiki-platform-core/xwiki-platform-flamingo/xwiki-platform-flamingo-skin/xwiki-platform-flamingo-skin-resources/src/main/resources/flamingo/rightsUI.vm +++ b/xwiki-platform-core/xwiki-platform-flamingo/xwiki-platform-flamingo-skin/xwiki-platform-flamingo-skin-resources/src/main/resources/flamingo/rightsUI.vm @@ -257,30 +257,26 @@ $xwiki.ssfx.use('js/xwiki/table/livetable.css', true) #if ("$!request.editor" == 'globaladmin' || "$!editor" == 'globaladmin') #set ($auth_view = $targetDocument.getObject('XWiki.XWikiPreferences').getProperty('authenticate_view').getValue()) #if ("$!auth_view" == '1') - #set ($view_alt = 'yes') #set ($view_checked = 'checked') #else - #set ($view_alt = 'no') #set ($view_checked = '') #end
#* A
must be present after a
to be HTML5 valid *#
#set ($auth_edit = $targetDocument.getObject('XWiki.XWikiPreferences').getProperty('authenticate_edit').getValue()) #if ("$!auth_edit" == '1') - #set ($edit_alt = 'yes') #set ($edit_checked = 'checked') #else - #set ($edit_alt = 'no') #set ($edit_checked = '') #end
#* A
must be present after a
to be HTML5 valid *# @@ -294,15 +290,13 @@ $xwiki.ssfx.use('js/xwiki/table/livetable.css', true) #set ($guest_comment_requires_captcha = $xwiki.getSpacePreferenceAsInt('guest_comment_requires_captcha', 0)) #end #if($guest_comment_requires_captcha == 1) - #set ($guest_comment_requires_captcha_alt = 'yes') #set ($captcha_checked = 'checked') #else - #set ($guest_comment_requires_captcha_alt = 'no') #set ($captcha_checked = '') #end
diff --git a/xwiki-platform-core/xwiki-platform-web/xwiki-platform-web-war/src/main/webapp/resources/js/xwiki/usersandgroups/usersandgroups.js b/xwiki-platform-core/xwiki-platform-web/xwiki-platform-web-war/src/main/webapp/resources/js/xwiki/usersandgroups/usersandgroups.js index 313362aab97e..7f5fe9aded3a 100644 --- a/xwiki-platform-core/xwiki-platform-web/xwiki-platform-web-war/src/main/webapp/resources/js/xwiki/usersandgroups/usersandgroups.js +++ b/xwiki-platform-core/xwiki-platform-web/xwiki-platform-web-war/src/main/webapp/resources/js/xwiki/usersandgroups/usersandgroups.js @@ -555,20 +555,20 @@ function setBooleanPropertyFromLiveCheckbox(self, saveDocumentURL, configuration var saveURL = "$xwiki.getURL('XWiki.XWikiPreferences', 'save')"; var config = "XWiki.XWikiPreferences"; var objNum = "0"; - if (saveDocumentURL != undefined && saveDocumentURL.length > 0) { + if (saveDocumentURL !== undefined && saveDocumentURL.length > 0) { saveURL = saveDocumentURL; } - if (configurationClassName != undefined && configurationClassName.length > 0) { + if (configurationClassName !== undefined && configurationClassName.length > 0) { config = configurationClassName; } - if (objectNumber != undefined) { + if (objectNumber !== undefined) { objNum = objectNumber; } var pivot = self; - var newAlt = "yes"; + var newChecked = "checked"; var setValue = "1"; - if (self.getAttribute('alt') == "yes") { - newAlt = "no"; + if (self.getAttribute('checked') === "checked") { + newChecked = ""; setValue = "0"; } var paramMap = {}; @@ -577,7 +577,7 @@ function setBooleanPropertyFromLiveCheckbox(self, saveDocumentURL, configuration paramMap["parameters"]["ajax"] = "1"; paramMap["parameters"]["comment"] = "$services.localization.render('authenticate_viewedit_savecomment')"; paramMap["onSuccess"] = function() { - pivot.alt = newAlt; + pivot.setAttribute('checked',newChecked); } new Ajax.Request(saveURL, paramMap); };