Skip to content
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

Jump to bottom

Tweak: Button icon constrols #27296

Open
wants to merge 44 commits into
base: main
Choose a base branch
from
+204 −74
Open

Tweak: Button icon constrols #27296

Show file tree
Hide file tree
Changes from 39 commits
Commits
Show all changes
44 commits
Select commit Hold shift + click to select a range
4876a44
adding the hover effect
Mchris-hub Apr 18, 2024
c816782
moving the icon'styles controles from the content tab to the style tab
Mchris-hub Apr 18, 2024
0397592
adding icon size
Mchris-hub Apr 18, 2024
fc66eba
adding the below and above positions
Mchris-hub Apr 18, 2024
94b4a5c
adding the hover stylings when user hoverr over the button
Mchris-hub Apr 18, 2024
5e6c085
fixing typo on the below icon
Mchris-hub Apr 18, 2024
e2a9964
fixing the typo in _icon.scss file
Mchris-hub Apr 18, 2024
a8156d5
fixing the hover effet, addiing transition
Mchris-hub Apr 19, 2024
9d713f8
making the transition work
Mchris-hub Apr 19, 2024
b2b2a8f
cleaning the white spaces
Mchris-hub Apr 19, 2024
b002282
Merge branch 'main' into christian/button-styling
elementorbot Apr 22, 2024
85ae070
moving the style to _button.scsss, correcting typo
Mchris-hub Apr 27, 2024
af55972
Merge branch 'christian/button-styling' of https://github.com/Mchris-…
Mchris-hub Apr 27, 2024
59a107e
Merge remote-tracking branch 'elementor/main' into christian/button-s…
heinvv Apr 29, 2024
a457997
Update admin-apps-page.php
hein-obox Apr 29, 2024
958bc36
restructuring the _button.scss file. changing the wordpress settings
Mchris-hub Apr 29, 2024
6e5948d
Merge branch 'christian/button-styling' of https://github.com/Mchris-…
Mchris-hub Apr 29, 2024
32fb80b
cleaning the _button.scss file
Mchris-hub Apr 30, 2024
b294a9d
deleting the buttons.scss file
Mchris-hub Apr 30, 2024
a544284
adding the sizing on the svg too
Mchris-hub Apr 30, 2024
2b44780
removing empty lines, applying suggestions
Mchris-hub Apr 30, 2024
3359c83
deleting playwright files
Mchris-hub Apr 30, 2024
5dccecf
cleaning the work/ removing empty spaces and tabs
Mchris-hub Apr 30, 2024
77ff4ef
removing empty spaces and tabs
Mchris-hub May 1, 2024
873e9d9
removing tabs
Mchris-hub May 1, 2024
0e8906c
getting rid of tabs
Mchris-hub May 2, 2024
654efff
restoring original version
Mchris-hub May 2, 2024
2785ef5
Update _button.scss
hein-obox May 2, 2024
7f4eb6b
removing tabs
Mchris-hub May 2, 2024
f808224
Merge branch 'christian/button-styling' of https://github.com/Mchris-…
Mchris-hub May 2, 2024
ad35460
fixing transition issues
Mchris-hub May 9, 2024
ac84cc3
adding the --button-titlte-color varaiable
Mchris-hub May 9, 2024
fdfec7e
Style tweaks.
heinvv May 9, 2024
e39103c
Indentation.
heinvv May 9, 2024
b91bf3a
Merge branch 'main' into christian/button-styling
hein-obox May 11, 2024
ed6f79d
Update _button.scss
hein-obox May 11, 2024
9ae29c0
Update _button.scss
hein-obox May 11, 2024
1450127
Merge branch 'main' into christian/button-styling
elementorbot May 13, 2024
dd13e5a
Handle BC styling.
heinvv May 13, 2024
93ef15a
BC fix.
heinvv May 13, 2024
e3dc0d0
cleaning php file
Mchris-hub May 13, 2024
b400d01
Merge branch 'christian/button-styling' of https://github.com/Mchris-…
Mchris-hub May 13, 2024
e2a2ac4
removing white spaces
Mchris-hub May 20, 2024
d25229f
Merge remote-tracking branch 'elementor/main' into christian/button-s…
heinvv May 20, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
42 changes: 35 additions & 7 deletions assets/dev/scss/frontend/general/_button.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,11 @@
// Shared button style.
.elementor-widget-button {
--button-flex-direction: row;
--button-align-self: initial;
--button-icon-transition: all 0.3s;
--button-icon-display: initial;
}

