commit 85049decd45e90e832664a3a3eefdb6441beb53b
parent e03c76dabb92f6c6a9099a4a986b08ac6d39f0a2
Author: triesap <137732411+triesap@users.noreply.github.com>
Date: Sat, 7 Dec 2024 21:03:38 +0000
apps-lib: add nav toolbar, page header components. add fade element. add/edit components, locales, utils
Diffstat:
8 files changed, 78 insertions(+), 2 deletions(-)
diff --git a/apps-lib/src/lib/components/nav_toolbar.svelte b/apps-lib/src/lib/components/nav_toolbar.svelte
@@ -0,0 +1,34 @@
+<script lang="ts">
+ import { Glyph, LogoCircleSm, ls, route } from "$lib";
+</script>
+
+<div class={`flex flex-row h-12 w-full px-6 justify-between items-center`}>
+ <button
+ class={`flex flex-row gap-2 justify-start items-center`}
+ on:click={async () => {
+ await route(`/`);
+ }}
+ >
+ <LogoCircleSm />
+ <p
+ class={`font-sansd italic font-[700] text-[1.7rem] text-layer-0-glyph lowercase`}
+ >
+ {`${$ls(`app.name`)}`}
+ </p>
+ </button>
+ <button
+ class={`flex flex-row justify-center items-center`}
+ on:click={async () => {
+ await route(`/settings`);
+ }}
+ >
+ <Glyph
+ basis={{
+ classes: `text-layer-0-glyph`,
+ dim: `lg`,
+ weight: `bold`,
+ key: `gear`,
+ }}
+ />
+ </button>
+</div>
diff --git a/apps-lib/src/lib/components/page_header.svelte b/apps-lib/src/lib/components/page_header.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+ export let basis: {
+ label: string;
+ };
+</script>
+
+<div class={`flex flex-row w-full py-4 px-6 justify-between items-center`}>
+ <div class={`flex flex-row justify-start items-center`}>
+ <p
+ class={`font-sansd font-[600] text-2xl text-layer-0-glyph capitalize`}
+ >
+ {basis.label}
+ </p>
+ </div>
+ <slot name="option" />
+</div>
diff --git a/apps-lib/src/lib/components/tabs_float.svelte b/apps-lib/src/lib/components/tabs_float.svelte
@@ -8,7 +8,7 @@
>
<div class={`flex flex-row justify-between gap-10 items-center`}>
<div
- class={`grid grid-cols-4 flex flex-row h-[3.0rem] px-6 gap-6 justify-start items-center bg-layer-1-surface rounded-full backdrop-blur-lg`}
+ class={`grid grid-cols-4 flex flex-row h-[3.1rem] px-6 gap-6 justify-start items-center bg-layer-1-surface rounded-full backdrop-blur-lg`}
>
<button
class={`col-span-1 flex flex-row justify-center items-center`}
@@ -86,7 +86,7 @@
</button>
</div>
<button
- class={`flex flex-row h-[3.0rem] w-[3.0rem] justify-center items-center bg-layer-1-surface rounded-full backdrop-blur-lg`}
+ class={`flex flex-row h-[3.1rem] w-[3.1rem] justify-center items-center bg-layer-1-surface rounded-full backdrop-blur-lg`}
on:click={async () => {}}
>
<Glyph
diff --git a/apps-lib/src/lib/el/fade.svelte b/apps-lib/src/lib/el/fade.svelte
@@ -0,0 +1,11 @@
+<script lang="ts">
+ import { fade } from "svelte/transition";
+</script>
+
+<div
+ class={`flex flex-row justify-start items-center`}
+ in:fade={{ duration: 200 }}
+ out:fade={{ delay: 50, duration: 200 }}
+>
+ <slot />
+</div>
diff --git a/apps-lib/src/lib/index.ts b/apps-lib/src/lib/index.ts
@@ -19,6 +19,7 @@ export { default as SelectMenu } from "./el/select_menu.svelte";
export { default as Glyph } from "./el/glyph.svelte";
export { default as CssStyles } from "./el/css_styles.svelte";
export { default as Loading } from "./el/loading.svelte";
+export { default as Fade } from "./el/fade.svelte";
export { default as InputElement } from "./el/input_element.svelte";
export { default as Fill } from "./el/fill.svelte";
export { default as FillWhite } from "./el/fill_white.svelte";
@@ -60,12 +61,14 @@ export { default as EntryMultiline } from "./components/entry_multiline.svelte";
export { default as EntryWrap } from "./components/entry_wrap.svelte";
export { default as ButtonLayout } from "./components/button_layout.svelte";
export { default as LayoutTrellisLine } from "./components/layout_trellis_line.svelte";
+export { default as PageHeader } from "./components/page_header.svelte";
export { default as NotifyGlyph } from "./components/notify_glyph.svelte";
export { default as TrellisDefaultLabel } from "./components/trellis_default_label.svelte";
export { default as LayoutArea } from "./components/layout_area.svelte";
export { default as BadgeInfoKey } from "./components/badge_info_key.svelte";
export { default as EnvelopeTitled } from "./components/envelope_titled.svelte";
export { default as ButtonLoading } from "./components/button_loading.svelte";
+export { default as NavToolbar } from "./components/nav_toolbar.svelte";
export { default as TrellisOffset } from "./components/trellis_offset.svelte";
export { default as LogoCircleSm } from "./components/logo_circle_sm.svelte";
export { default as EntrySelect } from "./components/entry_select.svelte";
diff --git a/apps-lib/src/lib/locales/en/common.json b/apps-lib/src/lib/locales/en/common.json
@@ -46,6 +46,7 @@
"end_date": "End date",
"endpoint": "Endpoint",
"failure_to_process_the_request": "Failure to process the request",
+ "farm_land": "Farm land",
"file_name": "File name",
"file_size": "File size",
"filters": "Filters",
@@ -60,6 +61,7 @@
"key": "Key",
"keypair": "Keypair",
"keys": "Keys",
+ "land_plot": "Land plot",
"latitude": "Latitude",
"light": "Light",
"list": "List",
diff --git a/apps-lib/src/lib/utils/carousel.ts b/apps-lib/src/lib/utils/carousel.ts
@@ -73,3 +73,9 @@ export const carousel_dec = async <T extends string>(
carousel_num.set(1);
await exe_iter(async () => carousel_dec_handler(view), num, duration);
};
+
+export const carousel_init = (num_max: number): void => {
+ carousel_index.set(0);
+ carousel_index_max.set(num_max);
+ carousel_num.set(1);
+};
diff --git a/apps-lib/src/lib/utils/routes.ts b/apps-lib/src/lib/utils/routes.ts
@@ -1,5 +1,7 @@
export type NavigationRoute =
| "/"
+ | "/farm/land"
+ | "/farm/land/add"
| "/models/location-gcs"
| "/models/nostr-profile"
| "/models/nostr-profile/edit/field"
@@ -20,6 +22,8 @@ export type NavigationRoute =
export function parse_route(route: string): NavigationRoute {
switch (route) {
case "/":
+ case "/farm/land":
+ case "/farm/land/add":
case "/models/location-gcs":
case "/models/nostr-profile":
case "/models/nostr-profile/edit/field":
