Changes for page Icon Picker

Summary

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

Details

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

...	...	@@ -12,10 +12,17 @@
12	12	.xwikiIconPickerList {
13	13	overflow-y: scroll;
14	14	height: 240px;
	15	+ display: flex;
	16	+ flex-wrap: wrap;
	17	+ gap: .3em;
15	15	}
16	16
	20	+/* Avoid stretching on the Loader element. */
	21	+.xwikiIconPickerList > img {
	22	+ object-fit: contain;
	23	+}
	24	+
17	17	.xwikiIconPickerIcon {
18		- float: left;
19	19	height: 80px;
20	20	width: 100px;
21	21	text-align: center;
...	...	@@ -24,6 +24,7 @@
24	24	overflow: hidden;
25	25	padding: 10px;
26	26	cursor: pointer;
	34	+ background-color: transparent;
27	27	}
28	28
29	29	.xwikiIconPickerIcon:hover {
...	...	@@ -32,6 +32,7 @@
32	32
33	33	.xwikiIconPickerIconImage {
34	34	font-size: 24px;
	43	+ line-height: 1;
35	35	margin: 0;
36	36	}
37	37
...	...	@@ -39,6 +39,18 @@
39	39	width: 24px;
40	40	}
41	41
	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	+
42	42	.xwikiIconPickerIconThemeSelector {
43	43	width: 100%;
44	44	background-color: $theme.menuBackgroundColor;