Skip to content

Commit

Permalink
Fix: Conversion Center - Contact Buttons v1 - qa remediation (element…
Browse files Browse the repository at this point in the history 
…or#27362)

## PR Checklist
<!-- 
Please check if your PR fulfills the following requirements:
**Filling out the template is required.** Any pull request that does not
include enough information to be reviewed in a timely manner may be
closed at the maintainers' discretion.
 -->
- [ ] The commit message follows our guidelines:
https://github.com/elementor/elementor/blob/master/.github/CONTRIBUTING.md


## PR Type
What kind of change does this PR introduce?
<!-- Please check the one that applies to this PR using "x" with no
spaces eg: [x]. -->
- [x] Bugfix
- [ ] Feature
- [ ] Code style update (formatting, local variables)
- [ ] Refactoring (no functional changes, no api changes)
- [ ] Build related changes
- [ ] CI related changes
- [ ] Documentation content changes
- [ ] Other... Please describe:

## Summary

This PR can be summarized in the following changelog entry:

* QA remediation for Contact Buttons v1

## Description
An explanation of what is done in this PR

*

## Test instructions
This PR can be tested by following these steps:

*

## Quality assurance

- [ ] I have tested this code to the best of my abilities
- [ ] I have added unittests to verify the code works as intended
- [ ] Docs have been added / updated (for bug fixes / features)

Fixes #
  • Loading branch information
@mserino
mserino committed May 20, 2024
1 parent ecec5a4 commit cdfcdc4
Show file tree
Hide file tree
Showing 4 changed files with 61 additions and 36 deletions.
17 changes: 15 additions & 2 deletions modules/conversion-center/assets/scss/widgets/contact-buttons-var-1.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,8 +46,6 @@

svg {
fill: var(--e-contact-buttons-contact-button-icon);
height: 28px;
width: 28px;
}

&:hover,
Expand All @@ -63,16 +61,31 @@
&.has-size-small {
height: var(--e-contact-buttons-icon-size-small);
width: var(--e-contact-buttons-icon-size-small);

svg {
height: 26px;
width: 26px;
}
}

&.has-size-medium {
height: var(--e-contact-buttons-icon-size-medium);
width: var(--e-contact-buttons-icon-size-medium);

svg {
height: 28px;
width: 28px;
}
}

&.has-size-large {
height: var(--e-contact-buttons-icon-size-large);
width: var(--e-contact-buttons-icon-size-large);

svg {
height: 32px;
width: 32px;
}
}
}
}
10 changes: 7 additions & 3 deletions modules/conversion-center/assets/scss/widgets/contact-buttons-vars.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,13 @@ $contact-buttons-border-radius-round: 50px;
$contact-buttons-border-radius-rounded: 20px;
$contact-buttons-border-radius-sharp: 0;

$contact-buttons-size-small: 65px;
$contact-buttons-size-medium: 75px;
$contact-buttons-size-large: 85px;
$contact-buttons-size-small: 55px;
$contact-buttons-size-medium: 65px;
$contact-buttons-size-large: 75px;

$contact-buttons-profile-image-size-small: 65px;
$contact-buttons-profile-image-size-medium: 75px;
$contact-buttons-profile-image-size-large: 85px;

$contact-buttons-icon-size-small: 45px;
$contact-buttons-icon-size-medium: 50px;
Expand Down
28 changes: 16 additions & 12 deletions modules/conversion-center/assets/scss/widgets/contact-buttons.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,9 @@
--e-contact-buttons-size-small: #{$contact-buttons-size-small};
--e-contact-buttons-size-medium: #{$contact-buttons-size-medium};
--e-contact-buttons-size-large: #{$contact-buttons-size-large};
--e-contact-buttons-profile-image-size-small: #{$contact-buttons-profile-image-size-small};
--e-contact-buttons-profile-image-size-medium: #{$contact-buttons-profile-image-size-medium};
--e-contact-buttons-profile-image-size-large: #{$contact-buttons-profile-image-size-large};
--e-contact-buttons-dot: #{$contact-buttons-dots-color};
--e-contact-buttons-dot-size: #{$contact-buttons-dots-size};
--e-contact-buttons-profile-dot-bg: #{$contact-buttons-profile-dot-bg};
Expand Down Expand Up @@ -232,18 +235,18 @@
}

&.has-size-small img {
height: var(--e-contact-buttons-size-small);
width: var(--e-contact-buttons-size-small);
height: var(--e-contact-buttons-profile-image-size-small);
width: var(--e-contact-buttons-profile-image-size-small);
}

&.has-size-medium img {
height: var(--e-contact-buttons-size-medium);
width: var(--e-contact-buttons-size-medium);
height: var(--e-contact-buttons-profile-image-size-medium);
width: var(--e-contact-buttons-profile-image-size-medium);
}

