From ca3e43bc3b89a6e1165b77b2d37edec2414bac16 Mon Sep 17 00:00:00 2001 From: Tanner Reits Date: Fri, 11 Oct 2024 13:04:14 -0400 Subject: [PATCH] transition indicator color --- core/src/components/segment/segment.scss | 3 ++- core/src/components/segment/segment.tsx | 12 ++++++++++-- 2 files changed, 12 insertions(+), 3 deletions(-) diff --git a/core/src/components/segment/segment.scss b/core/src/components/segment/segment.scss index 571b9c775c..311bc40949 100644 --- a/core/src/components/segment/segment.scss +++ b/core/src/components/segment/segment.scss @@ -39,7 +39,8 @@ height: 100%; div { - background: red; + background-color: red; + transition: background-color 0.3s linear; height: 100%; } } diff --git a/core/src/components/segment/segment.tsx b/core/src/components/segment/segment.tsx index 243ebe0840..ce012a3aaa 100644 --- a/core/src/components/segment/segment.tsx +++ b/core/src/components/segment/segment.tsx @@ -212,15 +212,17 @@ export class Segment implements ComponentInterface { const buttons = this.getButtons(); const activeButtonIndex = buttons.findIndex((ref) => ref.value === this.value); if (activeButtonIndex >= 0) { - const activeButtonStyles = buttons[activeButtonIndex].getBoundingClientRect(); + const activeButtonPosition = buttons[activeButtonIndex].getBoundingClientRect(); + const activeButtonStyles = getComputedStyle(buttons[activeButtonIndex]); const indicator = this.el.shadowRoot!.querySelector('.segment-indicator') as HTMLDivElement | null; if (indicator) { const startingX = buttons .slice(0, activeButtonIndex) .reduce((acc, ref) => acc + ref.getBoundingClientRect().width, 0); - indicator.style.width = `${activeButtonStyles.width}px`; + indicator.style.width = `${activeButtonPosition.width}px`; indicator.style.left = `${startingX}px`; + indicator.style.backgroundColor = activeButtonStyles.getPropertyValue('--indicator-color'); // setTimeout(() => { // indicator.style.transition = 'left 0.3s linear, width 0.3s linear'; @@ -420,6 +422,12 @@ export class Segment implements ComponentInterface { scrollDistance > 0 ? `${distanceToCurrentButton + currentButton.getBoundingClientRect().width * scrollDistancePercentage}px` : `${distanceToNextButton + nextButtonWidth - nextButtonWidth * scrollDistancePercentage}px`; + + // Transition the color of the indicator if we've crossed the halfway point + if (scrollDistancePercentage > 0.5) { + const color = getComputedStyle(nextButton).getPropertyValue('--indicator-color'); + indicator.querySelector('div')!.style.backgroundColor = color; + } } } }