@yogiswara/honcho-editor-ui 3.6.8 → 3.6.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.
Files changed (2) hide show
  1. package/dist/components/editor/HImageEditorSkeleton.js +18 -17
  2. package/package.json +1 -1
package/dist/components/editor/HImageEditorSkeleton.js CHANGED
@@ -23,7 +23,7 @@ export default function HImageEditorSkeleton(props) {
23
23
  transform: 'scale(0.92)',
24
24
  },
25
25
  transition: 'transform 0.1s ease-in-out',
26
- }, children: _jsx(CardMedia, { title: "back", src: "svg/Back.svg", component: "img" }) }) }), _jsx(Stack, { direction: "row", justifyContent: "flex-end", alignItems: "center", spacing: 0.1, sx: { pt: !isMobile ? "0px" : "2px", pr: isMobile ? "10px" : "5px" }, children: _jsx(Skeleton, { variant: "rounded", width: "131px", height: "18px",
26
+ }, children: _jsx(CardMedia, { title: "back", src: "svg/Back.svg", component: "img" }) }) }), _jsx(Stack, { direction: "row", justifyContent: "flex-end", alignItems: "center", spacing: 0.1, sx: { pt: !isMobile ? "0px" : "2px", pr: isMobile ? "10px" : "10px" }, children: _jsx(Skeleton, { variant: "rounded", width: "110px", height: "18px",
27
27
  // animation="wave"
28
28
  sx: {
29
29
  bgcolor: alpha(colors.background, 0.1),
@@ -36,37 +36,38 @@ export default function HImageEditorSkeleton(props) {
36
36
  p: isMobile ? 2 : 4,
37
37
  } }), !isMobile && (_jsx(Paper, { elevation: 3, sx: {
38
38
  position: 'inherit',
39
- right: '40px',
39
+ right: '50px',
40
40
  top: '55px',
41
- width: '250px',
41
+ width: '320px',
42
42
  pt: '4px',
43
+ pl: '38px',
43
44
  height: 'calc(100vh - 70px)',
44
45
  zIndex: 1200,
45
46
  backgroundColor: '#000000',
46
47
  overflow: 'hidden',
47
- }, children: _jsxs(Stack, { direction: "row", sx: { height: '100%', p: "0px" }, children: [_jsxs(Stack, { direction: "column", sx: { height: '95%' }, children: [_jsx(Box, { sx: { display: 'flex', flexDirection: 'column', p: "0px", pt: "8px" }, children: _jsxs(Box, { sx: { display: 'flex', flexDirection: 'column', py: "6px", gap: "8px" }, children: [_jsx(Skeleton, { variant: "rounded", width: "178px", height: "18px", sx: { bgcolor: alpha(colors.background, 0.1), } }), _jsx(Skeleton, { variant: "rounded", width: "178px", height: "18px", sx: { bgcolor: alpha(colors.background, 0.07), } })] }) }), _jsx(Box, { sx: { display: 'flex', flexDirection: 'column', p: "0px", pt: "8px" }, children: _jsxs(Box, { sx: { display: 'flex', flexDirection: 'column', py: "6px", gap: "8px" }, children: [_jsx(Skeleton, { variant: "rounded", width: "178px", height: "18px", sx: { bgcolor: alpha(colors.background, 0.1), } }), _jsx(Skeleton, { variant: "rounded", width: "178px", height: "18px", sx: { bgcolor: alpha(colors.background, 0.07), } })] }) }), _jsx(Box, { sx: { display: 'flex', flexDirection: 'column', p: "0px", pt: "8px" }, children: _jsxs(Box, { sx: { display: 'flex', flexDirection: 'column', py: "6px", gap: "8px" }, children: [_jsx(Skeleton, { variant: "rounded", width: "178px", height: "18px", sx: { bgcolor: alpha(colors.background, 0.1), } }), _jsx(Skeleton, { variant: "rounded", width: "178px", height: "18px", sx: { bgcolor: alpha(colors.background, 0.07), } })] }) })] }), _jsxs(Stack, { justifyContent: "flex-start",
48
+ }, children: _jsxs(Stack, { direction: "row", sx: { height: '100%', p: "0px" }, children: [_jsxs(Stack, { direction: "column", sx: { height: '95%' }, children: [_jsx(Box, { sx: { display: 'flex', flexDirection: 'column', p: "0px", pt: "8px" }, children: _jsxs(Box, { sx: { display: 'flex', flexDirection: 'column', py: "6px", gap: "8px" }, children: [_jsx(Skeleton, { variant: "rounded", width: "200px", height: "18px", sx: { bgcolor: alpha(colors.background, 0.1), } }), _jsx(Skeleton, { variant: "rounded", width: "200px", height: "18px", sx: { bgcolor: alpha(colors.background, 0.07), } })] }) }), _jsx(Box, { sx: { display: 'flex', flexDirection: 'column', p: "0px", pt: "8px" }, children: _jsxs(Box, { sx: { display: 'flex', flexDirection: 'column', py: "6px", gap: "8px" }, children: [_jsx(Skeleton, { variant: "rounded", width: "200px", height: "18px", sx: { bgcolor: alpha(colors.background, 0.1), } }), _jsx(Skeleton, { variant: "rounded", width: "200px", height: "18px", sx: { bgcolor: alpha(colors.background, 0.07), } })] }) }), _jsx(Box, { sx: { display: 'flex', flexDirection: 'column', p: "0px", pt: "8px" }, children: _jsxs(Box, { sx: { display: 'flex', flexDirection: 'column', py: "6px", gap: "8px" }, children: [_jsx(Skeleton, { variant: "rounded", width: "200px", height: "18px", sx: { bgcolor: alpha(colors.background, 0.1), } }), _jsx(Skeleton, { variant: "rounded", width: "200px", height: "18px", sx: { bgcolor: alpha(colors.background, 0.07), } })] }) })] }), _jsxs(Stack, { justifyContent: "flex-start",
48
49
  // spacing={"15px"}
49
50
  sx: {
50
- width: '10px',
51
+ // width: '10px',
51
52
  flexShrink: 0,
52
53
  pt: "0px",
53
- pl: "9px",
54
+ pl: "12px",
54
55
  }, children: [_jsx(Box, { sx: {
55
56
  width: "50px",
56
- height: "52px",
57
+ height: "48px",
57
58
  py: "17px",
58
59
  px: "16px",
59
- }, children: _jsx(Skeleton, { variant: "circular", width: 18, height: 18, sx: { bgcolor: alpha(colors.background, 0.1), } }) }), _jsx(Box, { sx: {
60
+ }, children: _jsx(Skeleton, { variant: "circular", width: 20, height: 20, sx: { bgcolor: alpha(colors.background, 0.1), } }) }), _jsx(Box, { sx: {
60
61
  width: "50px",
61
- height: "52px",
62
+ height: "48px",
62
63
  py: "17px",
63
64
  px: "16px",
64
- }, children: _jsx(Skeleton, { variant: "circular", width: 18, height: 18, sx: { bgcolor: alpha(colors.background, 0.1), } }) }), _jsx(Box, { sx: {
65
+ }, children: _jsx(Skeleton, { variant: "circular", width: 20, height: 20, sx: { bgcolor: alpha(colors.background, 0.1), } }) }), _jsx(Box, { sx: {
65
66
  width: "50px",
66
- height: "52px",
67
+ height: "48px",
67
68
  py: "17px",
68
69
  px: "16px",
69
- }, children: _jsx(Skeleton, { variant: "circular", width: 18, height: 18, sx: { bgcolor: alpha(colors.background, 0.1), } }) })] })] }) })), isMobile && (_jsx(Paper, { elevation: 0, sx: {
70
+ }, children: _jsx(Skeleton, { variant: "circular", width: 20, height: 20, sx: { bgcolor: alpha(colors.background, 0.1), } }) })] })] }) })), isMobile && (_jsx(Paper, { elevation: 0, sx: {
70
71
  position: 'fixed',
71
72
  bottom: 0,
72
73
  left: 0,
@@ -74,14 +75,14 @@ export default function HImageEditorSkeleton(props) {
74
75
  zIndex: 1300,
75
76
  backgroundColor: 'transparent',
76
77
  }, children: _jsxs(Paper, { sx: { backgroundColor: colors.onBackground, borderRadius: "0px" }, elevation: 3, children: [_jsx(Stack, { direction: "row", justifyContent: "center", alignItems: "center", sx: {
77
- py: "12px",
78
+ py: "28px",
78
79
  pt: "110px",
79
80
  // px: "143px",
80
81
  gap: "10px"
81
- }, children: _jsx(Skeleton, { variant: "rounded", width: "156px", height: 18, sx: { bgcolor: alpha(colors.background, 0.1), } }) }), _jsx(Stack, { direction: "row", justifyContent: "center", alignItems: "center", sx: {
82
- pt: "6px",
83
- pb: "13px",
82
+ }, children: _jsx(Skeleton, { variant: "rounded", width: "260px", height: 18, sx: { bgcolor: alpha(colors.background, 0.1), } }) }), _jsx(Stack, { direction: "row", justifyContent: "center", alignItems: "center", sx: {
83
+ pt: "20px",
84
+ pb: "16px",
84
85
  px: "16px",
85
86
  gap: "24px"
86
- }, children: _jsx(Skeleton, { variant: "rounded", width: 74, height: 18, sx: { bgcolor: alpha(colors.background, 0.1), } }) })] }) }))] })] }));
87
+ }, children: _jsx(Skeleton, { variant: "rounded", width: "88px", height: 18, sx: { bgcolor: alpha(colors.background, 0.1), } }) })] }) }))] })] }));
87
88
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@yogiswara/honcho-editor-ui",
3
- "version": "3.6.8",
3
+ "version": "3.6.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",