@yogiswara/honcho-editor-ui 2.7.8 → 2.7.10

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.
@@ -27,17 +27,15 @@ export default function HAccordionPreset(props) {
27
27
  };
28
28
  const isPanelExpanded = (panelName) => props.expandedPanels.includes(panelName);
29
29
  return (_jsx(_Fragment, { children: _jsx(Box, { children: _jsxs(Accordion, { sx: accordionStyle, expanded: isPanelExpanded('preset'), onChange: props.onChange('preset'), disableGutters: true, children: [_jsx(AccordionSummary, { sx: { pr: 0 }, children: _jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { width: '100%' }, children: [_jsx(Typography, { sx: { ...typography.titleMedium, color: colors.surface }, children: "Preset" }), _jsx(CardMedia, { component: "img", image: isPanelExpanded('preset') ? "/v1/svg/expanded-editor.svg" : "/v1/svg/expand-editor.svg", sx: { width: "11.67px", height: "5.83px" } })] }) }), _jsx(AccordionDetails, { sx: { pr: "4px" }, children: _jsxs(Stack, { direction: "column", gap: "8px", sx: { pt: '0px', pb: '0px', mx: '0px', width: '100%' }, children: [props.presets.map((preset) => (_jsxs(Stack, { direction: "row", alignItems: "center", sx: { width: "100%" }, children: [_jsx(Box, { sx: { width: 100, flexShrink: 0 }, children: _jsx(Button, { sx: {
30
- flex: 1, // take all space left of icons
31
- minWidth: 0, // allow shrinking so ellipsis works
32
- textWrap: "nowrap", // Test
33
- overflow: "hidden",
34
- textOverflow: "ellipsis",
30
+ flex: 1,
31
+ minWidth: 0, // allow ellipsis to kick in
35
32
  textTransform: "none",
36
- display: "flex",
33
+ display: "block", // keep flex for left alignment
34
+ justifyContent: "flex-start",
35
+ alignItems: "center",
37
36
  color: colors.surface,
38
37
  pl: 0,
39
38
  ml: 0,
40
- justifyContent: "flex-start",
41
39
  ...typography.bodyMedium,
42
40
  }, onClick: () => props.onSelectPreset(preset.id), children: _jsx(Box, { component: "span", sx: {
43
41
  overflow: "hidden",
@@ -8,7 +8,16 @@ export default function HHeaderEditor(props) {
8
8
  const colors = useColors();
9
9
  const open = Boolean(props.anchorEl);
10
10
  const isMobile = useIsMobile();
11
- return (_jsx(_Fragment, { children: _jsxs(Stack, { direction: "row", justifyContent: "space-between", width: "100%", sx: { pr: !isMobile ? "24px" : "6px" }, children: [_jsx(Stack, { direction: "row", justifyContent: "flex-start", sx: { pl: !isMobile ? "0px" : "14px" }, children: _jsx(IconButton, { "aria-label": "back", onClick: props.onBack, sx: {
11
+ return (_jsx(_Fragment, { children: _jsxs(Stack, { direction: "row", justifyContent: "space-between", width: "100%", sx: {
12
+ id: 'HHeaderEditor',
13
+ pr: !isMobile ? "24px" : "6px",
14
+ position: 'fixed',
15
+ top: 0,
16
+ left: 0,
17
+ right: 0,
18
+ zIndex: 1300,
19
+ backgroundColor: 'transparent',
20
+ }, children: [_jsx(Stack, { direction: "row", justifyContent: "flex-start", sx: { pl: !isMobile ? "0px" : "14px" }, children: _jsx(IconButton, { "aria-label": "back", onClick: props.onBack, sx: {
12
21
  '&:active': {
13
22
  transform: 'scale(0.92)',
14
23
  },
@@ -39,6 +39,7 @@ export default function HImageEditorMobile(props) {
39
39
  }
40
40
  };
41
41
  return (_jsx(Paper, { elevation: 0, sx: {
42
+ id: 'HImageEditorMobile',
42
43
  position: 'fixed',
43
44
  bottom: 0,
44
45
  left: 0,
@@ -26,6 +26,7 @@ export default function HImageEditorMobileLayout(props) {
26
26
  };
27
27
  const currentSubTabs = subTabs[props.activePanel];
28
28
  return (_jsx(Paper, { elevation: 0, sx: {
29
+ id: 'HImageEditorMobileLayout',
29
30
  position: 'fixed',
30
31
  bottom: 0,
31
32
  left: 0,
@@ -182,7 +182,7 @@ export default function HSliderLightMobile(props) {
182
182
  '& .MuiSlider-thumb:hover': {
183
183
  boxShadow: 'none',
184
184
  }
185
- }, size: "small", value: props.highlightsScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onHighlightsChange("highlightsScore", newValue), onDoubleClick: () => props.onHighlightsChange("highlightsScore", 0) }), _jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { pt: '10px', pb: '0px' }, children: [_jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.surface }, children: "Shadows" }), _jsx(TextField, { hiddenLabel: true, id: "filled-hidden-label-small", value: formatValue(props.shadowScore), variant: "filled", onChange: (e) => handleInputChange(e, -100, 100, (val) => props.onShadowsChange("sharpnessScore", val)), sx: {
185
+ }, size: "small", value: props.highlightsScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onHighlightsChange("highlightsScore", newValue), onDoubleClick: () => props.onHighlightsChange("highlightsScore", 0) }), _jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { pt: '10px', pb: '0px' }, children: [_jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.surface }, children: "Shadows" }), _jsx(TextField, { hiddenLabel: true, id: "filled-hidden-label-small", value: formatValue(props.shadowScore), variant: "filled", onChange: (e) => handleInputChange(e, -100, 100, (val) => props.onShadowsChange("shadowsScore", val)), sx: {
186
186
  width: "40px",
187
187
  alignItems: "center",
188
188
  textAlign: "right",
@@ -236,7 +236,7 @@ export default function HSliderLightMobile(props) {
236
236
  '& .MuiSlider-thumb:hover': {
237
237
  boxShadow: 'none',
238
238
  }
239
- }, size: "small", value: props.shadowScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onShadowsChange("sharpnessScore", newValue), onDoubleClick: () => props.onShadowsChange("sharpnessScore", 0) }), _jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { pt: '10px', pb: '0px' }, children: [_jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.surface }, children: "Whites" }), _jsx(TextField, { hiddenLabel: true, id: "filled-hidden-label-small", value: formatValue(props.whiteScore), variant: "filled", onChange: (e) => handleInputChange(e, -100, 100, (val) => props.onWhitesChange("whitesScore", val)), sx: {
239
+ }, size: "small", value: props.shadowScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onShadowsChange("shadowsScore", newValue), onDoubleClick: () => props.onShadowsChange("shadowsScore", 0) }), _jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { pt: '10px', pb: '0px' }, children: [_jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.surface }, children: "Whites" }), _jsx(TextField, { hiddenLabel: true, id: "filled-hidden-label-small", value: formatValue(props.whiteScore), variant: "filled", onChange: (e) => handleInputChange(e, -100, 100, (val) => props.onWhitesChange("whitesScore", val)), sx: {
240
240
  width: "40px",
241
241
  alignItems: "center",
242
242
  textAlign: "right",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@yogiswara/honcho-editor-ui",
3
- "version": "2.7.8",
3
+ "version": "2.7.10",
4
4
  "description": "A complete UI component library for the Honcho photo editor.",
5
5
  "main": "./dist/index.js",
6
6
  "module": "./dist/index.mjs",