Skip to Content

Changes for page Icon Picker

Last modified by Jan Bürger on 2025/05/06 12:29
From version 2.1
edited by Benjamin Fischer
on 2024/10/07 10:56
Change comment: Install extension [org.xwiki.platform:xwiki-platform-icon-ui/16.8.0]
To version 5.1
edited by Jan Bürger
on 2025/05/06 12:29
Change comment: Install extension [org.xwiki.platform:xwiki-platform-icon-ui/17.3.0]

Summary

Details

Page properties
Author
... ... @@ -1,1 +1,1 @@
1 -XWiki.fischer
1 +XWiki.JanBurger
Content
... ... @@ -2,24 +2,27 @@
2 2  ###########################
3 3  ## DATA: ICON THEMES
4 4  ###########################
5 -#if($request.action == 'data_iconthemes')
6 - #set($map = {})
7 - #set($discard = $map.put('iconThemes', $services.icon.iconSetNames))
8 - #set($discard = $map.put('currentIconTheme', $services.icon.currentIconSetName))
5 +#if ($request.action == 'data_iconthemes')
6 + #set ($map = {})
7 + #set ($discard = $map.put('iconThemes', $services.icon.iconSetNames))
8 + #set ($discard = $map.put('currentIconTheme', $services.icon.currentIconSetName))
9 9   #jsonResponse($map)
10 10  ###########################
11 11  ## DATA: ICONS
12 12  ###########################
13 -#elseif($request.action == 'data_icons')
14 - #set($icons = [])
15 - #set($iconTheme = $request.iconTheme)
16 - #set($xwikiIcons = $collectiontool.sort($services.icon.getIconNames($iconTheme)))
17 - #foreach($xwikiIcon in $xwikiIcons)
18 - #set($icon = {})
19 - #set($discard = $icon.put('name', $xwikiIcon))
20 - #set($discard = $icon.put('render', $services.icon.renderHTML($xwikiIcon, $iconTheme)))
21 - #set($discard = $icon.put('metadata', $services.icon.getMetaData($xwikiIcon, $iconTheme)))
22 - #set($discard = $icons.add($icon))
13 +#elseif ($request.action == 'data_icons')
14 + #set ($icons = [])
15 + #set ($iconTheme = $request.iconTheme)
16 + #set ($xwikiIcons = $collectiontool.sort($services.icon.getIconNames($iconTheme)))
17 + #set ($iconNamePrefix = $request.query.toLowerCase())
18 + #foreach ($xwikiIcon in $xwikiIcons)
19 + #if ("$!iconNamePrefix" == '' || $xwikiIcon.startsWith($iconNamePrefix))
20 + #set ($discard = $icons.add({
21 + 'name': $xwikiIcon,
22 + 'render': $services.icon.renderHTML($xwikiIcon, $iconTheme),
23 + 'metadata': $services.icon.getMetaData($xwikiIcon, $iconTheme)
24 + }))
25 + #end
23 23   #end
24 24   #jsonResponse($icons)
25 25  #else
XWiki.JavaScriptExtension[0]
Code
... ... @@ -64,14 +64,21 @@
64 64   for (var i=0; i < iconTheme.length; ++i) {
65 65   // Display the icon
66 66   if (selectedIconName === '' || iconTheme[i].name.includes(selectedIconName)) {
67 - var displayer = $(document.createElement('div'));
67 + var displayer = $(document.createElement('button'));
68 + displayer.addClass('btn');
68 68   iconListSection.append(displayer);
69 69   displayer.addClass('xwikiIconPickerIcon');
70 - var imageDiv = $(document.createElement('div'));
71 + var imageDiv = $(document.createElement('p'));
71 71   imageDiv.addClass('xwikiIconPickerIconImage').html(iconTheme[i].render);
72 72   displayer.append(imageDiv);
73 - var iconNameSpan = $(document.createElement('span'));
74 - iconNameSpan.addClass('xwikiIconPickerIconName').text(iconTheme[i].name);
74 + var iconNameSpan = $(document.createElement('p'));
75 + // Usually, the icon name is just one "word" in snakecase. e.g. arrow_refresh_small
76 + // We add Line Break Opportunity elements in the middle of this word so that it's cut into nice to read
77 + // substrings.
78 + let iconNameWithLineBreakOpportunities = iconTheme[i].name
79 + .replaceAll("-","<wbr/>-")
80 + .replaceAll("_","<wbr/>_");
81 + iconNameSpan.addClass('xwikiIconPickerIconName').html(iconNameWithLineBreakOpportunities);
75 75   displayer.append(iconNameSpan);
76 76   // Change the input value when the icon is clicked
77 77   displayer.on('click', function(event) {
... ... @@ -194,7 +194,7 @@
194 194   }
195 195  
196 196   /**
197 - * Create the piccker
204 + * Create the picker
198 198   */
199 199   var createPicker = function (input) {
200 200   // If the picker already exists
... ... @@ -213,7 +213,7 @@
213 213   xwikiCurrentIconsPicker = $(document.createElement('div'));
214 214   xwikiCurrentIconsPicker.addClass('xwikiIconPickerContainer');
215 215   // Insert the picker in the DOM
216 - $(body).append(xwikiCurrentIconsPicker);
223 + xwikiCurrentIconsPicker.insertAfter(currentInput);
217 217   // Set the position
218 218   setPickerPosition();
219 219   // Add the icon list section
... ... @@ -268,6 +268,13 @@
268 268   lastTimeout = setTimeout(reloadIconList, 500);
269 269   }
270 270   });
278 + iconThemeSelector.on('keyup', function(event) {
279 + // Close the picker when the user press 'escape'.
280 + // See: http://stackoverflow.com/questions/1160008/which-keycode-for-escape-key-with-jquery
281 + if (event.which == 27) {
282 + closePicker();
283 + }
284 + });
271 271   }
272 272  
273 273   /**
XWiki.StyleSheetExtension[0]
Code
... ... @@ -10,22 +10,37 @@
10 10  }
11 11  
12 12  .xwikiIconPickerList {
13 - overflow-y: scroll;
13 + display: grid;
14 + max-width: 100%;
14 14   height: 240px;
16 + overflow-y: scroll;
17 + gap: .3em;
18 + padding: .3em;
19 + /* 4 columns, each a fraction of the whole width */
20 + grid-template-columns: repeat(4, 1fr);
15 15  }
16 16  
23 +/* Avoid stretching on the Loader element. */
24 +.xwikiIconPickerList > img {
25 + object-fit: contain;
26 +}
27 +
17 17  .xwikiIconPickerIcon {
18 - float: left;
19 - height: 80px;
20 - width: 100px;
29 + display: flex;
30 + flex-direction: column;
31 + margin: 0;
32 + padding: 0;
21 21   text-align: center;
22 22   border-radius: 7px;
23 23   vertical-align: middle;
24 - overflow: hidden;
25 - padding: 10px;
26 26   cursor: pointer;
37 + background-color: transparent;
27 27  }
28 28  
40 +.xwikiIconPickerIcon * {
41 + padding: 0;
42 +}
43 +
29 29  .xwikiIconPickerIcon:hover {
30 30   background-color: $theme.highlightColor;
31 31  }
... ... @@ -32,6 +32,7 @@
32 32  
33 33  .xwikiIconPickerIconImage {
34 34   font-size: 24px;
50 + line-height: 1;
35 35   margin: 0;
36 36  }
37 37  
... ... @@ -39,6 +39,12 @@
39 39   width: 24px;
40 40  }
41 41  
58 +.xwikiIconPickerIcon .xwikiIconPickerIconName {
59 + /* Make sure the name wraps onto multiple lines instead of overflowing. */
60 + white-space: pre-wrap;
61 + word-break: break-word;
62 +}
63 +
42 42  .xwikiIconPickerIconThemeSelector {
43 43   width: 100%;
44 44   background-color: $theme.menuBackgroundColor;