diff --git a/AobaClient/assets/style/inputs.scss b/AobaClient/assets/style/inputs.scss new file mode 100644 index 0000000..f139d76 --- /dev/null +++ b/AobaClient/assets/style/inputs.scss @@ -0,0 +1,4 @@ +.searchBar { + display: grid; + width: 100%; +} diff --git a/AobaClient/assets/style/main.scss b/AobaClient/assets/style/main.scss index 9ab255f..dde164b 100644 --- a/AobaClient/assets/style/main.scss +++ b/AobaClient/assets/style/main.scss @@ -1,5 +1,6 @@ -@import 'mixins'; -@import 'colors'; +@import "mixins"; +@import "colors"; +@import "inputs"; :root { background-color: $mainBGColor; @@ -9,8 +10,7 @@ font-optical-sizing: auto; font-weight: 400; font-style: normal; - font-variation-settings: - "wdth" 100; + font-variation-settings: "wdth" 100; } body { @@ -27,4 +27,39 @@ body { #content { grid-area: Content; margin-left: $navBarSize; -} \ No newline at end of file +} + +.mediaGrid { + display: flex; + flex-wrap: wrap; + gap: 5px; + + .mediaItem { + width: 200px; + background-color: $featureColor; + + img { + aspect-ratio: 1; + object-fit: cover; + object-position: center; + width: 100%; + background-color: $invertTextColor; + border: 0; + outline: none; + } + + .info { + padding: 2px 5px; + + .name { + text-align: center; + width: 100%; + display: block; + } + .details { + display: flex; + justify-content: space-between; + } + } + } +} diff --git a/AobaClient/src/components/basic/button.rs b/AobaClient/src/components/basic/button.rs new file mode 100644 index 0000000..7b3364b --- /dev/null +++ b/AobaClient/src/components/basic/button.rs @@ -0,0 +1,20 @@ +use dioxus::prelude::*; + +#[derive(PartialEq, Clone, Props)] +pub struct ButtonProps { + variant: Option, + text: String, +} + +#[derive(PartialEq, Clone)] +pub enum ButtonVariant { + Base, + Muted, + Accented, +} + +pub fn Button(props: ButtonProps) -> Element { + rsx! { + button { "{props.text}" } + } +} diff --git a/AobaClient/src/components/basic/input.rs b/AobaClient/src/components/basic/input.rs new file mode 100644 index 0000000..19966e3 --- /dev/null +++ b/AobaClient/src/components/basic/input.rs @@ -0,0 +1,27 @@ +use dioxus::prelude::*; + +#[derive(PartialEq, Clone, Props)] +pub struct InputProps { + pub r#type: Option, + pub value: Option, + pub label: Option, + pub placeholder: Option, + pub name: String, +} + +#[component] +pub fn Input(props: InputProps) -> Element { + let label = props.label.unwrap_or("".into()); + let ph = props.placeholder.unwrap_or(label.clone()); + rsx! { + label { + "{label}", + input { + type : props.r#type.unwrap_or("text".into()), + value: props.value, + name: props.name, + placeholder:ph + } + } + } +} diff --git a/AobaClient/src/components/basic/mod.rs b/AobaClient/src/components/basic/mod.rs new file mode 100644 index 0000000..3c28d09 --- /dev/null +++ b/AobaClient/src/components/basic/mod.rs @@ -0,0 +1,4 @@ +mod button; +mod input; +pub use button::*; +pub use input::*; diff --git a/AobaClient/src/components/media_grid.rs b/AobaClient/src/components/media_grid.rs new file mode 100644 index 0000000..3c98f7f --- /dev/null +++ b/AobaClient/src/components/media_grid.rs @@ -0,0 +1,39 @@ +use dioxus::prelude::*; + +#[component] +pub fn MediaGrid() -> Element { + rsx! { + div{ + class: "mediaGrid", + {(0..50).map(|_| rsx!{ + MediaItem {} + })} + } + } +} + +#[component] +pub fn MediaItem() -> Element { + rsx! { + div{ + class: "mediaItem", + img{} + div { + class: "info", + span{ + class: "name", + "Filename" + }, + div{ + class: "details", + span{ + "Type" + }, + span{ + "View Count" + }, + } + } + } + } +} diff --git a/AobaClient/src/components/mod.rs b/AobaClient/src/components/mod.rs index 3434e23..450f4a2 100644 --- a/AobaClient/src/components/mod.rs +++ b/AobaClient/src/components/mod.rs @@ -1,4 +1,7 @@ -mod main_layout; +pub mod basic; +mod media_grid; mod navbar; -pub use main_layout::MainLayout; -pub use navbar::Navbar; +mod search; +pub use media_grid::*; +pub use navbar::*; +pub use search::*; diff --git a/AobaClient/src/components/search.rs b/AobaClient/src/components/search.rs new file mode 100644 index 0000000..5fe5e2e --- /dev/null +++ b/AobaClient/src/components/search.rs @@ -0,0 +1,14 @@ +use dioxus::prelude::*; + +#[component] +pub fn Search() -> Element { + rsx! { + div{ + class: "searchBar", + input { + type: "search", + placeholder: "Search Files" + } + } + } +} diff --git a/AobaClient/src/layouts/basic_layout.rs b/AobaClient/src/layouts/basic_layout.rs new file mode 100644 index 0000000..85d71ca --- /dev/null +++ b/AobaClient/src/layouts/basic_layout.rs @@ -0,0 +1,10 @@ +use dioxus::prelude::*; + +use crate::route::Route; + +#[component] +pub fn BasicLayout() -> Element { + rsx! { + Outlet:: {} + } +} diff --git a/AobaClient/src/components/main_layout.rs b/AobaClient/src/layouts/main_layout.rs similarity index 100% rename from AobaClient/src/components/main_layout.rs rename to AobaClient/src/layouts/main_layout.rs diff --git a/AobaClient/src/layouts/mod.rs b/AobaClient/src/layouts/mod.rs new file mode 100644 index 0000000..1eed39d --- /dev/null +++ b/AobaClient/src/layouts/mod.rs @@ -0,0 +1,4 @@ +mod basic_layout; +mod main_layout; +pub use basic_layout::*; +pub use main_layout::*; diff --git a/AobaClient/src/main.rs b/AobaClient/src/main.rs index 058d4ad..222a6a2 100644 --- a/AobaClient/src/main.rs +++ b/AobaClient/src/main.rs @@ -1,4 +1,5 @@ pub mod components; +mod layouts; pub mod models; pub mod route; pub mod views; diff --git a/AobaClient/src/route.rs b/AobaClient/src/route.rs index 8d95eff..0e91262 100644 --- a/AobaClient/src/route.rs +++ b/AobaClient/src/route.rs @@ -1,12 +1,19 @@ +use crate::{ + layouts::{BasicLayout, MainLayout}, + views::{Home, Login, Settings}, +}; use dioxus::prelude::*; -use crate::views::{Home, Settings}; -use crate::components::MainLayout; #[derive(Debug, Clone, Routable, PartialEq)] +#[rustfmt::skip] pub enum Route { #[layout(MainLayout)] - #[route("/")] - Home {}, - #[route("/settings")] - Settings {}, + #[route("/")] + Home {}, + #[route("/settings")] + Settings {}, + #[end_layout] + #[layout(BasicLayout)] + #[route("/login")] + Login {}, } diff --git a/AobaClient/src/views/home.rs b/AobaClient/src/views/home.rs index 80b1ab6..f4996f5 100644 --- a/AobaClient/src/views/home.rs +++ b/AobaClient/src/views/home.rs @@ -1,4 +1,4 @@ -use crate::models::media::Media; +use crate::components::{MediaGrid, Search}; use dioxus::prelude::*; #[component] @@ -6,12 +6,8 @@ pub fn Home() -> Element { rsx! { div { id: "content", "This is home" + Search { }, + MediaGrid { } } } } -#[component] -fn MediaDisplay(media: Media) -> Element { - rsx! { - div { "{media.id}" } - } -} diff --git a/AobaClient/src/views/login.rs b/AobaClient/src/views/login.rs new file mode 100644 index 0000000..d98cf85 --- /dev/null +++ b/AobaClient/src/views/login.rs @@ -0,0 +1,17 @@ +use dioxus::prelude::*; + +use crate::components::basic::{Button, Input}; + +#[component] +pub fn Login() -> Element { + rsx! { + div{ + id: "centralModal", + form{ + Input { type : "text", name: "username", label: "Username" }, + Input{ type : "password", name: "password", label: "Password" }, + Button{text: "Login!"} + } + } + } +} diff --git a/AobaClient/src/views/mod.rs b/AobaClient/src/views/mod.rs index 84c458e..a0fa538 100644 --- a/AobaClient/src/views/mod.rs +++ b/AobaClient/src/views/mod.rs @@ -1,5 +1,7 @@ mod home; -pub use home::Home; +mod login; +pub use home::*; +pub use login::*; mod settings; pub use settings::Settings;