web_lib

commit c204a863c6e9486a96fc2fe8016c26816689ef6d
parent a91ceed969e00f3db0982e8b849a1c4022adff57
Author: triesap <137732411+triesap@users.noreply.github.com>
Date:   Sun, 22 Sep 2024 08:10:05 +0000

apps-lib: add envelope lower component, edit locales

Diffstat:
A
apps-lib/src/lib/components/envelope_lower.svelte
 | 
50
++++++++++++++++++++++++++++++++++++++++++++++++++
M
apps-lib/src/lib/index.ts
 | 
1
+
M
apps-lib/src/lib/locales/en/trade.json
 | 
2
+-

3 files changed, 52 insertions(+), 1 deletion(-)
diff --git a/apps-lib/src/lib/components/envelope_lower.svelte b/apps-lib/src/lib/components/envelope_lower.svelte
@@ -0,0 +1,50 @@
+<script lang="ts">
+    import { Fill, t, type CallbackPromise } from "$lib";
+    import { quintInOut } from "svelte/easing";
+    import { fly } from "svelte/transition";
+
+    export let basis: {
+        visible: boolean;
+        close: CallbackPromise;
+    };
+
+    $: basis = basis;
+</script>
+
+{#if basis.visible}
+    <div
+        in:fly={{ y: `100%`, easing: quintInOut }}
+        out:fly={{ y: `100%`, easing: quintInOut }}
+        class={`z-20 absolute bottom-0 left-0 flex flex-col h-[calc(100vh-30px)] w-full justify-start items-start bg-layer-1-surface rounded-t-2xl overflow-y-scroll scroll-hide`}
+    >
+        <div
+            class={`sticky top-0 left-0 grid grid-cols-12 flex flex-row h-12 w-full px-4 pb-2 justify-center items-center bg-layer-1-surface/60 backdrop-blur-md`}
+        >
+            <div
+                class={`col-span-4 flex flex-row h-full justify-start items-end`}
+            >
+                <button
+                    class={`flex flex-row justify-center items-center`}
+                    on:click={async () => {
+                        await basis.close();
+                    }}
+                >
+                    <p class={`font-sans font-[500] text-layer-1-glyph-hl`}>
+                        {`${$t(`common.cancel`)}`}
+                    </p>
+                </button>
+            </div>
+            <div
+                class={`col-span-4 flex flex-row h-full pt-3 justify-center items-start`}
+            >
+                <div
+                    class={`flex flex-row justify-start items-center h-1 w-10 rounded-full bg-layer-2-surface-edge`}
+                />
+            </div>
+            <div class={`col-span-4 flex flex-row justify-start items-center`}>
+                <Fill />
+            </div>
+        </div>
+        <slot />
+    </div>
+{/if}
diff --git a/apps-lib/src/lib/index.ts b/apps-lib/src/lib/index.ts
@@ -2,6 +2,7 @@ export * from "./locales/i18n"
 export { default as AppConfig } from "./components/app_config.svelte"
 export { default as ButtonLoading } from "./components/button_loading.svelte"
 export { default as Envelope } from "./components/envelope.svelte"
+export { default as EnvelopeLower } from "./components/envelope_lower.svelte"
 export { default as EnvelopeTitled } from "./components/envelope_titled.svelte"
 export { default as InputForm } from "./components/input_form.svelte"
 export { default as InputSelect } from "./components/input_select.svelte"
diff --git a/apps-lib/src/lib/locales/en/trade.json b/apps-lib/src/lib/locales/en/trade.json
@@ -7,7 +7,7 @@
         },
         "fields": {
             "price_amt": {
-                "err_invalid": "Please enter the price"
+                "err_invalid": "Enter the price"
             }
         }
     },