forked from marc2332/freya
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat:
Sidebar component (marc2332#513)
* feat: `Sidebar` as a component in freya-components * theming * clean up * Update password.rs * do it * Update sidebar.rs * Revert "Merge branch 'main' of https://github.com/tigerros/freya" This reverts commit e560b55, reversing changes made to 84899b6. * feat: `Sidebar` as a component in freya-components * theming * clean up * do it * Update password.rs * rebase * add * finish * Update sidebar.rs ** pub mod * clean up * fixes and cleanup --------- Co-authored-by: marc2332 <[email protected]>
- Loading branch information
Showing
8 changed files
with
286 additions
and
173 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,124 @@ | ||
| #![cfg_attr( | ||
| all(not(debug_assertions), target_os = "windows"), | ||
| windows_subsystem = "windows" | ||
| )] | ||
|
|
||
| use crate::{ButtonStatus, ScrollView}; | ||
| use dioxus::prelude::*; | ||
| use freya_elements::elements as dioxus_elements; | ||
| use freya_hooks::{ | ||
| theme_with, use_applied_theme, use_platform, ScrollViewThemeWith, SidebarItemTheme, | ||
| SidebarItemThemeWith, SidebarTheme, SidebarThemeWith, | ||
| }; | ||
| use winit::window::CursorIcon; | ||
|
|
||
| #[allow(non_snake_case)] | ||
| #[component] | ||
| pub fn Sidebar( | ||
| /// Theme override. | ||
| theme: Option<SidebarThemeWith>, | ||
| /// This is what is rendered next to the sidebar. | ||
| children: Element, | ||
| /// This is what is rendered in the sidebar. | ||
| sidebar: Element, | ||
| ) -> Element { | ||
| let SidebarTheme { | ||
| font_theme, | ||
| background, | ||
| } = use_applied_theme!(&theme, sidebar); | ||
|
|
||
| rsx!( | ||
| rect { | ||
| width: "100%", | ||
| height: "100%", | ||
| direction: "horizontal", | ||
| rect { | ||
| overflow: "clip", | ||
| width: "170", | ||
| height: "100%", | ||
| background: "{background}", | ||
| color: "{font_theme.color}", | ||
| shadow: "2 0 5 0 rgb(0, 0, 0, 30)", | ||
| ScrollView { | ||
| theme: theme_with!(ScrollViewTheme { | ||
| padding: "16".into(), | ||
| }), | ||
| {sidebar} | ||
| } | ||
| } | ||
| rect { | ||
| overflow: "clip", | ||
| width: "fill", | ||
| height: "100%", | ||
| color: "{font_theme.color}", | ||
| {children} | ||
| } | ||
| } | ||
| ) | ||
| } | ||
|
|
||
| #[allow(non_snake_case)] | ||
| #[component] | ||
| pub fn SidebarItem( | ||
| /// Theme override. | ||
| theme: Option<SidebarItemThemeWith>, | ||
| /// Inner content for the SidebarItem. | ||
| children: Element, | ||
| /// Optionally handle the `onclick` event in the SidebarItem. | ||
| onclick: Option<EventHandler<()>>, | ||
| ) -> Element { | ||
| let SidebarItemTheme { | ||
| hover_background, | ||
| background, | ||
| font_theme, | ||
| border_fill, | ||
| } = use_applied_theme!(&theme, sidebar_item); | ||
| let mut status = use_signal(ButtonStatus::default); | ||
| let platform = use_platform(); | ||
|
|
||
| use_drop(move || { | ||
| if *status.read() == ButtonStatus::Hovering { | ||
| platform.set_cursor(CursorIcon::default()); | ||
| } | ||
| }); | ||
|
|
||
| let onclick = move |_| { | ||
| if let Some(onclick) = &onclick { | ||
| onclick.call(()); | ||
| } | ||
| }; | ||
|
|
||
| let onmouseenter = move |_| { | ||
| platform.set_cursor(CursorIcon::Pointer); | ||
| status.set(ButtonStatus::Hovering); | ||
| }; | ||
|
|
||
| let onmouseleave = move |_| { | ||
| platform.set_cursor(CursorIcon::default()); | ||
| status.set(ButtonStatus::default()); | ||
| }; | ||
|
|
||
| let background = match *status.read() { | ||
| ButtonStatus::Hovering => hover_background, | ||
| ButtonStatus::Idle => background, | ||
| }; | ||
|
|
||
| rsx!( | ||
| rect { | ||
| overflow: "clip", | ||
| margin: "5 0", | ||
| onclick, | ||
| onmouseenter, | ||
| onmouseleave, | ||
| width: "100%", | ||
| height: "auto", | ||
| color: "{font_theme.color}", | ||
| border: "1 solid {border_fill}", | ||
| shadow: "0 4 5 0 rgb(0, 0, 0, 30)", | ||
| corner_radius: "8", | ||
| padding: "8", | ||
| background: "{background}", | ||
| {children} | ||
| } | ||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,99 @@ | ||
| #![cfg_attr( | ||
| all(not(debug_assertions), target_os = "windows"), | ||
| windows_subsystem = "windows" | ||
| )] | ||
|
|
||
| use dioxus_router::prelude::{Outlet, Routable, Router}; | ||
| use freya::prelude::*; | ||
|
|
||
| fn main() { | ||
| launch_with_props(app, "Router Example", (550.0, 400.0)); | ||
| } | ||
|
|
||
| fn app() -> Element { | ||
| rsx!(Router::<Route> {}) | ||
| } | ||
|
|
||
| #[derive(Routable, Clone)] | ||
| #[rustfmt::skip] | ||
| pub enum Route { | ||
| #[layout(AppSidebar)] | ||
| #[route("/")] | ||
| Home, | ||
| #[route("/wow")] | ||
| Wow, | ||
| #[end_layout] | ||
| #[route("/..route")] | ||
| PageNotFound { }, | ||
| } | ||
|
|
||
| #[allow(non_snake_case)] | ||
| fn AppSidebar() -> Element { | ||
| rsx!( | ||
| Sidebar { | ||
| sidebar: rsx!( | ||
| Link { | ||
| to: Route::Home, | ||
| SidebarItem { | ||
| label { | ||
| "Go to Hey ! 👋" | ||
| } | ||
| }, | ||
| }, | ||
| Link { | ||
| to: Route::Wow, | ||
| SidebarItem { | ||
| label { | ||
| "Go to Wow! 👈" | ||
| } | ||
| }, | ||
| }, | ||
| SidebarItem { | ||
| onclick: |_| println!("Hello!"), | ||
| label { | ||
| "Print Hello! 👀" | ||
| } | ||
| }, | ||
| ), | ||
| Body { | ||
| rect { | ||
| main_align: "center", | ||
| cross_align: "center", | ||
| width: "100%", | ||
| height: "100%", | ||
| Outlet::<Route> { } | ||
| } | ||
| } | ||
| } | ||
| ) | ||
| } | ||
|
|
||
| #[allow(non_snake_case)] | ||
| #[component] | ||
| fn Home() -> Element { | ||
| rsx!( | ||
| label { | ||
| "Just some text 😗 in /" | ||
| } | ||
| ) | ||
| } | ||
|
|
||
| #[allow(non_snake_case)] | ||
| #[component] | ||
| fn Wow() -> Element { | ||
| rsx!( | ||
| label { | ||
| "Just more text 👈!! in /wow" | ||
| } | ||
| ) | ||
| } | ||
|
|
||
| #[allow(non_snake_case)] | ||
| #[component] | ||
| fn PageNotFound() -> Element { | ||
| rsx!( | ||
| label { | ||
| "404!! 😵" | ||
| } | ||
| ) | ||
| } |
Oops, something went wrong.