.elementor-button {
display: inline-block;
line-height: 1;
Expand All @@ -9,7 +16,7 @@
color: #fff;
fill: #fff;
text-align: center;
transition: $transition-hover;
transition: var(--button-icon-transition);

&:hover,
&:focus,
Expand All @@ -20,18 +27,24 @@
&-content-wrapper {
display: flex;
justify-content: center;
flex-direction: row;
flex-direction: var(--button-flex-direction);
gap: 5px;
}

&-icon {
svg {
width: 1em;
height: auto;
display: var(--button-icon-display);

i {
color: var(--button-icon-color, inherit);
font-size: var(--button-icon-size);
transition: var(--button-icon-transition);
}

.e-font-icon-svg {
height: 1em;
svg {
height: var(--button-icon-size, 1em);
width: auto;
fill: var(--button-icon-color, inherit);
transition: var(--button-icon-transition);
}
}

Expand Down Expand Up @@ -83,6 +96,21 @@

span {
text-decoration: inherit; //fix for conflict with text-decoration & inline-block
align-self: var(--button-align-self);
}

&:hover {

.elementor-button-icon {

i {
color: var(--button-icon-color-hover);
}

svg {
fill: var(--button-icon-color-hover);
}
}
}
}

Expand Down
12 changes: 12 additions & 0 deletions includes/widgets/button.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -126,6 +126,18 @@ protected function register_controls() {
$this->register_button_style_controls();

$this->end_controls_section();

$this->start_controls_section(
'section_style_icon',
[
'label' => esc_html__( 'Icon', 'elementor' ),
'tab' => Controls_Manager::TAB_STYLE,
]
);

$this->register_icon_style_controls();

$this->end_controls_section();
}

/**
Expand Down
221 changes: 155 additions & 66 deletions includes/widgets/traits/button-trait.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -132,71 +132,6 @@ protected function register_button_content_controls( $args = [] ) {
]
);

$start = is_rtl() ? 'right' : 'left';
$end = is_rtl() ? 'left' : 'right';

$this->add_control(
'icon_align',
[
'label' => esc_html__( 'Icon Position', 'elementor' ),
'type' => Controls_Manager::CHOOSE,
'default' => is_rtl() ? 'row-reverse' : 'row',
'options' => [
'row' => [
'title' => esc_html__( 'Start', 'elementor' ),
'icon' => "eicon-h-align-{$start}",
],
'row-reverse' => [
'title' => esc_html__( 'End', 'elementor' ),
'icon' => "eicon-h-align-{$end}",
],
],
'selectors_dictionary' => [
'left' => is_rtl() ? 'row-reverse' : 'row',
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These dictionary values where used because the old controls where updated. We can't remove them. I believe that you triggered had changed them to 'row' and 'row-reverse', but we need to keep the original once as well.

And there is no need for an rtl conversion inside the row/row-reverse settings.

'right' => is_rtl() ? 'row' : 'row-reverse',
],
'selectors' => [
'{{WRAPPER}} .elementor-button-content-wrapper' => 'flex-direction: {{VALUE}};',
],
'condition' => array_merge(
$args['section_condition'],
[
'text!' => '',
'selected_icon[value]!' => '',
]
),
]
);

$this->add_control(
'icon_indent',
[
'label' => esc_html__( 'Icon Spacing', 'elementor' ),
'type' => Controls_Manager::SLIDER,
'size_units' => [ 'px', 'em', 'rem', 'custom' ],
'range' => [
'px' => [
'max' => 50,
],
'em' => [
'max' => 5,
],
'rem' => [
'max' => 5,
],
],
'selectors' => [
'{{WRAPPER}} .elementor-button .elementor-button-content-wrapper' => 'gap: {{SIZE}}{{UNIT}};',
],
'condition' => array_merge(
$args['section_condition'],
[
'text!' => '',
'selected_icon[value]!' => '',
]
),
]
);

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There are two empty lines here.

$this->add_control(
'button_css_id',
Expand Down Expand Up @@ -438,7 +373,7 @@ protected function register_button_style_controls( $args = [] ) {
'unit' => 's',
],
'selectors' => [
'{{WRAPPER}} .elementor-button' => 'transition-duration: {{SIZE}}{{UNIT}};',
'{{WRAPPER}}' => '--button-icon-transition: {{SIZE}}{{UNIT}};',
],
]
);
Expand Down Expand Up @@ -503,6 +438,160 @@ protected function register_button_style_controls( $args = [] ) {
);
}

protected function register_icon_style_controls( $args = [] ) {
$default_args = [
'section_condition' => [],
'alignment_default' => '',
'alignment_control_prefix_class' => 'elementor%s-align-',
'content_alignment_default' => '',
];

$args = wp_parse_args( $args, $default_args );

$start = is_rtl() ? 'right' : 'left';
$end = is_rtl() ? 'left' : 'right';

$this->add_control(
'icon_align',
[
'label' => esc_html__( 'Position', 'elementor' ),
'type' => Controls_Manager::CHOOSE,
'options' => [
'row' => [
'title' => esc_html__( 'Start', 'elementor' ),
'icon' => "eicon-h-align-{$start}",
],
'row-reverse' => [
'title' => esc_html__( 'End', 'elementor' ),
'icon' => "eicon-h-align-{$end}",
],
'column' => [
'title' => esc_html__( 'Above', 'elementor' ),
'icon' => "eicon-v-align-top",
],
'column-reverse' => [
'title' => esc_html__( 'Below', 'elementor' ),
'icon' => "eicon-v-align-bottom",
],
],
'selectors_dictionary' => [
'row' => is_rtl() ? '--button-flex-direction: row-reverse' : '--button-flex-direction: row',
'row-reverse' => is_rtl() ? '--button-flex-direction: row' : '--button-flex-direction: row-reverse',
'column' => '--button-flex-direction: column; --button-align-self: center; --button-icon-display: flex;',
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I have updated this.

  1. RTL means 'from right to left'. That doesn't have an impact on the vertical styling (Above / Below)
  2. You use the 'above' and 'below' values inside the dictionary, while you added 'column' and 'column-reverse' inside the control.
  3. I have updated the align-self and display styling, for when users use the new control values. The old control values will stay as it was.

'column-reverse' => '--button-flex-direction: column-reverse; --button-align-self: center; --button-icon-display: flex;',
],
'selectors' => [
'{{WRAPPER}}' => '{{VALUE}};',
],
'condition' => array_merge(
$args['section_condition'],
[
'text!' => '',
'selected_icon[value]!' => '',
]
),
]
);

$this->add_responsive_control(
'icon_size',
[
'label' => esc_html__( 'Size', 'elementor' ),
'type' => Controls_Manager::SLIDER,
'range' => [
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This range values can be deleted, because these are the default values.

'px' => [
'max' => 100,
],
'em' => [
'max' => 10,
],
'rem' => [
'max' => 10,
],
],
'size_units' => [ 'px', 'em', 'rem', 'vw', 'custom' ],
'selectors' => [
'{{WRAPPER}}' => '--button-icon-size: {{SIZE}}{{UNIT}}; --button-icon-display: flex; --button-align-self: center;',
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I have added the new display and align self styling here.
If the user leaves the icon size control empty, then we will keep the original styling.

],
] );

$this->add_control(
'icon_indent',
[
'label' => esc_html__( 'Spacing', 'elementor' ),
'type' => Controls_Manager::SLIDER,
'size_units' => [ 'px', 'em', 'rem', 'custom' ],
'range' => [
'px' => [
'max' => 50,
],
'em' => [
'max' => 5,
],
'rem' => [
'max' => 5,
],
],
'selectors' => [
'{{WRAPPER}} .elementor-button .elementor-button-content-wrapper' => 'gap: {{SIZE}}{{UNIT}};',
],
'condition' => array_merge(
$args['section_condition'],
[
'text!' => '',
'selected_icon[value]!' => '',
]
),
]
);


$this->start_controls_tabs( 'icons_button_style', [
'condition' => $args['section_condition'],
] );

$this->start_controls_tab(
'icon_button_normal',
[
'label' => esc_html__( 'Normal', 'elementor' ),
'condition' => $args['section_condition'],
]
);

$this->add_control( 'icon_color', [
'label' => esc_html__( 'Color', 'elementor' ),
'type' => Controls_Manager::COLOR,
'selectors' => [
'{{WRAPPER}}' => '--button-icon-color: {{VALUE}};',
],
] );

$this->end_controls_tab();


$this->start_controls_tab(
'icon_button_hover',
[
'label' => esc_html__( 'Hover', 'elementor' ),
'condition' => $args['section_condition'],
]
);

$this->add_control( 'icon_color_hover', [
'label' => esc_html__( 'Color', 'elementor' ),
'type' => Controls_Manager::COLOR,
'selectors' => [
'{{WRAPPER}}' => '--button-icon-color-hover: {{VALUE}};',
],
] );

$this->end_controls_tab();


$this->end_controls_tabs();

}

/**
* Render button widget output on the frontend.
*
Expand Down