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.fischer
	1	+XWiki.JanBurger

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;