elbe-ui 0.4.19 → 0.4.20
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,4 +1,4 @@
|
|
|
1
|
-
import { ElbeChild } from "../../..";
|
|
1
|
+
import { ElbeChild, ElbeColorSchemes } from "../../..";
|
|
2
2
|
export type HeaderLogos = {
|
|
3
3
|
logo?: string | ElbeChild;
|
|
4
4
|
logoDark?: string | ElbeChild;
|
|
@@ -10,6 +10,7 @@ export type HeaderProps = HeaderLogos & {
|
|
|
10
10
|
title: string | ElbeChild;
|
|
11
11
|
centerTitle?: boolean;
|
|
12
12
|
actions?: ElbeChild[];
|
|
13
|
+
scheme?: ElbeColorSchemes;
|
|
13
14
|
};
|
|
14
15
|
export declare function Header(p: HeaderProps): import("preact").JSX.Element;
|
|
15
16
|
export declare function BackButton(p: {
|
|
@@ -7,13 +7,13 @@ import { _Toolbar } from "./toolbar";
|
|
|
7
7
|
const _backBtn = _jsx(BackButton, { onTap: () => history.go(-1) });
|
|
8
8
|
const _closeBtn = _jsx(CloseButton, { onTap: () => history.go(-1) });
|
|
9
9
|
export function Header(p) {
|
|
10
|
-
var _a, _b, _c, _d, _e, _f, _g;
|
|
10
|
+
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
11
11
|
const appBase = maybeAppBase();
|
|
12
12
|
const layoutMode = useLayoutMode();
|
|
13
13
|
const scroll = useSiteScroll();
|
|
14
14
|
const tConfig = useThemeConfig();
|
|
15
15
|
const theme = useTheme();
|
|
16
|
-
return (_jsxs(Card, { padding: 0, scheme: "primary", bordered: true, frosted: !tConfig.highVis, sharp: true, style: {
|
|
16
|
+
return (_jsxs(Card, { padding: 0, scheme: (_a = p.scheme) !== null && _a !== void 0 ? _a : "primary", bordered: true, frosted: !tConfig.highVis, sharp: true, style: {
|
|
17
17
|
position: "sticky",
|
|
18
18
|
top: 0,
|
|
19
19
|
left: 0,
|
|
@@ -31,7 +31,7 @@ export function Header(p) {
|
|
|
31
31
|
}, children: [p.leading && p.leading !== "back" && p.leading !== "close"
|
|
32
32
|
? p.leading
|
|
33
33
|
: appBase &&
|
|
34
|
-
layoutMode != "wide" && (_jsx(IconButton.plain, { ariaLabel: "open/close menu", onTap: () => appBase.setMenuOpen(!appBase.menuOpen), icon: MenuIcon })), p.leading === "back" && _backBtn, p.leading === "close" && _closeBtn, _jsx(_Logo, { logo: (
|
|
34
|
+
layoutMode != "wide" && (_jsx(IconButton.plain, { ariaLabel: "open/close menu", onTap: () => appBase.setMenuOpen(!appBase.menuOpen), icon: MenuIcon })), p.leading === "back" && _backBtn, p.leading === "close" && _closeBtn, layoutMode !== "mobile" && (_jsx(_Logo, { logo: (_b = p.logo) !== null && _b !== void 0 ? _b : appBase === null || appBase === void 0 ? void 0 : appBase.icons.logo, logoDark: (_c = p.logoDark) !== null && _c !== void 0 ? _c : appBase === null || appBase === void 0 ? void 0 : appBase.icons.logoDark, lMargin: 0.5 })), (!appBase || layoutMode === "wide") && (_jsx("div", { style: { margin: "-1rem", width: "1.5rem" } })), _jsx(_HeaderTitle, { title: p.title, center: (_d = p.centerTitle) !== null && _d !== void 0 ? _d : false }), _jsx(_Toolbar, { actions: [...((_e = p.actions) !== null && _e !== void 0 ? _e : []), ...((_f = appBase === null || appBase === void 0 ? void 0 : appBase.globalActions) !== null && _f !== void 0 ? _f : [])] }), layoutMode === "wide" && (_jsx(_Logo, { logo: (_g = p.endLogo) !== null && _g !== void 0 ? _g : appBase === null || appBase === void 0 ? void 0 : appBase.icons.endLogo, logoDark: (_h = p.endLogoDark) !== null && _h !== void 0 ? _h : appBase === null || appBase === void 0 ? void 0 : appBase.icons.endLogoDark, rMargin: 0.5 }))] }));
|
|
35
35
|
}
|
|
36
36
|
function _Logo(p) {
|
|
37
37
|
var _a, _b;
|
|
@@ -13,6 +13,7 @@ import { Header } from "./header";
|
|
|
13
13
|
* - `padding` will add padding around the content, defaulting to `1rem`.
|
|
14
14
|
*/
|
|
15
15
|
export function Page(p) {
|
|
16
|
+
var _a;
|
|
16
17
|
const [hasHeader, setHasHeader] = useState(false);
|
|
17
18
|
useEffect(() => {
|
|
18
19
|
const headerProps = Object.assign({}, p);
|
|
@@ -20,18 +21,21 @@ export function Page(p) {
|
|
|
20
21
|
delete headerProps.footer;
|
|
21
22
|
delete headerProps.padding;
|
|
22
23
|
delete headerProps.narrow;
|
|
24
|
+
delete headerProps.noScroll;
|
|
23
25
|
setHasHeader(Object.keys(headerProps).length > 0);
|
|
24
26
|
});
|
|
25
|
-
return (_jsxs(Box, { scheme: "primary", typeLabel: "page", style: {
|
|
27
|
+
return (_jsxs(Box, { scheme: (_a = p.scheme) !== null && _a !== void 0 ? _a : "primary", typeLabel: "page", style: {
|
|
26
28
|
display: "flex",
|
|
27
29
|
flexDirection: "column",
|
|
28
30
|
alignItems: "stretch",
|
|
29
31
|
minHeight: "100vh",
|
|
32
|
+
height: p.noScroll ? "100vh" : "auto",
|
|
30
33
|
}, children: [hasHeader && _jsx(Header, Object.assign({}, p)), _jsx(_ContentBase, { padding: p.padding, narrow: p.narrow, children: p.children }), p.footer] }));
|
|
31
34
|
}
|
|
32
35
|
function _ContentBase(p) {
|
|
33
36
|
return (_jsx(Column, { style: {
|
|
34
37
|
flex: 1,
|
|
38
|
+
minHeight: 0,
|
|
35
39
|
padding: p.padding ? `${p.padding}rem` : "1rem",
|
|
36
40
|
width: p.narrow ? "min(100%, 900px)" : "auto",
|
|
37
41
|
margin: p.narrow ? "0 auto" : "0",
|