commit 498e4b9e1ad6389e0416c3f099294af71e5aa47b
parent fa505923efd6175d5b239f50ec6abbcee97832cf
Author: triesap <137732411+triesap@users.noreply.github.com>
Date: Fri, 30 Aug 2024 09:07:51 +0000
Update nav component, update nav stores, edit styles
Diffstat:
10 files changed, 75 insertions(+), 135 deletions(-)
diff --git a/ios/App/App.xcodeproj/project.pbxproj b/ios/App/App.xcodeproj/project.pbxproj
@@ -348,7 +348,7 @@
buildSettings = {
ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
CODE_SIGN_STYLE = Automatic;
- CURRENT_PROJECT_VERSION = 16;
+ CURRENT_PROJECT_VERSION = 17;
DEVELOPMENT_TEAM = AR84X5Z9HU;
INFOPLIST_FILE = App/Info.plist;
INFOPLIST_KEY_CFBundleDisplayName = Radroots;
@@ -370,7 +370,7 @@
buildSettings = {
ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
CODE_SIGN_STYLE = Automatic;
- CURRENT_PROJECT_VERSION = 16;
+ CURRENT_PROJECT_VERSION = 17;
DEVELOPMENT_TEAM = AR84X5Z9HU;
INFOPLIST_FILE = App/Info.plist;
INFOPLIST_KEY_CFBundleDisplayName = Radroots;
diff --git a/src/lib/components/layout-trellis.svelte b/src/lib/components/layout-trellis.svelte
@@ -5,6 +5,6 @@
</script>
-<div class={`flex flex-col w-full pt-2 px-4 pb-6 gap-4`}>
+<div class={`flex flex-col w-full pt-2 px-4 pb-12 gap-4`}>
{@render children()}
</div>
diff --git a/src/lib/components/layout-view.svelte b/src/lib/components/layout-view.svelte
@@ -1,5 +1,5 @@
<script lang="ts">
- import { app_layout, app_nav_blur, app_nav_visible, app_tabs_blur, app_tabs_visible } from "$lib/stores";
+ import { app_layout, app_nav, app_nav_blur, app_tabs_blur, app_tabs_visible } from "$lib/stores";
import { type AppLayoutKey, type PropChildren } from "@radroots/svelte-lib";
const styles: Record<AppLayoutKey, string> = {
@@ -11,7 +11,7 @@
let el: HTMLElement | null;
- let classes_nav = $derived($app_nav_visible ? `pt-h_nav_${$app_layout}` : `${styles[$app_layout]}`)
+ let classes_nav = $derived($app_nav ? `pt-h_nav_${$app_layout}` : `${styles[$app_layout]}`)
let classes_tabs = $derived($app_tabs_visible ? `pb-h_tabs_${$app_layout}` : ``)
const scrollChange = (): void => {
diff --git a/src/lib/components/nav.svelte b/src/lib/components/nav.svelte
@@ -17,8 +17,9 @@
let title_label = $state(``);
app_nav.subscribe((app_nav) => {
- if (app_nav.length) {
- const previous = app_nav[app_nav.length - 1];
+ if (!app_nav) return;
+ if (app_nav.prev && app_nav.prev.length) {
+ const previous = app_nav.prev[app_nav.prev.length - 1];
if (previous) {
previous_route = previous.route;
if (previous.label) previous_label = previous.label;
@@ -26,6 +27,10 @@
previous_param = encode_qp(previous.params);
}
}
+
+ if (app_nav.title) {
+ title_label = app_nav.title.label;
+ }
});
const handle_previous = async (): Promise<void> => {
diff --git a/src/lib/stores.ts b/src/lib/stores.ts
@@ -1,6 +1,7 @@
-import type { AppLayoutKey, NavigationPreviousParam } from "@radroots/svelte-lib";
+import type { AppLayoutKey } from "@radroots/svelte-lib";
import { type ColorMode, type ThemeKey } from "@radroots/theme";
import { writable } from "svelte/store";
+import type { NavParam } from "./types";
export const app_thc = writable<ColorMode>(`light`);
export const app_thm = writable<ThemeKey>(`os`);
@@ -10,7 +11,6 @@ export const app_render = writable<boolean>(false);
export const app_layout = writable<AppLayoutKey>(`base`);
export const app_win = writable<[number, number]>([0, 0]);
-export const app_nav_visible = writable<boolean>(false);
export const app_nav_blur = writable<boolean>(false);
export const app_tabs_visible = writable<boolean>(false);
@@ -21,4 +21,4 @@ export const app_key = writable<string>(``);
export const app_pwa_polyfills = writable<boolean>(false);
export const app_sqlite = writable<boolean>(false);
-export const app_nav = writable<NavigationPreviousParam[]>([]);
+export const app_nav = writable<NavParam | false>(false);
diff --git a/src/lib/types.ts b/src/lib/types.ts
@@ -0,0 +1,16 @@
+import type { NavigationPreviousParam } from "@radroots/svelte-lib";
+
+export type NavParam = {
+ prev?: NavigationPreviousParam[];
+ title?: {
+ label: string
+ };
+}
+
+/*
+let previous_route = $state(``);
+let previous_param = $state(``);
+let previous_label = $state(``);
+
+let title_label = $state(``);
+*/
+\ No newline at end of file
diff --git a/src/routes/(app)/+layout.svelte b/src/routes/(app)/+layout.svelte
@@ -2,46 +2,56 @@
import { goto } from "$app/navigation";
import Nav from "$lib/components/nav.svelte";
import Tabs from "$lib/components/tabs.svelte";
- import { app_layout, app_nav_visible, app_tabs_visible } from "$lib/stores";
+ import { app_layout, app_nav, app_tab_active, app_tabs_visible } from "$lib/stores";
import { type PropChildren } from "@radroots/svelte-lib";
let { children }: PropChildren = $props();
- let tab_active = $state<number>(0);
</script>
{@render children()}
-{#if $app_nav_visible}
+{#if $app_nav !== false }
<Nav />
{/if}
{#if $app_tabs_visible}
<Tabs
basis={{
- tab_active,
+ tab_active: $app_tab_active,
app_layout: $app_layout,
list: [
{
icon: `house-line`,
callback: async (tab_i) => {
- tab_active = tab_i;
+ app_tab_active.set(tab_i);
await goto("/");
},
},
{
icon: `key`,
callback: async (tab_i) => {
- tab_active = tab_i;
+ app_tab_active.set(tab_i);
},
},
{
icon: `network`,
callback: async (tab_i) => {
- tab_active = tab_i;
+ app_tab_active.set(tab_i);
},
},
{
icon: `bell-simple`,
callback: async (tab_i) => {
- tab_active = tab_i;
+ app_tab_active.set(tab_i);
+ app_nav.set({
+ prev: [
+ {
+ label: `Home`,
+ route: `/`
+ }
+ ],
+ title: {
+ label: `Settings`,
+ },
+ });
await goto("/settings");
},
},
diff --git a/src/routes/(app)/+page.svelte b/src/routes/(app)/+page.svelte
@@ -1,12 +1,13 @@
<script lang="ts">
import { goto } from "$app/navigation";
import { cl } from "$lib/client";
- import { app_nav_visible, app_tabs_visible } from "$lib/stores";
+ import { app_nav, app_tab_active, app_tabs_visible } from "$lib/stores";
import { t } from "@radroots/svelte-lib";
$effect(() => {
- app_nav_visible.set(false);
+ app_nav.set(false);
app_tabs_visible.set(true);
+ app_tab_active.set(0);
});
</script>
@@ -22,14 +23,6 @@
<button
class={`button-simple`}
onclick={async () => {
- await goto(`/settings`);
- }}
- >
- {"settings"}
- </button>
- <button
- class={`button-simple`}
- onclick={async () => {
await goto(`/models/location-gcs`);
}}
>
@@ -38,9 +31,7 @@
<button
class={`button-simple`}
onclick={async () => {
- const url = `https://radroots.org`;
- const res = await cl.browser.open(url);
- await cl.dialog.alert(JSON.stringify(res));
+ //
}}
>
{"test #1"}
diff --git a/src/routes/(app)/settings/+page.svelte b/src/routes/(app)/settings/+page.svelte
@@ -1,17 +1,15 @@
<script lang="ts">
- import { goto } from "$app/navigation";
import { cl } from "$lib/client";
import LayoutTrellis from "$lib/components/layout-trellis.svelte";
import LayoutView from "$lib/components/layout-view.svelte";
import { _cf } from "$lib/conf";
- import { app_nav_visible, app_tabs_visible, app_thc } from "$lib/stores";
+ import { app_tabs_visible, app_thc } from "$lib/stores";
import {
toggle_color_mode,
trellis as Trellis,
} from "@radroots/svelte-lib";
$effect(() => {
- app_nav_visible.set(true);
app_tabs_visible.set(false);
});
</script>
@@ -27,25 +25,6 @@
},
list: [
{
- offset: {
- mod: {
- key: `caret-left`,
- },
- },
- touch: {
- label: {
- left: [
- {
- value: "Back",
- },
- ],
- },
- callback: async () => {
- await goto(`/`);
- },
- },
- },
- {
hide_active: true,
touch: {
label: {
@@ -184,7 +163,7 @@
args: {
layer: 1,
title: {
- value: `Share`,
+ value: `Location`,
},
list: [
{
@@ -212,7 +191,7 @@
args: {
layer: 1,
title: {
- value: `Haptics`,
+ value: `Tests`,
},
list: [
{
@@ -220,18 +199,13 @@
label: {
left: [
{
- value: `Haptics Touch (less)`,
- classes: `capitalize`,
+ value: `Open Radroots Homepage`,
},
],
},
- end: {
- icon: {
- key: `caret-right`,
- },
- },
callback: async () => {
- await cl.haptics.impact("less");
+ const url = `https://radroots.org`;
+ await cl.browser.open(url);
},
},
},
@@ -240,18 +214,17 @@
label: {
left: [
{
- value: `Haptics Touch (more)`,
- classes: `capitalize`,
+ value: `Share Radroots Homepage`,
},
],
},
- end: {
- icon: {
- key: `caret-right`,
- },
- },
callback: async () => {
- await cl.haptics.impact("more");
+ await cl.share.open({
+ title: `Radroots Home Page`,
+ text: `Find farmers around the world.`,
+ url: `https://radroots.org`,
+ dialog_title: `This is the dialog title`,
+ });
},
},
},
@@ -260,7 +233,7 @@
label: {
left: [
{
- value: `Haptics Vibrate (500ms)`,
+ value: `Haptics Touch (less)`,
classes: `capitalize`,
},
],
@@ -271,7 +244,7 @@
},
},
callback: async () => {
- await cl.haptics.vibrate(500);
+ await cl.haptics.impact("less");
},
},
},
@@ -280,7 +253,7 @@
label: {
left: [
{
- value: `Haptics Selection Start`,
+ value: `Haptics Touch (more)`,
classes: `capitalize`,
},
],
@@ -291,7 +264,7 @@
},
},
callback: async () => {
- await cl.haptics.selection_start();
+ await cl.haptics.impact("more");
},
},
},
@@ -300,7 +273,7 @@
label: {
left: [
{
- value: `Haptics Selection End`,
+ value: `Haptics Vibrate (500ms)`,
classes: `capitalize`,
},
],
@@ -311,63 +284,7 @@
},
},
callback: async () => {
- await cl.haptics.selection_end();
- },
- },
- },
- ],
- },
- }}
- />
- <Trellis
- basis={{
- args: {
- layer: 1,
- title: {
- value: `Share`,
- },
- list: [
- {
- touch: {
- label: {
- left: [
- {
- value: `Share Test #1`,
- classes: `capitalize`,
- },
- ],
- },
- callback: async () => {
- const res = await cl.share.open({
- title: `Radroots Home Page`,
- text: `Find farmers around the world.`,
- url: `https://radroots.org`,
- dialog_title: `This is the dialog title`,
- });
-
- console.log(`res `, res);
- },
- },
- },
- {
- touch: {
- label: {
- left: [
- {
- value: `Share Test #2`,
- classes: `capitalize`,
- },
- ],
- },
- callback: async () => {
- const res = await cl.share.open({
- title: `Radroots Home Page`,
- url: `https://radroots.org`,
- dialog_title: `This is the dialog title`,
- files: [`file-1.png`, `file-2.png`],
- });
-
- console.log(`res `, res);
+ await cl.haptics.vibrate(500);
},
},
},
diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -7,8 +7,8 @@ const { fontFamily: tw_font } = tailwind_default;
const heights = {
line: `46px`,
tabs_base: `64px`,
- tabs_lg: `88px`,
- nav_base: `64px`,
+ tabs_lg: `86px`,
+ nav_base: `67px`,
nav_lg: `100px`,
};