&.has-size-large img {
height: var(--e-contact-buttons-size-large);
width: var(--e-contact-buttons-size-large);
height: var(--e-contact-buttons-profile-image-size-large);
width: var(--e-contact-buttons-profile-image-size-large);
}

&.has-dot::after {
Expand Down Expand Up @@ -303,6 +306,7 @@
background-color: var(--e-contact-buttons-button-bg);
border-radius: 50%;
border: 0;
box-shadow: var(--e-contact-buttons-box-shadow);
display: flex;
justify-content: center;
position: relative;
Expand Down Expand Up @@ -343,8 +347,8 @@
width: var(--e-contact-buttons-size-small);

svg {
height: 26px;
width: 26px;
height: 32px;
width: 32px;
}
}

Expand All @@ -353,8 +357,8 @@
width: var(--e-contact-buttons-size-medium);

svg {
height: 30px;
width: 30px;
height: 38px;
width: 38px;
}
}

Expand All @@ -363,8 +367,8 @@
width: var(--e-contact-buttons-size-large);

svg {
height: 32px;
width: 32px;
height: 42px;
width: 42px;
}
}
}
Expand Down
42 changes: 23 additions & 19 deletions modules/conversion-center/base/widget-contact-button-base.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,6 @@ public static function get_configuration() {
'has_typing_animation' => true,
],
'contact_section' => [
'section_name' => esc_html__( 'Contact', 'elementor' ),
'has_tooltip' => false,
'has_cta_text' => true,
'icon_text_label' => esc_html__( 'Text', 'elementor' ),
Expand All @@ -63,9 +62,6 @@ public static function get_configuration() {
[
'contact_icon_platform' => Social_Network_Provider::WHATSAPP,
],
[
'contact_icon_platform' => Social_Network_Provider::MESSENGER,
],
[
'contact_icon_platform' => Social_Network_Provider::EMAIL,
],
Expand All @@ -75,6 +71,9 @@ public static function get_configuration() {
[
'contact_icon_platform' => Social_Network_Provider::VIBER,
],
[
'contact_icon_platform' => Social_Network_Provider::MESSENGER,
],
],
],
],
Expand Down Expand Up @@ -436,7 +435,7 @@ protected function add_contact_section(): void {
$this->start_controls_section(
'contact_section',
[
'label' => $config['content']['contact_section']['section_name'],
'label' => esc_html__( 'Contact Buttons', 'elementor' ),
'tab' => Controls_Manager::TAB_CONTENT,
]
);
Expand Down Expand Up @@ -664,14 +663,16 @@ protected function add_contact_section(): void {

protected function get_icon_title_field(): string {
$platform_icons_js = json_encode( Social_Network_Provider::get_social_networks_icons() );
$platform_text_js = json_encode( Social_Network_Provider::get_social_networks_text() );

return <<<JS
<#
elementor.helpers.enqueueIconFonts( 'fa-solid' );
elementor.helpers.enqueueIconFonts( 'fa-brands' );
const mapping = {$platform_icons_js};
const text_mapping = {$platform_text_js};
#>
<i class='{{{ mapping[contact_icon_platform] }}}' ></i> {{{ contact_icon_platform }}}
<i class='{{{ mapping[contact_icon_platform] }}}' ></i> {{{ text_mapping[contact_icon_platform] }}}
JS;
}

Expand Down Expand Up @@ -972,6 +973,7 @@ protected function add_style_chat_button_section(): void {
}

protected function add_style_top_bar_section(): void {
$config = static::get_configuration();

$this->start_controls_section(
'style_top_bar_section',
Expand Down Expand Up @@ -1011,18 +1013,20 @@ protected function add_style_top_bar_section(): void {
]
);

$this->add_control(
'style_top_bar_colors',
[
'label' => esc_html__( 'Colors', 'elementor' ),
'type' => Controls_Manager::SELECT,
'default' => 'default',
'options' => [
'default' => esc_html__( 'Default', 'elementor' ),
'custom' => esc_html__( 'Custom', 'elementor' ),
],
]
);
if ( $config['style']['has_platform_colors'] ) {
$this->add_control(
'style_top_bar_colors',
[
'label' => esc_html__( 'Colors', 'elementor' ),
'type' => Controls_Manager::SELECT,
'default' => 'default',
'options' => [
'default' => esc_html__( 'Default', 'elementor' ),
'custom' => esc_html__( 'Custom', 'elementor' ),
],
]
);
}

$this->add_control(
'style_top_bar_name_heading',
Expand Down Expand Up @@ -1317,7 +1321,7 @@ protected function add_style_contact_section(): void {
$this->start_controls_section(
'style_contact_section',
[
'label' => $config['content']['contact_section']['section_name'],
'label' => esc_html__( 'Contact Buttons', 'elementor' ),
'tab' => Controls_Manager::TAB_STYLE,
]
);
Expand Down

0 comments on commit cdfcdc4

Please sign in to comment.