Changes for page Icon Picker

Summary

• Page properties (1 modified, 0 added, 0 removed)
• Objects (2 modified, 0 added, 0 removed)
  • XWiki.JavaScriptExtension[0]
  • XWiki.StyleSheetExtension[0]

Details

Page properties

Content

...	...	@@ -2,27 +2,24 @@
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		- #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
	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))
26	26	#end
27	27	#jsonResponse($icons)
28	28	#else

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

...	...	@@ -12,17 +12,10 @@
12	12	.xwikiIconPickerList {
13	13	overflow-y: scroll;
14	14	height: 240px;
15		- display: flex;
16		- flex-wrap: wrap;
17		- gap: .3em;
18	18	}
19	19
20		-/* Avoid stretching on the Loader element. */
21		-.xwikiIconPickerList > img {
22		- object-fit: contain;
23		-}
24		-
25	25	.xwikiIconPickerIcon {
	18	+ float: left;
26	26	height: 80px;
27	27	width: 100px;
28	28	text-align: center;
...	...	@@ -31,7 +31,6 @@
31	31	overflow: hidden;
32	32	padding: 10px;
33	33	cursor: pointer;
34		- background-color: transparent;
35	35	}
36	36
37	37	.xwikiIconPickerIcon:hover {
...	...	@@ -40,7 +40,6 @@
40	40
41	41	.xwikiIconPickerIconImage {
42	42	font-size: 24px;
43		- line-height: 1;
44	44	margin: 0;
45	45	}
46	46
...	...	@@ -48,18 +48,6 @@
48	48	width: 24px;
49	49	}
50	50
51		-.xwikiIconPickerIcon .xwikiIconPickerIconName {
52		- /* We want to limit the number of lines in the name so that it always fit inside the standard button size.
53		- The value below is just about twice the line-height. */
54		- max-height: 2.9em;
55		- /* For the few names that need three lines, we make sure the user can scroll to read the whole name. */
56		- overflow-y: scroll;
57		- overflow-x: hidden;
58		- /* Make sure the name wraps onto multiple lines instead of overflowing. */
59		- white-space: pre-wrap;
60		- word-break: break-word;
61		-}
62		-
63	63	.xwikiIconPickerIconThemeSelector {
64	64	width: 100%;
65	65	background-color: $theme.menuBackgroundColor;