- wp-admin icon field integrated with new FA library;

This commit is contained in:
Mykyta Synelnikov
2024-04-23 15:26:19 +03:00
parent d58d065a68
commit 07ca89a243
6 changed files with 53 additions and 133 deletions
+1
View File
@@ -0,0 +1 @@
.um-directory .um-member-directory-header .um-member-directory-header-row.um-member-directory-search-row{justify-content:flex-start}.um-directory .um-member-directory-header .um-member-directory-header-row .um-member-directory-search-line label{margin:0 0 0 10px}.um-directory .um-member-directory-header .um-member-directory-header-row .um-member-directory-nav-line .um-member-directory-view-type{margin:0 0 0 10px}.um-directory .um-member-directory-header .um-member-directory-header-row .um-member-directory-nav-line .um-member-directory-sorting .um-member-directory-sorting-a a{margin:0 0 0 5px}.um-directory .um-member-directory-header .um-member-directory-header-row .um-member-directory-nav-line .um-member-directory-sorting .um-member-directory-sorting-a .um-new-dropdown{right:-12px;left:auto}.um-directory .um-member-directory-header .um-member-directory-header-row .um-member-directory-nav-line .um-member-directory-filters .um-member-directory-filters-a a{margin:0 0 0 5px}.um-directory .um-member-directory-header .um-member-directory-header-row .um-search .um-search-filter.um-datepicker-filter-type input,.um-directory .um-member-directory-header .um-member-directory-header-row .um-search .um-search-filter.um-timepicker-filter-type input{margin:0 0 0 5px!important}.um-directory .um-member-directory-header .um-member-directory-header-row .um-search .um-search-filter.um-datepicker-filter-type input:nth-child(even),.um-directory .um-member-directory-header .um-member-directory-header-row .um-search .um-search-filter.um-timepicker-filter-type input:nth-child(even){margin:0 5px 0 0!important}.um-directory .um-member-directory-header .um-member-directory-header-row .um-filtered-line .um-members-filter-tag{margin:0 0 5px 10px}.um-directory .um-member-directory-header .um-member-directory-header-row .um-filtered-line .um-members-filter-tag:first-child{margin-left:10px}.um-directory .um-member-directory-header .um-member-directory-header-row .um-filtered-line .um-members-filter-tag .um-members-filter-remove{margin-left:0;margin-right:10px}.um-directory .um-members-wrapper .um-members.um-members-grid .um-member .um-member-card .um-members-edit-btn a.um-edit-profile-btn:before{margin-right:0;margin-left:8px}.um-directory .um-members-wrapper .um-members.um-members-list .um-member .um-member-card-container .um-member-photo{margin:0 0 0 15px}.um-directory .um-members-wrapper .um-members.um-members-list .um-member .um-member-card-container .um-member-card .um-member-card-content{margin:0 0 0 10px}.um-directory .um-members-wrapper .um-members.um-members-list .um-member .um-member-card-container .um-member-card .um-member-card-actions .um-member-cog .um-new-dropdown{right:auto;left:0;text-align:right}.um-directory .um-members-pagination-box .um-members-pagi{align-items:center}.um-directory .um-members-pagination-box .um-members-pagi .pagi.pagi-arrow{transform:rotate(180deg)}.um-directory.uimob340 .um-member-directory-header .um-member-directory-header-row .um-member-directory-nav-line .um-member-directory-view-type{margin:0 0 0 2px}.um-directory.uimob340 .um-member-directory-header .um-member-directory-header-row .um-member-directory-nav-line .um-member-directory-sorting .um-new-dropdown{right:auto;left:0}.um-directory.uimob340 .um-members-wrapper .um-members.um-members-list .um-member .um-member-photo{margin:0 0 0 10px}.um-directory.uimob340 .um-members-wrapper .um-members.um-members-list .um-member .um-member-card-footer .um-member-card-footer-buttons{margin:0 0 0 10px}.um-directory.uimob500 .um-member-directory-header .um-member-directory-header-row .um-member-directory-nav-line .um-member-directory-view-type{margin:0 0 0 5px}.um-directory.uimob500 .um-members-wrapper .um-members.um-members-list .um-member .um-member-photo{margin:0 0 0 10px}.um-directory.uimob500 .um-members-wrapper .um-members.um-members-list .um-member .um-member-card-footer{align-items:flex-start}.um-directory.uimob500 .um-members-wrapper .um-members.um-members-list .um-member .um-member-card-footer .um-member-card-footer-buttons{margin:0 0 0 10px}.um-directory.uimob500 .um-members-wrapper .um-members.um-members-list .um-member .um-member-card-footer .um-member-card-footer-buttons .um-members-list-footer-button-wrapper{margin:0 0 5px 10px}.um-directory.uimob800 .um-members-wrapper .um-members.um-members-list .um-member .um-member-photo{margin:0 0 0 10px}.um-directory.uimob800 .um-members-wrapper .um-members.um-members-list .um-member .um-member-card-footer .um-member-card-footer-buttons{margin:0 0 0 10px}.um-directory.uimob800 .um-members-wrapper .um-members.um-members-list .um-member .um-member-card-footer .um-member-card-footer-buttons .um-members-list-footer-button-wrapper{margin:0 0 5px 10px}
-1
View File
File diff suppressed because one or more lines are too long
+1 -1
View File
@@ -101,7 +101,7 @@ UM.admin = {
// handle outdated icons and remove them after select new one.
let oldWrapper = $iconSelector.siblings('.um_admin_fonticon_wrapper');
if ( oldWrapper.length > 0 ) {
oldWrapper.find('#_icon').val( $iconSelector.val() );
oldWrapper.find('.um_old_icon_field_value').val( $iconSelector.val() );
oldWrapper.hide();
}
});
+1 -1
View File
@@ -1 +1 @@
"object"!=typeof window.UM&&(window.UM={}),"object"!=typeof window.UM.admin&&(window.UM.admin={}),UM.admin={tooltip:{all:null,init:function(){var t=jQuery(".um_tooltip");0<t.length&&(UM.admin.tooltip.all=t.tooltip({tooltipClass:"um_tooltip",content:function(){return jQuery(this).attr("title")}}))},close:function(){null!==UM.admin.tooltip.all&&0<UM.admin.tooltip.all&&"function"==typeof UM.admin.tooltip.all.tooltip&&UM.admin.tooltip.all.tooltip("close")}},colorPicker:{init:function(){var t=jQuery(".um-admin-colorpicker");t.length&&t.wpColorPicker()}},iconSelector:{init:function(){let n=jQuery(".um-icon-select-field");function t(t){var n=t.element;return void 0!==n?jQuery('<span><i class="'+jQuery(n).val()+'"></i> '+t.text+"</span>"):jQuery('<span><i class="'+t.id+'"></i> '+t.text+"</span>")}var i;n.length&&(i={ajax:{url:wp.ajax.settings.url,dataType:"json",delay:250,data:function(t){return{search:t.term,action:"um_get_icons",page:t.page||1,nonce:um_admin_scripts.nonce}},processResults:function(t,n){n.page=n.page||1;var i=[];return t.data.icons&&jQuery.each(t.data.icons,function(t,n){i.push({id:t,text:n.label})}),{results:i,pagination:{more:50*n.page<t.data.total_count}}},cache:!0},minimumInputLength:0,allowClear:!0,width:"100%",allowHtml:!0,templateSelection:t,templateResult:t,dropdownCssClass:"um-select2-icon-dropdown",containerCssClass:"um-select2-icon-container"},n.parents(".um-admin-tri").length?i.dropdownParent=n.parents(".um-admin-tri"):n.parents("._heading_text").length&&(i.dropdownParent=n.parents("._heading_text")),n.select2(i).on("change",function(){var t=n.siblings(".um_admin_fonticon_wrapper");0<t.length&&(t.find("#_icon").val(n.val()),t.hide())}))}}},jQuery(document).ready(function(){UM.admin.tooltip.init(),UM.admin.colorPicker.init(),UM.admin.iconSelector.init()});
"object"!=typeof window.UM&&(window.UM={}),"object"!=typeof window.UM.admin&&(window.UM.admin={}),UM.admin={tooltip:{all:null,init:function(){var t=jQuery(".um_tooltip");0<t.length&&(UM.admin.tooltip.all=t.tooltip({tooltipClass:"um_tooltip",content:function(){return jQuery(this).attr("title")}}))},close:function(){null!==UM.admin.tooltip.all&&0<UM.admin.tooltip.all&&"function"==typeof UM.admin.tooltip.all.tooltip&&UM.admin.tooltip.all.tooltip("close")}},colorPicker:{init:function(){var t=jQuery(".um-admin-colorpicker");t.length&&t.wpColorPicker()}},iconSelector:{init:function(){let n=jQuery(".um-icon-select-field");function t(t){var n=t.element;return void 0!==n?jQuery('<span><i class="'+jQuery(n).val()+'"></i> '+t.text+"</span>"):jQuery('<span><i class="'+t.id+'"></i> '+t.text+"</span>")}var i;n.length&&(i={ajax:{url:wp.ajax.settings.url,dataType:"json",delay:250,data:function(t){return{search:t.term,action:"um_get_icons",page:t.page||1,nonce:um_admin_scripts.nonce}},processResults:function(t,n){n.page=n.page||1;var i=[];return t.data.icons&&jQuery.each(t.data.icons,function(t,n){i.push({id:t,text:n.label})}),{results:i,pagination:{more:50*n.page<t.data.total_count}}},cache:!0},minimumInputLength:0,allowClear:!0,width:"100%",allowHtml:!0,templateSelection:t,templateResult:t,dropdownCssClass:"um-select2-icon-dropdown",containerCssClass:"um-select2-icon-container"},n.parents(".um-admin-tri").length?i.dropdownParent=n.parents(".um-admin-tri"):n.parents("._heading_text").length&&(i.dropdownParent=n.parents("._heading_text")),n.select2(i).on("change",function(){var t=n.siblings(".um_admin_fonticon_wrapper");0<t.length&&(t.find(".um_old_icon_field_value").val(n.val()),t.hide())}))}}},jQuery(document).ready(function(){UM.admin.tooltip.init(),UM.admin.colorPicker.init(),UM.admin.iconSelector.init()});
+25 -58
View File
@@ -543,74 +543,41 @@ if ( ! class_exists( 'um\admin\core\Admin_Forms' ) ) {
}
$html = '';
$id = ( ! empty( $this->form_data['prefix_id'] ) ? $this->form_data['prefix_id'] : '' ) . '_' . $field_data['id'];
$id_attr = ' id="' . esc_attr( $id ) . '" ';
$name = $field_data['id'];
$name = ! empty( $this->form_data['prefix_id'] ) ? $this->form_data['prefix_id'] . '[' . $name . ']' : $name;
$name_attr = ' name="' . esc_attr( $name ) . '" ';
$value = $this->get_field_value( $field_data );
$value_attr = ' value="' . esc_attr( $value ) . '" ';
UM()->setup()->set_icons_options();
$um_icons_list = get_option( 'um_icons_list' );
$first_activation_date = get_option( 'um_first_activation_date', false );
// @todo new version
if ( empty( $first_activation_date ) || $first_activation_date >= 1713342395 ) {
UM()->setup()->set_icons_options();
$um_icons_list = get_option( 'um_icons_list' );
if ( 'row' === $this->set_field_type ) {
?>
<p class="_heading_text">
<label for="_icon"><?php esc_html_e( 'Icon', 'ultimate-member' ); ?> <?php UM()->tooltip( __( 'Select an icon to appear in the field. Leave blank if you do not want an icon to show in the field.', 'ultimate-member' ) ); ?></label>
<select name="_icon" id="_icon" class="um-icon-select-field" data-placeholder="<?php esc_attr_e( 'Select Icon', 'ultimate-member' ); ?>" >
<option value=""><?php esc_html_e( 'Select Icon', 'ultimate-member' ); ?></option>
<?php if ( ! empty( $this->edit_mode_value ) && array_key_exists( $this->edit_mode_value, $um_icons_list ) ) { ?>
<option value="<?php echo esc_attr( $this->edit_mode_value ); ?>" selected><?php echo esc_html( $um_icons_list[ $this->edit_mode_value ]['label'] ); ?></option>
<?php } ?>
</select>
</p>
<?php } else { ?>
<div class="um-admin-tri">
<p>
<label for="_icon"><?php esc_html_e( 'Icon', 'ultimate-member' ); ?> <?php UM()->tooltip( __( 'Select an icon to appear in the field. Leave blank if you do not want an icon to show in the field.', 'ultimate-member' ) ); ?></label>
<select name="_icon" id="_icon" class="um-icon-select-field" data-placeholder="<?php esc_attr_e( 'Select Icon', 'ultimate-member' ); ?>">
<option value=""><?php esc_html_e( 'Select Icon', 'ultimate-member' ); ?></option>
<?php if ( ! empty( $this->edit_mode_value ) && array_key_exists( $this->edit_mode_value, $um_icons_list ) ) { ?>
<option value="<?php echo esc_attr( $this->edit_mode_value ); ?>" selected><?php echo esc_html( $um_icons_list[ $this->edit_mode_value ]['label'] ); ?></option>
<?php } ?>
</select>
</p>
</div>
<?php
if ( empty( $first_activation_date ) || $first_activation_date >= 1713342395 || empty( $value ) || array_key_exists( $value, $um_icons_list ) ) {
$html .= '<select ' . $name_attr . ' ' . $id_attr . ' class="um-icon-select-field" data-placeholder="' . esc_attr__( 'Select Icon', 'ultimate-member' ) . '" ><option value="">' . esc_html__( 'Select Icon', 'ultimate-member' ) . '</option>';
if ( ! empty( $value ) && array_key_exists( $value, $um_icons_list ) ) {
$html .= '<option ' . $value_attr . ' selected>' . esc_html( $um_icons_list[ $value ]['label'] ) . '</option>';
}
$html .= '</select>';
} else {
// Required modal scripts for proper functioning
UM()->admin()->enqueue()->load_modal();
$id = ( ! empty( $this->form_data['prefix_id'] ) ? $this->form_data['prefix_id'] : '' ) . '_' . $field_data['id'];
$id_attr = ' id="' . esc_attr( $id ) . '" ';
$html .= '<select name="um_ui_icon_new" id="um_ui_icon_new" class="um-icon-select-field" data-placeholder="' . esc_attr__( 'Select Icon', 'ultimate-member' ) . '" ><option value="">' . esc_html__( 'Select Icon', 'ultimate-member' ) . '</option>';
$html .= '</select>';
$name = $field_data['id'];
$name = ! empty( $this->form_data['prefix_id'] ) ? $this->form_data['prefix_id'] . '[' . $name . ']' : $name;
$name_attr = ' name="' . esc_attr( $name ) . '" ';
$value = $this->get_field_value( $field_data );
$value_attr = ' value="' . esc_attr( $value ) . '" ';
$html = '<span class="um_admin_fonticon_wrapper"><a href="javascript:void(0);" class="button" data-modal="UM_fonticons" data-modal-size="normal" data-dynamic-content="um_admin_fonticon_selector" data-arg1="" data-arg2="" data-back="" data-icon_field="' . esc_attr( $id ) . '">' . esc_html__( 'Choose Icon', 'ultimate-member' ) . '</a>
$html .= '<span class="um_admin_fonticon_wrapper"><span cla>' . esc_html__( 'Icon is outdated. Please set the new one above.', 'ultimate-member' ) . '</span>
<span class="um-admin-icon-value">';
if ( ! empty( $value ) ) {
$html .= '<i class="' . esc_attr( $value ) . '"></i>';
} else {
$html .= esc_html__( 'No Icon', 'ultimate-member' );
}
$html .= '</span><input type="hidden" ' . $name_attr . ' ' . $id_attr . ' ' . $value_attr . ' />';
if ( ! empty( $value ) ) {
$html .= '<span class="um-admin-icon-clear show"><i class="um-icon-android-cancel"></i></span>';
} else {
$html .= '<span class="um-admin-icon-clear"><i class="um-icon-android-cancel"></i></span>';
}
$html .= '<i class="' . esc_attr( $value ) . '"></i>';
$html .= '</span><input type="hidden" ' . $name_attr . ' ' . $id_attr . ' ' . $value_attr . ' class="um_old_icon_field_value"/>';
$html .= '<span class="um-admin-icon-clear show"><i class="um-icon-android-cancel"></i></span>';
$html .= '</span></span>';
// Required include the fonticons modal *.php file.
+25 -72
View File
@@ -1555,13 +1555,12 @@ if ( ! class_exists( 'um\admin\core\Admin_Metabox' ) ) {
break;
case '_icon':
UM()->setup()->set_icons_options();
$um_icons_list = get_option( 'um_icons_list' );
$first_activation_date = get_option( 'um_first_activation_date', false );
// @todo new version
if ( empty( $first_activation_date ) || $first_activation_date >= 1713342395 ) {
UM()->setup()->set_icons_options();
$um_icons_list = get_option( 'um_icons_list' );
if ( empty( $first_activation_date ) || $first_activation_date >= 1713342395 || empty( $this->edit_mode_value ) || array_key_exists( $this->edit_mode_value, $um_icons_list ) ) {
if ( 'row' === $this->set_field_type ) {
?>
@@ -1590,88 +1589,42 @@ if ( ! class_exists( 'um\admin\core\Admin_Metabox' ) ) {
</div>
<?php
}
} else {
if ( 'row' === $this->set_field_type ) {
?>
UM()->setup()->set_icons_options();
<p class="_heading_text">
<label for="um_ui_icon_new"><?php esc_html_e( 'Icon', 'ultimate-member' ); ?> <?php UM()->tooltip( __( 'Select an icon to appear in the field. Leave blank if you do not want an icon to show in the field.', 'ultimate-member' ) ); ?></label>
<select name="um_ui_icon_new" id="um_ui_icon_new" class="um-icon-select-field" data-placeholder="<?php esc_attr_e( 'Select Icon', 'ultimate-member' ); ?>" >
<option value=""><?php esc_html_e( 'Select Icon', 'ultimate-member' ); ?></option>
</select>
<span class="um_admin_fonticon_wrapper">
<span><?php esc_html_e( 'Icon is outdated. Please set the new one above.', 'ultimate-member' ); ?></span>
<input type="hidden" name="_icon" id="_icon" class="um_old_icon_field_value" value="<?php echo esc_attr( $this->edit_mode_value ); ?>" />
<span class="um-admin-icon-value"><i class="<?php echo esc_attr( $this->edit_mode_value ); ?>"></i></span>
<span class="um-admin-icon-clear show"><i class="um-icon-android-cancel"></i></span>
</span>
</p>
$um_icons_list = get_option( 'um_icons_list' );
<?php } else { ?>
if ( empty( $this->edit_mode_value ) || array_key_exists( $this->edit_mode_value, $um_icons_list ) ) {
if ( 'row' === $this->set_field_type ) {
?>
<p class="_heading_text">
<label for="_icon"><?php esc_html_e( 'Icon', 'ultimate-member' ); ?> <?php UM()->tooltip( __( 'Select an icon to appear in the field. Leave blank if you do not want an icon to show in the field.', 'ultimate-member' ) ); ?></label>
<select name="_icon" id="_icon" class="um-icon-select-field" data-placeholder="<?php esc_attr_e( 'Select Icon', 'ultimate-member' ); ?>" >
<option value=""><?php esc_html_e( 'Select Icon', 'ultimate-member' ); ?></option>
<?php if ( ! empty( $this->edit_mode_value ) && array_key_exists( $this->edit_mode_value, $um_icons_list ) ) { ?>
<option value="<?php echo esc_attr( $this->edit_mode_value ); ?>" selected><?php echo esc_html( $um_icons_list[ $this->edit_mode_value ]['label'] ); ?></option>
<?php } ?>
</select>
</p>
<?php } else { ?>
<div class="um-admin-tri">
<p>
<label for="_icon"><?php esc_html_e( 'Icon', 'ultimate-member' ); ?> <?php UM()->tooltip( __( 'Select an icon to appear in the field. Leave blank if you do not want an icon to show in the field.', 'ultimate-member' ) ); ?></label>
<select name="_icon" id="_icon" class="um-icon-select-field" data-placeholder="<?php esc_attr_e( 'Select Icon', 'ultimate-member' ); ?>">
<option value=""><?php esc_html_e( 'Select Icon', 'ultimate-member' ); ?></option>
<?php if ( ! empty( $this->edit_mode_value ) && array_key_exists( $this->edit_mode_value, $um_icons_list ) ) { ?>
<option value="<?php echo esc_attr( $this->edit_mode_value ); ?>" selected><?php echo esc_html( $um_icons_list[ $this->edit_mode_value ]['label'] ); ?></option>
<?php } ?>
</select>
</p>
</div>
<?php
}
} else {
if ( 'row' === $this->set_field_type ) {
?>
<p class="_heading_text">
<div class="um-admin-tri">
<p>
<label for="um_ui_icon_new"><?php esc_html_e( 'Icon', 'ultimate-member' ); ?> <?php UM()->tooltip( __( 'Select an icon to appear in the field. Leave blank if you do not want an icon to show in the field.', 'ultimate-member' ) ); ?></label>
<select name="um_ui_icon_new" id="um_ui_icon_new" class="um-icon-select-field" data-placeholder="<?php esc_attr_e( 'Select Icon', 'ultimate-member' ); ?>" >
<select name="um_ui_icon_new" id="um_ui_icon_new" class="um-icon-select-field" data-placeholder="<?php esc_attr_e( 'Select Icon', 'ultimate-member' ); ?>">
<option value=""><?php esc_html_e( 'Select Icon', 'ultimate-member' ); ?></option>
<?php if ( ! empty( $this->edit_mode_value ) && array_key_exists( $this->edit_mode_value, $um_icons_list ) ) { ?>
<option value="<?php echo esc_attr( $this->edit_mode_value ); ?>" selected><?php echo esc_html( $um_icons_list[ $this->edit_mode_value ]['label'] ); ?></option>
<?php } ?>
</select>
<span class="um_admin_fonticon_wrapper">
<span><?php esc_html_e( 'Icon is outdated. Please set the new one above.', 'ultimate-member' ); ?></span>
<input type="hidden" name="_icon" id="_icon" value="<?php echo ! empty( $this->edit_mode_value ) ? esc_attr( $this->edit_mode_value ) : ''; ?>" />
<input type="hidden" name="_icon" id="_icon" class="um_old_icon_field_value" value="<?php echo esc_attr( $this->edit_mode_value ); ?>" />
<span class="um-admin-icon-value"><i class="<?php echo esc_attr( $this->edit_mode_value ); ?>"></i></span>
<span class="um-admin-icon-clear show"><i class="um-icon-android-cancel"></i></span>
</span>
</p>
</div>
<?php } else { ?>
<div class="um-admin-tri">
<p>
<label for="um_ui_icon_new"><?php esc_html_e( 'Icon', 'ultimate-member' ); ?> <?php UM()->tooltip( __( 'Select an icon to appear in the field. Leave blank if you do not want an icon to show in the field.', 'ultimate-member' ) ); ?></label>
<select name="um_ui_icon_new" id="um_ui_icon_new" class="um-icon-select-field" data-placeholder="<?php esc_attr_e( 'Select Icon', 'ultimate-member' ); ?>">
<option value=""><?php esc_html_e( 'Select Icon', 'ultimate-member' ); ?></option>
<?php if ( ! empty( $this->edit_mode_value ) && array_key_exists( $this->edit_mode_value, $um_icons_list ) ) { ?>
<option value="<?php echo esc_attr( $this->edit_mode_value ); ?>" selected><?php echo esc_html( $um_icons_list[ $this->edit_mode_value ]['label'] ); ?></option>
<?php } ?>
</select>
<span class="um_admin_fonticon_wrapper">
<span><?php esc_html_e( 'Icon is outdated. Please set the new one above.', 'ultimate-member' ); ?></span>
<input type="hidden" name="_icon" id="_icon" value="<?php echo ! empty( $this->edit_mode_value ) ? esc_attr( $this->edit_mode_value ) : ''; ?>" />
<span class="um-admin-icon-value"><i class="<?php echo esc_attr( $this->edit_mode_value ); ?>"></i></span>
<span class="um-admin-icon-clear show"><i class="um-icon-android-cancel"></i></span>
</span>
</p>
</div>
<?php
}
<?php
}
}
break;