From aa0aa82b241700baa12916788c37ee5e07a03362 Mon Sep 17 00:00:00 2001 From: Jonathan Johnson Date: Sun, 17 Nov 2024 15:17:37 -0800 Subject: [PATCH] hint/with_hint Closes #210 --- CHANGELOG.md | 2 ++ examples/typography.rs | 1 + src/widget.rs | 74 ++++++++++++++---------------------------- src/widgets/style.rs | 10 ++++-- 4 files changed, 35 insertions(+), 52 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index ab64be3db..de4212a0a 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -351,6 +351,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - `Style::with_local_named` - `MakeWidget::with_local` - `MakeWidget::with_local_dynamic` +- `Style::hint`, `MakeWidget::hint`, and `MakeWidget::with_hint` have been added + to standardize a method of adding informational text to interfaces. [139]: https://github.com/khonsulabs/cushy/issues/139 diff --git a/examples/typography.rs b/examples/typography.rs index 862978602..0b51b43a2 100644 --- a/examples/typography.rs +++ b/examples/typography.rs @@ -11,6 +11,7 @@ fn main() -> cushy::Result { .and("Heading 6".h6()) .and("Regular Text") .and("Small Text".small()) + .and("Hint Text".hint()) .and("X-Small Text".x_small()) .into_rows() .centered() diff --git a/src/widget.rs b/src/widget.rs index 5395e1d60..8828cdbf4 100644 --- a/src/widget.rs +++ b/src/widget.rs @@ -23,15 +23,7 @@ use crate::context::sealed::Trackable as _; use crate::context::{ AsEventContext, EventContext, GraphicsContext, LayoutContext, ManageWidget, WidgetContext, }; -use crate::styles::components::{ - FontFamily, FontStyle, FontWeight, Heading1FontFamily, Heading1Style, Heading1Weight, - Heading2FontFamily, Heading2Style, Heading2Weight, Heading3FontFamily, Heading3Style, - Heading3Weight, Heading4FontFamily, Heading4Style, Heading4Weight, Heading5FontFamily, - Heading5Style, Heading5Weight, Heading6FontFamily, Heading6Style, Heading6Weight, - HorizontalAlignment, IntrinsicPadding, LineHeight, LineHeight1, LineHeight2, LineHeight3, - LineHeight4, LineHeight5, LineHeight6, LineHeight7, LineHeight8, TextSize, TextSize1, - TextSize2, TextSize3, TextSize4, TextSize5, TextSize6, TextSize7, TextSize8, VerticalAlignment, -}; +use crate::styles::components::{HorizontalAlignment, IntrinsicPadding, VerticalAlignment}; use crate::styles::{ ComponentDefinition, ContainerLevel, ContextFreeComponent, Dimension, DimensionRange, Edges, FlexibleDimension, HorizontalAlign, IntoComponentValue, IntoDynamicComponentValue, Styles, @@ -1102,108 +1094,90 @@ pub trait MakeWidget: Sized { /// Styles `self` with the largest of 6 heading styles. fn h1(self) -> Style { - self.xxxx_large() - .with_dynamic(&FontStyle, Heading1Style) - .with_dynamic(&FontFamily, Heading1FontFamily) - .with_dynamic(&FontWeight, Heading1Weight) + Style::new(Styles::default(), self).h1() } /// Styles `self` with the second largest of 6 heading styles. fn h2(self) -> Style { - self.xxx_large() - .with_dynamic(&FontStyle, Heading2Style) - .with_dynamic(&FontFamily, Heading2FontFamily) - .with_dynamic(&FontWeight, Heading2Weight) + Style::new(Styles::default(), self).h2() } /// Styles `self` with the third largest of 6 heading styles. fn h3(self) -> Style { - self.xx_large() - .with_dynamic(&FontStyle, Heading3Style) - .with_dynamic(&FontFamily, Heading3FontFamily) - .with_dynamic(&FontWeight, Heading3Weight) + Style::new(Styles::default(), self).h3() } /// Styles `self` with the third smallest of 6 heading styles. fn h4(self) -> Style { - self.x_large() - .with_dynamic(&FontStyle, Heading4Style) - .with_dynamic(&FontFamily, Heading4FontFamily) - .with_dynamic(&FontWeight, Heading4Weight) + Style::new(Styles::default(), self).h4() } /// Styles `self` with the second smallest of 6 heading styles. fn h5(self) -> Style { - self.large() - .with_dynamic(&FontStyle, Heading5Style) - .with_dynamic(&FontFamily, Heading5FontFamily) - .with_dynamic(&FontWeight, Heading5Weight) + Style::new(Styles::default(), self).h5() } /// Styles `self` with the smallest of 6 heading styles. fn h6(self) -> Style { - self.default_size() - .with_dynamic(&FontStyle, Heading6Style) - .with_dynamic(&FontFamily, Heading6FontFamily) - .with_dynamic(&FontWeight, Heading6Weight) + Style::new(Styles::default(), self).h6() } /// Styles `self` with the largest text size. #[must_use] fn xxxx_large(self) -> Style { - self.with_dynamic(&TextSize, TextSize8) - .with_dynamic(&LineHeight, LineHeight8) + Style::new(Styles::default(), self).xxxx_large() } /// Styles `self` with the second largest text size. #[must_use] fn xxx_large(self) -> Style { - self.with_dynamic(&TextSize, TextSize7) - .with_dynamic(&LineHeight, LineHeight7) + Style::new(Styles::default(), self).xxx_large() } /// Styles `self` with the third largest text size. #[must_use] fn xx_large(self) -> Style { - self.with_dynamic(&TextSize, TextSize6) - .with_dynamic(&LineHeight, LineHeight6) + Style::new(Styles::default(), self).xx_large() } /// Styles `self` with the fourth largest text size. #[must_use] fn x_large(self) -> Style { - self.with_dynamic(&TextSize, TextSize5) - .with_dynamic(&LineHeight, LineHeight5) + Style::new(Styles::default(), self).x_large() } /// Styles `self` with the fifth largest text size. #[must_use] fn large(self) -> Style { - self.with_dynamic(&TextSize, TextSize4) - .with_dynamic(&LineHeight, LineHeight4) + Style::new(Styles::default(), self).large() } /// Styles `self` with the third smallest text size. #[must_use] fn default_size(self) -> Style { - self.with_dynamic(&TextSize, TextSize3) - .with_dynamic(&LineHeight, LineHeight3) + Style::new(Styles::default(), self).default_size() } /// Styles `self` with the second smallest text size. #[must_use] fn small(self) -> Style { - self.with_dynamic(&TextSize, TextSize2) - .with_dynamic(&LineHeight, LineHeight2) + Style::new(Styles::default(), self).small() } /// Styles `self` with the smallest text size. #[must_use] fn x_small(self) -> Style { - self.with_dynamic(&TextSize, TextSize1) - .with_dynamic(&LineHeight, LineHeight1) + Style::new(Styles::default(), self).x_small() + } + + /// Styles `self` as an informational hint message. + fn hint(self) -> Style { + Style::new(Styles::default(), self).hint() } + /// Attaches `hint` as an informational hint message below `self`. + /// + /// The spacing between `self` and `hint` is half of [`IntrinsicPadding`]. fn with_hint(self, hint: impl MakeWidget) -> Stack { let probe = IntrinsicPadding.probe(); let padding = probe @@ -1211,7 +1185,7 @@ pub trait MakeWidget: Sized { .map_each(|padding| FlexibleDimension::Dimension(*padding / 2)); self.and(probe) .and( - hint.small() + hint.hint() .with(&HorizontalAlignment, HorizontalAlign::Left), ) .into_rows() diff --git a/src/widgets/style.rs b/src/widgets/style.rs index cdbaeadc1..18a9dc47d 100644 --- a/src/widgets/style.rs +++ b/src/widgets/style.rs @@ -1,3 +1,4 @@ +use super::validated::HintTextColor; use crate::context::EventContext; use crate::styles::components::{ FontFamily, FontStyle, FontWeight, Heading1FontFamily, Heading1Style, Heading1Weight, @@ -5,8 +6,8 @@ use crate::styles::components::{ Heading3Weight, Heading4FontFamily, Heading4Style, Heading4Weight, Heading5FontFamily, Heading5Style, Heading5Weight, Heading6FontFamily, Heading6Style, Heading6Weight, LineHeight, LineHeight1, LineHeight2, LineHeight3, LineHeight4, LineHeight5, LineHeight6, LineHeight7, - LineHeight8, TextSize, TextSize1, TextSize2, TextSize3, TextSize4, TextSize5, TextSize6, - TextSize7, TextSize8, + LineHeight8, TextColor, TextSize, TextSize1, TextSize2, TextSize3, TextSize4, TextSize5, + TextSize6, TextSize7, TextSize8, }; use crate::styles::{ComponentDefinition, IntoComponentValue, IntoDynamicComponentValue, Styles}; use crate::value::{Destination, IntoValue, Mutable, Value}; @@ -212,6 +213,11 @@ impl Style { self.with_dynamic(&TextSize, TextSize1) .with_dynamic(&LineHeight, LineHeight1) } + + /// Styles `self` as an informational hint message. + pub fn hint(self) -> Style { + self.small().with_dynamic(&TextColor, HintTextColor) + } } impl WrapperWidget for Style {