elbe-ui 0.4.19 → 0.4.21
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",
|
package/dist/ui/theme/colors.js
CHANGED
|
@@ -245,9 +245,9 @@ export class SchemeColor extends KindColor {
|
|
|
245
245
|
}
|
|
246
246
|
asCss() {
|
|
247
247
|
return (`${this.primary.asCss()}\n` +
|
|
248
|
-
`.primary { ${this.primary.asCss()}} \n` +
|
|
249
|
-
`.secondary { ${this.secondary.asCss()} }\n` +
|
|
250
|
-
`.inverse { ${this.inverse.asCss()} }`);
|
|
248
|
+
`.primary, .secondary .primary, .inverse .primary { ${this.primary.asCss()}} \n` +
|
|
249
|
+
`.secondary, .primary .secondary, .inverse .secondary { ${this.secondary.asCss()} }\n` +
|
|
250
|
+
`.inverse, .primary .inverse, .secondary .inverse { ${this.inverse.asCss()} }`);
|
|
251
251
|
}
|
|
252
252
|
static generate(path, seed, base) {
|
|
253
253
|
const m = seed.scheme;
|