@yogiswara/honcho-editor-ui 3.5.3 → 3.5.5
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.
|
@@ -5,117 +5,24 @@ import useColors from '../../themes/colors';
|
|
|
5
5
|
export default function HBulkColorMobile(props) {
|
|
6
6
|
const typography = useHonchoTypography();
|
|
7
7
|
const colors = useColors();
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
borderRadius: "100px",
|
|
29
|
-
}, children: _jsx(CardMedia, { component: "img", image: "/v1/svg/bulk-editor-increment-button-right.svg", sx: { width: "20px", height: "20px", ml: "3px" } }) }), _jsx(IconButton, { onClick: props.onTempIncreaseMax, sx: {
|
|
30
|
-
width: "76px",
|
|
31
|
-
height: "28px",
|
|
32
|
-
py: "2px",
|
|
33
|
-
mr: "12px",
|
|
34
|
-
border: "1px solid white",
|
|
35
|
-
borderRadius: "100px",
|
|
36
|
-
}, children: _jsx(CardMedia, { component: "img", image: "/v1/svg/bulk-editor-max-button-right.svg", sx: { width: "20px", height: "20px", ml: "2px" } }) })] }), _jsx(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { mb: "6px" }, children: _jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.surface }, children: "Tint" }) }), _jsxs(Stack, { direction: "row", justifyContent: "space-between", sx: { p: "0px", m: "0px", pt: "2px", pb: "16px" }, children: [_jsx(IconButton, { onClick: props.onTintDecreaseMax, sx: {
|
|
37
|
-
width: "76px",
|
|
38
|
-
height: "28px",
|
|
39
|
-
py: "2px",
|
|
40
|
-
mr: "12px",
|
|
41
|
-
border: "1px solid white",
|
|
42
|
-
borderRadius: "100px",
|
|
43
|
-
}, children: _jsx(CardMedia, { component: "img", image: "/v1/svg/bulk-editor-max-button.svg", sx: { width: "20px", height: "20px", mr: "2px" } }) }), _jsx(IconButton, { onClick: props.onTintDecrease, sx: {
|
|
44
|
-
width: "76px",
|
|
45
|
-
height: "28px",
|
|
46
|
-
py: "2px",
|
|
47
|
-
mr: "12px",
|
|
48
|
-
border: "1px solid white",
|
|
49
|
-
borderRadius: "100px",
|
|
50
|
-
}, children: _jsx(CardMedia, { component: "img", image: "/v1/svg/bulk-editor-increment-button.svg", sx: { width: "20px", height: "20px", mr: "3px" } }) }), _jsx(IconButton, { onClick: props.onTintIncrease, sx: {
|
|
51
|
-
width: "76px",
|
|
52
|
-
height: "28px",
|
|
53
|
-
py: "2px",
|
|
54
|
-
mr: "12px",
|
|
55
|
-
border: "1px solid white",
|
|
56
|
-
borderRadius: "100px",
|
|
57
|
-
}, children: _jsx(CardMedia, { component: "img", image: "/v1/svg/bulk-editor-increment-button-right.svg", sx: { width: "20px", height: "20px", ml: "3px" } }) }), _jsx(IconButton, { onClick: props.onTintIncreaseMax, sx: {
|
|
58
|
-
width: "76px",
|
|
59
|
-
height: "28px",
|
|
60
|
-
py: "2px",
|
|
61
|
-
mr: "12px",
|
|
62
|
-
border: "1px solid white",
|
|
63
|
-
borderRadius: "100px",
|
|
64
|
-
}, children: _jsx(CardMedia, { component: "img", image: "/v1/svg/bulk-editor-max-button-right.svg", sx: { width: "20px", height: "20px", ml: "2px" } }) })] }), _jsx(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { mb: "6px" }, children: _jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.surface }, children: "Vibrance" }) }), _jsxs(Stack, { direction: "row", justifyContent: "space-between", sx: { p: "0px", m: "0px", pt: "2px", pb: "16px" }, children: [_jsx(IconButton, { onClick: props.onVibranceDecreaseMax, sx: {
|
|
65
|
-
width: "76px",
|
|
66
|
-
height: "28px",
|
|
67
|
-
py: "2px",
|
|
68
|
-
mr: "12px",
|
|
69
|
-
border: "1px solid white",
|
|
70
|
-
borderRadius: "100px",
|
|
71
|
-
}, children: _jsx(CardMedia, { component: "img", image: "/v1/svg/bulk-editor-max-button.svg", sx: { width: "20px", height: "20px", mr: "2px" } }) }), _jsx(IconButton, { onClick: props.onVibranceDecrease, sx: {
|
|
72
|
-
width: "76px",
|
|
73
|
-
height: "28px",
|
|
74
|
-
py: "2px",
|
|
75
|
-
mr: "12px",
|
|
76
|
-
border: "1px solid white",
|
|
77
|
-
borderRadius: "100px",
|
|
78
|
-
}, children: _jsx(CardMedia, { component: "img", image: "/v1/svg/bulk-editor-increment-button.svg", sx: { width: "20px", height: "20px", mr: "3px" } }) }), _jsx(IconButton, { onClick: props.onVibranceIncrease, sx: {
|
|
79
|
-
width: "76px",
|
|
80
|
-
height: "28px",
|
|
81
|
-
py: "2px",
|
|
82
|
-
mr: "12px",
|
|
83
|
-
border: "1px solid white",
|
|
84
|
-
borderRadius: "100px",
|
|
85
|
-
}, children: _jsx(CardMedia, { component: "img", image: "/v1/svg/bulk-editor-increment-button-right.svg", sx: { width: "20px", height: "20px", ml: "3px" } }) }), _jsx(IconButton, { onClick: props.onVibranceIncreaseMax, sx: {
|
|
86
|
-
width: "76px",
|
|
87
|
-
height: "28px",
|
|
88
|
-
py: "2px",
|
|
89
|
-
mr: "12px",
|
|
90
|
-
border: "1px solid white",
|
|
91
|
-
borderRadius: "100px",
|
|
92
|
-
}, children: _jsx(CardMedia, { component: "img", image: "/v1/svg/bulk-editor-max-button-right.svg", sx: { width: "20px", height: "20px", ml: "2px" } }) })] }), _jsx(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { mb: "6px" }, children: _jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.surface }, children: "Saturation" }) }), _jsxs(Stack, { direction: "row", justifyContent: "space-between", sx: { p: "0px", m: "0px", pt: "2px", pb: "16px" }, children: [_jsx(IconButton, { onClick: props.onSaturationDecreaseMax, sx: {
|
|
93
|
-
width: "76px",
|
|
94
|
-
height: "28px",
|
|
95
|
-
py: "2px",
|
|
96
|
-
mr: "12px",
|
|
97
|
-
border: "1px solid white",
|
|
98
|
-
borderRadius: "100px",
|
|
99
|
-
}, children: _jsx(CardMedia, { component: "img", image: "/v1/svg/bulk-editor-max-button.svg", sx: { width: "20px", height: "20px", mr: "2px" } }) }), _jsx(IconButton, { onClick: props.onSaturationDecrease, sx: {
|
|
100
|
-
width: "76px",
|
|
101
|
-
height: "28px",
|
|
102
|
-
py: "2px",
|
|
103
|
-
mr: "12px",
|
|
104
|
-
border: "1px solid white",
|
|
105
|
-
borderRadius: "100px",
|
|
106
|
-
}, children: _jsx(CardMedia, { component: "img", image: "/v1/svg/bulk-editor-increment-button.svg", sx: { width: "20px", height: "20px", mr: "3px" } }) }), _jsx(IconButton, { onClick: props.onSaturationIncrease, sx: {
|
|
107
|
-
width: "76px",
|
|
108
|
-
height: "28px",
|
|
109
|
-
py: "2px",
|
|
110
|
-
mr: "12px",
|
|
111
|
-
border: "1px solid white",
|
|
112
|
-
borderRadius: "100px",
|
|
113
|
-
}, children: _jsx(CardMedia, { component: "img", image: "/v1/svg/bulk-editor-increment-button-right.svg", sx: { width: "20px", height: "20px", ml: "3px" } }) }), _jsx(IconButton, { onClick: props.onSaturationIncreaseMax, sx: {
|
|
114
|
-
width: "76px",
|
|
115
|
-
height: "28px",
|
|
116
|
-
py: "2px",
|
|
117
|
-
mr: "12px",
|
|
118
|
-
border: "1px solid white",
|
|
119
|
-
borderRadius: "100px",
|
|
120
|
-
}, children: _jsx(CardMedia, { component: "img", image: "/v1/svg/bulk-editor-max-button-right.svg", sx: { width: "20px", height: "20px", ml: "2px" } }) })] })] }) }));
|
|
8
|
+
const buttonSx = {
|
|
9
|
+
width: "76px",
|
|
10
|
+
height: "28px",
|
|
11
|
+
py: "2px",
|
|
12
|
+
mr: "12px",
|
|
13
|
+
border: "1px solid white",
|
|
14
|
+
borderRadius: "100px",
|
|
15
|
+
// This transition makes the click effect smooth
|
|
16
|
+
transition: "transform 0.1s ease-in-out, background-color 0.1s ease-in-out",
|
|
17
|
+
// Styles for when the button is actively being pressed
|
|
18
|
+
'&:active': {
|
|
19
|
+
transform: 'scale(0.95)', // Makes the button shrink slightly, like a real press
|
|
20
|
+
backgroundColor: 'rgba(255, 255, 255, 0.12)', // Adds a subtle background color
|
|
21
|
+
}
|
|
22
|
+
};
|
|
23
|
+
const lastButtonSx = {
|
|
24
|
+
...buttonSx,
|
|
25
|
+
mr: "0px", // Removes the right margin
|
|
26
|
+
};
|
|
27
|
+
return (_jsx(_Fragment, { children: _jsxs(Stack, { spacing: 0, direction: "column", sx: { width: '100%', pl: "10px", m: "0px" }, children: [_jsx(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { mb: "6px" }, children: _jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.surface }, children: "Temperature" }) }), _jsxs(Stack, { direction: "row", justifyContent: "space-between", sx: { p: "0px", m: "0px", pt: "2px", pb: "16px" }, children: [_jsx(IconButton, { onClick: props.onTempDecreaseMax, sx: buttonSx, children: _jsx(CardMedia, { component: "img", image: "/v1/svg/bulk-editor-max-button.svg", sx: { width: "20px", height: "20px", mr: "2px" } }) }), _jsx(IconButton, { onClick: props.onTempDecrease, sx: buttonSx, children: _jsx(CardMedia, { component: "img", image: "/v1/svg/bulk-editor-increment-button.svg", sx: { width: "20px", height: "20px", mr: "3px" } }) }), _jsx(IconButton, { onClick: props.onTempIncrease, sx: buttonSx, children: _jsx(CardMedia, { component: "img", image: "/v1/svg/bulk-editor-increment-button-right.svg", sx: { width: "20px", height: "20px", ml: "3px" } }) }), _jsx(IconButton, { onClick: props.onTempIncreaseMax, sx: lastButtonSx, children: _jsx(CardMedia, { component: "img", image: "/v1/svg/bulk-editor-max-button-right.svg", sx: { width: "20px", height: "20px", ml: "2px" } }) })] }), _jsx(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { mb: "6px" }, children: _jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.surface }, children: "Tint" }) }), _jsxs(Stack, { direction: "row", justifyContent: "space-between", sx: { p: "0px", m: "0px", pt: "2px", pb: "16px" }, children: [_jsx(IconButton, { onClick: props.onTintDecreaseMax, sx: buttonSx, children: _jsx(CardMedia, { component: "img", image: "/v1/svg/bulk-editor-max-button.svg", sx: { width: "20px", height: "20px", mr: "2px" } }) }), _jsx(IconButton, { onClick: props.onTintDecrease, sx: buttonSx, children: _jsx(CardMedia, { component: "img", image: "/v1/svg/bulk-editor-increment-button.svg", sx: { width: "20px", height: "20px", mr: "3px" } }) }), _jsx(IconButton, { onClick: props.onTintIncrease, sx: buttonSx, children: _jsx(CardMedia, { component: "img", image: "/v1/svg/bulk-editor-increment-button-right.svg", sx: { width: "20px", height: "20px", ml: "3px" } }) }), _jsx(IconButton, { onClick: props.onTintIncreaseMax, sx: lastButtonSx, children: _jsx(CardMedia, { component: "img", image: "/v1/svg/bulk-editor-max-button-right.svg", sx: { width: "20px", height: "20px", ml: "2px" } }) })] }), _jsx(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { mb: "6px" }, children: _jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.surface }, children: "Vibrance" }) }), _jsxs(Stack, { direction: "row", justifyContent: "space-between", sx: { p: "0px", m: "0px", pt: "2px", pb: "16px" }, children: [_jsx(IconButton, { onClick: props.onVibranceDecreaseMax, sx: buttonSx, children: _jsx(CardMedia, { component: "img", image: "/v1/svg/bulk-editor-max-button.svg", sx: { width: "20px", height: "20px", mr: "2px" } }) }), _jsx(IconButton, { onClick: props.onVibranceDecrease, sx: buttonSx, children: _jsx(CardMedia, { component: "img", image: "/v1/svg/bulk-editor-increment-button.svg", sx: { width: "20px", height: "20px", mr: "3px" } }) }), _jsx(IconButton, { onClick: props.onVibranceIncrease, sx: buttonSx, children: _jsx(CardMedia, { component: "img", image: "/v1/svg/bulk-editor-increment-button-right.svg", sx: { width: "20px", height: "20px", ml: "3px" } }) }), _jsx(IconButton, { onClick: props.onVibranceIncreaseMax, sx: lastButtonSx, children: _jsx(CardMedia, { component: "img", image: "/v1/svg/bulk-editor-max-button-right.svg", sx: { width: "20px", height: "20px", ml: "2px" } }) })] }), _jsx(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { mb: "6px" }, children: _jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.surface }, children: "Saturation" }) }), _jsxs(Stack, { direction: "row", justifyContent: "space-between", sx: { p: "0px", m: "0px", pt: "2px", pb: "16px" }, children: [_jsx(IconButton, { onClick: props.onSaturationDecreaseMax, sx: buttonSx, children: _jsx(CardMedia, { component: "img", image: "/v1/svg/bulk-editor-max-button.svg", sx: { width: "20px", height: "20px", mr: "2px" } }) }), _jsx(IconButton, { onClick: props.onSaturationDecrease, sx: buttonSx, children: _jsx(CardMedia, { component: "img", image: "/v1/svg/bulk-editor-increment-button.svg", sx: { width: "20px", height: "20px", mr: "3px" } }) }), _jsx(IconButton, { onClick: props.onSaturationIncrease, sx: buttonSx, children: _jsx(CardMedia, { component: "img", image: "/v1/svg/bulk-editor-increment-button-right.svg", sx: { width: "20px", height: "20px", ml: "3px" } }) }), _jsx(IconButton, { onClick: props.onSaturationIncreaseMax, sx: lastButtonSx, children: _jsx(CardMedia, { component: "img", image: "/v1/svg/bulk-editor-max-button-right.svg", sx: { width: "20px", height: "20px", ml: "2px" } }) })] })] }) }));
|
|
121
28
|
}
|
|
@@ -24,7 +24,7 @@ export function HDialogCopy(props) {
|
|
|
24
24
|
color: colors.onSurface,
|
|
25
25
|
'&.Mui-checked, &.Mui-indeterminate': { color: colors.onSurface },
|
|
26
26
|
};
|
|
27
|
-
return (_jsxs(Stack, { direction: "column", spacing: 1, sx: { padding: 0, margin: 0, width: '100%' }, children: [_jsxs(Stack, { children: [_jsxs(Stack, { direction: "row", alignItems: "center", justifyContent: "space-between", children: [_jsx(FormControlLabel, { label: _jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.onSurface, pt: "2px" }, children: "Color" }), control: _jsx(Checkbox, { color: "default", icon: _jsx(RoundedSquareIcon, { color: colors.onSurface }), checkedIcon: _jsx(RoundedSquareCheckedIcon, { color: colors.onSurface }), indeterminateIcon: _jsx(RoundedSquareIndeterminateIcon, { color: colors.onSurface }), checked: isColorParentChecked, indeterminate: isColorParentIndeterminate, onChange: (e) => props.onParentChange(e, props.setColorChecks), sx: checkboxStyle }) }), _jsxs(Stack, { direction: "row", alignItems: "center", children: [_jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.onSurface }, children: `${colorCheckedCount}/${colorValues.length}` }), _jsx(IconButton, { onClick: () => props.onToggleExpand('color'), size: "small", sx: { pt: "3px" }, children: _jsx(ExpandMoreIcon, { sx: { colors: colors.background, transition: 'transform 0.3s', transform: props.expanded.color ? 'rotate(
|
|
27
|
+
return (_jsxs(Stack, { direction: "column", spacing: 1, sx: { padding: 0, margin: 0, width: '100%' }, children: [_jsxs(Stack, { children: [_jsxs(Stack, { direction: "row", alignItems: "center", justifyContent: "space-between", children: [_jsx(FormControlLabel, { label: _jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.onSurface, pt: "2px" }, children: "Color" }), control: _jsx(Checkbox, { color: "default", icon: _jsx(RoundedSquareIcon, { color: colors.onSurface }), checkedIcon: _jsx(RoundedSquareCheckedIcon, { color: colors.onSurface }), indeterminateIcon: _jsx(RoundedSquareIndeterminateIcon, { color: colors.onSurface }), checked: isColorParentChecked, indeterminate: isColorParentIndeterminate, onChange: (e) => props.onParentChange(e, props.setColorChecks), sx: checkboxStyle }) }), _jsxs(Stack, { direction: "row", alignItems: "center", children: [_jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.onSurface }, children: `${colorCheckedCount}/${colorValues.length}` }), _jsx(IconButton, { onClick: () => props.onToggleExpand('color'), size: "small", sx: { pt: "3px" }, children: _jsx(ExpandMoreIcon, { sx: { colors: colors.background, transition: 'transform 0.3s', transform: props.expanded.color ? 'rotate(180deg)' : 'rotate(0deg)' } }) })] })] }), _jsx(Collapse, { in: props.expanded.color, timeout: "auto", unmountOnExit: true, children: _jsxs(Stack, { direction: "column", sx: { ml: 2, pl: 1.5 }, children: [_jsx(FormControlLabel, { label: _jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.onSurface, pt: "2px" }, children: "Temperature" }), control: _jsx(Checkbox, { icon: _jsx(RoundedSquareIcon, { color: colors.onSurface }), checkedIcon: _jsx(RoundedSquareCheckedIcon, { color: colors.onSurface }), name: "temperature", checked: props.colorChecks.temperature, onChange: (e) => props.onChildChange(e, props.setColorChecks), sx: checkboxStyle }) }), _jsx(FormControlLabel, { label: _jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.onSurface, pt: "2px" }, children: "Tint" }), control: _jsx(Checkbox, { icon: _jsx(RoundedSquareIcon, { color: colors.onSurface }), checkedIcon: _jsx(RoundedSquareCheckedIcon, { color: colors.onSurface }), name: "tint", checked: props.colorChecks.tint, onChange: (e) => props.onChildChange(e, props.setColorChecks), sx: checkboxStyle }) }), _jsx(FormControlLabel, { label: _jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.onSurface, pt: "2px" }, children: "Vibrance" }), control: _jsx(Checkbox, { icon: _jsx(RoundedSquareIcon, { color: colors.onSurface }), checkedIcon: _jsx(RoundedSquareCheckedIcon, { color: colors.onSurface }), name: "vibrance", checked: props.colorChecks.vibrance, onChange: (e) => props.onChildChange(e, props.setColorChecks), sx: checkboxStyle }) }), _jsx(FormControlLabel, { label: _jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.onSurface, pt: "2px" }, children: "Saturation" }), control: _jsx(Checkbox, { icon: _jsx(RoundedSquareIcon, { color: colors.onSurface }), checkedIcon: _jsx(RoundedSquareCheckedIcon, { color: colors.onSurface }), name: "saturation", checked: props.colorChecks.saturation, onChange: (e) => props.onChildChange(e, props.setColorChecks), sx: checkboxStyle }) })] }) })] }), _jsxs(Stack, { children: [_jsxs(Stack, { direction: "row", alignItems: "center", justifyContent: "space-between", children: [_jsx(FormControlLabel, { label: _jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.onSurface, pt: "2px" }, children: "Light" }), control: _jsx(Checkbox, { color: "default", icon: _jsx(RoundedSquareIcon, { color: colors.onSurface }), checkedIcon: _jsx(RoundedSquareCheckedIcon, { color: colors.onSurface }), indeterminateIcon: _jsx(RoundedSquareIndeterminateIcon, { color: colors.onSurface }), checked: isLightParentChecked, indeterminate: isLightParentIndeterminate, onChange: (e) => props.onParentChange(e, props.setLightChecks), sx: checkboxStyle }) }), _jsxs(Stack, { direction: "row", alignItems: "center", children: [_jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.onSurface }, children: `${lightCheckedCount}/${lightValues.length}` }), _jsx(IconButton, { onClick: () => props.onToggleExpand('light'), size: "small", sx: { pt: "3px" }, children: _jsx(ExpandMoreIcon, { sx: { transition: 'transform 0.3s', transform: props.expanded.light ? 'rotate(180deg)' : 'rotate(0deg)' } }) })] })] }), _jsx(Collapse, { in: props.expanded.light, timeout: "auto", unmountOnExit: true, children: _jsxs(Stack, { direction: "column", sx: { ml: 2, pl: 1.5 }, children: [_jsx(FormControlLabel, { label: _jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.onSurface, pt: "2px" }, children: "Exposure" }), control: _jsx(Checkbox, { icon: _jsx(RoundedSquareIcon, { color: colors.onSurface }), checkedIcon: _jsx(RoundedSquareCheckedIcon, { color: colors.onSurface }), color: "default", name: "exposure", checked: props.lightChecks.exposure, onChange: (e) => props.onChildChange(e, props.setLightChecks), sx: checkboxStyle }) }), _jsx(FormControlLabel, { label: _jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.onSurface, pt: "2px" }, children: "Contrast" }), control: _jsx(Checkbox, { icon: _jsx(RoundedSquareIcon, { color: colors.onSurface }), checkedIcon: _jsx(RoundedSquareCheckedIcon, { color: colors.onSurface }), color: "default", name: "contrast", checked: props.lightChecks.contrast, onChange: (e) => props.onChildChange(e, props.setLightChecks), sx: checkboxStyle }) }), _jsx(FormControlLabel, { label: _jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.onSurface, pt: "2px" }, children: "Highlights" }), control: _jsx(Checkbox, { icon: _jsx(RoundedSquareIcon, { color: colors.onSurface }), checkedIcon: _jsx(RoundedSquareCheckedIcon, { color: colors.onSurface }), color: "default", name: "highlights", checked: props.lightChecks.highlights, onChange: (e) => props.onChildChange(e, props.setLightChecks), sx: checkboxStyle }) }), _jsx(FormControlLabel, { label: _jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.onSurface, pt: "2px" }, children: "Shadows" }), control: _jsx(Checkbox, { icon: _jsx(RoundedSquareIcon, { color: colors.onSurface }), checkedIcon: _jsx(RoundedSquareCheckedIcon, { color: colors.onSurface }), color: "default", name: "shadows", checked: props.lightChecks.shadows, onChange: (e) => props.onChildChange(e, props.setLightChecks), sx: checkboxStyle }) }), _jsx(FormControlLabel, { label: _jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.onSurface, pt: "2px" }, children: "Whites" }), control: _jsx(Checkbox, { icon: _jsx(RoundedSquareIcon, { color: colors.onSurface }), checkedIcon: _jsx(RoundedSquareCheckedIcon, { color: colors.onSurface }), color: "default", name: "whites", checked: props.lightChecks.whites, onChange: (e) => props.onChildChange(e, props.setLightChecks), sx: checkboxStyle }) }), _jsx(FormControlLabel, { label: _jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.onSurface, pt: "2px" }, children: "Blacks" }), control: _jsx(Checkbox, { icon: _jsx(RoundedSquareIcon, { color: colors.onSurface }), checkedIcon: _jsx(RoundedSquareCheckedIcon, { color: colors.onSurface }), color: "default", name: "blacks", checked: props.lightChecks.blacks, onChange: (e) => props.onChildChange(e, props.setLightChecks), sx: checkboxStyle }) })] }) })] }), _jsxs(Stack, { children: [_jsxs(Stack, { direction: "row", alignItems: "center", justifyContent: "space-between", children: [_jsx(FormControlLabel, { label: _jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.onSurface, pt: "2px" }, children: "Details" }), control: _jsx(Checkbox, { color: "default", icon: _jsx(RoundedSquareIcon, { color: colors.onSurface }), checkedIcon: _jsx(RoundedSquareCheckedIcon, { color: colors.onSurface }), indeterminateIcon: _jsx(RoundedSquareIndeterminateIcon, { color: colors.onSurface }), checked: isDetailsParentChecked, indeterminate: isDetailsParentIndeterminate, onChange: (e) => props.onParentChange(e, props.setDetailsChecks), sx: checkboxStyle }) }), _jsxs(Stack, { direction: "row", alignItems: "center", children: [_jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.onSurface }, children: `${detailsCheckedCount}/${detailsValues.length}` }), _jsx(IconButton, { onClick: () => props.onToggleExpand('details'), size: "small", sx: { pt: "3px" }, children: _jsx(ExpandMoreIcon, { sx: { transition: 'transform 0.3s', transform: props.expanded.details ? 'rotate(180deg)' : 'rotate(0deg)' } }) })] })] }), _jsx(Collapse, { in: props.expanded.details, timeout: "auto", unmountOnExit: true, children: _jsxs(Stack, { direction: "column", sx: { ml: 2, pl: 1.5 }, children: [_jsx(FormControlLabel, { label: _jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.onSurface, pt: "2px" }, children: "Clarity" }), control: _jsx(Checkbox, { icon: _jsx(RoundedSquareIcon, { color: colors.onSurface }), checkedIcon: _jsx(RoundedSquareCheckedIcon, { color: colors.onSurface }), color: "default", name: "details.clarity", checked: props.detailsChecks.clarity, onChange: (e) => props.onChildChange(e, props.setDetailsChecks), sx: checkboxStyle }) }), _jsx(FormControlLabel, { label: _jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.onSurface, pt: "2px" }, children: "Sharpness" }), control: _jsx(Checkbox, { icon: _jsx(RoundedSquareIcon, { color: colors.onSurface }), checkedIcon: _jsx(RoundedSquareCheckedIcon, { color: colors.onSurface }), color: "default", name: "details.sharpness", checked: props.detailsChecks.sharpness, onChange: (e) => props.onChildChange(e, props.setDetailsChecks), sx: checkboxStyle }) })] }) })] }), _jsx(Button, { onClick: props.onCopyEdit, sx: { ...typography.labelMedium, mt: '20px', height: '40px', color: colors.surface, backgroundColor: colors.onSurface, borderRadius: '100px', textTransform: 'none' }, children: "Copy" })] }));
|
|
28
28
|
}
|
|
29
29
|
// A component for the UNCHECKED box
|
|
30
30
|
const RoundedSquareIcon = ({ color }) => (_jsx("div", { style: {
|
|
@@ -76,5 +76,5 @@ export function HDialogPreset(propsPreset) {
|
|
|
76
76
|
color: colors.onSurface,
|
|
77
77
|
'&.Mui-checked, &.Mui-indeterminate': { color: colors.onSurface },
|
|
78
78
|
};
|
|
79
|
-
return (_jsxs(Stack, { direction: "column", spacing: 1, sx: { padding: 0, margin: 0, width: '100%' }, children: [_jsxs(Stack, { children: [_jsx(Stack, { direction: "column", alignItems: "flex-start", children: _jsx(Typography, { variant: "inherit", color: "initial", children: propsPreset.descriptionOnCopy }) }), _jsxs(Stack, { direction: "row", alignItems: "center", justifyContent: "space-between", children: [_jsx(FormControlLabel, { label: _jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.onSurface, pt: "2px" }, children: "Color" }), control: _jsx(Checkbox, { color: "default", icon: _jsx(RoundedSquareIcon, { color: colors.onSurface }), checkedIcon: _jsx(RoundedSquareCheckedIcon, { color: colors.onSurface }), indeterminateIcon: _jsx(RoundedSquareIndeterminateIcon, { color: colors.onSurface }), checked: isColorParentChecked, indeterminate: isColorParentIndeterminate, onChange: (e) => propsPreset.onParentChange(e, propsPreset.setColorChecks), sx: checkboxStyle }) }), _jsxs(Stack, { direction: "row", alignItems: "center", children: [_jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.onSurface }, children: `${colorCheckedCount}/${colorValues.length}` }), _jsx(IconButton, { onClick: () => propsPreset.onToggleExpand('color'), size: "small", sx: { pt: "3px" }, children: _jsx(ExpandMoreIcon, { sx: { colors: colors.background, transition: 'transform 0.3s', transform: propsPreset.expanded.color ? 'rotate(0deg)' : 'rotate(180deg)' } }) })] })] }), _jsx(Collapse, { in: propsPreset.expanded.color, timeout: "auto", unmountOnExit: true, children: _jsxs(Stack, { direction: "column", sx: { ml: 2, pl: 1.5 }, children: [_jsx(FormControlLabel, { label: _jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.onSurface, pt: "2px" }, children: "Temperature" }), control: _jsx(Checkbox, { icon: _jsx(RoundedSquareIcon, { color: colors.onSurface }), checkedIcon: _jsx(RoundedSquareCheckedIcon, { color: colors.onSurface }), name: "temperature", checked: propsPreset.colorChecks.temperature, onChange: (e) => propsPreset.onChildChange(e, propsPreset.setColorChecks), sx: checkboxStyle }) }), _jsx(FormControlLabel, { label: _jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.onSurface, pt: "2px" }, children: "Tint" }), control: _jsx(Checkbox, { icon: _jsx(RoundedSquareIcon, { color: colors.onSurface }), checkedIcon: _jsx(RoundedSquareCheckedIcon, { color: colors.onSurface }), name: "tint", checked: propsPreset.colorChecks.tint, onChange: (e) => propsPreset.onChildChange(e, propsPreset.setColorChecks), sx: checkboxStyle }) }), _jsx(FormControlLabel, { label: _jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.onSurface, pt: "2px" }, children: "Vibrance" }), control: _jsx(Checkbox, { icon: _jsx(RoundedSquareIcon, { color: colors.onSurface }), checkedIcon: _jsx(RoundedSquareCheckedIcon, { color: colors.onSurface }), name: "vibrance", checked: propsPreset.colorChecks.vibrance, onChange: (e) => propsPreset.onChildChange(e, propsPreset.setColorChecks), sx: checkboxStyle }) }), _jsx(FormControlLabel, { label: _jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.onSurface, pt: "2px" }, children: "Saturation" }), control: _jsx(Checkbox, { icon: _jsx(RoundedSquareIcon, { color: colors.onSurface }), checkedIcon: _jsx(RoundedSquareCheckedIcon, { color: colors.onSurface }), name: "saturation", checked: propsPreset.colorChecks.saturation, onChange: (e) => propsPreset.onChildChange(e, propsPreset.setColorChecks), sx: checkboxStyle }) })] }) })] }), _jsxs(Stack, { children: [_jsxs(Stack, { direction: "row", alignItems: "center", justifyContent: "space-between", children: [_jsx(FormControlLabel, { label: _jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.onSurface, pt: "2px" }, children: "Light" }), control: _jsx(Checkbox, { color: "default", icon: _jsx(RoundedSquareIcon, { color: colors.onSurface }), checkedIcon: _jsx(RoundedSquareCheckedIcon, { color: colors.onSurface }), indeterminateIcon: _jsx(RoundedSquareIndeterminateIcon, { color: colors.onSurface }), checked: isLightParentChecked, indeterminate: isLightParentIndeterminate, onChange: (e) => propsPreset.onParentChange(e, propsPreset.setLightChecks), sx: checkboxStyle }) }), _jsxs(Stack, { direction: "row", alignItems: "center", children: [_jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.onSurface }, children: `${lightCheckedCount}/${lightValues.length}` }), _jsx(IconButton, { onClick: () => propsPreset.onToggleExpand('light'), size: "small", sx: { pt: "3px" }, children: _jsx(ExpandMoreIcon, { sx: { transition: 'transform 0.3s', transform: propsPreset.expanded.light ? 'rotate(0deg)' : 'rotate(180deg)' } }) })] })] }), _jsx(Collapse, { in: propsPreset.expanded.light, timeout: "auto", unmountOnExit: true, children: _jsxs(Stack, { direction: "column", sx: { ml: 2, pl: 1.5 }, children: [_jsx(FormControlLabel, { label: _jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.onSurface, pt: "2px" }, children: "Exposure" }), control: _jsx(Checkbox, { icon: _jsx(RoundedSquareIcon, { color: colors.onSurface }), checkedIcon: _jsx(RoundedSquareCheckedIcon, { color: colors.onSurface }), color: "default", name: "exposure", checked: propsPreset.lightChecks.exposure, onChange: (e) => propsPreset.onChildChange(e, propsPreset.setLightChecks), sx: checkboxStyle }) }), _jsx(FormControlLabel, { label: _jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.onSurface, pt: "2px" }, children: "Contrast" }), control: _jsx(Checkbox, { icon: _jsx(RoundedSquareIcon, { color: colors.onSurface }), checkedIcon: _jsx(RoundedSquareCheckedIcon, { color: colors.onSurface }), color: "default", name: "contrast", checked: propsPreset.lightChecks.contrast, onChange: (e) => propsPreset.onChildChange(e, propsPreset.setLightChecks), sx: checkboxStyle }) }), _jsx(FormControlLabel, { label: _jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.onSurface, pt: "2px" }, children: "Highlights" }), control: _jsx(Checkbox, { icon: _jsx(RoundedSquareIcon, { color: colors.onSurface }), checkedIcon: _jsx(RoundedSquareCheckedIcon, { color: colors.onSurface }), color: "default", name: "highlights", checked: propsPreset.lightChecks.highlights, onChange: (e) => propsPreset.onChildChange(e, propsPreset.setLightChecks), sx: checkboxStyle }) }), _jsx(FormControlLabel, { label: _jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.onSurface, pt: "2px" }, children: "Shadows" }), control: _jsx(Checkbox, { icon: _jsx(RoundedSquareIcon, { color: colors.onSurface }), checkedIcon: _jsx(RoundedSquareCheckedIcon, { color: colors.onSurface }), color: "default", name: "shadows", checked: propsPreset.lightChecks.shadows, onChange: (e) => propsPreset.onChildChange(e, propsPreset.setLightChecks), sx: checkboxStyle }) }), _jsx(FormControlLabel, { label: _jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.onSurface, pt: "2px" }, children: "Whites" }), control: _jsx(Checkbox, { icon: _jsx(RoundedSquareIcon, { color: colors.onSurface }), checkedIcon: _jsx(RoundedSquareCheckedIcon, { color: colors.onSurface }), color: "default", name: "whites", checked: propsPreset.lightChecks.whites, onChange: (e) => propsPreset.onChildChange(e, propsPreset.setLightChecks), sx: checkboxStyle }) }), _jsx(FormControlLabel, { label: _jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.onSurface, pt: "2px" }, children: "Blacks" }), control: _jsx(Checkbox, { icon: _jsx(RoundedSquareIcon, { color: colors.onSurface }), checkedIcon: _jsx(RoundedSquareCheckedIcon, { color: colors.onSurface }), color: "default", name: "blacks", checked: propsPreset.lightChecks.blacks, onChange: (e) => propsPreset.onChildChange(e, propsPreset.setLightChecks), sx: checkboxStyle }) })] }) })] }), _jsxs(Stack, { children: [_jsxs(Stack, { direction: "row", alignItems: "center", justifyContent: "space-between", children: [_jsx(FormControlLabel, { label: _jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.onSurface, pt: "2px" }, children: "Details" }), control: _jsx(Checkbox, { color: "default", icon: _jsx(RoundedSquareIcon, { color: colors.onSurface }), checkedIcon: _jsx(RoundedSquareCheckedIcon, { color: colors.onSurface }), indeterminateIcon: _jsx(RoundedSquareIndeterminateIcon, { color: colors.onSurface }), checked: isDetailsParentChecked, indeterminate: isDetailsParentIndeterminate, onChange: (e) => propsPreset.onParentChange(e, propsPreset.setDetailsChecks), sx: checkboxStyle }) }), _jsxs(Stack, { direction: "row", alignItems: "center", children: [_jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.onSurface }, children: `${detailsCheckedCount}/${detailsValues.length}` }), _jsx(IconButton, { onClick: () => propsPreset.onToggleExpand('details'), size: "small", sx: { pt: "3px" }, children: _jsx(ExpandMoreIcon, { sx: { transition: 'transform 0.3s', transform: propsPreset.expanded.details ? 'rotate(0deg)' : 'rotate(180deg)' } }) })] })] }), _jsx(Collapse, { in: propsPreset.expanded.details, timeout: "auto", unmountOnExit: true, children: _jsxs(Stack, { direction: "column", sx: { ml: 2, pl: 1.5 }, children: [_jsx(FormControlLabel, { label: _jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.onSurface, pt: "2px" }, children: "Clarity" }), control: _jsx(Checkbox, { icon: _jsx(RoundedSquareIcon, { color: colors.onSurface }), checkedIcon: _jsx(RoundedSquareCheckedIcon, { color: colors.onSurface }), color: "default", name: "details.clarity", checked: propsPreset.detailsChecks.clarity, onChange: (e) => propsPreset.onChildChange(e, propsPreset.setDetailsChecks), sx: checkboxStyle }) }), _jsx(FormControlLabel, { label: _jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.onSurface, pt: "2px" }, children: "Sharpness" }), control: _jsx(Checkbox, { icon: _jsx(RoundedSquareIcon, { color: colors.onSurface }), checkedIcon: _jsx(RoundedSquareCheckedIcon, { color: colors.onSurface }), color: "default", name: "details.sharpness", checked: propsPreset.detailsChecks.sharpness, onChange: (e) => propsPreset.onChildChange(e, propsPreset.setDetailsChecks), sx: checkboxStyle }) })] }) })] })] }));
|
|
79
|
+
return (_jsxs(Stack, { direction: "column", spacing: 1, sx: { padding: 0, margin: 0, width: '100%' }, children: [_jsxs(Stack, { children: [_jsx(Stack, { direction: "column", alignItems: "flex-start", children: _jsx(Typography, { variant: "inherit", color: "initial", children: propsPreset.descriptionOnCopy }) }), _jsxs(Stack, { direction: "row", alignItems: "center", justifyContent: "space-between", children: [_jsx(FormControlLabel, { label: _jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.onSurface, pt: "2px" }, children: "Color" }), control: _jsx(Checkbox, { color: "default", icon: _jsx(RoundedSquareIcon, { color: colors.onSurface }), checkedIcon: _jsx(RoundedSquareCheckedIcon, { color: colors.onSurface }), indeterminateIcon: _jsx(RoundedSquareIndeterminateIcon, { color: colors.onSurface }), checked: isColorParentChecked, indeterminate: isColorParentIndeterminate, onChange: (e) => propsPreset.onParentChange(e, propsPreset.setColorChecks), sx: checkboxStyle }) }), _jsxs(Stack, { direction: "row", alignItems: "center", children: [_jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.onSurface }, children: `${colorCheckedCount}/${colorValues.length}` }), _jsx(IconButton, { onClick: () => propsPreset.onToggleExpand('color'), size: "small", sx: { pt: "3px" }, children: _jsx(ExpandMoreIcon, { sx: { colors: colors.background, transition: 'transform 0.3s', transform: propsPreset.expanded.color ? 'rotate(180deg)' : 'rotate(0deg)' } }) })] })] }), _jsx(Collapse, { in: propsPreset.expanded.color, timeout: "auto", unmountOnExit: true, children: _jsxs(Stack, { direction: "column", sx: { ml: 2, pl: 1.5 }, children: [_jsx(FormControlLabel, { label: _jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.onSurface, pt: "2px" }, children: "Temperature" }), control: _jsx(Checkbox, { icon: _jsx(RoundedSquareIcon, { color: colors.onSurface }), checkedIcon: _jsx(RoundedSquareCheckedIcon, { color: colors.onSurface }), name: "temperature", checked: propsPreset.colorChecks.temperature, onChange: (e) => propsPreset.onChildChange(e, propsPreset.setColorChecks), sx: checkboxStyle }) }), _jsx(FormControlLabel, { label: _jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.onSurface, pt: "2px" }, children: "Tint" }), control: _jsx(Checkbox, { icon: _jsx(RoundedSquareIcon, { color: colors.onSurface }), checkedIcon: _jsx(RoundedSquareCheckedIcon, { color: colors.onSurface }), name: "tint", checked: propsPreset.colorChecks.tint, onChange: (e) => propsPreset.onChildChange(e, propsPreset.setColorChecks), sx: checkboxStyle }) }), _jsx(FormControlLabel, { label: _jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.onSurface, pt: "2px" }, children: "Vibrance" }), control: _jsx(Checkbox, { icon: _jsx(RoundedSquareIcon, { color: colors.onSurface }), checkedIcon: _jsx(RoundedSquareCheckedIcon, { color: colors.onSurface }), name: "vibrance", checked: propsPreset.colorChecks.vibrance, onChange: (e) => propsPreset.onChildChange(e, propsPreset.setColorChecks), sx: checkboxStyle }) }), _jsx(FormControlLabel, { label: _jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.onSurface, pt: "2px" }, children: "Saturation" }), control: _jsx(Checkbox, { icon: _jsx(RoundedSquareIcon, { color: colors.onSurface }), checkedIcon: _jsx(RoundedSquareCheckedIcon, { color: colors.onSurface }), name: "saturation", checked: propsPreset.colorChecks.saturation, onChange: (e) => propsPreset.onChildChange(e, propsPreset.setColorChecks), sx: checkboxStyle }) })] }) })] }), _jsxs(Stack, { children: [_jsxs(Stack, { direction: "row", alignItems: "center", justifyContent: "space-between", children: [_jsx(FormControlLabel, { label: _jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.onSurface, pt: "2px" }, children: "Light" }), control: _jsx(Checkbox, { color: "default", icon: _jsx(RoundedSquareIcon, { color: colors.onSurface }), checkedIcon: _jsx(RoundedSquareCheckedIcon, { color: colors.onSurface }), indeterminateIcon: _jsx(RoundedSquareIndeterminateIcon, { color: colors.onSurface }), checked: isLightParentChecked, indeterminate: isLightParentIndeterminate, onChange: (e) => propsPreset.onParentChange(e, propsPreset.setLightChecks), sx: checkboxStyle }) }), _jsxs(Stack, { direction: "row", alignItems: "center", children: [_jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.onSurface }, children: `${lightCheckedCount}/${lightValues.length}` }), _jsx(IconButton, { onClick: () => propsPreset.onToggleExpand('light'), size: "small", sx: { pt: "3px" }, children: _jsx(ExpandMoreIcon, { sx: { transition: 'transform 0.3s', transform: propsPreset.expanded.light ? 'rotate(180deg)' : 'rotate(0deg)' } }) })] })] }), _jsx(Collapse, { in: propsPreset.expanded.light, timeout: "auto", unmountOnExit: true, children: _jsxs(Stack, { direction: "column", sx: { ml: 2, pl: 1.5 }, children: [_jsx(FormControlLabel, { label: _jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.onSurface, pt: "2px" }, children: "Exposure" }), control: _jsx(Checkbox, { icon: _jsx(RoundedSquareIcon, { color: colors.onSurface }), checkedIcon: _jsx(RoundedSquareCheckedIcon, { color: colors.onSurface }), color: "default", name: "exposure", checked: propsPreset.lightChecks.exposure, onChange: (e) => propsPreset.onChildChange(e, propsPreset.setLightChecks), sx: checkboxStyle }) }), _jsx(FormControlLabel, { label: _jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.onSurface, pt: "2px" }, children: "Contrast" }), control: _jsx(Checkbox, { icon: _jsx(RoundedSquareIcon, { color: colors.onSurface }), checkedIcon: _jsx(RoundedSquareCheckedIcon, { color: colors.onSurface }), color: "default", name: "contrast", checked: propsPreset.lightChecks.contrast, onChange: (e) => propsPreset.onChildChange(e, propsPreset.setLightChecks), sx: checkboxStyle }) }), _jsx(FormControlLabel, { label: _jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.onSurface, pt: "2px" }, children: "Highlights" }), control: _jsx(Checkbox, { icon: _jsx(RoundedSquareIcon, { color: colors.onSurface }), checkedIcon: _jsx(RoundedSquareCheckedIcon, { color: colors.onSurface }), color: "default", name: "highlights", checked: propsPreset.lightChecks.highlights, onChange: (e) => propsPreset.onChildChange(e, propsPreset.setLightChecks), sx: checkboxStyle }) }), _jsx(FormControlLabel, { label: _jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.onSurface, pt: "2px" }, children: "Shadows" }), control: _jsx(Checkbox, { icon: _jsx(RoundedSquareIcon, { color: colors.onSurface }), checkedIcon: _jsx(RoundedSquareCheckedIcon, { color: colors.onSurface }), color: "default", name: "shadows", checked: propsPreset.lightChecks.shadows, onChange: (e) => propsPreset.onChildChange(e, propsPreset.setLightChecks), sx: checkboxStyle }) }), _jsx(FormControlLabel, { label: _jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.onSurface, pt: "2px" }, children: "Whites" }), control: _jsx(Checkbox, { icon: _jsx(RoundedSquareIcon, { color: colors.onSurface }), checkedIcon: _jsx(RoundedSquareCheckedIcon, { color: colors.onSurface }), color: "default", name: "whites", checked: propsPreset.lightChecks.whites, onChange: (e) => propsPreset.onChildChange(e, propsPreset.setLightChecks), sx: checkboxStyle }) }), _jsx(FormControlLabel, { label: _jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.onSurface, pt: "2px" }, children: "Blacks" }), control: _jsx(Checkbox, { icon: _jsx(RoundedSquareIcon, { color: colors.onSurface }), checkedIcon: _jsx(RoundedSquareCheckedIcon, { color: colors.onSurface }), color: "default", name: "blacks", checked: propsPreset.lightChecks.blacks, onChange: (e) => propsPreset.onChildChange(e, propsPreset.setLightChecks), sx: checkboxStyle }) })] }) })] }), _jsxs(Stack, { children: [_jsxs(Stack, { direction: "row", alignItems: "center", justifyContent: "space-between", children: [_jsx(FormControlLabel, { label: _jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.onSurface, pt: "2px" }, children: "Details" }), control: _jsx(Checkbox, { color: "default", icon: _jsx(RoundedSquareIcon, { color: colors.onSurface }), checkedIcon: _jsx(RoundedSquareCheckedIcon, { color: colors.onSurface }), indeterminateIcon: _jsx(RoundedSquareIndeterminateIcon, { color: colors.onSurface }), checked: isDetailsParentChecked, indeterminate: isDetailsParentIndeterminate, onChange: (e) => propsPreset.onParentChange(e, propsPreset.setDetailsChecks), sx: checkboxStyle }) }), _jsxs(Stack, { direction: "row", alignItems: "center", children: [_jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.onSurface }, children: `${detailsCheckedCount}/${detailsValues.length}` }), _jsx(IconButton, { onClick: () => propsPreset.onToggleExpand('details'), size: "small", sx: { pt: "3px" }, children: _jsx(ExpandMoreIcon, { sx: { transition: 'transform 0.3s', transform: propsPreset.expanded.details ? 'rotate(180deg)' : 'rotate(0deg)' } }) })] })] }), _jsx(Collapse, { in: propsPreset.expanded.details, timeout: "auto", unmountOnExit: true, children: _jsxs(Stack, { direction: "column", sx: { ml: 2, pl: 1.5 }, children: [_jsx(FormControlLabel, { label: _jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.onSurface, pt: "2px" }, children: "Clarity" }), control: _jsx(Checkbox, { icon: _jsx(RoundedSquareIcon, { color: colors.onSurface }), checkedIcon: _jsx(RoundedSquareCheckedIcon, { color: colors.onSurface }), color: "default", name: "details.clarity", checked: propsPreset.detailsChecks.clarity, onChange: (e) => propsPreset.onChildChange(e, propsPreset.setDetailsChecks), sx: checkboxStyle }) }), _jsx(FormControlLabel, { label: _jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.onSurface, pt: "2px" }, children: "Sharpness" }), control: _jsx(Checkbox, { icon: _jsx(RoundedSquareIcon, { color: colors.onSurface }), checkedIcon: _jsx(RoundedSquareCheckedIcon, { color: colors.onSurface }), color: "default", name: "details.sharpness", checked: propsPreset.detailsChecks.sharpness, onChange: (e) => propsPreset.onChildChange(e, propsPreset.setDetailsChecks), sx: checkboxStyle }) })] }) })] })] }));
|
|
80
80
|
}
|