From 52591a19464b0894b908b56df935bc9c44579c21 Mon Sep 17 00:00:00 2001 From: Ruben Thoms Date: Tue, 2 Jul 2024 15:15:09 +0200 Subject: [PATCH 1/2] fixes --- frontend/src/lib/components/Slider/slider.tsx | 20 +++++++++++++++---- 1 file changed, 16 insertions(+), 4 deletions(-) diff --git a/frontend/src/lib/components/Slider/slider.tsx b/frontend/src/lib/components/Slider/slider.tsx index 3a9b042a2..123120957 100644 --- a/frontend/src/lib/components/Slider/slider.tsx +++ b/frontend/src/lib/components/Slider/slider.tsx @@ -4,7 +4,8 @@ import { useElementBoundingRect } from "@lib/hooks/useElementBoundingRect"; import { createPortal } from "@lib/utils/createPortal"; import { Point2D } from "@lib/utils/geometry"; import { resolveClassNames } from "@lib/utils/resolveClassNames"; -import { Slider as SliderUnstyled, SliderProps as SliderUnstyledProps } from "@mui/base"; +import { convertRemToPixels } from "@lib/utils/screenUnitConversions"; +import { Mark, Slider as SliderUnstyled, SliderProps as SliderUnstyledProps } from "@mui/base"; import { BaseComponent } from "../BaseComponent"; @@ -24,6 +25,7 @@ export const Slider = React.forwardRef((props: SliderProps, ref: React.Forwarded orientation, track, debounceTimeMs, + marks, ...rest } = props; const debounceTimerRef = React.useRef | null>(null); @@ -44,6 +46,14 @@ export const Slider = React.forwardRef((props: SliderProps, ref: React.Forwarded setPrevValue(propsValue); } + let adjustedMarks: boolean | Mark[] | undefined = undefined; + if ( + marks === true || + (Array.isArray(marks) && marks.length > 0 && marks.length < sliderRect.width / 3 - convertRemToPixels(6 / 4)) + ) { + adjustedMarks = marks; + } + React.useEffect(function handleMount() { const divRefCurrent = divRef.current; let pointerPressed = false; @@ -155,8 +165,9 @@ export const Slider = React.forwardRef((props: SliderProps, ref: React.Forwarded x: (orientation === "vertical" ? sliderRect.width / 2 - : ((activeThumbValue - (min ?? 0)) / range) * sliderRect.width) + + : ((activeThumbValue - (min ?? 0)) / range) * (sliderRect.width - convertRemToPixels(6 / 4))) + sliderRect.left + + convertRemToPixels(3 / 4) + 3, y: (orientation === "vertical" @@ -215,6 +226,7 @@ export const Slider = React.forwardRef((props: SliderProps, ref: React.Forwarded onChange={handleValueChanged} value={value} ref={ref} + marks={adjustedMarks} slotProps={{ root: { className: resolveClassNames( @@ -261,7 +273,7 @@ export const Slider = React.forwardRef((props: SliderProps, ref: React.Forwarded "h-5", "block", "bg-blue-600", - "z-30", + "z-5", "shadow-sm", "rounded-full", "transform", @@ -312,7 +324,7 @@ export const Slider = React.forwardRef((props: SliderProps, ref: React.Forwarded "border-white", "transform", orientation === "vertical" ? "-translate-y-0" : "", - "z-20" + "z-4" ), }, }} From 4c0fbf4c9327f6a157936a4677b1b49a95741817 Mon Sep 17 00:00:00 2001 From: Ruben Thoms Date: Tue, 2 Jul 2024 16:17:29 +0200 Subject: [PATCH 2/2] fix --- frontend/src/lib/components/Slider/slider.tsx | 25 ++++++++----------- 1 file changed, 10 insertions(+), 15 deletions(-) diff --git a/frontend/src/lib/components/Slider/slider.tsx b/frontend/src/lib/components/Slider/slider.tsx index 123120957..8e596172a 100644 --- a/frontend/src/lib/components/Slider/slider.tsx +++ b/frontend/src/lib/components/Slider/slider.tsx @@ -5,7 +5,7 @@ import { createPortal } from "@lib/utils/createPortal"; import { Point2D } from "@lib/utils/geometry"; import { resolveClassNames } from "@lib/utils/resolveClassNames"; import { convertRemToPixels } from "@lib/utils/screenUnitConversions"; -import { Mark, Slider as SliderUnstyled, SliderProps as SliderUnstyledProps } from "@mui/base"; +import { Slider as SliderUnstyled, SliderProps as SliderUnstyledProps } from "@mui/base"; import { BaseComponent } from "../BaseComponent"; @@ -25,7 +25,6 @@ export const Slider = React.forwardRef((props: SliderProps, ref: React.Forwarded orientation, track, debounceTimeMs, - marks, ...rest } = props; const debounceTimerRef = React.useRef | null>(null); @@ -46,14 +45,6 @@ export const Slider = React.forwardRef((props: SliderProps, ref: React.Forwarded setPrevValue(propsValue); } - let adjustedMarks: boolean | Mark[] | undefined = undefined; - if ( - marks === true || - (Array.isArray(marks) && marks.length > 0 && marks.length < sliderRect.width / 3 - convertRemToPixels(6 / 4)) - ) { - adjustedMarks = marks; - } - React.useEffect(function handleMount() { const divRefCurrent = divRef.current; let pointerPressed = false; @@ -226,7 +217,6 @@ export const Slider = React.forwardRef((props: SliderProps, ref: React.Forwarded onChange={handleValueChanged} value={value} ref={ref} - marks={adjustedMarks} slotProps={{ root: { className: resolveClassNames( @@ -318,13 +308,18 @@ export const Slider = React.forwardRef((props: SliderProps, ref: React.Forwarded "h-2", "-ml-0.5", "-mt-0.5", - "bg-blue-600", - "border-2", "opacity-80", - "border-white", "transform", orientation === "vertical" ? "-translate-y-0" : "", - "z-4" + "z-4", + { + "border-2 bg-blue-600 border-white": + Array.isArray(props.marks) && + props.marks.length < + ((orientation === "vertical" ? sliderRect.height : sliderRect.width) - + convertRemToPixels(6 / 4)) / + 8, + } ), }, }}