From 113759b2e90e7e9d8f70693c0c0f6c576eb394d0 Mon Sep 17 00:00:00 2001 From: LucasC Date: Tue, 14 Jan 2025 17:24:32 +0100 Subject: [PATCH 1/3] XWIKI-22339: Icon picker is not keyboard operable * Updated the type of the icon buttons to be actual buttons and not disguised divs. * Added word break indicators in the icon names, for cleaner breaks on long iconNames. * Moved the DOM representation of the picker right after the input. * Added an escape listener on the picker content to easily get out of it. * Updated style to avoid having too big of a change with the new DOM. * Improved style for long iconNames, which were poorly supported before. --- .../resources/IconThemesCode/IconPicker.xml | 49 ++++++++++++++++--- 1 file changed, 42 insertions(+), 7 deletions(-) diff --git a/xwiki-platform-core/xwiki-platform-icon/xwiki-platform-icon-ui/src/main/resources/IconThemesCode/IconPicker.xml b/xwiki-platform-core/xwiki-platform-icon/xwiki-platform-icon-ui/src/main/resources/IconThemesCode/IconPicker.xml index ef9a48e37d6..4b909d84df1 100644 --- a/xwiki-platform-core/xwiki-platform-icon/xwiki-platform-icon-ui/src/main/resources/IconThemesCode/IconPicker.xml +++ b/xwiki-platform-core/xwiki-platform-icon/xwiki-platform-icon-ui/src/main/resources/IconThemesCode/IconPicker.xml @@ -243,14 +243,21 @@ require(['jquery', 'xwiki-icon-picker'], function($) { for (var i=0; i < iconTheme.length; ++i) { // Display the icon if (selectedIconName === '' || iconTheme[i].name.includes(selectedIconName)) { - var displayer = $(document.createElement('div')); + var displayer = $(document.createElement('button')); + displayer.addClass('btn'); iconListSection.append(displayer); displayer.addClass('xwikiIconPickerIcon'); - var imageDiv = $(document.createElement('div')); + var imageDiv = $(document.createElement('p')); imageDiv.addClass('xwikiIconPickerIconImage').html(iconTheme[i].render); displayer.append(imageDiv); - var iconNameSpan = $(document.createElement('span')); - iconNameSpan.addClass('xwikiIconPickerIconName').text(iconTheme[i].name); + var iconNameSpan = $(document.createElement('p')); + // Usually, the icon name is just one "word" in snakecase. e.g. arrow_refresh_small + // We add Line Break Opportunity elements in the middle of this word so that it's cut into nice to read + // substrings. + let iconNameWithLineBreakOpportunities = iconTheme[i].name + .replaceAll("-","-") + .replaceAll("_","_"); + iconNameSpan.addClass('xwikiIconPickerIconName').html(iconNameWithLineBreakOpportunities); displayer.append(iconNameSpan); // Change the input value when the icon is clicked displayer.on('click', function(event) { @@ -373,7 +380,7 @@ require(['jquery', 'xwiki-icon-picker'], function($) { } /** - * Create the piccker + * Create the picker */ var createPicker = function (input) { // If the picker already exists @@ -392,7 +399,7 @@ require(['jquery', 'xwiki-icon-picker'], function($) { xwikiCurrentIconsPicker = $(document.createElement('div')); xwikiCurrentIconsPicker.addClass('xwikiIconPickerContainer'); // Insert the picker in the DOM - $(body).append(xwikiCurrentIconsPicker); + xwikiCurrentIconsPicker.insertAfter(currentInput); // Set the position setPickerPosition(); // Add the icon list section @@ -447,6 +454,13 @@ require(['jquery', 'xwiki-icon-picker'], function($) { lastTimeout = setTimeout(reloadIconList, 500); } }); + iconThemeSelector.on('keyup', function(event) { + // Close the picker when the user press 'escape'. + // See: http://stackoverflow.com/questions/1160008/which-keycode-for-escape-key-with-jquery + if (event.which == 27) { + closePicker(); + } + }); } /** @@ -613,10 +627,17 @@ require(['jquery', 'xwiki-icon-picker'], function($) { .xwikiIconPickerList { overflow-y: scroll; height: 240px; + display: flex; + flex-wrap: wrap; + gap: .3em; +} + +/* Avoid stretching on the Loader element. */ +.xwikiIconPickerList > img { + object-fit: contain; } .xwikiIconPickerIcon { - float: left; height: 80px; width: 100px; text-align: center; @@ -625,6 +646,7 @@ require(['jquery', 'xwiki-icon-picker'], function($) { overflow: hidden; padding: 10px; cursor: pointer; + background-color: transparent; } .xwikiIconPickerIcon:hover { @@ -633,6 +655,7 @@ require(['jquery', 'xwiki-icon-picker'], function($) { .xwikiIconPickerIconImage { font-size: 24px; + line-height: 1; margin: 0; } @@ -640,6 +663,18 @@ require(['jquery', 'xwiki-icon-picker'], function($) { width: 24px; } +.xwikiIconPickerIcon .xwikiIconPickerIconName { + /* We want to limit the number of lines in the name so that it always fit inside the standard button size. + The value below is just about twice the line-height. */ + max-height: 2.9em; + /* For the few names that need three lines, we make sure the user can scroll to read the whole name. */ + overflow-y: scroll; + overflow-x: hidden; + /* Make sure the name wraps onto multiple lines isntead of overflowing. */ + white-space: pre-wrap; + word-break: break-word; +} + .xwikiIconPickerIconThemeSelector { width: 100%; background-color: $theme.menuBackgroundColor; From 9504c393f2c81001a4d18204019a770f50bfc6c0 Mon Sep 17 00:00:00 2001 From: LucasC Date: Tue, 14 Jan 2025 17:31:36 +0100 Subject: [PATCH 2/3] XWIKI-22339: Icon picker is not keyboard operable * Escaped changes --- .../src/main/resources/IconThemesCode/IconPicker.xml | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/xwiki-platform-core/xwiki-platform-icon/xwiki-platform-icon-ui/src/main/resources/IconThemesCode/IconPicker.xml b/xwiki-platform-core/xwiki-platform-icon/xwiki-platform-icon-ui/src/main/resources/IconThemesCode/IconPicker.xml index 4b909d84df1..438f15965bd 100644 --- a/xwiki-platform-core/xwiki-platform-icon/xwiki-platform-icon-ui/src/main/resources/IconThemesCode/IconPicker.xml +++ b/xwiki-platform-core/xwiki-platform-icon/xwiki-platform-icon-ui/src/main/resources/IconThemesCode/IconPicker.xml @@ -255,8 +255,8 @@ require(['jquery', 'xwiki-icon-picker'], function($) { // We add Line Break Opportunity elements in the middle of this word so that it's cut into nice to read // substrings. let iconNameWithLineBreakOpportunities = iconTheme[i].name - .replaceAll("-","-") - .replaceAll("_","_"); + .replaceAll("-","<wbr/>-") + .replaceAll("_","<wbr/>_"); iconNameSpan.addClass('xwikiIconPickerIconName').html(iconNameWithLineBreakOpportunities); displayer.append(iconNameSpan); // Change the input value when the icon is clicked @@ -633,7 +633,7 @@ require(['jquery', 'xwiki-icon-picker'], function($) { } /* Avoid stretching on the Loader element. */ -.xwikiIconPickerList > img { +.xwikiIconPickerList > img { object-fit: contain; } From 0f948a271acd9701c6638913704a32532963ff23 Mon Sep 17 00:00:00 2001 From: LucasC Date: Tue, 14 Jan 2025 17:45:00 +0100 Subject: [PATCH 3/3] XWIKI-22339: Icon picker is not keyboard operable * Fixed typo --- .../src/main/resources/IconThemesCode/IconPicker.xml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/xwiki-platform-core/xwiki-platform-icon/xwiki-platform-icon-ui/src/main/resources/IconThemesCode/IconPicker.xml b/xwiki-platform-core/xwiki-platform-icon/xwiki-platform-icon-ui/src/main/resources/IconThemesCode/IconPicker.xml index 438f15965bd..fa9b3766988 100644 --- a/xwiki-platform-core/xwiki-platform-icon/xwiki-platform-icon-ui/src/main/resources/IconThemesCode/IconPicker.xml +++ b/xwiki-platform-core/xwiki-platform-icon/xwiki-platform-icon-ui/src/main/resources/IconThemesCode/IconPicker.xml @@ -670,7 +670,7 @@ require(['jquery', 'xwiki-icon-picker'], function($) { /* For the few names that need three lines, we make sure the user can scroll to read the whole name. */ overflow-y: scroll; overflow-x: hidden; - /* Make sure the name wraps onto multiple lines isntead of overflowing. */ + /* Make sure the name wraps onto multiple lines instead of overflowing. */ white-space: pre-wrap; word-break: break-word; }