Merge branch 'main' into golota60-patch-1

PUBLISHING.md

@@ -1,7 +1,7 @@
 Currently, publishing is done manually. Simply,
 
 1. Create a new branch
-2. Bump the version of each package and commit. We want to keep sync between each oxytail package version. Also update documentation and every mention of version to be installed(including each packages `Cargo.toml`!).
+2. Bump the version of each package(both in Cargo.toml version fields and as dependencies of other packages) and commit. We want to keep sync between each oxytail package version. Also update documentation and every mention of version to be installed(including each packages `Cargo.toml`!).
 3. Run the following commands(in this order)
 
 ```

examples/widget-gallery/Cargo.toml

@@ -8,6 +8,8 @@ rust-version = "1.75"
 
 [dependencies]
 im = "15.1.0"
-oxytail-theme-dark = "0.1.1"
-oxytail-base = "0.1.1"
-floem = "0.1.1"
+oxytail-theme-dark = { path = "../../oxytail-theme-dark" }
+oxytail-base = { path = "../../oxytail-base" }
+# oxytail-theme-dark = "0.1.2"
+# oxytail-base = "0.1.2"
+floem = "0.1.1"

examples/widget-gallery/src/badges.rs

@@ -0,0 +1,85 @@
+use floem::{
+    style::Style,
+    view::View,
+    views::{h_stack, Decorators},
+};
+use oxytail_base::widgets::{
+    badge::{badge, BadgeProps},
+    common_props::{OxySize, OxyVariant},
+};
+
+fn variant_badge(name: &'static str, variant: OxyVariant) -> impl View {
+    badge(
+        name,
+        Some(BadgeProps {
+            variant,
+            ..Default::default()
+        }),
+    )
+}
+
+pub fn badges_variants() -> impl View {
+    h_stack((
+        variant_badge("default", OxyVariant::Default),
+        variant_badge("neutral", OxyVariant::Neutral),
+        variant_badge("primary", OxyVariant::Primary),
+        variant_badge("secondary", OxyVariant::Secondary),
+        variant_badge("accent", OxyVariant::Accent),
+        variant_badge("ghost", OxyVariant::Ghost),
+        variant_badge("link", OxyVariant::Link),
+        variant_badge("info", OxyVariant::Info),
+        variant_badge("success", OxyVariant::Success),
+        variant_badge("warning", OxyVariant::Warning),
+        variant_badge("error", OxyVariant::Error),
+    ))
+    .style(|s: Style| s.gap(4., 4.))
+}
+
+fn size_badge(name: &'static str, size: OxySize) -> impl View {
+    badge(
+        name,
+        Some(BadgeProps {
+            size,
+            ..Default::default()
+        }),
+    )
+}
+
+pub fn badges_sizes() -> impl View {
+    h_stack((
+        size_badge("large", OxySize::Large),
+        size_badge("normal", OxySize::Normal),
+        size_badge("small", OxySize::Small),
+        size_badge("tiny", OxySize::Tiny),
+    ))
+    .style(|s: Style| s.gap(4., 4.))
+}
+
+pub fn badges_outlines() -> impl View {
+    h_stack((
+        badge(
+            "outlined default",
+            Some(BadgeProps {
+                outlined: true,
+                ..Default::default()
+            }),
+        ),
+        badge(
+            "outlined primary",
+            Some(BadgeProps {
+                outlined: true,
+                variant: OxyVariant::Primary,
+                ..Default::default()
+            }),
+        ),
+        badge(
+            "outlined secondary",
+            Some(BadgeProps {
+                outlined: true,
+                variant: OxyVariant::Secondary,
+                ..Default::default()
+            }),
+        ),
+    ))
+    .style(|s: Style| s.gap(4., 4.))
+}

examples/widget-gallery/src/main.rs

@@ -1,3 +1,4 @@
+use badges::{badges_outlines, badges_sizes, badges_variants};
 use btn::{btn_outlines, btn_sizes, btn_variants};
 use checkboxes::{checkboxes_sizes, checkboxes_variants, labeled_checkboxes};
 use floem::{
@@ -30,6 +31,7 @@ use radio_buttons::{
 use toggles::{toggle_sizes, toggle_variants};
 use tooltips::{button_tooltips, label_tooltips, sizes_tooltips};
 
+pub mod badges;
 mod btn;
 mod checkboxes;
 pub mod headers;
@@ -44,7 +46,7 @@ fn padded_container_box(child: impl View + 'static) -> ContainerBox {
 
 fn app_view() -> impl View {
     let tabs: im::Vector<&str> = vec![
-        "Intro", "Header", "Button", "Radio", "Checkbox", "Input", "Tooltip", "Toggle",
+        "Intro", "Header", "Button", "Badge", "Radio", "Checkbox", "Input", "Tooltip", "Toggle",
     ]
     .into_iter()
     .collect();
@@ -165,6 +167,10 @@ fn app_view() -> impl View {
                 s.width_full()
             }),
             "Button" => padded_container_box(v_stack((btn_variants(), btn_outlines(), btn_sizes()))),
+            "Badge" => padded_container_box(v_stack((text_header("Variants", None),
+            text_divider(),badges_variants(), text_header("Sizes", None),
+            text_divider(), badges_sizes(), text_header("Outlines", None),
+            text_divider(), badges_outlines()))),
             "Radio" => padded_container_box(v_stack((radio_variants(),radio_sizes(),labeled_radio_variants(),disabled_labeled_radio_variants()))),
             "Checkbox" => padded_container_box(v_stack((
                 checkboxes_variants(),

oxytail-base/Cargo.toml

@@ -2,10 +2,11 @@
 name = "oxytail-base"
 description = "Building block for creating oxytail themes"
 documentation = "https://docs.rs/oxytail-base/latest/oxytail_base"
+repository = "https://github.com/golota60/oxytail"
 keywords = ["floem", "gui", "floem-themes", "daisyui", "widgets"]
 categories = ["gui"]
 license = "MIT"
-version = "0.1.1"
+version = "0.1.2"
 edition = "2021"
 rust-version = "1.75"
 

oxytail-base/src/themes.rs

@@ -1,7 +1,7 @@
 use floem::{peniko::Color, style::Style};
 
 use crate::widgets::{
-    button::ButtonProps, checkbox::CheckboxProps, common_props::OxyVariant,
+    badge::BadgeProps, button::ButtonProps, checkbox::CheckboxProps, common_props::OxyVariant,
     radio_button::RadioProps, text_header::HeaderProps, text_input::InputProps,
     toggle::ToggleProps, tooltip::TooltipProps,
 };
@@ -76,4 +76,7 @@ pub trait ThemeStyling {
 
     /// Defines how a `tooltip` should look like.
     fn get_tooltip_style(&self, tooltip_props: TooltipProps) -> Box<dyn Fn(Style) -> Style + '_>;
+
+    /// Defines how a `badge` should look like.
+    fn get_badge_style(&self, badge_props: BadgeProps) -> Box<dyn Fn(Style) -> Style + '_>;
 }

oxytail-base/src/widgets/badge.rs

@@ -0,0 +1,27 @@
+use floem::{
+    view::View,
+    views::{label as upstreamlabel, Decorators},
+};
+
+use crate::get_current_theme;
+
+use super::common_props::{OxySize, OxyVariant};
+
+#[derive(Default, Copy, Clone)]
+pub struct BadgeProps {
+    pub variant: OxyVariant,
+    pub size: OxySize,
+    pub outlined: bool,
+}
+
+pub fn badge(label: &'static str, props: Option<BadgeProps>) -> impl View {
+    let base_widget = upstreamlabel(move || label);
+    let theme = get_current_theme();
+
+    let props = props.unwrap_or(BadgeProps::default());
+    let styles_enhancer = theme.get_badge_style(props);
+
+    let styled_badge = base_widget.style(move |s| styles_enhancer(s));
+
+    styled_badge
+}

oxytail-base/src/widgets/mod.rs

@@ -7,3 +7,4 @@ pub mod radio_button;
 pub mod text_header;
 pub mod text_divider;
 pub mod tooltip;
+pub mod badge;

oxytail-theme-dark/Cargo.toml

@@ -2,16 +2,19 @@
 name = "oxytail-theme-dark"
 description = "Dark theme for oxytail-base"
 documentation = "https://docs.rs/oxytail-theme-dark/latest/oxytail_theme_dark"
+repository = "https://github.com/golota60/oxytail"
 keywords = ["floem", "gui", "floem-themes", "daisyui", "widgets"]
 categories = ["gui"]
 license = "MIT"
-version = "0.1.1"
+version = "0.1.2"
 edition = "2021"
 rust-version = "1.75"
 
 # See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
 
 [dependencies]
 floem = "0.1.1"
-oxytail-base = "0.1.1"
-oxytail-theme-defaults = "0.1.1"
+oxytail-base = { path = "../oxytail-base" }
+# oxytail-base = "0.1.2"
+oxytail-theme-defaults = { path = "../oxytail-theme-defaults" }
+# oxytail-theme-defaults = "0.1.2"

oxytail-theme-dark/src/lib.rs

@@ -2,7 +2,7 @@ use floem::{peniko::Color, style::Style};
 use oxytail_base::{
     themes::{DefaultThemeProps, ThemeStyling},
     widgets::{
-        button::ButtonProps, checkbox::CheckboxProps, common_props::OxyVariant,
+        badge::BadgeProps, button::ButtonProps, checkbox::CheckboxProps, common_props::OxyVariant,
         radio_button::RadioProps, text_header::HeaderProps, text_input::InputProps,
         toggle::ToggleProps, tooltip::TooltipProps,
     },
@@ -121,4 +121,9 @@ impl ThemeStyling for Theme {
             self.theme_defaults(),
         )
     }
+
+    /// Defines how a `badge` should look like.
+    fn get_badge_style(&self, badge_props: BadgeProps) -> Box<dyn Fn(Style) -> Style + '_> {
+        oxytail_theme_defaults::ThemeDefault::get_badge_style(badge_props, self.theme_defaults())
+    }
 }

oxytail-theme-defaults/Cargo.toml

@@ -2,15 +2,17 @@
 name = "oxytail-theme-defaults"
 description = "A set of uncolored sane defaults for creating simple themes."
 documentation = "https://docs.rs/oxytail-theme-defaults/latest/oxytail_theme_defaults"
+repository = "https://github.com/golota60/oxytail"
 keywords = ["floem", "gui", "floem-themes", "daisyui", "widgets"]
 categories = ["gui"]
 license = "MIT"
-version = "0.1.1"
+version = "0.1.2"
 edition = "2021"
 rust-version = "1.75"
 
 # See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
 
 [dependencies]
 floem = "0.1.1"
-oxytail-base = "0.1.1"
+oxytail-base = { path = "../oxytail-base" }
+# oxytail-base = "0.1.2"

oxytail-theme-defaults/src/lib.rs

@@ -2,11 +2,12 @@ use floem::{
     cosmic_text::Weight,
     peniko::Color,
     style::{Background, CursorStyle, Display, Style, StyleValue, Transition},
-    unit::Pct,
+    unit::{Pct, Px},
 };
 use oxytail_base::{
     themes::DefaultThemeProps,
     widgets::{
+        badge::BadgeProps,
         button::ButtonProps,
         checkbox::CheckboxProps,
         common_props::{OxySize, OxyVariant},
@@ -371,4 +372,59 @@ impl ThemeDefault {
 
         Box::new(styles_creator)
     }
+
+    /// Defines how a `badge` should look like.
+    pub fn get_badge_style(
+        badge_props: BadgeProps,
+        theme_defaults: DefaultThemeProps,
+    ) -> Box<dyn Fn(Style) -> Style> {
+        let styles_creator = move |s: Style| {
+            let base_style = s
+                .padding_vert(2.)
+                .padding_horiz(9.)
+                .font_size(13.)
+                .border_radius(Px(14.))
+                .items_center()
+                .justify_center()
+                .height(18.);
+
+            let curr_variant_color = (theme_defaults.get_variant_colors)(badge_props.variant);
+
+            let variant_enhancer = |s: Style| match badge_props.variant {
+                OxyVariant::Default => s
+                    .background((theme_defaults.get_variant_colors)(OxyVariant::Neutral))
+                    .color(theme_defaults.light_text_color),
+                OxyVariant::Neutral => s
+                    .background(curr_variant_color)
+                    .color(theme_defaults.light_text_color),
+                _ => s
+                    .background(curr_variant_color)
+                    .color(theme_defaults.dark_text_color),
+            };
+
+            let size_enhancer = |s: Style| match badge_props.size {
+                OxySize::Large => s.font_size(16.).height(22),
+                OxySize::Normal => s,
+                OxySize::Small => s.font_size(10.).height(15),
+                OxySize::Tiny => s.font_size(8.).height(11),
+            };
+
+            let outlined_enhancer = |s: Style| match badge_props.outlined {
+                true => s
+                    .border_color(curr_variant_color)
+                    .border(0.5)
+                    .background(Color::TRANSPARENT)
+                    .color(curr_variant_color),
+                false => s,
+            };
+
+            let enhanced_style = variant_enhancer(base_style);
+            let enhanced_style = size_enhancer(enhanced_style);
+            let enhanced_style = outlined_enhancer(enhanced_style);
+
+            enhanced_style
+        };
+
+        Box::new(styles_creator)
+    }
 }