@yogiswara/honcho-editor-ui 3.1.10 → 3.1.12
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -4,22 +4,6 @@ import { Stack, Slider, Typography } from "@mui/material";
|
|
|
4
4
|
import useHonchoTypography from "../../themes/honchoTheme";
|
|
5
5
|
import useColors from '../../themes/colors';
|
|
6
6
|
import useSliderEvents from "../editor/sliderComponents/useSliderEvents";
|
|
7
|
-
function ThumbOnlySlider({ sx, slotProps, size, value, step, min, max, onChange, onDoubleClick, }) {
|
|
8
|
-
const handleInteractionStart = (event) => {
|
|
9
|
-
// Check if the element that was clicked is the thumb or is inside the thumb.
|
|
10
|
-
const isThumb = event.target.closest('.MuiSlider-thumb');
|
|
11
|
-
// If the click was NOT on the thumb, isThumb will be null.
|
|
12
|
-
if (!isThumb) {
|
|
13
|
-
// These two lines stop the event dead in its tracks.
|
|
14
|
-
// The Slider's internal logic will never know this click happened.
|
|
15
|
-
event.preventDefault();
|
|
16
|
-
event.stopPropagation();
|
|
17
|
-
}
|
|
18
|
-
};
|
|
19
|
-
return (
|
|
20
|
-
// This wrapper div catches the event before the Slider can.
|
|
21
|
-
_jsx("div", { onMouseDown: handleInteractionStart, onTouchStart: handleInteractionStart, children: _jsx(Slider, { sx: sx, slotProps: slotProps, size: size, value: value, step: step, min: min, max: max, onChange: onChange, onDoubleClick: onDoubleClick }) }));
|
|
22
|
-
}
|
|
23
7
|
const formatValue = (value) => {
|
|
24
8
|
if (value > 0)
|
|
25
9
|
return `+${value}`;
|
|
@@ -130,27 +114,34 @@ export default function HSliderColorMobile(props) {
|
|
|
130
114
|
color: colors.surface,
|
|
131
115
|
width: "40px", // Keep the fixed width for alignment
|
|
132
116
|
textAlign: "right", // Keep the text alignment
|
|
133
|
-
}, children: formatValue(props.tempScore) })] }), _jsx(
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
117
|
+
}, children: formatValue(props.tempScore) })] }), _jsxs("div", { style: { position: 'relative', width: '100%', display: 'flex', alignItems: 'center', height: '32px' }, children: [_jsx("div", { style: {
|
|
118
|
+
position: 'absolute',
|
|
119
|
+
top: 0,
|
|
120
|
+
left: 0,
|
|
121
|
+
right: 0,
|
|
122
|
+
bottom: 0,
|
|
123
|
+
zIndex: 1, // Place it above the track but below the thumb
|
|
124
|
+
}, onDoubleClick: tempInput.handleDoubleClick }), _jsx(Slider, { sx: {
|
|
125
|
+
width: "100%",
|
|
126
|
+
color: colors.surface,
|
|
127
|
+
// ❌ REMOVE zIndex from the slider root. Let it be the bottom layer.
|
|
128
|
+
'& .MuiSlider-rail': {
|
|
129
|
+
background: tempGradient,
|
|
130
|
+
opacity: 1,
|
|
131
|
+
pointerEvents: 'none',
|
|
132
|
+
},
|
|
133
|
+
'& .MuiSlider-track': {
|
|
134
|
+
background: 'transparent',
|
|
135
|
+
border: 'none',
|
|
136
|
+
pointerEvents: 'none',
|
|
137
|
+
},
|
|
138
|
+
'& .MuiSlider-thumb': {
|
|
139
|
+
boxShadow: 'none',
|
|
140
|
+
pointerEvents: 'auto',
|
|
141
|
+
touchAction: 'none',
|
|
142
|
+
zIndex: 2, // ✅ ADD zIndex to the thumb ONLY to place it on top
|
|
143
|
+
}
|
|
144
|
+
}, slotProps: { thumb: { ref: tempSliderRef } }, size: "small", value: props.tempScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.setTempScore("tempScore", newValue) })] }), _jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { pt: '10px', pb: '0px', '&:focus-within .MuiFilledInput-input': focusedInputStyle }, children: [_jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.surface, userSelect: 'none' }, onDoubleClick: tintInput.handleDoubleClick, children: "Tint" }), _jsx(Typography, { sx: {
|
|
154
145
|
...typography.bodyMedium, // Use your standard typography
|
|
155
146
|
color: colors.surface,
|
|
156
147
|
width: "40px", // Keep the fixed width for alignment
|