Skip to Content

Changes for page Icon Picker

Last modified by superadmin on 2025/05/07 14:14
From version 7.1
edited by superadmin
on 2025/05/07 14:14
Change comment: Install extension [org.xwiki.platform:xwiki-platform-icon-ui/17.3.0]
To version 5.1
edited by Thomas Coelho (local)
on 2024/12/17 09:49
Change comment: Install extension [org.xwiki.platform:xwiki-platform-icon-ui/16.10.1]

Summary

Details

Page properties
Author
... ... @@ -1,1 +1,1 @@
1 -XWiki.superadmin
1 +XWiki.coelho
XWiki.JavaScriptExtension[0]
Code
... ... @@ -64,21 +64,14 @@
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('button'));
68 - displayer.addClass('btn');
67 + var displayer = $(document.createElement('div'));
69 69   iconListSection.append(displayer);
70 70   displayer.addClass('xwikiIconPickerIcon');
71 - var imageDiv = $(document.createElement('p'));
70 + var imageDiv = $(document.createElement('div'));
72 72   imageDiv.addClass('xwikiIconPickerIconImage').html(iconTheme[i].render);
73 73   displayer.append(imageDiv);
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);
73 + var iconNameSpan = $(document.createElement('span'));
74 + iconNameSpan.addClass('xwikiIconPickerIconName').text(iconTheme[i].name);
82 82   displayer.append(iconNameSpan);
83 83   // Change the input value when the icon is clicked
84 84   displayer.on('click', function(event) {
... ... @@ -201,7 +201,7 @@
201 201   }
202 202  
203 203   /**
204 - * Create the picker
197 + * Create the piccker
205 205   */
206 206   var createPicker = function (input) {
207 207   // If the picker already exists
... ... @@ -220,7 +220,7 @@
220 220   xwikiCurrentIconsPicker = $(document.createElement('div'));
221 221   xwikiCurrentIconsPicker.addClass('xwikiIconPickerContainer');
222 222   // Insert the picker in the DOM
223 - xwikiCurrentIconsPicker.insertAfter(currentInput);
216 + $(body).append(xwikiCurrentIconsPicker);
224 224   // Set the position
225 225   setPickerPosition();
226 226   // Add the icon list section
... ... @@ -275,13 +275,6 @@
275 275   lastTimeout = setTimeout(reloadIconList, 500);
276 276   }
277 277   });
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 - });
285 285   }
286 286  
287 287   /**
XWiki.StyleSheetExtension[0]
Code
... ... @@ -10,37 +10,22 @@
10 10  }
11 11  
12 12  .xwikiIconPickerList {
13 - display: grid;
14 - max-width: 100%;
15 - height: 240px;
16 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);
14 + height: 240px;
21 21  }
22 22  
23 -/* Avoid stretching on the Loader element. */
24 -.xwikiIconPickerList > img {
25 - object-fit: contain;
26 -}
27 -
28 28  .xwikiIconPickerIcon {
29 - display: flex;
30 - flex-direction: column;
31 - margin: 0;
32 - padding: 0;
18 + float: left;
19 + height: 80px;
20 + width: 100px;
33 33   text-align: center;
34 34   border-radius: 7px;
35 35   vertical-align: middle;
24 + overflow: hidden;
25 + padding: 10px;
36 36   cursor: pointer;
37 - background-color: transparent;
38 38  }
39 39  
40 -.xwikiIconPickerIcon * {
41 - padding: 0;
42 -}
43 -
44 44  .xwikiIconPickerIcon:hover {
45 45   background-color: $theme.highlightColor;
46 46  }
... ... @@ -47,7 +47,6 @@
47 47  
48 48  .xwikiIconPickerIconImage {
49 49   font-size: 24px;
50 - line-height: 1;
51 51   margin: 0;
52 52  }
53 53  
... ... @@ -55,12 +55,6 @@
55 55   width: 24px;
56 56  }
57 57  
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 -
64 64  .xwikiIconPickerIconThemeSelector {
65 65   width: 100%;
66 66   background-color: $theme.menuBackgroundColor;