@yogiswara/honcho-editor-ui 3.1.23 → 3.2.0
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.
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
2
|
import { useEffect, useState } from "react";
|
|
3
|
-
import { Stack, Slider, Typography } from "@mui/material";
|
|
3
|
+
import { Stack, Slider, Typography, Box } 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";
|
|
@@ -96,161 +96,222 @@ export default function HSliderLightMobile(props) {
|
|
|
96
96
|
color: colors.surface,
|
|
97
97
|
width: "40px", // Keep the fixed width for alignment
|
|
98
98
|
textAlign: "right", // Keep the text alignment
|
|
99
|
-
}, children: formatValue(props.exposureScore) })] }),
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
99
|
+
}, children: formatValue(props.exposureScore) })] }), _jsxs(Box, { sx: { position: 'relative', width: '100%' }, children: [_jsx("div", { style: {
|
|
100
|
+
position: 'absolute',
|
|
101
|
+
top: "-5px",
|
|
102
|
+
bottom: "-5px",
|
|
103
|
+
// Offset by 16px to align with the slider's track inside the component
|
|
104
|
+
left: 0,
|
|
105
|
+
right: 0,
|
|
106
|
+
zIndex: 1,
|
|
107
|
+
touchAction: 'manipulation', // ✅ 1. Add this to make double-tap reliable on mobile
|
|
108
|
+
} }), _jsx(Slider, { sx: {
|
|
109
|
+
width: "100%",
|
|
110
|
+
color: colors.onSurfaceVariant,
|
|
111
|
+
'& .MuiSlider-rail': {
|
|
112
|
+
background: colors.onSurfaceVariant,
|
|
113
|
+
opacity: 1,
|
|
114
|
+
pointerEvents: 'none',
|
|
115
|
+
},
|
|
116
|
+
'& .MuiSlider-thumb': {
|
|
117
|
+
background: colors.surface,
|
|
118
|
+
boxShadow: 'none',
|
|
119
|
+
opacity: 1,
|
|
120
|
+
pointerEvents: 'auto',
|
|
121
|
+
},
|
|
122
|
+
'& .MuiSlider-thumb:hover': {
|
|
123
|
+
boxShadow: 'none',
|
|
124
|
+
pointerEvents: 'auto',
|
|
125
|
+
}
|
|
126
|
+
}, slotProps: {
|
|
127
|
+
thumb: {
|
|
128
|
+
ref: exposureSliderRef,
|
|
129
|
+
onDoubleClick: exposureInput.handleDoubleClick
|
|
130
|
+
}
|
|
131
|
+
}, size: "small", value: props.exposureScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onExposureChange("exposureScore", newValue) })] }), _jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { pt: '10px', pb: '0px' }, children: [_jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.surface, userSelect: 'none' }, onDoubleClick: contrastInput.handleDoubleClick, children: "Contrast" }), _jsx(Typography, { sx: {
|
|
121
132
|
...typography.bodyMedium, // Use your standard typography
|
|
122
133
|
color: colors.surface,
|
|
123
134
|
width: "40px", // Keep the fixed width for alignment
|
|
124
135
|
textAlign: "right", // Keep the text alignment
|
|
125
|
-
}, children: formatValue(props.contrastScore) })] }),
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
136
|
+
}, children: formatValue(props.contrastScore) })] }), _jsxs(Box, { sx: { position: 'relative', width: '100%' }, children: [_jsx("div", { style: {
|
|
137
|
+
position: 'absolute',
|
|
138
|
+
top: "-5px",
|
|
139
|
+
bottom: "-5px",
|
|
140
|
+
// Offset by 16px to align with the slider's track inside the component
|
|
141
|
+
left: 0,
|
|
142
|
+
right: 0,
|
|
143
|
+
zIndex: 1,
|
|
144
|
+
touchAction: 'manipulation', // ✅ 1. Add this to make double-tap reliable on mobile
|
|
145
|
+
} }), _jsx(Slider, { sx: {
|
|
146
|
+
width: "100%",
|
|
147
|
+
color: colors.onSurfaceVariant,
|
|
148
|
+
'& .MuiSlider-rail': {
|
|
149
|
+
background: colors.onSurfaceVariant,
|
|
150
|
+
opacity: 1,
|
|
151
|
+
pointerEvents: 'none',
|
|
152
|
+
},
|
|
153
|
+
'& .MuiSlider-thumb': {
|
|
154
|
+
background: colors.surface,
|
|
155
|
+
boxShadow: 'none',
|
|
156
|
+
opacity: 1,
|
|
157
|
+
pointerEvents: 'auto',
|
|
158
|
+
},
|
|
159
|
+
'& .MuiSlider-thumb:hover': {
|
|
160
|
+
boxShadow: 'none',
|
|
161
|
+
pointerEvents: 'auto',
|
|
162
|
+
}
|
|
163
|
+
}, slotProps: {
|
|
164
|
+
thumb: {
|
|
165
|
+
ref: contrastSliderRef,
|
|
166
|
+
onDoubleClick: contrastInput.handleDoubleClick
|
|
167
|
+
}
|
|
168
|
+
}, size: "small", value: props.contrastScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onContrastChange("contrastScore", newValue) })] }), _jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { pt: '10px', pb: '0px' }, children: [_jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.surface, userSelect: 'none' }, onDoubleClick: highlightsInput.handleDoubleClick, children: "Highlights" }), _jsx(Typography, { sx: {
|
|
148
169
|
...typography.bodyMedium, // Use your standard typography
|
|
149
170
|
color: colors.surface,
|
|
150
171
|
width: "40px", // Keep the fixed width for alignment
|
|
151
172
|
textAlign: "right", // Keep the text alignment
|
|
152
|
-
}, children: formatValue(props.highlightsScore) })] }),
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
173
|
+
}, children: formatValue(props.highlightsScore) })] }), _jsxs(Box, { sx: { position: 'relative', width: '100%' }, children: [_jsx("div", { style: {
|
|
174
|
+
position: 'absolute',
|
|
175
|
+
top: "-5px",
|
|
176
|
+
bottom: "-5px",
|
|
177
|
+
// Offset by 16px to align with the slider's track inside the component
|
|
178
|
+
left: 0,
|
|
179
|
+
right: 0,
|
|
180
|
+
zIndex: 1,
|
|
181
|
+
touchAction: 'manipulation', // ✅ 1. Add this to make double-tap reliable on mobile
|
|
182
|
+
} }), _jsx(Slider, { sx: {
|
|
183
|
+
width: "100%",
|
|
184
|
+
color: colors.onSurfaceVariant,
|
|
185
|
+
'& .MuiSlider-rail': {
|
|
186
|
+
background: colors.onSurfaceVariant,
|
|
187
|
+
opacity: 1,
|
|
188
|
+
pointerEvents: 'none',
|
|
189
|
+
},
|
|
190
|
+
'& .MuiSlider-thumb': {
|
|
191
|
+
background: colors.surface,
|
|
192
|
+
boxShadow: 'none',
|
|
193
|
+
opacity: 1,
|
|
194
|
+
pointerEvents: 'auto',
|
|
195
|
+
},
|
|
196
|
+
'& .MuiSlider-thumb:hover': {
|
|
197
|
+
boxShadow: 'none',
|
|
198
|
+
pointerEvents: 'auto',
|
|
199
|
+
}
|
|
200
|
+
}, slotProps: {
|
|
201
|
+
thumb: {
|
|
202
|
+
ref: highlightsSliderRef,
|
|
203
|
+
onDoubleClick: highlightsInput.handleDoubleClick
|
|
204
|
+
}
|
|
205
|
+
}, size: "small", value: props.highlightsScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onHighlightsChange("highlightsScore", newValue) })] }), _jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { pt: '10px', pb: '0px' }, children: [_jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.surface, userSelect: 'none' }, onDoubleClick: shadowsInput.handleDoubleClick, children: "Shadows" }), _jsx(Typography, { sx: {
|
|
175
206
|
...typography.bodyMedium, // Use your standard typography
|
|
176
207
|
color: colors.surface,
|
|
177
208
|
width: "40px", // Keep the fixed width for alignment
|
|
178
209
|
textAlign: "right", // Keep the text alignment
|
|
179
|
-
}, children: formatValue(props.shadowScore) })] }),
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
210
|
+
}, children: formatValue(props.shadowScore) })] }), _jsxs(Box, { sx: { position: 'relative', width: '100%' }, children: [_jsx("div", { style: {
|
|
211
|
+
position: 'absolute',
|
|
212
|
+
top: "-5px",
|
|
213
|
+
bottom: "-5px",
|
|
214
|
+
// Offset by 16px to align with the slider's track inside the component
|
|
215
|
+
left: 0,
|
|
216
|
+
right: 0,
|
|
217
|
+
zIndex: 1,
|
|
218
|
+
touchAction: 'manipulation', // ✅ 1. Add this to make double-tap reliable on mobile
|
|
219
|
+
} }), _jsx(Slider, { sx: {
|
|
220
|
+
width: "100%",
|
|
221
|
+
color: colors.onSurfaceVariant,
|
|
222
|
+
'& .MuiSlider-rail': {
|
|
223
|
+
background: colors.onSurfaceVariant,
|
|
224
|
+
opacity: 1,
|
|
225
|
+
pointerEvents: 'none',
|
|
226
|
+
},
|
|
227
|
+
'& .MuiSlider-thumb': {
|
|
228
|
+
background: colors.surface,
|
|
229
|
+
boxShadow: 'none',
|
|
230
|
+
opacity: 1,
|
|
231
|
+
pointerEvents: 'auto',
|
|
232
|
+
},
|
|
233
|
+
'& .MuiSlider-thumb:hover': {
|
|
234
|
+
boxShadow: 'none',
|
|
235
|
+
pointerEvents: 'auto',
|
|
236
|
+
}
|
|
237
|
+
}, slotProps: {
|
|
238
|
+
thumb: {
|
|
239
|
+
ref: shadowsSliderRef,
|
|
240
|
+
onDoubleClick: shadowsInput.handleDoubleClick
|
|
241
|
+
}
|
|
242
|
+
}, size: "small", value: props.shadowScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onShadowsChange("shadowsScore", newValue) })] }), _jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { pt: '10px', pb: '0px' }, children: [_jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.surface, userSelect: 'none' }, onDoubleClick: whitesInput.handleDoubleClick, children: "Whites" }), _jsx(Typography, { sx: {
|
|
202
243
|
...typography.bodyMedium, // Use your standard typography
|
|
203
244
|
color: colors.surface,
|
|
204
245
|
width: "40px", // Keep the fixed width for alignment
|
|
205
246
|
textAlign: "right", // Keep the text alignment
|
|
206
|
-
}, children: formatValue(props.whiteScore) })] }),
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
247
|
+
}, children: formatValue(props.whiteScore) })] }), _jsxs(Box, { sx: { position: 'relative', width: '100%' }, children: [_jsx("div", { style: {
|
|
248
|
+
position: 'absolute',
|
|
249
|
+
top: "-5px",
|
|
250
|
+
bottom: "-5px",
|
|
251
|
+
// Offset by 16px to align with the slider's track inside the component
|
|
252
|
+
left: 0,
|
|
253
|
+
right: 0,
|
|
254
|
+
zIndex: 1,
|
|
255
|
+
touchAction: 'manipulation', // ✅ 1. Add this to make double-tap reliable on mobile
|
|
256
|
+
} }), _jsx(Slider, { sx: {
|
|
257
|
+
width: "100%",
|
|
258
|
+
color: colors.onSurfaceVariant,
|
|
259
|
+
'& .MuiSlider-rail': {
|
|
260
|
+
background: colors.onSurfaceVariant,
|
|
261
|
+
opacity: 1,
|
|
262
|
+
pointerEvents: 'none',
|
|
263
|
+
},
|
|
264
|
+
'& .MuiSlider-thumb': {
|
|
265
|
+
background: colors.surface,
|
|
266
|
+
boxShadow: 'none',
|
|
267
|
+
opacity: 1,
|
|
268
|
+
pointerEvents: 'auto',
|
|
269
|
+
},
|
|
270
|
+
'& .MuiSlider-thumb:hover': {
|
|
271
|
+
boxShadow: 'none',
|
|
272
|
+
pointerEvents: 'auto',
|
|
273
|
+
}
|
|
274
|
+
}, slotProps: {
|
|
275
|
+
thumb: {
|
|
276
|
+
ref: whitesSliderRef,
|
|
277
|
+
onDoubleClick: whitesInput.handleDoubleClick
|
|
278
|
+
}
|
|
279
|
+
}, size: "small", value: props.whiteScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onWhitesChange("whitesScore", newValue) })] }), _jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { pt: '10px', pb: '0px' }, children: [_jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.surface, userSelect: 'none' }, onDoubleClick: blacksInput.handleDoubleClick, children: "Blacks" }), _jsx(Typography, { sx: {
|
|
229
280
|
...typography.bodyMedium, // Use your standard typography
|
|
230
281
|
color: colors.surface,
|
|
231
282
|
width: "40px", // Keep the fixed width for alignment
|
|
232
283
|
textAlign: "right", // Keep the text alignment
|
|
233
|
-
}, children: formatValue(props.blackScore) })] }),
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
284
|
+
}, children: formatValue(props.blackScore) })] }), _jsxs(Box, { sx: { position: 'relative', width: '100%' }, children: [_jsx("div", { style: {
|
|
285
|
+
position: 'absolute',
|
|
286
|
+
top: "-5px",
|
|
287
|
+
bottom: "-5px",
|
|
288
|
+
// Offset by 16px to align with the slider's track inside the component
|
|
289
|
+
left: 0,
|
|
290
|
+
right: 0,
|
|
291
|
+
zIndex: 1,
|
|
292
|
+
touchAction: 'manipulation', // ✅ 1. Add this to make double-tap reliable on mobile
|
|
293
|
+
} }), _jsx(Slider, { sx: {
|
|
294
|
+
width: "100%",
|
|
295
|
+
color: colors.onSurfaceVariant,
|
|
296
|
+
'& .MuiSlider-rail': {
|
|
297
|
+
background: colors.onSurfaceVariant,
|
|
298
|
+
opacity: 1,
|
|
299
|
+
pointerEvents: 'none',
|
|
300
|
+
},
|
|
301
|
+
'& .MuiSlider-thumb': {
|
|
302
|
+
background: colors.surface,
|
|
303
|
+
boxShadow: 'none',
|
|
304
|
+
opacity: 1,
|
|
305
|
+
pointerEvents: 'auto',
|
|
306
|
+
},
|
|
307
|
+
'& .MuiSlider-thumb:hover': {
|
|
308
|
+
boxShadow: 'none',
|
|
309
|
+
pointerEvents: 'auto',
|
|
310
|
+
}
|
|
311
|
+
}, slotProps: {
|
|
312
|
+
thumb: {
|
|
313
|
+
ref: blacksSliderRef,
|
|
314
|
+
onDoubleClick: blacksInput.handleDoubleClick
|
|
315
|
+
}
|
|
316
|
+
}, size: "small", value: props.blackScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onBlacksChange("blacksScore", newValue) })] })] }) }));
|
|
256
317
|
}
|