From 8c8dbd14208f9dfe22388e34c81340a1ef2cbc25 Mon Sep 17 00:00:00 2001 From: Michael Aaron Murphy Date: Fri, 26 Apr 2024 14:51:45 +0200 Subject: [PATCH] fix(text_input): inherit text and icon colors from container --- src/theme/style/text_input.rs | 77 ++++++++++++++++------------------ src/widget/text_input/input.rs | 25 +++++++---- src/widget/text_input/style.rs | 6 +-- 3 files changed, 56 insertions(+), 52 deletions(-) diff --git a/src/theme/style/text_input.rs b/src/theme/style/text_input.rs index 74297c20..b8939216 100644 --- a/src/theme/style/text_input.rs +++ b/src/theme/style/text_input.rs @@ -43,8 +43,8 @@ impl StyleSheet for crate::Theme { border_width: 1.0, border_offset: None, border_color: container.component.divider.into(), - icon_color: container.on.into(), - text_color: container.on.into(), + icon_color: None, + text_color: None, placeholder_color: { let color: Color = container.on.into(); color.blend_alpha(background, 0.7) @@ -59,8 +59,8 @@ impl StyleSheet for crate::Theme { border_width: 0.0, border_offset: None, border_color: Color::TRANSPARENT, - icon_color: container.on.into(), - text_color: container.on.into(), + icon_color: None, + text_color: None, placeholder_color: { let color: Color = container.on.into(); color.blend_alpha(background, 0.7) @@ -75,8 +75,8 @@ impl StyleSheet for crate::Theme { border_width: 0.0, border_offset: None, border_color: Color::TRANSPARENT, - icon_color: container.on.into(), - text_color: container.on.into(), + icon_color: None, + text_color: None, placeholder_color: { let color: Color = container.on.into(); color.blend_alpha(background, 0.7) @@ -91,8 +91,8 @@ impl StyleSheet for crate::Theme { border_width: 1.0, border_offset: None, border_color: container.component.divider.into(), - icon_color: container.on.into(), - text_color: container.on.into(), + icon_color: None, + text_color: None, placeholder_color: { let color: Color = container.on.into(); color.blend_alpha(background, 0.7) @@ -107,8 +107,8 @@ impl StyleSheet for crate::Theme { border_width: 0.0, border_offset: None, border_color: Color::TRANSPARENT, - icon_color: container.on.into(), - text_color: container.on.into(), + icon_color: None, + text_color: None, placeholder_color: { let color: Color = container.on.into(); color.blend_alpha(background, 0.7) @@ -138,8 +138,8 @@ impl StyleSheet for crate::Theme { border_width: 1.0, border_offset: Some(2.0), border_color: Color::from(palette.destructive_color()), - icon_color: container.on.into(), - text_color: container.on.into(), + icon_color: None, + text_color: None, placeholder_color: { let color: Color = container.on.into(); color.blend_alpha(background, 0.7) @@ -154,8 +154,8 @@ impl StyleSheet for crate::Theme { border_width: 0.0, border_offset: None, border_color: Color::TRANSPARENT, - icon_color: container.on.into(), - text_color: container.on.into(), + icon_color: None, + text_color: None, placeholder_color: { let color: Color = container.on.into(); color.blend_alpha(background, 0.7) @@ -170,8 +170,8 @@ impl StyleSheet for crate::Theme { border_width: 0.0, border_offset: None, border_color: Color::TRANSPARENT, - icon_color: container.on.into(), - text_color: container.on.into(), + icon_color: None, + text_color: None, placeholder_color: { let color: Color = container.on.into(); color.blend_alpha(background, 0.7) @@ -201,8 +201,8 @@ impl StyleSheet for crate::Theme { border_width: 1.0, border_offset: None, border_color: palette.accent.base.into(), - icon_color: container.on.into(), - text_color: container.on.into(), + icon_color: None, + text_color: None, placeholder_color: { let color: Color = container.on.into(); color.blend_alpha(background, 0.7) @@ -217,8 +217,8 @@ impl StyleSheet for crate::Theme { border_offset: None, border_width: 1.0, border_color: palette.accent.base.into(), - icon_color: container.on.into(), - text_color: container.on.into(), + icon_color: None, + text_color: None, placeholder_color: { let color: Color = container.on.into(); color.blend_alpha(background, 0.7) @@ -233,8 +233,8 @@ impl StyleSheet for crate::Theme { border_offset: None, border_width: 0.0, border_color: Color::TRANSPARENT, - icon_color: container.on.into(), - text_color: container.on.into(), + icon_color: None, + text_color: None, placeholder_color: { let color: Color = container.on.into(); color.blend_alpha(background, 0.7) @@ -249,8 +249,8 @@ impl StyleSheet for crate::Theme { border_width: 0.0, border_offset: None, border_color: Color::TRANSPARENT, - icon_color: container.on.into(), - text_color: container.on.into(), + icon_color: None, + text_color: None, placeholder_color: { let color: Color = container.on.into(); color.blend_alpha(background, 0.7) @@ -265,8 +265,8 @@ impl StyleSheet for crate::Theme { border_width: 0.0, border_offset: None, border_color: Color::TRANSPARENT, - icon_color: container.on.into(), - text_color: container.on.into(), + icon_color: None, + text_color: None, placeholder_color: { let color: Color = container.on.into(); color.blend_alpha(background, 0.7) @@ -296,8 +296,8 @@ impl StyleSheet for crate::Theme { border_width: 1.0, border_offset: Some(2.0), border_color: palette.accent.base.into(), - icon_color: container.on.into(), - text_color: container.on.into(), + icon_color: None, + text_color: None, placeholder_color: { let color: Color = container.on.into(); color.blend_alpha(background, 0.7) @@ -312,8 +312,8 @@ impl StyleSheet for crate::Theme { border_width: 1.0, border_offset: Some(2.0), border_color: palette.accent.base.into(), - icon_color: container.on.into(), - text_color: container.on.into(), + icon_color: None, + text_color: None, placeholder_color: { let color: Color = container.on.into(); color.blend_alpha(background, 0.7) @@ -328,10 +328,10 @@ impl StyleSheet for crate::Theme { border_width: 0.0, border_offset: None, border_color: Color::TRANSPARENT, - icon_color: container.on.into(), // TODO use regular text color here after text rendering handles multiple colors // in this case, for selected and unselected text - text_color: container.on.into(), + icon_color: None, + text_color: None, placeholder_color: { let color: Color = container.on.into(); color.blend_alpha(background, 0.7) @@ -346,10 +346,10 @@ impl StyleSheet for crate::Theme { border_width: 0.0, border_offset: None, border_color: Color::TRANSPARENT, - icon_color: container.on.into(), + icon_color: Some(palette.on_accent_color().into()), // TODO use regular text color here after text rendering handles multiple colors // in this case, for selected and unselected text - text_color: palette.on_accent_color().into(), + text_color: Some(palette.on_accent_color().into()), placeholder_color: { let color: Color = container.on.into(); color.blend_alpha(background, 0.7) @@ -367,13 +367,6 @@ impl StyleSheet for crate::Theme { return disabled(self); } - let mut appearance = self.active(style); - - // TODO: iced will not render alpha itself on text or icon colors. - let background: Color = self.current_container().component.base.into(); - appearance.text_color = appearance.text_color.blend_alpha(background, 0.5); - appearance.icon_color = appearance.icon_color.blend_alpha(background, 0.5); - - appearance + self.active(style) } } diff --git a/src/widget/text_input/input.rs b/src/widget/text_input/input.rs index 0bd6cbc3..552d1247 100644 --- a/src/widget/text_input/input.rs +++ b/src/widget/text_input/input.rs @@ -7,6 +7,7 @@ //! A [`TextInput`] has some local [`State`]. use std::borrow::Cow; +use crate::ext::ColorExt; use crate::theme::THEME; use super::cursor; @@ -2017,6 +2018,16 @@ pub fn draw<'a, Message>( theme.active(style) }; + let mut icon_color = appearance.icon_color.unwrap_or(renderer_style.icon_color); + let mut text_color = appearance.text_color.unwrap_or(renderer_style.text_color); + + // TODO: iced will not render alpha itself on text or icon colors. + if is_disabled { + let background = theme.current_container().component.base.into(); + icon_color = icon_color.blend_alpha(background, 0.5); + text_color = text_color.blend_alpha(background, 0.5); + } + // draw background and its border if let Some(border_offset) = appearance.border_offset { let offset_bounds = Rectangle { @@ -2104,8 +2115,8 @@ pub fn draw<'a, Message>( renderer, theme, &renderer::Style { - icon_color: appearance.icon_color, - text_color: appearance.text_color, + icon_color, + text_color, scale_factor: renderer_style.scale_factor, }, icon_layout, @@ -2156,7 +2167,7 @@ pub fn draw<'a, Message>( blur_radius: 0.0, }, }, - appearance.text_color, + text_color, )), offset, ) @@ -2233,7 +2244,7 @@ pub fn draw<'a, Message>( let color = if text.is_empty() { appearance.placeholder_color } else { - appearance.text_color + text_color }; renderer.fill_text( @@ -2268,8 +2279,8 @@ pub fn draw<'a, Message>( renderer, theme, &renderer::Style { - icon_color: renderer_style.icon_color, - text_color: appearance.text_color, + icon_color, + text_color, scale_factor: renderer_style.scale_factor, }, icon_layout, @@ -2292,7 +2303,7 @@ pub fn draw<'a, Message>( shaping: text::Shaping::Advanced, }, helper_text_layout.bounds().position(), - appearance.text_color, + text_color, *viewport, ); } diff --git a/src/widget/text_input/style.rs b/src/widget/text_input/style.rs index 5f152f52..aa25c86e 100644 --- a/src/widget/text_input/style.rs +++ b/src/widget/text_input/style.rs @@ -19,16 +19,16 @@ pub struct Appearance { pub border_width: f32, /// The border [`Color`] of the text input. pub border_color: Color, - /// The [`Color`] of symbolic icons. - pub icon_color: Color, /// The label [`Color`] of the text input. pub label_color: Color, /// The placeholder text [`Color`]. pub placeholder_color: Color, /// The text [`Color`] of the text input. pub selected_text_color: Color, + /// The icon [`Color`] of the text input. + pub icon_color: Option, /// The text [`Color`] of the text input. - pub text_color: Color, + pub text_color: Option, /// The selected fill [`Color`] of the text input. pub selected_fill: Color, }