diff --git a/packages/frontend/assets/style/entry.css b/packages/frontend/assets/style/entry.css index 66be090..9136b22 100644 --- a/packages/frontend/assets/style/entry.css +++ b/packages/frontend/assets/style/entry.css @@ -44,6 +44,11 @@ section { flex-grow: 1; } +.Page { + justify-content: center; + align-items: center; +} + #main, main { display: flex; @@ -206,20 +211,23 @@ input[type="range"]::-webkit-slider-thumb:focus { } .FormifyForm { - flex-grow: 1; + margin: auto; + align-items: end; + width: 100%; + max-width: 50rem; + max-height: 80%; + box-sizing: border-box; + gap: 1rem; } .FormifyInputs { - width: 80%; + width: 100%; display: flex; flex-direction: column; gap: 1rem; } .FormifyButton { - margin: auto; - height: 8rem; - width: 8rem; border-radius: 5rem; } @@ -228,7 +236,6 @@ input[type="range"]::-webkit-slider-thumb:focus { box-sizing: border-box; align-items: center; gap: 1rem; - padding: 0.5rem; } .FormifyText { diff --git a/packages/frontend/assets/style/pages/edit.css b/packages/frontend/assets/style/pages/edit.css new file mode 100644 index 0000000..e69de29 diff --git a/packages/frontend/assets/style/pages/new.css b/packages/frontend/assets/style/pages/new.css index 363a200..3e5c326 100644 --- a/packages/frontend/assets/style/pages/new.css +++ b/packages/frontend/assets/style/pages/new.css @@ -1,6 +1,3 @@ -.New { - display: flex; -} /**/ /* .New .LabeledBox { */ /* width: 100%; */ diff --git a/packages/frontend/src/modules/components/project.rs b/packages/frontend/src/modules/components/project.rs index ac60af7..7ddfbc4 100644 --- a/packages/frontend/src/modules/components/project.rs +++ b/packages/frontend/src/modules/components/project.rs @@ -15,7 +15,7 @@ pub fn Project(name: String, date: DateTime, desc: String) -> Element { div { class: "divider" } section { class: "actions", Link { to: Route::ProjectNav {}, class: "open", FolderOpenIcon {} } - Link { to: Route::Editor {}, class: "edit", SettingsIcon {} } + Link { to: Route::Edit {}, class: "edit", SettingsIcon {} } Link { to: Route::Editor {}, class: "delete", TrashIcon {} } } } diff --git a/packages/frontend/src/modules/pages.rs b/packages/frontend/src/modules/pages.rs index 4f433c9..06edca5 100644 --- a/packages/frontend/src/modules/pages.rs +++ b/packages/frontend/src/modules/pages.rs @@ -1,6 +1,7 @@ // %%% pages.rs %%% // %% exports %% +pub mod edit; pub mod editor; pub mod new; pub mod project_nav; @@ -10,6 +11,7 @@ pub mod start; // %% prelude %% pub mod prelude { + pub use super::edit::Edit; pub use super::editor::Editor; pub use super::new::New; pub use super::project_nav::ProjectNav; diff --git a/packages/frontend/src/modules/pages/edit.rs b/packages/frontend/src/modules/pages/edit.rs new file mode 100644 index 0000000..2288282 --- /dev/null +++ b/packages/frontend/src/modules/pages/edit.rs @@ -0,0 +1,37 @@ +use super::utils::*; + +#[derive(Formifiable)] +pub struct Project { + pub name: String, + pub description: String, +} + +#[page] +pub fn Edit() -> Element { + let mut proj = Project { + name: "".into(), + description: "".into(), + }; + rsx! { + main { + {proj.rsx_edit_form(|e| { debug!("editing {:?}", e) })} + // form { + // LabeledBox { + // name: "name", + // kind: "text", + // required: true, + // placeholder: "SampleProject", + // } + // LabeledBox { + // name: "description", + // kind: "text", + // required: false, + // placeholder: "this is a description", + // } + // section { class: "button-wrapper", + // button { r#type: "submit", NewIcon {} } + // } + // } + } + } +} diff --git a/packages/frontend/src/modules/pages/editor.rs b/packages/frontend/src/modules/pages/editor.rs index 4d1963a..f430a76 100644 --- a/packages/frontend/src/modules/pages/editor.rs +++ b/packages/frontend/src/modules/pages/editor.rs @@ -14,7 +14,7 @@ const CREATE_VIEWPORT: &str = r#" // -> convert to Node of backend (serde json) // -> add something like simple_ai_backend :: onnx :: Project . save_nodes(Vec) #[page] -pub fn Editor() -> Element { +pub fn Editor(children: Element) -> Element { rsx! { main { onmounted: move |e| async move { diff --git a/packages/frontend/src/modules/pages/new.rs b/packages/frontend/src/modules/pages/new.rs index fe54641..654ad67 100644 --- a/packages/frontend/src/modules/pages/new.rs +++ b/packages/frontend/src/modules/pages/new.rs @@ -14,7 +14,7 @@ pub fn New() -> Element { }; rsx! { main { - {proj.rsx_form()} + {proj.rsx_creation_form(|e| { debug!("creating {:?}", e) })} // form { // LabeledBox { // name: "name", diff --git a/packages/frontend/src/modules/router.rs b/packages/frontend/src/modules/router.rs index a3eb764..636e8b1 100644 --- a/packages/frontend/src/modules/router.rs +++ b/packages/frontend/src/modules/router.rs @@ -11,17 +11,20 @@ pub mod core { #[layout(TopNavLayout)] #[route("/")] Start {}, - #[nest("/editor")] - #[route("/")] - Editor {}, #[end_nest] - #[layout(HeadingLayout)] #[nest("/projects")] + #[layout(HeadingLayout)] #[route("/")] Projects {}, #[route("/projects_nav")] ProjectNav {}, + #[route("/edit")] + Edit {}, + #[end_layout] + #[route("/editor")] + Editor {}, #[end_nest] + #[layout(HeadingLayout)] #[nest("/new")] #[route("/")] New {}, diff --git a/packages/macros/src/formifiable.rs b/packages/macros/src/formifiable.rs index 359157d..3cbd306 100644 --- a/packages/macros/src/formifiable.rs +++ b/packages/macros/src/formifiable.rs @@ -27,24 +27,52 @@ pub fn macro_impl(item: TokenStream) -> TokenStream { .to_tokens(&mut inputs); } quote! { - use dioxus::prelude::*; - impl #struct_ident { - pub fn rsx_form(&mut self) -> Element { - rsx! { - form { - class: "FormifyForm", + simple_ai_macros::icon! { + formify_creation: , + formify_edit: + } + use dioxus::prelude::*; + impl #struct_ident { + pub fn rsx_creation_form(&mut self, oncreate: fn(dioxus::html::events::FormEvent)) -> Element { + rsx! { + form { + class: "FormifyForm FormifyCreation", + onsubmit: oncreate, + + div { + class: "FormifyInputs", + #inputs + } + + button { + class: "FormifyButton", + r#type: "submit", + FormifyCreationIcon {} + } + } + } + } + + pub fn rsx_edit_form(&mut self, onedit: fn(dioxus::html::events::FormEvent)) -> Element { + rsx! { + form { + class: "FormifyForm FormifyEdit", + onsubmit: onedit, - div { - class: "FormifyInputs", - #inputs + div { + class: "FormifyInputs", + #inputs } - button { - class: "FormifyButton", - "confirm" - } + + button { + class: "FormifyButton", + r#type: "submit", + FormifyEditIcon {} } } } + } } + } }