elbe-ui 0.2.21 → 0.2.23

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "elbe-ui",
   "type": "module",
-  "version": "0.2.21",
+  "version": "0.2.23",
   "author": "Robin Naumann",
   "license": "MIT",
   "repository": {

package/src/index.tsx

@@ -17,6 +17,7 @@ export * from "./ui/components/input/input_field";
 export * from "./ui/components/input/range";
 export * from "./ui/components/input/select";
 export * from "./ui/components/padded";
+export * from "./ui/components/scaffold";
 export * from "./ui/components/spinner";
 export * from "./ui/components/text";
 export * from "./ui/components/toggle_button";

package/src/ui/components/flex.tsx

@@ -30,7 +30,7 @@ export function FlexSpace({}) {
 export function Column({
   gap = 1,
   main = "start",
-  cross,
+  cross = "stretch",
   stretch = false,
   children,
   ...p

package/src/ui/components/scaffold.tsx

@@ -0,0 +1,79 @@
+import { useEffect, useState } from "preact/compat";
+import { Column, IconButton, Icons, Row, Text } from "../..";
+
+type HeaderParams = {
+  title?: string;
+  back: null | "close" | "back";
+  actions?: any;
+};
+
+/**
+ * Header is a layout component that provides a header for a page.
+ * It is used to create a consistent header for pages.
+ * @param back - The back button type. If null, no back button is shown. If "close", a close button is shown. If "back", a back button is shown.
+ * @param title - The title of the page.
+ * @param actions - The actions to show on the right side of the header.
+ */
+export function Header({ back, title, actions }: HeaderParams) {
+  if (history.length == 0) back = null;
+  const goBack = () => history.go(-1);
+
+  const [isScrolledTop, setIsScrolled] = useState(false);
+
+  useEffect(() => {
+    const _handle = () => setIsScrolled(window.scrollY > 0);
+    window.addEventListener("scroll", _handle);
+    return () => {
+      window.removeEventListener("scroll", _handle);
+    };
+  }, []);
+
+  return (
+    <div>
+      <div style="height: 4.5rem"></div>
+      <div
+        class="header"
+        style={isScrolledTop ? "" : "border-color: transparent"}
+      >
+        <div class="flex-1">
+          {back === "close" ? (
+            <IconButton.integrated icon={Icons.X} onTap={goBack} />
+          ) : back === "back" ? (
+            <IconButton.integrated icon={Icons.ArrowLeft} onTap={goBack} />
+          ) : null}
+        </div>
+        <Text.h4 v={title} />
+        <Row class="flex-1" gap={0.5} main="end">
+          {actions}
+        </Row>
+      </div>
+    </div>
+  );
+}
+
+/**
+ * Scaffold is a layout component that provides a header and a content area.
+ * It is used to create a consistent layout for pages.
+ */
+export function Scaffold({
+  children,
+  limited = false,
+  gap = 1,
+  ...header
+}: {
+  limited?: boolean;
+  children: any;
+  gap?: number;
+} & HeaderParams) {
+  return (
+    <Column cross="stretch" gap={0}>
+      <Header {...header} />
+
+      <div class={`padded ${limited ? "base-limited" : ""}`}>
+        <Column cross="stretch" gap={gap ?? 1}>
+          {children}
+        </Column>
+      </div>
+    </Column>
+  );
+}

package/style/color_style.scss

@@ -1,12 +1,13 @@
+@use "sass:color";
+@function cPart($c, $part) {@return color.channel($c, $part, $space: rgb)}
+
+@function cHumanGray($c) {
+  @return calc(((cPart($c, "red") * 299) + (cPart($c,"green") * 587) + (cPart($c,"blue") * 114)) / 1000);
+}
+
 @function contrast($colorA, $colorB) {
-  $yiqA: calc(
-    ((red($colorA) * 299) + (green($colorA) * 587) + (blue($colorA) * 114)) /
-      1000
-  );
-  $yiqB: calc(
-    ((red($colorB) * 299) + (green($colorB) * 587) + (blue($colorB) * 114)) /
-      1000
-  );
+  $yiqA: cHumanGray($colorA);
+  $yiqB: cHumanGray($colorB);
   @return abs($yiqA - $yiqB);
 }
 

package/style/components.scss

@@ -305,6 +305,32 @@ dialog {
   transition: max-height 0.25s ease-in;
 }
 
+.header {
+	@extend .box;
+	@extend .row;
+	width: 100%;
+	position: fixed;
+	left: 0;
+	top: 0;
+	display: flex;
+	font-size: larger;
+	font-weight: 900;
+	border-width: 20px;
+	border-style: solid;
+	border-width: 0 0 2px 0;
+	//border-width: 0 0 2px 0;
+
+	background-color: #ffffff70;
+	backdrop-filter: blur(10px);
+	-webkit-backdrop-filter: blur(10px);
+	z-index: 20;
+	// place border inside the element:
+	box-sizing: border-box;
+	height: 4.5rem;
+	justify-content: space-between;
+	align-items: center;
+  }
+
 // =============== INPUTS ===============
 
 input[type="text"],