Skip to content

Use tooltip icons to show tooltips rather than label/input elements #2130

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Crabcyborg merged 6 commits into from
Dec 4, 2024
Merged

Use tooltip icons to show tooltips rather than label/input elements #2130

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
2874296
Add additional remove icon for css and bcc fields
AbdiTolesa Nov 21, 2024
b5b0bba
Change icons to tooltip icon
AbdiTolesa Nov 29, 2024
10ffb86
Fix potential bug
AbdiTolesa Nov 29, 2024
67ead19
Remove tooltip from label/input elements and use tooltip icon instead
AbdiTolesa Dec 2, 2024
91722c5
Add reply to field remove trigger
AbdiTolesa Dec 3, 2024
46665c0
Fix issue with closing BCC
Crabcyborg Dec 4, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 3 additions & 2 deletions classes/views/frm-form-actions/_action_inside.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,10 +9,11 @@

<div class="frm_grid_container frm_no_p_margin">
<p class="frm6 frm_form_field">
<label for="<?php echo esc_attr( $action_control->get_field_id( 'action_post_title' ) ); ?>" <?php FrmAppHelper::maybe_add_tooltip( 'action_title' ); ?>>
<label for="<?php echo esc_attr( $action_control->get_field_id( 'action_post_title' ) ); ?>">
<?php esc_html_e( 'Action Name', 'formidable' ); ?>
<span <?php FrmAppHelper::maybe_add_tooltip( 'action_title' ); ?>><?php FrmAppHelper::icon_by_class( 'frm_icon_font frm_tooltip_icon frm_svg14' ); ?></span>
</label>
<input type="text" name="<?php echo esc_attr( $action_control->get_field_name( 'post_title', '' ) ); ?>" value="<?php echo esc_attr( $form_action->post_title ); ?>" class="large-text <?php FrmAppHelper::maybe_add_tooltip( 'action_title', 'open' ); ?>" id="<?php echo esc_attr( $action_control->get_field_id( 'action_post_title' ) ); ?>" />
<input type="text" name="<?php echo esc_attr( $action_control->get_field_name( 'post_title', '' ) ); ?>" value="<?php echo esc_attr( $form_action->post_title ); ?>" class="large-text" id="<?php echo esc_attr( $action_control->get_field_id( 'action_post_title' ) ); ?>" />
</p>
<?php

Expand Down
39 changes: 22 additions & 17 deletions classes/views/frm-form-actions/_email_settings.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,28 +14,30 @@
</p>

<p class="frm_has_shortcodes frm_to_row frm_email_row">
<label for="<?php echo esc_attr( $this->get_field_id( 'email_to' ) ); ?>" <?php FrmAppHelper::maybe_add_tooltip( 'email_to' ); ?>>
<label for="<?php echo esc_attr( $this->get_field_id( 'email_to' ) ); ?>">
<?php esc_html_e( 'To', 'formidable' ); ?>
<span <?php FrmAppHelper::maybe_add_tooltip( 'email_to' ); ?>><?php FrmAppHelper::icon_by_class( 'frm_icon_font frm_tooltip_icon frm_svg14' ); ?></span>
</label>
<input type="text" name="<?php echo esc_attr( $this->get_field_name( 'email_to' ) ); ?>" value="<?php echo esc_attr( $form_action->post_content['email_to'] ); ?>" class="frm_not_email_to large-text <?php FrmAppHelper::maybe_add_tooltip( 'email_to', 'open' ); ?>" id="<?php echo esc_attr( $this->get_field_id( 'email_to' ) ); ?>" />
<input type="text" name="<?php echo esc_attr( $this->get_field_name( 'email_to' ) ); ?>" value="<?php echo esc_attr( $form_action->post_content['email_to'] ); ?>" class="frm_not_email_to large-text" id="<?php echo esc_attr( $this->get_field_id( 'email_to' ) ); ?>" />
</p>

<p class="frm_has_shortcodes frm_cc_row frm_email_row<?php echo empty( $form_action->post_content['cc'] ) ? ' frm_hidden' : ''; ?>">
<label for="<?php echo esc_attr( $this->get_field_id( 'cc' ) ); ?>" <?php FrmAppHelper::maybe_add_tooltip( 'cc' ); ?>>
<label for="<?php echo esc_attr( $this->get_field_id( 'cc' ) ); ?>">
<?php esc_html_e( 'CC', 'formidable' ); ?>
<a href="javascript:void(0)" class="frm_remove_field" data-emailrow="cc"><?php FrmAppHelper::icon_by_class( 'frm_icon_font frm_cancel1_icon frm_svg14' ); ?></a>
<span <?php FrmAppHelper::maybe_add_tooltip( 'cc' ); ?>><?php FrmAppHelper::icon_by_class( 'frm_icon_font frm_tooltip_icon frm_svg14' ); ?></span>
</label>

