diff --git a/README.md b/README.md index 73dae01..dc0247c 100644 --- a/README.md +++ b/README.md @@ -1,8 +1,8 @@ -## Oxytail +# Oxytail INSERT_DEMO_IMG_HERE -Ready to use native components for [Floem](https://github.com/lapce/floem), inspired by [daisyUI](https://daisyui.com/components/button/). +Ready to use native widgets for [Floem](https://github.com/lapce/floem), inspired by [daisyUI](https://daisyui.com/components/button/). Features: - Cross-system support @@ -11,29 +11,68 @@ Features: ## Installation -`oxytail` consists of the main "loader" package(`oxytail-loader`), which, well, loads the plugin you want. +`oxytail` consists of the main "base" package(`oxytail-base`), which, loads the theme you want. Next, you need to choose your theme, and install it. Currently, `oxytail` comes with only one theme, `oxytail-theme-dark`, but if it doesn't suit your needs you can [write your own one](YOUR_OWN_THEME.md). +First, add floem(floem is not on crates.io just yet, so we need to add it as a git dependency) + +```sh +cargo add --git 'https://github.com/lapce/floem' floem ``` -cargo add floem oxytail-loader oxytail-theme-dark + +Next, add `oxytail-base`(to load a theme) and `oxytail-theme-dark`(a theme) also as a git dependency, since we rely on `floem`, which is not published. + +```sh +cargo add --git 'https://github.com/golota60/oxytail/tree/main/oxytail-base' oxytail-base +cargo add --git 'https://github.com/golota60/oxytail/tree/main/oxytail-theme-dark' oxytail-theme-dark ``` -Next, simply use `floem` like normal, except with a few quirk regarding initializaiton. +Done! Now, initialize the theme, and simply use `floem` like normal, *except* import your widgets from `oxytail-base`! ```rs +use floem::reactive::create_signal; +use floem::view::View; +use floem::views::{h_stack, label, v_stack, Decorators}; +use oxytail_base::{ + init_theme, + widgets::button::button, +}; + +fn app_view() -> impl View { + // Create a reactive signal with a counter value, defaulting to 0 + let (counter, set_counter) = create_signal(0); + + // Create a vertical layout + v_stack(( + // The counter value updates automatically, thanks to reactivity + label(move || format!("Value: {}", counter.get())), + // Create a horizontal layout + h_stack(( + button(|| "Increment").on_click_stop(move |_| { + set_counter.update(|value| *value += 1); + }), + button(|| "Decrement").on_click_stop(move |_| { + set_counter.update(|value| *value -= 1); + }), + )), + )) +} + + fn main() { let window_config = WindowConfig::default() .size(Size { width: 1200.0, height: 500.0, }) - // 1. We don't want any default `floem` styling to be interfering with ours, so we need to disable the default styling. + // 1. We don't want any default `floem` styling to be interfering with ours, + // so we need to disable the default styling. .themed(false); - // 2. We need to initialize our them + // 2. We need to initialize our theme init_theme(Theme::Dark); - // That's all! + // That's all! Now import some widgets from `oxytail_base` and you're using oxytail! let root_view = app_view(); let root_view = root_view.style(|s| { @@ -50,6 +89,9 @@ fn main() { ``` +## Examples + +The best showcase is `examples/widget-gallery` package. Run it with `cargo run -p widget-gallery`. ## Contributing @@ -57,7 +99,7 @@ If you notice any bugs, missing features or nice-to-haves, don't hesistate to op If you want to submit a custom theme(or just link your own in this README for other people to know) to be a part of this library, also don't hesitate and simply create a new package in the workspace(see `oxytail-theme-dark` folder for guidance).[writing your own theme](YOUR_OWN_THEME.md) -If you need some components which currently don't exist, please consider submitting them to the upstream `floem` library first. +If you need some widgets which currently don't exist, please consider submitting them to the upstream `floem` library first. If you think some of the docs are unclear, also feel free to create an issue! @@ -65,6 +107,6 @@ If you think some of the docs are unclear, also feel free to create an issue! The idea for this project came from my slight frustration when developing this [tauri-based desk manager app](https://github.com/golota60/trayasen). While for that project tauri is an awesome pick, I was looking for a native solution, i.e. not using system WebView. I've chosen `floem` as a base, because of their really friendly and extensible styling. -I'm only aware of one other component library for floem, and it's [floem-ui-kit](https://github.com/pieterdd/floem-ui-kit). I really like the simplicity of it, but I wanted something more customizable. +I'm only aware of one other widget library for floem, and it's [floem-ui-kit](https://github.com/pieterdd/floem-ui-kit). I really like the simplicity of it, but I wanted something more customizable. diff --git a/oxytail-base/src/widgets/button.rs b/oxytail-base/src/widgets/button.rs index 2a8f5f3..993809b 100644 --- a/oxytail-base/src/widgets/button.rs +++ b/oxytail-base/src/widgets/button.rs @@ -42,7 +42,7 @@ pub fn button( label: impl Fn() -> S + 'static, props: Option, ) -> impl View { - let base_component = upstreambutton(label); + let base_widget = upstreambutton(label); let theme = GLOBAL_THEME.get().unwrap(); let props = props.unwrap_or(ButtonProps::default()); @@ -50,7 +50,7 @@ pub fn button( let styles_enhancer = theme.get_button_style(props); let enhanced_style = styles_enhancer(Style::new()); - let styled_button = base_component.style(move |_| enhanced_style.clone()); + let styled_button = base_widget.style(move |_| enhanced_style.clone()); styled_button } diff --git a/oxytail-theme-dark/Cargo.toml b/oxytail-theme-dark/Cargo.toml index 97a5ef9..51b4334 100644 --- a/oxytail-theme-dark/Cargo.toml +++ b/oxytail-theme-dark/Cargo.toml @@ -1,6 +1,6 @@ [package] name = "oxytail-theme-dark" -description = "Dark theme for oxytail-loader" +description = "Dark theme for oxytail-base" license = "MIT" version = "0.1.0" edition = "2021"