Better split view (#7)

aleb2000 · web-flow · commit 552434c8834d · 2023-08-05T17:58:36.000+05:00
* Update web-sys and dependant packages to new minor version

* Add split-yew dependency

* Dependencies separation

* Added Split.js module

* Added resizable split view

* Forgot to remove border class

* Updated split-yew dependency
diff --git a/Cargo.lock b/Cargo.lock
diff --git a/frontend/Cargo.toml b/frontend/Cargo.toml
@@ -25,3 +25,5 @@ thiserror = { workspace = true }
 tracing = { workspace = true, default-features = false }
 time = { version = "0.3", features = ["wasm-bindgen"] }
 tracing-subscriber = { workspace = true, features = ["time"] }
+
+split-yew = "0.1.1"
diff --git a/frontend/index.html b/frontend/index.html
@@ -9,6 +9,13 @@
     <link data-trunk href="static" rel="copy-dir">
     <link rel="icon" href="/static/favicon.ico" sizes="any">
     <link rel="icon" href="/static/favicon.svg" type="image/svg+xml">
+	<script type="importmap">
+		{
+			"imports": {
+				"split.js": "https://unpkg.com/split.js@1.6.5/dist/split.es.js"
+			}
+		}
+	</script>
 </head>
 <body class="text-gray-200 h-screen"></body>
 </html>
diff --git a/frontend/src/app.rs b/frontend/src/app.rs
@@ -3,6 +3,7 @@ use crate::components::output::OutputContainer;
 use crate::utils::query::Query;
 use crate::{icon, ActionButtonState, ActionButtonStateContext};
 use gloo::history::{BrowserHistory, History};
+use split_yew::{Direction, Split};
 use std::rc::Rc;
 use yew::prelude::*;
 use yew::suspense::Suspense;
@@ -14,12 +15,21 @@ pub fn App() -> Html {
 
     let action_button_state = use_context::<ActionButtonStateContext>().unwrap();
 
+    let split_sizes = use_state(|| vec![100.0, 0.0]);
+    let output_collapsed = use_state(|| true);
+
     let on_run_click = {
         let action_button_state = action_button_state.clone();
         let editor_contents = editor_contents.clone();
+        let split_sizes = split_sizes.clone();
+        let output_collapsed = output_collapsed.clone();
         let data = data.clone();
         move |_| {
             data.set(Some(Rc::from(editor_contents.as_ref().borrow().as_str())));
+            if *output_collapsed {
+                output_collapsed.set(false);
+                split_sizes.set(vec![50.0, 50.0]);
+            }
             action_button_state.dispatch(ActionButtonState::Disabled);
         }
     };
@@ -69,11 +79,7 @@ pub fn App() -> Html {
         classes.push("hover:bg-gray-900")
     }
 
-    let template_rows = if data.is_some() {
-        "grid-template-rows: 1fr 1fr"
-    } else {
-        "grid-template-rows: 1fr "
-    };
+    let collapsed_split = if *output_collapsed { Some(1) } else { None };
 
     html! {
         <div class="flex flex-col h-screen">
@@ -84,16 +90,18 @@ pub fn App() -> Html {
                     <button onclick={on_share_click} disabled={action_button_state.disabled()} class={classes}>{icon!("share", classes!("fill-gray-200"))} {"Share"}</button>
                 </div>
             </header>
-            <div class="grid h-full" style={template_rows}>
-                <Suspense fallback={{html! {"loading..."}}}>
-                    <Editor {oninput} />
-                </Suspense>
-                <div class="w-full h-full min-h-0">
+            <Split min_sizes={vec![100.0, 0.0]} sizes={(*split_sizes).clone()} collapsed={collapsed_split} direction={Direction::Vertical} class="flex flex-col flex-grow overflow-hidden">
+                <div>
+                    <Suspense fallback={{html! {"loading..."}}}>
+                        <Editor {oninput} />
+                    </Suspense>
+                </div>
+                <div class="w-full min-h-0">
                     if let Some(ref data) = *data {
                         <OutputContainer value={data} />
                     }
                 </div>
-            </div>
+            </Split>
         </div>
     }
 }
diff --git a/frontend/src/components/output.rs b/frontend/src/components/output.rs
@@ -1,5 +1,5 @@
-use crate::{ActionButtonState, ActionButtonStateContext};
 use crate::api::BACKEND_URL;
+use crate::{ActionButtonState, ActionButtonStateContext};
 use gloo_net::http::QueryParams;
 use std::rc::Rc;
 use yew::prelude::*;
@@ -39,9 +39,6 @@ pub fn OutputContainer(props: &OutputContainerProps) -> Html {
     let classes = classes!(
         "w-full",
         "h-full",
-        "border-t-[10px]",
-        "border-gray-400",
-        "border-solid",
         if *loading { "invisible" } else { "visible" }
     );
     html! {
diff --git a/frontend/styles/globals.scss b/frontend/styles/globals.scss
@@ -9,6 +9,19 @@
     box-sizing: border-box;
 }
 
+/* For Split.js */
+.gutter {
+	background-color: #9ca3af;
+}
+
+.gutter.gutter-vertical {
+	cursor: row-resize;
+}
+
+.gutter.gutter-horizontal {
+	cursor: col-resize;
+}
+
 /*
 body {
     height: 100vh;
