From b68887e1d5c1a6e848e3622146e8f1b9ab35c4d4 Mon Sep 17 00:00:00 2001 From: Nurit Shahar <43785095+nuritsha@users.noreply.github.com> Date: Wed, 25 Dec 2024 15:07:48 +0200 Subject: [PATCH 1/2] Fix: Zigzag Widget alternate color & icon [TMZ-273] (#147) --- .../assets/scss/hello-plus-zigzag.scss | 57 +++++++++++++------ .../classes/render/widget-zig-zag-render.php | 24 +++----- modules/content/widgets/zig-zag.php | 14 ++--- 3 files changed, 56 insertions(+), 39 deletions(-) diff --git a/modules/content/assets/scss/hello-plus-zigzag.scss b/modules/content/assets/scss/hello-plus-zigzag.scss index d3c9c6d..5063496 100644 --- a/modules/content/assets/scss/hello-plus-zigzag.scss +++ b/modules/content/assets/scss/hello-plus-zigzag.scss @@ -127,11 +127,49 @@ display: flex; } + &.has-alternate-icon-color { + .ehp-zigzag__item-wrapper:nth-child(odd) { + .ehp-zigzag__graphic-element-container { + color: var(--zigzag-icon-color-alternate); + } + } + } + + &.has-direction { + &-start { + .ehp-zigzag__item-wrapper:nth-child(odd) { + .ehp-zigzag__item-container { + flex-direction: row; + } + } + + .ehp-zigzag__item-wrapper:nth-child(even) { + .ehp-zigzag__item-container { + flex-direction: row-reverse; + } + } + } + + &-end { + .ehp-zigzag__item-wrapper:nth-child(odd) { + .ehp-zigzag__item-container { + flex-direction: row-reverse; + } + } + + .ehp-zigzag__item-wrapper:nth-child(even) { + .ehp-zigzag__item-container { + flex-direction: row; + } + } + } + } + &__text-container { display: flex; flex-direction: column; justify-content: var(--zigzag-content-position); - + &.is-graphic-image { width: calc(100% - var(--zigzag-image-width)); } @@ -162,7 +200,7 @@ object-fit: cover; object-position: var(--zigzag-image-position); width: 100%; - } + } } &.has-icon { @@ -191,21 +229,6 @@ padding-inline-end: var(--zigzag-box-padding-inline-end); max-width: var(--zigzag-content-width); width: 100%; - - &.row-even { - flex-direction: row; - - &.has-alternate-icon-color { - - .ehp-zigzag__graphic-element-container { - color: var(--zigzag-icon-color-alternate); - } - } - } - - &.row-odd { - flex-direction: row-reverse; - } @media screen and (max-width: $screen-tablet-max) { gap: var(--zigzag-elements-gap); diff --git a/modules/content/classes/render/widget-zig-zag-render.php b/modules/content/classes/render/widget-zig-zag-render.php index db5ff54..17eb8d6 100644 --- a/modules/content/classes/render/widget-zig-zag-render.php +++ b/modules/content/classes/render/widget-zig-zag-render.php @@ -27,11 +27,17 @@ public function __construct( Zig_Zag $widget ) { } public function render(): void { - $layout_classnames = self::LAYOUT_CLASSNAME; $first_zigzag_direction = $this->settings['first_zigzag_direction']; $has_alternate_icon_color = $this->settings['has_alternate_icon_color']; - $layout_classnames .= ' has-direction-' . $first_zigzag_direction; + $layout_classnames = [ + self::LAYOUT_CLASSNAME, + 'has-direction-' . $first_zigzag_direction, + ]; + + if ( 'yes' === $has_alternate_icon_color ) { + $layout_classnames[] = 'has-alternate-icon-color'; + } $this->widget->add_render_attribute( 'layout', [ 'class' => $layout_classnames, @@ -40,24 +46,12 @@ public function render(): void { ?>
widget->print_render_attribute_string( 'layout' ); ?>> settings['graphic_element']; $repeater = 'image' === $graphic_element ? $this->settings['image_zigzag_items'] : $this->settings['icon_zigzag_items']; foreach ( $repeater as $key => $item ) { - $is_even = $remainder === $key % 2; - - $item_class = self::ITEM_CLASSNAME; - - $item_class .= ' row' . ( $is_even ? '-even' : '-odd' ); - - if ( $has_alternate_icon_color && $is_even ) { - $item_class .= ' has-alternate-icon-color'; - } - $this->widget->add_render_attribute( 'zigzag-item-' . $key, [ - 'class' => $item_class, + 'class' => self::ITEM_CLASSNAME, ] ); ?>
diff --git a/modules/content/widgets/zig-zag.php b/modules/content/widgets/zig-zag.php index fcdbc13..e5c3d42 100644 --- a/modules/content/widgets/zig-zag.php +++ b/modules/content/widgets/zig-zag.php @@ -269,16 +269,16 @@ private function add_style_zigzags_section() { 'label' => esc_html__( 'Align First Graphic', 'hello-plus' ), 'type' => Controls_Manager::CHOOSE, 'options' => [ - 'left' => [ - 'title' => esc_html__( 'Left', 'hello-plus' ), - 'icon' => 'eicon-order-start', + 'start' => [ + 'title' => esc_html__( 'Start', 'hello-plus' ), + 'icon' => 'eicon-order-' . ( is_rtl() ? 'end' : 'start' ), ], - 'right' => [ - 'title' => esc_html__( 'Right', 'hello-plus' ), - 'icon' => 'eicon-order-end', + 'end' => [ + 'title' => esc_html__( 'End', 'hello-plus' ), + 'icon' => 'eicon-order-' . ( is_rtl() ? 'start' : 'end' ), ], ], - 'default' => 'left', + 'default' => 'start', 'description' => esc_html__( 'Content will be stacked on smaller screens', 'hello-plus' ), ] ); From dc9e1319e17f939c462e08319c4300bd1d0f68d4 Mon Sep 17 00:00:00 2001 From: Nurit Shahar <43785095+nuritsha@users.noreply.github.com> Date: Wed, 25 Dec 2024 15:10:23 +0200 Subject: [PATCH 2/2] Tweak: Use eicons [TMZ-212] (#116) --- modules/content/widgets/cta.php | 2 +- modules/content/widgets/hero.php | 2 +- modules/content/widgets/zig-zag.php | 2 +- modules/forms/widgets/form.php | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/modules/content/widgets/cta.php b/modules/content/widgets/cta.php index 546e791..1e2fe5f 100644 --- a/modules/content/widgets/cta.php +++ b/modules/content/widgets/cta.php @@ -39,7 +39,7 @@ public function get_keywords(): array { } public function get_icon(): string { - return 'eicon-single-page'; + return 'eicon-ehp-cta'; } public function get_style_depends(): array { diff --git a/modules/content/widgets/hero.php b/modules/content/widgets/hero.php index 7400e74..e5d7c60 100644 --- a/modules/content/widgets/hero.php +++ b/modules/content/widgets/hero.php @@ -41,7 +41,7 @@ public function get_keywords(): array { } public function get_icon(): string { - return 'eicon-single-page'; + return 'eicon-ehp-hero'; } public function get_style_depends(): array { diff --git a/modules/content/widgets/zig-zag.php b/modules/content/widgets/zig-zag.php index e5c3d42..1bb0a79 100644 --- a/modules/content/widgets/zig-zag.php +++ b/modules/content/widgets/zig-zag.php @@ -38,7 +38,7 @@ public function get_keywords(): array { } public function get_icon(): string { - return 'eicon-time-line'; + return 'eicon-ehp-zigzag'; } public function get_style_depends(): array { diff --git a/modules/forms/widgets/form.php b/modules/forms/widgets/form.php index c20b1d5..a5fa5b4 100644 --- a/modules/forms/widgets/form.php +++ b/modules/forms/widgets/form.php @@ -30,7 +30,7 @@ public function get_title() { } public function get_icon() { - return 'eicon-form-horizontal'; + return 'eicon-ehp-forms'; } public function get_keywords() {