<input type="text" name="<?php echo esc_attr( $this->get_field_name( 'cc' ) ); ?>" value="<?php echo esc_attr( $form_action->post_content['cc'] ); ?>" class="frm_not_email_to large-text <?php FrmAppHelper::maybe_add_tooltip( 'cc', 'open' ); ?>" id="<?php echo esc_attr( $this->get_field_id( 'cc' ) ); ?>" />
<input type="text" name="<?php echo esc_attr( $this->get_field_name( 'cc' ) ); ?>" value="<?php echo esc_attr( $form_action->post_content['cc'] ); ?>" class="frm_not_email_to large-text" id="<?php echo esc_attr( $this->get_field_id( 'cc' ) ); ?>" />
<a href="javascript:void(0)" class="frm_remove_field" data-emailrow="cc"><?php FrmAppHelper::icon_by_class( 'frm_icon_font frm_close_icon frm_svg14' ); ?></a>
Comment thread
AbdiTolesa marked this conversation as resolved.
</p>

<p class="frm_has_shortcodes frm_bcc_row frm_email_row<?php echo empty( $form_action->post_content['bcc'] ) ? ' frm_hidden' : ''; ?>">
<label for="<?php echo esc_attr( $this->get_field_id( 'bcc' ) ); ?>" <?php FrmAppHelper::maybe_add_tooltip( 'bcc' ); ?>>
<label for="<?php echo esc_attr( $this->get_field_id( 'bcc' ) ); ?>">
<?php esc_html_e( 'BCC', 'formidable' ); ?>
<a href="javascript:void(0)" class="frm_remove_field" data-emailrow="bcc"><?php FrmAppHelper::icon_by_class( 'frm_icon_font frm_cancel1_icon frm_svg14' ); ?></a>
<span <?php FrmAppHelper::maybe_add_tooltip( 'bcc' ); ?>><?php FrmAppHelper::icon_by_class( 'frm_icon_font frm_tooltip_icon frm_svg14' ); ?></span>
</label>

<input type="text" name="<?php echo esc_attr( $this->get_field_name( 'bcc' ) ); ?>" value="<?php echo esc_attr( $form_action->post_content['bcc'] ); ?>" class="frm_not_email_to large-text <?php FrmAppHelper::maybe_add_tooltip( 'bcc', 'open' ); ?>" id="<?php echo esc_attr( $this->get_field_id( 'bcc' ) ); ?>" />
<input type="text" name="<?php echo esc_attr( $this->get_field_name( 'bcc' ) ); ?>" value="<?php echo esc_attr( $form_action->post_content['bcc'] ); ?>" class="frm_not_email_to large-text" id="<?php echo esc_attr( $this->get_field_id( 'bcc' ) ); ?>" />
<a href="javascript:void(0)" class="frm_remove_field" data-emailrow="bcc"><?php FrmAppHelper::icon_by_class( 'frm_icon_font frm_close_icon frm_svg14' ); ?></a>
</p>

<p class="frm_reply_to_container">
Expand All @@ -45,31 +47,34 @@
</p>

<p class="frm_has_shortcodes frm_from_row frm_email_row">
<label for="<?php echo esc_attr( $this->get_field_id( 'from' ) ); ?>" <?php FrmAppHelper::maybe_add_tooltip( 'from' ); ?>>
<label for="<?php echo esc_attr( $this->get_field_id( 'from' ) ); ?>">
<?php esc_html_e( 'From', 'formidable' ); ?>
<span <?php FrmAppHelper::maybe_add_tooltip( 'from' ); ?>><?php FrmAppHelper::icon_by_class( 'frm_icon_font frm_tooltip_icon frm_svg14' ); ?></span>
</label>

<input type="text" name="<?php echo esc_attr( $this->get_field_name( 'from' ) ); ?>" value="<?php echo esc_attr( $form_action->post_content['from'] ); ?>" class="frm_not_email_to large-text <?php FrmAppHelper::maybe_add_tooltip( 'from', 'open' ); ?>" id="<?php echo esc_attr( $this->get_field_id( 'from' ) ); ?>" />
<input type="text" name="<?php echo esc_attr( $this->get_field_name( 'from' ) ); ?>" value="<?php echo esc_attr( $form_action->post_content['from'] ); ?>" class="frm_not_email_to large-text" id="<?php echo esc_attr( $this->get_field_id( 'from' ) ); ?>" />
</p>

<p class="frm_error_style frm_from_to_match_row <?php echo ( $form_action->post_content['from'] !== $form_action->post_content['email_to'] ? 'frm_hidden' : '' ); ?>" data-emailrow="from_to_warning">
<?php esc_html_e( 'Warning: If you are sending an email to the user, the To and From fields should not match.', 'formidable' ); ?>
</p>

