@uxf/cms 11.20.0 → 11.21.0
Sign up to get free protection for your applications and to get access to all the features.
- package/lib/layout/layout.js +20 -18
- package/lib/layout/types.d.ts +1 -0
- package/package.json +7 -7
- package/ui/styles/layout.css +7 -15
- package/ui/styles/login-layout.css +2 -8
package/lib/layout/layout.js
CHANGED
|
@@ -24,23 +24,25 @@ const Layout = (props) => {
|
|
|
24
24
|
react_1.default.createElement("div", { className: "uxf-cms-layout" },
|
|
25
25
|
react_1.default.createElement("div", { className: "uxf-cms-layout__wrapper" },
|
|
26
26
|
react_1.default.createElement(sidebar_1.Sidebar, { menuConfiguration: props.menuConfiguration, Logo: props.Logo }),
|
|
27
|
-
react_1.default.createElement("main", { className: `uxf-cms-layout__main ${(_a = props.mainClassName) !== null && _a !== void 0 ? _a : ""}`, style: { "--drawer-width": (0, rem_1.rem)(styles_1.drawerWidth) } },
|
|
28
|
-
react_1.default.createElement("div", { className: "uxf-cms-layout__loading
|
|
29
|
-
react_1.default.createElement(
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
props.
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
react_1.default.createElement(
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
react_1.default.createElement("
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
27
|
+
react_1.default.createElement("main", { className: `uxf-cms-layout__main ${(_a = props.mainClassName) !== null && _a !== void 0 ? _a : ""}`, style: { "--drawer-width": (0, rem_1.rem)(styles_1.drawerWidth) } },
|
|
28
|
+
props.loading ? (react_1.default.createElement("div", { className: "uxf-cms-layout__loading" },
|
|
29
|
+
react_1.default.createElement("div", { className: "uxf-cms-layout__loading-inner" },
|
|
30
|
+
react_1.default.createElement(loader_1.Loader, null),
|
|
31
|
+
react_1.default.createElement("p", { className: "uxf-cms-layout__loading-text" }, "Na\u010D\u00EDt\u00E1m\u2026")))) : (react_1.default.createElement(react_1.default.Fragment, null,
|
|
32
|
+
props.CustomHeader ? (props.CustomHeader) : (react_1.default.createElement("div", { className: `${props.Header ? "uxf-cms-layout__header" : ""} ${props.stickyHeader ? "uxf-cms-layout__header--sticky" : ""}` },
|
|
33
|
+
props.ToolbarRight && (react_1.default.createElement("div", { className: "uxf-cms-layout__toolbar" }, props.ToolbarRight)),
|
|
34
|
+
props.MessageBar,
|
|
35
|
+
react_1.default.createElement(layout_container_1.LayoutContainer, { type: (_b = props.headerContainerType) !== null && _b !== void 0 ? _b : props.containerType, className: "uxf-cms-layout__container--basic" },
|
|
36
|
+
react_1.default.createElement("div", { className: "uxf-cms-layout__avatar-title-wrapper" },
|
|
37
|
+
props.Avatar,
|
|
38
|
+
react_1.default.createElement("div", { className: "uxf-cms-layout__breadcrumbs-title-wrapper" },
|
|
39
|
+
props.breadcrumbs && react_1.default.createElement(breadcrumbs_1.Breadcrumbs, { items: props.breadcrumbs }),
|
|
40
|
+
react_1.default.createElement("div", { className: "uxf-cms-layout__title-wrapper" },
|
|
41
|
+
react_1.default.createElement("h1", { className: "uxf-cms-layout__title" }, props.title),
|
|
42
|
+
props.TitleRightContainer),
|
|
43
|
+
props.subtitle,
|
|
44
|
+
props.Header))))),
|
|
45
|
+
react_1.default.createElement(layout_container_1.LayoutContainer, { type: props.containerType }, props.children))),
|
|
46
|
+
props.FooterBar)))));
|
|
45
47
|
};
|
|
46
48
|
exports.Layout = Layout;
|
package/lib/layout/types.d.ts
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@uxf/cms",
|
|
3
|
-
"version": "11.
|
|
3
|
+
"version": "11.21.0",
|
|
4
4
|
"description": "UXF Cms",
|
|
5
5
|
"author": "UXFans <dev@uxf.cz>",
|
|
6
6
|
"homepage": "https://gitlab.com/uxf-npm/cms#readme",
|
|
@@ -30,13 +30,13 @@
|
|
|
30
30
|
"@dnd-kit/utilities": "3.2.2",
|
|
31
31
|
"@floating-ui/react": "0.26.9",
|
|
32
32
|
"@redux-devtools/extension": "3.3.0",
|
|
33
|
-
"@uxf/core": "11.
|
|
34
|
-
"@uxf/core-react": "11.
|
|
35
|
-
"@uxf/data-grid": "11.
|
|
36
|
-
"@uxf/form": "11.
|
|
33
|
+
"@uxf/core": "11.21.0",
|
|
34
|
+
"@uxf/core-react": "11.21.0",
|
|
35
|
+
"@uxf/data-grid": "11.21.0",
|
|
36
|
+
"@uxf/form": "11.21.0",
|
|
37
37
|
"@uxf/router": "11.11.3",
|
|
38
|
-
"@uxf/ui": "11.
|
|
39
|
-
"@uxf/wysiwyg": "11.
|
|
38
|
+
"@uxf/ui": "11.21.0",
|
|
39
|
+
"@uxf/wysiwyg": "11.21.0",
|
|
40
40
|
"axios": "1.6.7",
|
|
41
41
|
"axios-hooks": "5.0.2",
|
|
42
42
|
"es6-error": "4.1.1",
|
package/ui/styles/layout.css
CHANGED
|
@@ -2,13 +2,10 @@
|
|
|
2
2
|
display: flex;
|
|
3
3
|
|
|
4
4
|
&__wrapper {
|
|
5
|
+
background-color: theme("colors.gray.100");
|
|
5
6
|
display: flex;
|
|
6
7
|
width: 100%;
|
|
7
8
|
|
|
8
|
-
:root .light & {
|
|
9
|
-
background-color: theme("colors.gray.100");
|
|
10
|
-
}
|
|
11
|
-
|
|
12
9
|
:root .dark & {
|
|
13
10
|
background-color: theme("colors.gray.900");
|
|
14
11
|
color: theme("colors.darkHigh");
|
|
@@ -18,6 +15,8 @@
|
|
|
18
15
|
&__main {
|
|
19
16
|
--drawer-width: 264px;
|
|
20
17
|
|
|
18
|
+
display: flex;
|
|
19
|
+
flex-direction: column;
|
|
21
20
|
min-height: 100vh;
|
|
22
21
|
padding-bottom: theme("spacing.16");
|
|
23
22
|
width: 100%;
|
|
@@ -46,24 +45,19 @@
|
|
|
46
45
|
}
|
|
47
46
|
|
|
48
47
|
&__header {
|
|
49
|
-
:
|
|
50
|
-
background-color: theme("colors.white");
|
|
51
|
-
}
|
|
48
|
+
background-color: theme("colors.white");
|
|
52
49
|
|
|
53
50
|
:root .dark & {
|
|
54
51
|
background-color: theme("colors.gray.950");
|
|
55
52
|
}
|
|
56
53
|
|
|
57
54
|
&--sticky {
|
|
55
|
+
background-color: theme("colors.white");
|
|
58
56
|
box-shadow: theme("boxShadow.md");
|
|
59
57
|
position: sticky;
|
|
60
58
|
top: 0;
|
|
61
59
|
z-index: 10;
|
|
62
60
|
|
|
63
|
-
:root .light & {
|
|
64
|
-
background-color: theme("colors.white");
|
|
65
|
-
}
|
|
66
|
-
|
|
67
61
|
:root .dark & {
|
|
68
62
|
background-color: theme("colors.gray.950");
|
|
69
63
|
}
|
|
@@ -73,21 +67,19 @@
|
|
|
73
67
|
&__toolbar {
|
|
74
68
|
align-items: center;
|
|
75
69
|
background-color: theme("colors.sidebar.background");
|
|
70
|
+
color: theme("colors.darkMedium");
|
|
76
71
|
display: flex;
|
|
77
72
|
height: theme("spacing.12");
|
|
78
73
|
justify-content: flex-end;
|
|
79
74
|
padding: 0 theme("spacing.6");
|
|
80
75
|
|
|
81
|
-
:root .light & {
|
|
82
|
-
color: theme("colors.darkMedium");
|
|
83
|
-
}
|
|
84
|
-
|
|
85
76
|
:root .dark & {
|
|
86
77
|
color: theme("colors.lightMedium");
|
|
87
78
|
}
|
|
88
79
|
}
|
|
89
80
|
|
|
90
81
|
&__container {
|
|
82
|
+
flex-grow: 1;
|
|
91
83
|
margin: 0 auto;
|
|
92
84
|
padding: 0 theme("spacing.4");
|
|
93
85
|
|
|
@@ -1,15 +1,12 @@
|
|
|
1
1
|
.uxf-cms-login-layout {
|
|
2
2
|
align-items: center;
|
|
3
|
+
background-color: theme("colors.gray.100");
|
|
3
4
|
display: flex;
|
|
4
5
|
flex-direction: column;
|
|
5
6
|
justify-content: center;
|
|
6
7
|
min-height: 100vh;
|
|
7
8
|
padding: theme("spacing.4");
|
|
8
9
|
|
|
9
|
-
:root .light & {
|
|
10
|
-
background-color: theme("colors.gray.100");
|
|
11
|
-
}
|
|
12
|
-
|
|
13
10
|
:root .dark & {
|
|
14
11
|
background-color: theme("colors.gray.900");
|
|
15
12
|
color: theme("colors.darkHigh");
|
|
@@ -28,12 +25,9 @@
|
|
|
28
25
|
}
|
|
29
26
|
|
|
30
27
|
&__subtitle {
|
|
28
|
+
color: theme("colors.lightMedium");
|
|
31
29
|
margin-top: theme("spacing.2");
|
|
32
30
|
|
|
33
|
-
:root .light & {
|
|
34
|
-
color: theme("colors.lightMedium");
|
|
35
|
-
}
|
|
36
|
-
|
|
37
31
|
:root .dark & {
|
|
38
32
|
color: theme("colors.darkMedium");
|
|
39
33
|
}
|