[ticket/16413] Add icon color picker

PHPBB3-16413

phpBB/adm/style/acp_profile.html

@@ -92,8 +92,11 @@
 			<dd><input class="text medium" type="text" name="field_contact_desc" id="field_contact_desc" value="{FIELD_CONTACT_DESC}" /> <label for="field_contact_desc">{L_FIELD_CONTACT_DESC}</label></dd>
 			<dd><input class="text medium" type="text" name="field_contact_url" id="field_contact_url" value="{FIELD_CONTACT_URL}" /> <label for="field_contact_url">{L_FIELD_CONTACT_URL}</label></dd>
 			<dt><label for="field_icon">{{ lang('FIELD_ICON') ~ lang('COLON') }}</label><br /><span>{{ lang('FIELD_ICON_EXPLAIN') }}</span></dt>
-			<dd><input name="field_icon" id="field_icon" type="text" size="15" maxlength="255" value="{{ FIELD_ICON }}" placeholder="files-o" />{{ Icon('font', FIELD_ICON, '', true, '', {'style': 'font-size: 16px; margin:0 6px; vertical-align: middle;' ~ (FIELD_ICON_COLOR ? (' color: #' ~ FIELD_ICON_COLOR ~ ';') : '')}) }}</dd>
+			<dd><input name="field_icon" id="field_icon" type="text" size="15" maxlength="255" value="{{ FIELD_ICON }}" placeholder="files-o" />{{ Icon('font', FIELD_ICON, '', true, 'acp-icon', {'style': 'margin:0 6px;' ~ (FIELD_ICON_COLOR ? (' color: #' ~ FIELD_ICON_COLOR ~ ';') : '')}) }}</dd>
-			<dd><input name="field_icon_color" type="text" id="contact_field_icon_bgcolor" value="{{ FIELD_ICON_COLOR }}" size="6" maxlength="6" placeholder="{{ lang('FIELD_ICON_COLOR') }}" /></dd>
+			<dd>
+				<input name="field_icon_color" type="text" id="contact_field_icon_bgcolor" value="{{ FIELD_ICON_COLOR }}" size="6" maxlength="6" placeholder="{{ lang('FIELD_ICON_COLOR') }}" />
+				<input type="color" id="field_icon_color_picker" aria-label="{{ lang('FIELD_ICON_COLOR') }}">
+			</dd>
 			<!-- EVENT acp_profile_contact_last -->
 		</dl>
 		{% EVENT acp_profile_contact_after %}

phpBB/adm/style/admin.css

@@ -3152,3 +3152,29 @@ span + .o-icon {
 .acp-icon-disabled {
 	color: #d0d0d0;
 }
+
+
+input[type="color"] {
+	background-color: transparent;
+	border: solid 1px #d3d3d3;
+	border-radius: 50%;
+	width: 24px;
+	height: 24px;
+	padding: 2px;
+	cursor: pointer;
+	-webkit-appearance: none;
+}
+
+input[type="color"]::-webkit-color-swatch-wrapper {
+	padding: 0;
+}
+
+input[type="color"]::-webkit-color-swatch {
+	border: 0;
+	border-radius: 50%;
+}
+
+input[type="color"]::-moz-color-swatch {
+	border: 0;
+	border-radius: 50%;
+}

phpBB/adm/style/ajax.js

@@ -429,12 +429,49 @@ $(function() {
 		$field_icon.after('<i style="font-size: 16px; margin:0 6px; vertical-align: middle;"></i>');
 	}
 
-	$('#field_icon').on('keyup blur', function() {
+	$field_icon.on('keyup blur', function() {
 		var input = $(this).val();
 		var $icon = $(this).next('i');
-		$icon.attr('class', 'o-icon o-icon-font fa-fw fa-' + input + ' fas');
+		$icon.attr('class', 'o-icon o-icon-font fa-fw fa-' + input + ' fas acp-icon');
 	});
 
+	const DEFAULT_COLOR = '#000000';
+	const HEX_REGEX = /^#[A-Fa-f0-9]{6}$/;
+	const colorPicker = document.getElementById('field_icon_color_picker');
+
+	if (!colorPicker) {
+		return;
+	}
+
+	const colorText = colorPicker.previousElementSibling;
+
+	if (!colorText || colorText.type !== 'text') {
+		return;
+	}
+
+	const syncColors = (source, target) => {
+		const value = '#' + source.value.trim();
+		target.value = HEX_REGEX.test(value) ? value : DEFAULT_COLOR;
+	};
+
+	const handleInput = ({ target }) => {
+		if (target === colorPicker) {
+			colorText.value = target.value.substring(1);
+		} else {
+			syncColors(colorText, colorPicker);
+		}
+		var icon = $field_icon.next('i');
+		icon.css('color', colorPicker.value);
+	};
+
+	colorPicker.addEventListener("input", handleInput);
+	colorText.addEventListener("input", handleInput);
+	colorText.addEventListener('blur', () => {
+		if (!colorText.value.trim()) {
+			colorPicker.value = DEFAULT_COLOR;
+		}
+	});
+	syncColors(colorText, colorPicker);
 });
 
 })(jQuery); // Avoid conflicts with other libraries

phpBB/styles/prosilver/template/viewtopic_body.html

@@ -194,8 +194,8 @@
 									<a href="<!-- IF postrow.contact.U_CONTACT -->{postrow.contact.U_CONTACT}<!-- ELSE -->{postrow.U_POST_AUTHOR}<!-- ENDIF -->" title="{postrow.contact.NAME}"<!-- IF $S_LAST_CELL --> class="last-cell"<!-- ENDIF -->>
 										{% EVENT viewtopic_body_contact_icon_prepend %}
 										{% if postrow.contact.ICON %}
-											{% set color = postrow.contact.ICON_COLOR ? ('color: #' ~ contact.ICON_COLOR) : '' %}
+											{% set color = postrow.contact.ICON_COLOR ? ({style: 'color: #' ~ contact.ICON_COLOR}) : [] %}
-											{{ Icon('font', contact.ICON, '', true, '', '', {'style': color}) }}
+											{{ Icon('font', contact.ICON, '', true, '', color) }}
 										{% elseif postrow.contact.ID == 'pm' %}
 											{{ Icon('font', 'message', '', true, 'far contact-icon') }}
 										{% elseif postrow.contact.ID == 'email' %}