misc

kent-3 · Jan 20, 2025 · e6d663c · e6d663c
1 parent 43214d0
commit e6d663c
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 13 deletions.
diff --git a/input.css b/input.css
@@ -298,6 +298,24 @@ nav a:hover {
   --tw-contain-style: ;
 }
 
+/* .floating-menu dialog[open] { */
+/*   opacity: 1; */
+/*   transform: scale(1); */
+/* } */
+
+.floating-menu dialog {
+  opacity: 0;
+  transform: scale(0.5);
+  transition: all 300ms cubic-bezier(0, 0, 0, 1) allow-discrete;
+}
+
+@starting-style {
+  .floating-menu dialog[open] {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
 /* Open state of the dialog */
 dialog[open] {
   opacity: 1;

diff --git a/src/lib.rs b/src/lib.rs
@@ -524,7 +524,7 @@ pub fn WalletMenu(
     view! {
         <dialog
             node_ref=dialog_ref
-            class="mr-0 mt-2 px-0 py-3 shadow-lg bg-neutral-800 rounded border border-neutral-600"
+            class="z-50 mr-0 mt-2 px-0 py-3 shadow-lg bg-neutral-800 rounded border border-neutral-600"
         >
             // <!-- Header -->
             <div class="flex items-center justify-between w-72 px-6 pb-3">

diff --git a/src/routes/pool/pool_manager.rs b/src/routes/pool/pool_manager.rs
@@ -435,6 +435,7 @@ pub fn PoolManager() -> impl IntoView {
                         <div class="w-full">
                             <h2 class="m-0 mb-2 text-xl">My Liquidity</h2>
                             <div class="flex justify-center items-center h-48">
+                                <Outlet />
                                 // <LiquidityChart debug=debug.into() data=my_data.into() />
                                 // <p class="text-neutral-500">"You have no liquidity in this pool"</p>
                             </div>

diff --git a/src/routes/trade.rs b/src/routes/trade.rs
@@ -47,6 +47,20 @@ pub fn Trade() -> impl IntoView {
     let (amount_y, set_amount_y) = signal(String::default());
     let (swap_for_y, set_swap_for_y) = signal(true);
 
+    let settings_dialog_ref = NodeRef::<html::Dialog>::new();
+
+    let toggle_swap_settings = move |_: MouseEvent| match settings_dialog_ref.get() {
+        Some(dialog) => match dialog.open() {
+            false => {
+                let _ = dialog.show();
+            }
+            true => dialog.close(),
+        },
+        None => {
+            let _ = window().alert_with_message("Something is wrong!");
+        }
+    };
+
     let select_x_node_ref = NodeRef::<html::Select>::new();
     let select_y_node_ref = NodeRef::<html::Select>::new();
 
@@ -266,12 +280,14 @@ pub fn Trade() -> impl IntoView {
                     <div class="h-10 px-4 py-2 font-semibold text-white box-border inline-flex items-center justify-center rounded border border-solid border-neutral-700">
                         "Swap"
                     </div>
-                    <div class="ml-auto w-10 h-10 box-border inline-flex items-center justify-center rounded border border-solid border-neutral-700 hover:bg-neutral-700 transition-colors ease-standard duration-200">
-                        <Settings2 size=20 color="#fff" absolute_stroke_width=true />
-                            //     <SettingsMenu
-                            //         dialog_ref=swap_dialog_ref
-                            //         toggle_menu=toggle_swap_settings
-                            //     />
+                    <div class="relative">
+                        <div on:click=toggle_swap_settings class="ml-auto w-10 h-10 box-border inline-flex items-center justify-center rounded border border-solid border-neutral-700 hover:bg-neutral-700 transition-colors ease-standard duration-200">
+                            <Settings2 size=20 color="#fff" absolute_stroke_width=true />
+                        </div>
+                        <SettingsMenu
+                            dialog_ref=settings_dialog_ref
+                            toggle_menu=toggle_swap_settings
+                        />
                     </div>
                             // <div class="relative inline-block">
                             //
@@ -413,11 +429,18 @@ fn SettingsMenu(
     info!("rendering <SettingsMenu/>");
 
     view! {
-        <dialog
-            node_ref=dialog_ref
-            class="mt-2 w-60 h-40 px-0 py-3 shadow-lg bg-neutral-800 rounded border border-neutral-600"
-        >
-
-        </dialog>
+        // TODO: better dialog positioning, different dialog[open] styles
+        <div class="floating-menu">
+            <dialog
+                node_ref=dialog_ref
+                class="z-40 mt-1.5 -mr-[124px] w-72 h-52 px-0 py-3 shadow-lg bg-neutral-800 rounded border border-solid border-neutral-700"
+            >
+                <div class="flex flex-col z-auto">
+                    <div class="px-3 py-2 border-b border-neutral-700">
+                        "Settings"
+                    </div>
+                </div>
+            </dialog>
+        </div>
     }
 }