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

Author

...	...	@@ -1,1 +1,1 @@
1		-XWiki.JanBurger
	1	+XWiki.fischer

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;