<p class="frm_has_shortcodes frm_reply_to_row frm_email_row<?php echo empty( $form_action->post_content['reply_to'] ) ? ' frm_hidden' : ''; ?>">
<label for="<?php echo esc_attr( $this->get_field_id( 'reply_to' ) ); ?>" <?php FrmAppHelper::maybe_add_tooltip( 'reply_to' ); ?>>
<label for="<?php echo esc_attr( $this->get_field_id( 'reply_to' ) ); ?>">
<?php esc_html_e( 'Reply To', 'formidable' ); ?>
<a href="javascript:void(0)" class="frm_remove_field" data-emailrow="reply_to"><?php FrmAppHelper::icon_by_class( 'frm_icon_font frm_cancel1_icon frm_svg14' ); ?></a>
<span <?php FrmAppHelper::maybe_add_tooltip( 'reply_to' ); ?>><?php FrmAppHelper::icon_by_class( 'frm_icon_font frm_tooltip_icon frm_svg14' ); ?></span>
</label>

<input type="text" name="<?php echo esc_attr( $this->get_field_name( 'reply_to' ) ); ?>" value="<?php echo esc_attr( $form_action->post_content['reply_to'] ); ?>" class="frm_not_email_to large-text <?php FrmAppHelper::maybe_add_tooltip( 'reply_to', 'open' ); ?>" id="<?php echo esc_attr( $this->get_field_id( 'reply_to' ) ); ?>" />
<input type="text" name="<?php echo esc_attr( $this->get_field_name( 'reply_to' ) ); ?>" value="<?php echo esc_attr( $form_action->post_content['reply_to'] ); ?>" class="frm_not_email_to large-text" id="<?php echo esc_attr( $this->get_field_id( 'reply_to' ) ); ?>" />
<a href="javascript:void(0)" class="frm_remove_field" data-emailrow="reply_to"><?php FrmAppHelper::icon_by_class( 'frm_icon_font frm_close_icon frm_svg14' ); ?></a>
</p>

<p class="frm_has_shortcodes">
<label for="<?php echo esc_attr( $this->get_field_id( 'email_subject' ) ); ?>" <?php FrmAppHelper::maybe_add_tooltip( 'email_subject', '', $form->name ); ?>>
<p class="frm_has_shortcodes frm_email_row">
<label for="<?php echo esc_attr( $this->get_field_id( 'email_subject' ) ); ?>">
<?php esc_html_e( 'Subject', 'formidable' ); ?>
<span <?php FrmAppHelper::maybe_add_tooltip( 'email_subject', '', $form->name ); ?>><?php FrmAppHelper::icon_by_class( 'frm_icon_font frm_tooltip_icon frm_svg14' ); ?></span>
</label>
<input type="text" name="<?php echo esc_attr( $this->get_field_name( 'email_subject' ) ); ?>" class="frm_not_email_subject large-text <?php FrmAppHelper::maybe_add_tooltip( 'email_subject', 'open', $form->name ); ?>" id="<?php echo esc_attr( $this->get_field_id( 'email_subject' ) ); ?>" value="<?php echo esc_attr( $form_action->post_content['email_subject'] ); ?>" />
<input type="text" name="<?php echo esc_attr( $this->get_field_name( 'email_subject' ) ); ?>" class="frm_not_email_subject large-text" id="<?php echo esc_attr( $this->get_field_id( 'email_subject' ) ); ?>" value="<?php echo esc_attr( $form_action->post_content['email_subject'] ); ?>" />
</p>

<p class="frm_has_shortcodes">
Expand Down
15 changes: 14 additions & 1 deletion css/frm_admin.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5829,6 +5829,19 @@ p.frm_reply_to_container {
vertical-align: bottom;
}

.frm_cc_row.frm_email_row .frm-with-right-icon,
.frm_bcc_row.frm_email_row .frm-with-right-icon,
.frm_reply_to_row.frm_email_row .frm-with-right-icon {
width: calc(100% - 20px);
display: inline-block;
}

.frm_email_row .frm_remove_field .frm_close_icon {
position: relative;
fill: var(--grey-500);
vertical-align: middle;
}

.frm_logic_field_opts {
max-width: 35%;
}
Expand Down Expand Up @@ -6113,7 +6126,7 @@ span.howto {
text-align: start;
}

.frm_form_action_settings .frm_email_row .frm_remove_field svg {
.frm_form_action_settings .frm_email_row .frm_tooltip_icon {
position: relative;
bottom: 2px;
}
Expand Down
4 changes: 4 additions & 0 deletions js/formidable_admin.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8570,6 +8570,10 @@ function frmAdminBuildJS() {
closeSvg = document.querySelectorAll( '.frm_has_shortcodes use' );
for ( u = 0; u < closeSvg.length; u++ ) {
if ( closeSvg[u].getAttributeNS( 'http://www.w3.org/1999/xlink', 'href' ) === '#frm_close_icon' ) {
if ( closeSvg[u].closest( '.frm_remove_field' ) ) {
// Don't change the icon for the email fields remove button.
continue;
}
closeSvg[u].setAttributeNS( 'http://www.w3.org/1999/xlink', 'href', '#frm_more_horiz_solid_icon' );
}
}
Expand Down