Skip to content

Commit 1ac1d46

Browse files
istarkovistarkov
authored
experimental: Use ordinary range UI for scroll animations (#5152)
## Description 1. What is this PR about (link the issue and add a short description) ## Steps for reproduction 1. click button 2. expect xyz ## Code Review - [ ] hi @kof, I need you to do - conceptual review (architecture, feature-correctness) - detailed review (read every line) - test it on preview ## Before requesting a review - [ ] made a self-review - [ ] added inline comments where things may be not obvious (the "why", not "what") ## Before merging - [ ] tested locally and on preview environment (preview dev login: 0000) - [ ] updated [test cases](https://github.com/webstudio-is/webstudio/blob/main/apps/builder/docs/test-cases.md) document - [ ] added tests - [ ] if any new env variables are added, added them to `.env` file
1 parent ca6cfa7 commit 1ac1d46

File tree

1 file changed

+117
-109
lines changed

1 file changed

+117
-109
lines changed

‎apps/builder/app/builder/features/settings-panel/props-section/animation/animation-panel-content.tsx‎

Lines changed: 117 additions & 109 deletions
Original file line numberDiff line numberDiff line change
@@ -422,15 +422,19 @@ export const AnimationPanelContent = ({
422422
() => endRangeValue === undefined
423423
);
424424

425-
const timelineRangeDescriptions =
426-
type === "scroll" ? scrollTimelineRangeName : viewTimelineRangeName;
425+
const isScrollAnimation = type === "scroll";
426+
427+
const timelineRangeDescriptions = isScrollAnimation
428+
? scrollTimelineRangeName
429+
: viewTimelineRangeName;
427430

428431
const timelineRangeNames = Object.keys(timelineRangeDescriptions);
429432

430433
const isRangeEndEnabled = value.timing.duration === undefined;
431434

432-
const animationSchema =
433-
type === "scroll" ? scrollAnimationSchema : viewAnimationSchema;
435+
const animationSchema = isScrollAnimation
436+
? scrollAnimationSchema
437+
: viewAnimationSchema;
434438

435439
const handleChange = (rawValue: unknown, isEphemeral: boolean) => {
436440
if (rawValue === undefined) {
@@ -583,59 +587,61 @@ export const AnimationPanelContent = ({
583587
<FieldLabel description="When the animation ends, based on how much of the subject is visible">
584588
Range End
585589
</FieldLabel>
586-
<ToggleGroup
587-
value={
588-
isAdvancedRangeEnd ? "advanced" : (endRangeValue ?? "advanced")
589-
}
590-
type="single"
591-
>
592-
{simplifiedEndRanges.map(
593-
([toggleValue, icon, range, description], index) => (
594-
<Tooltip
595-
key={toggleValue}
596-
content={`The animation ends ${description}`}
597-
variant="wrapped"
598-
>
599-
<ToggleGroupButton
600-
disabled={
601-
!isRangeEndEnabled ||
602-
(!isAdvancedRangeStart && index < startRangeIndex)
603-
}
604-
value={toggleValue}
605-
onClick={() => {
606-
setIsAdvancedRangeEnd(false);
607-
handleChange(
608-
{
609-
...value,
610-
timing: {
611-
...value.timing,
612-
rangeStart: value.timing.rangeStart,
613-
rangeEnd: range,
614-
},
615-
},
616-
false
617-
);
618-
}}
590+
{!isScrollAnimation && (
591+
<ToggleGroup
592+
value={
593+
isAdvancedRangeEnd ? "advanced" : (endRangeValue ?? "advanced")
594+
}
595+
type="single"
596+
>
597+
{simplifiedEndRanges.map(
598+
([toggleValue, icon, range, description], index) => (
599+
<Tooltip
600+
key={toggleValue}
601+
content={`The animation ends ${description}`}
602+
variant="wrapped"
619603
>
620-
{icon}
621-
</ToggleGroupButton>
622-
</Tooltip>
623-
)
624-
)}
625-
626-
<Tooltip content="Set custom range">
627-
<ToggleGroupButton
628-
disabled={!isRangeEndEnabled}
629-
onClick={() => {
630-
setIsAdvancedRangeEnd(true);
631-
}}
632-
value="advanced"
633-
>
634-
<EllipsesIcon />
635-
</ToggleGroupButton>
636-
</Tooltip>
637-
</ToggleGroup>
638-
{isAdvancedRangeEnd && (
604+
<ToggleGroupButton
605+
disabled={
606+
!isRangeEndEnabled ||
607+
(!isAdvancedRangeStart && index < startRangeIndex)
608+
}
609+
value={toggleValue}
610+
onClick={() => {
611+
setIsAdvancedRangeEnd(false);
612+
handleChange(
613+
{
614+
...value,
615+
timing: {
616+
...value.timing,
617+
rangeStart: value.timing.rangeStart,
618+
rangeEnd: range,
619+
},
620+
},
621+
false
622+
);
623+
}}
624+
>
625+
{icon}
626+
</ToggleGroupButton>
627+
</Tooltip>
628+
)
629+
)}
630+
631+
<Tooltip content="Set custom range">
632+
<ToggleGroupButton
633+
disabled={!isRangeEndEnabled}
634+
onClick={() => {
635+
setIsAdvancedRangeEnd(true);
636+
}}
637+
value="advanced"
638+
>
639+
<EllipsesIcon />
640+
</ToggleGroupButton>
641+
</Tooltip>
642+
</ToggleGroup>
643+
)}
644+
{(isScrollAnimation || isAdvancedRangeEnd) && (
639645
<Grid
640646
css={{
641647
gridColumn: "2 / -1",
@@ -739,61 +745,63 @@ export const AnimationPanelContent = ({
739745
Range Start
740746
</FieldLabel>
741747

742-
<ToggleGroup
743-
value={
744-
isAdvancedRangeStart
745-
? "advanced"
746-
: (startRangeValue ?? "advanced")
747-
}
748-
type="single"
749-
>
750-
{simplifiedStartRanges.map(
751-
([toggleValue, icon, range, description], index) => (
752-
<Tooltip
753-
key={toggleValue}
754-
content={`The animation starts ${description}`}
755-
variant="wrapped"
756-
>
757-
<ToggleGroupButton
748+
{!isScrollAnimation && (
749+
<ToggleGroup
750+
value={
751+
isAdvancedRangeStart
752+
? "advanced"
753+
: (startRangeValue ?? "advanced")
754+
}
755+
type="single"
756+
>
757+
{simplifiedStartRanges.map(
758+
([toggleValue, icon, range, description], index) => (
759+
<Tooltip
758760
key={toggleValue}
759-
value={toggleValue}
760-
onClick={() => {
761-
setIsAdvancedRangeStart(false);
762-
handleChange(
763-
{
764-
...value,
765-
timing: {
766-
...value.timing,
767-
rangeStart: range,
768-
rangeEnd:
769-
endRangeIndex < index
770-
? simplifiedEndRanges[index][2]
771-
: value.timing.rangeEnd,
772-
},
773-
},
774-
false
775-
);
776-
}}
761+
content={`The animation starts ${description}`}
762+
variant="wrapped"
777763
>
778-
{icon}
779-
</ToggleGroupButton>
780-
</Tooltip>
781-
)
782-
)}
783-
784-
<Tooltip content="Set custom range">
785-
<ToggleGroupButton
786-
onClick={() => {
787-
setIsAdvancedRangeStart(true);
788-
}}
789-
value="advanced"
790-
>
791-
<EllipsesIcon />
792-
</ToggleGroupButton>
793-
</Tooltip>
794-
</ToggleGroup>
795-
796-
{isAdvancedRangeStart && (
764+
<ToggleGroupButton
765+
key={toggleValue}
766+
value={toggleValue}
767+
onClick={() => {
768+
setIsAdvancedRangeStart(false);
769+
handleChange(
770+
{
771+
...value,
772+
timing: {
773+
...value.timing,
774+
rangeStart: range,
775+
rangeEnd:
776+
endRangeIndex < index
777+
? simplifiedEndRanges[index][2]
778+
: value.timing.rangeEnd,
779+
},
780+
},
781+
false
782+
);
783+
}}
784+
>
785+
{icon}
786+
</ToggleGroupButton>
787+
</Tooltip>
788+
)
789+
)}
790+
791+
<Tooltip content="Set custom range">
792+
<ToggleGroupButton
793+
onClick={() => {
794+
setIsAdvancedRangeStart(true);
795+
}}
796+
value="advanced"
797+
>
798+
<EllipsesIcon />
799+
</ToggleGroupButton>
800+
</Tooltip>
801+
</ToggleGroup>
802+
)}
803+
804+
{(isScrollAnimation || isAdvancedRangeStart) && (
797805
<Grid
798806
css={{
799807
gridColumn: "2 / -1",

0 commit comments

Comments
 (0)