makary/phpbb
1
0
Fork 0
mirror of https://github.com/phpbb/phpbb.git synced 2025-06-07 20:08:53 +00:00
Code Issues Projects Releases Packages Wiki Activity

[ticket/16413] Add icon color picker

Browse source 
PHPBB3-16413
This commit is contained in:
rxu 2025-05-19 17:37:52 +07:00
parent 9fad235917
commit dbe91cac88
No known key found for this signature in database
GPG key ID: 8117904FEDEFDD17
4 changed files with 72 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
phpBB/adm/style/acp_profile.html
View file

@ -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_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" 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') }}" />
<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 %}

26
phpBB/adm/style/admin.css
View file

@ -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%;
}

41
phpBB/adm/style/ajax.js
View file

@ -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

4
phpBB/styles/prosilver/template/viewtopic_body.html
View file

@ -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) : '' %}
{{ Icon('font', contact.ICON, '', true, '', '', {'style': color}) }}
{% set color = postrow.contact.ICON_COLOR ? ({style: 'color: #' ~ contact.ICON_COLOR}) : [] %}
{{ Icon('font', contact.ICON, '', true, '', color) }}
{% elseif postrow.contact.ID == 'pm' %}
{{ Icon('font', 'message', '', true, 'far contact-icon') }}
{% elseif postrow.contact.ID == 'email' %}