@yogiswara/honcho-editor-ui 3.1.23 → 3.2.1
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,234 @@ 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
|
+
zIndex: 2,
|
|
122
|
+
},
|
|
123
|
+
'& .MuiSlider-thumb:hover': {
|
|
124
|
+
boxShadow: 'none',
|
|
125
|
+
pointerEvents: 'auto',
|
|
126
|
+
zIndex: 2,
|
|
127
|
+
}
|
|
128
|
+
}, slotProps: {
|
|
129
|
+
thumb: {
|
|
130
|
+
ref: exposureSliderRef,
|
|
131
|
+
onDoubleClick: exposureInput.handleDoubleClick
|
|
132
|
+
}
|
|
133
|
+
}, 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
134
|
...typography.bodyMedium, // Use your standard typography
|
|
122
135
|
color: colors.surface,
|
|
123
136
|
width: "40px", // Keep the fixed width for alignment
|
|
124
137
|
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
|
-
|
|
138
|
+
}, children: formatValue(props.contrastScore) })] }), _jsxs(Box, { sx: { position: 'relative', width: '100%' }, children: [_jsx("div", { style: {
|
|
139
|
+
position: 'absolute',
|
|
140
|
+
top: "-5px",
|
|
141
|
+
bottom: "-5px",
|
|
142
|
+
// Offset by 16px to align with the slider's track inside the component
|
|
143
|
+
left: 0,
|
|
144
|
+
right: 0,
|
|
145
|
+
zIndex: 1,
|
|
146
|
+
touchAction: 'manipulation', // ✅ 1. Add this to make double-tap reliable on mobile
|
|
147
|
+
} }), _jsx(Slider, { sx: {
|
|
148
|
+
width: "100%",
|
|
149
|
+
color: colors.onSurfaceVariant,
|
|
150
|
+
'& .MuiSlider-rail': {
|
|
151
|
+
background: colors.onSurfaceVariant,
|
|
152
|
+
opacity: 1,
|
|
153
|
+
pointerEvents: 'none',
|
|
154
|
+
},
|
|
155
|
+
'& .MuiSlider-thumb': {
|
|
156
|
+
background: colors.surface,
|
|
157
|
+
boxShadow: 'none',
|
|
158
|
+
opacity: 1,
|
|
159
|
+
pointerEvents: 'auto',
|
|
160
|
+
zIndex: 2,
|
|
161
|
+
},
|
|
162
|
+
'& .MuiSlider-thumb:hover': {
|
|
163
|
+
boxShadow: 'none',
|
|
164
|
+
pointerEvents: 'auto',
|
|
165
|
+
zIndex: 2,
|
|
166
|
+
}
|
|
167
|
+
}, slotProps: {
|
|
168
|
+
thumb: {
|
|
169
|
+
ref: contrastSliderRef,
|
|
170
|
+
onDoubleClick: contrastInput.handleDoubleClick
|
|
171
|
+
}
|
|
172
|
+
}, 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
173
|
...typography.bodyMedium, // Use your standard typography
|
|
149
174
|
color: colors.surface,
|
|
150
175
|
width: "40px", // Keep the fixed width for alignment
|
|
151
176
|
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
|
-
|
|
177
|
+
}, children: formatValue(props.highlightsScore) })] }), _jsxs(Box, { sx: { position: 'relative', width: '100%' }, children: [_jsx("div", { style: {
|
|
178
|
+
position: 'absolute',
|
|
179
|
+
top: "-5px",
|
|
180
|
+
bottom: "-5px",
|
|
181
|
+
// Offset by 16px to align with the slider's track inside the component
|
|
182
|
+
left: 0,
|
|
183
|
+
right: 0,
|
|
184
|
+
zIndex: 1,
|
|
185
|
+
touchAction: 'manipulation', // ✅ 1. Add this to make double-tap reliable on mobile
|
|
186
|
+
} }), _jsx(Slider, { sx: {
|
|
187
|
+
width: "100%",
|
|
188
|
+
color: colors.onSurfaceVariant,
|
|
189
|
+
'& .MuiSlider-rail': {
|
|
190
|
+
background: colors.onSurfaceVariant,
|
|
191
|
+
opacity: 1,
|
|
192
|
+
pointerEvents: 'none',
|
|
193
|
+
},
|
|
194
|
+
'& .MuiSlider-thumb': {
|
|
195
|
+
background: colors.surface,
|
|
196
|
+
boxShadow: 'none',
|
|
197
|
+
opacity: 1,
|
|
198
|
+
pointerEvents: 'auto',
|
|
199
|
+
zIndex: 2,
|
|
200
|
+
},
|
|
201
|
+
'& .MuiSlider-thumb:hover': {
|
|
202
|
+
boxShadow: 'none',
|
|
203
|
+
pointerEvents: 'auto',
|
|
204
|
+
zIndex: 2,
|
|
205
|
+
}
|
|
206
|
+
}, slotProps: {
|
|
207
|
+
thumb: {
|
|
208
|
+
ref: highlightsSliderRef,
|
|
209
|
+
onDoubleClick: highlightsInput.handleDoubleClick
|
|
210
|
+
}
|
|
211
|
+
}, 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
212
|
...typography.bodyMedium, // Use your standard typography
|
|
176
213
|
color: colors.surface,
|
|
177
214
|
width: "40px", // Keep the fixed width for alignment
|
|
178
215
|
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
|
-
|
|
216
|
+
}, children: formatValue(props.shadowScore) })] }), _jsxs(Box, { sx: { position: 'relative', width: '100%' }, children: [_jsx("div", { style: {
|
|
217
|
+
position: 'absolute',
|
|
218
|
+
top: "-5px",
|
|
219
|
+
bottom: "-5px",
|
|
220
|
+
// Offset by 16px to align with the slider's track inside the component
|
|
221
|
+
left: 0,
|
|
222
|
+
right: 0,
|
|
223
|
+
zIndex: 1,
|
|
224
|
+
touchAction: 'manipulation', // ✅ 1. Add this to make double-tap reliable on mobile
|
|
225
|
+
} }), _jsx(Slider, { sx: {
|
|
226
|
+
width: "100%",
|
|
227
|
+
color: colors.onSurfaceVariant,
|
|
228
|
+
'& .MuiSlider-rail': {
|
|
229
|
+
background: colors.onSurfaceVariant,
|
|
230
|
+
opacity: 1,
|
|
231
|
+
pointerEvents: 'none',
|
|
232
|
+
},
|
|
233
|
+
'& .MuiSlider-thumb': {
|
|
234
|
+
background: colors.surface,
|
|
235
|
+
boxShadow: 'none',
|
|
236
|
+
opacity: 1,
|
|
237
|
+
pointerEvents: 'auto',
|
|
238
|
+
zIndex: 2,
|
|
239
|
+
},
|
|
240
|
+
'& .MuiSlider-thumb:hover': {
|
|
241
|
+
boxShadow: 'none',
|
|
242
|
+
pointerEvents: 'auto',
|
|
243
|
+
zIndex: 2,
|
|
244
|
+
}
|
|
245
|
+
}, slotProps: {
|
|
246
|
+
thumb: {
|
|
247
|
+
ref: shadowsSliderRef,
|
|
248
|
+
onDoubleClick: shadowsInput.handleDoubleClick
|
|
249
|
+
}
|
|
250
|
+
}, 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
251
|
...typography.bodyMedium, // Use your standard typography
|
|
203
252
|
color: colors.surface,
|
|
204
253
|
width: "40px", // Keep the fixed width for alignment
|
|
205
254
|
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
|
-
|
|
255
|
+
}, children: formatValue(props.whiteScore) })] }), _jsxs(Box, { sx: { position: 'relative', width: '100%' }, children: [_jsx("div", { style: {
|
|
256
|
+
position: 'absolute',
|
|
257
|
+
top: "-5px",
|
|
258
|
+
bottom: "-5px",
|
|
259
|
+
// Offset by 16px to align with the slider's track inside the component
|
|
260
|
+
left: 0,
|
|
261
|
+
right: 0,
|
|
262
|
+
zIndex: 1,
|
|
263
|
+
touchAction: 'manipulation', // ✅ 1. Add this to make double-tap reliable on mobile
|
|
264
|
+
} }), _jsx(Slider, { sx: {
|
|
265
|
+
width: "100%",
|
|
266
|
+
color: colors.onSurfaceVariant,
|
|
267
|
+
'& .MuiSlider-rail': {
|
|
268
|
+
background: colors.onSurfaceVariant,
|
|
269
|
+
opacity: 1,
|
|
270
|
+
pointerEvents: 'none',
|
|
271
|
+
},
|
|
272
|
+
'& .MuiSlider-thumb': {
|
|
273
|
+
background: colors.surface,
|
|
274
|
+
boxShadow: 'none',
|
|
275
|
+
opacity: 1,
|
|
276
|
+
pointerEvents: 'auto',
|
|
277
|
+
zIndex: 2,
|
|
278
|
+
},
|
|
279
|
+
'& .MuiSlider-thumb:hover': {
|
|
280
|
+
boxShadow: 'none',
|
|
281
|
+
pointerEvents: 'auto',
|
|
282
|
+
zIndex: 2,
|
|
283
|
+
}
|
|
284
|
+
}, slotProps: {
|
|
285
|
+
thumb: {
|
|
286
|
+
ref: whitesSliderRef,
|
|
287
|
+
onDoubleClick: whitesInput.handleDoubleClick
|
|
288
|
+
}
|
|
289
|
+
}, 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
290
|
...typography.bodyMedium, // Use your standard typography
|
|
230
291
|
color: colors.surface,
|
|
231
292
|
width: "40px", // Keep the fixed width for alignment
|
|
232
293
|
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
|
-
|
|
294
|
+
}, children: formatValue(props.blackScore) })] }), _jsxs(Box, { sx: { position: 'relative', width: '100%' }, children: [_jsx("div", { style: {
|
|
295
|
+
position: 'absolute',
|
|
296
|
+
top: "-5px",
|
|
297
|
+
bottom: "-5px",
|
|
298
|
+
// Offset by 16px to align with the slider's track inside the component
|
|
299
|
+
left: 0,
|
|
300
|
+
right: 0,
|
|
301
|
+
zIndex: 1,
|
|
302
|
+
touchAction: 'manipulation', // ✅ 1. Add this to make double-tap reliable on mobile
|
|
303
|
+
} }), _jsx(Slider, { sx: {
|
|
304
|
+
width: "100%",
|
|
305
|
+
color: colors.onSurfaceVariant,
|
|
306
|
+
'& .MuiSlider-rail': {
|
|
307
|
+
background: colors.onSurfaceVariant,
|
|
308
|
+
opacity: 1,
|
|
309
|
+
pointerEvents: 'none',
|
|
310
|
+
},
|
|
311
|
+
'& .MuiSlider-thumb': {
|
|
312
|
+
background: colors.surface,
|
|
313
|
+
boxShadow: 'none',
|
|
314
|
+
opacity: 1,
|
|
315
|
+
pointerEvents: 'auto',
|
|
316
|
+
zIndex: 2,
|
|
317
|
+
},
|
|
318
|
+
'& .MuiSlider-thumb:hover': {
|
|
319
|
+
boxShadow: 'none',
|
|
320
|
+
pointerEvents: 'auto',
|
|
321
|
+
zIndex: 2,
|
|
322
|
+
}
|
|
323
|
+
}, slotProps: {
|
|
324
|
+
thumb: {
|
|
325
|
+
ref: blacksSliderRef,
|
|
326
|
+
onDoubleClick: blacksInput.handleDoubleClick
|
|
327
|
+
}
|
|
328
|
+
}, size: "small", value: props.blackScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onBlacksChange("blacksScore", newValue) })] })] }) }));
|
|
256
329
|
}
|