leyoda/libcosmic
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(text_input): inherit text and icon colors from container

Browse source
This commit is contained in:
Michael Aaron Murphy 2024-04-26 14:51:45 +02:00 • committed by Michael Murphy
parent 084ce30478
commit 8c8dbd1420
3 changed files with 56 additions and 52 deletions
Download patch file Download diff file Expand all files Collapse all files

77
src/theme/style/text_input.rs
View file

@ -43,8 +43,8 @@ impl StyleSheet for crate::Theme {
border_width: 1.0, border_width: 1.0,
border_offset: None, border_offset: None,
border_color: container.component.divider.into(), border_color: container.component.divider.into(),
icon_color: container.on.into(), icon_color: None,
text_color: container.on.into(), text_color: None,
placeholder_color: { placeholder_color: {
let color: Color = container.on.into(); let color: Color = container.on.into();
color.blend_alpha(background, 0.7) color.blend_alpha(background, 0.7)
@ -59,8 +59,8 @@ impl StyleSheet for crate::Theme {
border_width: 0.0, border_width: 0.0,
border_offset: None, border_offset: None,
border_color: Color::TRANSPARENT, border_color: Color::TRANSPARENT,
icon_color: container.on.into(), icon_color: None,
text_color: container.on.into(), text_color: None,
placeholder_color: { placeholder_color: {
let color: Color = container.on.into(); let color: Color = container.on.into();
color.blend_alpha(background, 0.7) color.blend_alpha(background, 0.7)
@ -75,8 +75,8 @@ impl StyleSheet for crate::Theme {
border_width: 0.0, border_width: 0.0,
border_offset: None, border_offset: None,
border_color: Color::TRANSPARENT, border_color: Color::TRANSPARENT,
icon_color: container.on.into(), icon_color: None,
text_color: container.on.into(), text_color: None,
placeholder_color: { placeholder_color: {
let color: Color = container.on.into(); let color: Color = container.on.into();
color.blend_alpha(background, 0.7) color.blend_alpha(background, 0.7)
@ -91,8 +91,8 @@ impl StyleSheet for crate::Theme {
border_width: 1.0, border_width: 1.0,
border_offset: None, border_offset: None,
border_color: container.component.divider.into(), border_color: container.component.divider.into(),
icon_color: container.on.into(), icon_color: None,
text_color: container.on.into(), text_color: None,
placeholder_color: { placeholder_color: {
let color: Color = container.on.into(); let color: Color = container.on.into();
color.blend_alpha(background, 0.7) color.blend_alpha(background, 0.7)
@ -107,8 +107,8 @@ impl StyleSheet for crate::Theme {
border_width: 0.0, border_width: 0.0,
border_offset: None, border_offset: None,
border_color: Color::TRANSPARENT, border_color: Color::TRANSPARENT,
icon_color: container.on.into(), icon_color: None,
text_color: container.on.into(), text_color: None,
placeholder_color: { placeholder_color: {
let color: Color = container.on.into(); let color: Color = container.on.into();
color.blend_alpha(background, 0.7) color.blend_alpha(background, 0.7)
@ -138,8 +138,8 @@ impl StyleSheet for crate::Theme {
border_width: 1.0, border_width: 1.0,
border_offset: Some(2.0), border_offset: Some(2.0),
border_color: Color::from(palette.destructive_color()), border_color: Color::from(palette.destructive_color()),
icon_color: container.on.into(), icon_color: None,
text_color: container.on.into(), text_color: None,
placeholder_color: { placeholder_color: {
let color: Color = container.on.into(); let color: Color = container.on.into();
color.blend_alpha(background, 0.7) color.blend_alpha(background, 0.7)
@ -154,8 +154,8 @@ impl StyleSheet for crate::Theme {
border_width: 0.0, border_width: 0.0,
border_offset: None, border_offset: None,
border_color: Color::TRANSPARENT, border_color: Color::TRANSPARENT,
icon_color: container.on.into(), icon_color: None,
text_color: container.on.into(), text_color: None,
placeholder_color: { placeholder_color: {
let color: Color = container.on.into(); let color: Color = container.on.into();
color.blend_alpha(background, 0.7) color.blend_alpha(background, 0.7)
@ -170,8 +170,8 @@ impl StyleSheet for crate::Theme {
border_width: 0.0, border_width: 0.0,
border_offset: None, border_offset: None,
border_color: Color::TRANSPARENT, border_color: Color::TRANSPARENT,
icon_color: container.on.into(), icon_color: None,
text_color: container.on.into(), text_color: None,
placeholder_color: { placeholder_color: {
let color: Color = container.on.into(); let color: Color = container.on.into();
color.blend_alpha(background, 0.7) color.blend_alpha(background, 0.7)
@ -201,8 +201,8 @@ impl StyleSheet for crate::Theme {
border_width: 1.0, border_width: 1.0,
border_offset: None, border_offset: None,
border_color: palette.accent.base.into(), border_color: palette.accent.base.into(),
icon_color: container.on.into(), icon_color: None,
text_color: container.on.into(), text_color: None,
placeholder_color: { placeholder_color: {
let color: Color = container.on.into(); let color: Color = container.on.into();
color.blend_alpha(background, 0.7) color.blend_alpha(background, 0.7)
@ -217,8 +217,8 @@ impl StyleSheet for crate::Theme {
border_offset: None, border_offset: None,
border_width: 1.0, border_width: 1.0,
border_color: palette.accent.base.into(), border_color: palette.accent.base.into(),
icon_color: container.on.into(), icon_color: None,
text_color: container.on.into(), text_color: None,
placeholder_color: { placeholder_color: {
let color: Color = container.on.into(); let color: Color = container.on.into();
color.blend_alpha(background, 0.7) color.blend_alpha(background, 0.7)
@ -233,8 +233,8 @@ impl StyleSheet for crate::Theme {
border_offset: None, border_offset: None,
border_width: 0.0, border_width: 0.0,
border_color: Color::TRANSPARENT, border_color: Color::TRANSPARENT,
icon_color: container.on.into(), icon_color: None,
text_color: container.on.into(), text_color: None,
placeholder_color: { placeholder_color: {
let color: Color = container.on.into(); let color: Color = container.on.into();
color.blend_alpha(background, 0.7) color.blend_alpha(background, 0.7)
@ -249,8 +249,8 @@ impl StyleSheet for crate::Theme {
border_width: 0.0, border_width: 0.0,
border_offset: None, border_offset: None,
border_color: Color::TRANSPARENT, border_color: Color::TRANSPARENT,
icon_color: container.on.into(), icon_color: None,
text_color: container.on.into(), text_color: None,
placeholder_color: { placeholder_color: {
let color: Color = container.on.into(); let color: Color = container.on.into();
color.blend_alpha(background, 0.7) color.blend_alpha(background, 0.7)
@ -265,8 +265,8 @@ impl StyleSheet for crate::Theme {
border_width: 0.0, border_width: 0.0,
border_offset: None, border_offset: None,
border_color: Color::TRANSPARENT, border_color: Color::TRANSPARENT,
icon_color: container.on.into(), icon_color: None,
text_color: container.on.into(), text_color: None,
placeholder_color: { placeholder_color: {
let color: Color = container.on.into(); let color: Color = container.on.into();
color.blend_alpha(background, 0.7) color.blend_alpha(background, 0.7)
@ -296,8 +296,8 @@ impl StyleSheet for crate::Theme {
border_width: 1.0, border_width: 1.0,
border_offset: Some(2.0), border_offset: Some(2.0),
border_color: palette.accent.base.into(), border_color: palette.accent.base.into(),
icon_color: container.on.into(), icon_color: None,
text_color: container.on.into(), text_color: None,
placeholder_color: { placeholder_color: {
let color: Color = container.on.into(); let color: Color = container.on.into();
color.blend_alpha(background, 0.7) color.blend_alpha(background, 0.7)
@ -312,8 +312,8 @@ impl StyleSheet for crate::Theme {
border_width: 1.0, border_width: 1.0,
border_offset: Some(2.0), border_offset: Some(2.0),
border_color: palette.accent.base.into(), border_color: palette.accent.base.into(),
icon_color: container.on.into(), icon_color: None,
text_color: container.on.into(), text_color: None,
placeholder_color: { placeholder_color: {
let color: Color = container.on.into(); let color: Color = container.on.into();
color.blend_alpha(background, 0.7) color.blend_alpha(background, 0.7)
@ -328,10 +328,10 @@ impl StyleSheet for crate::Theme {
border_width: 0.0, border_width: 0.0,
border_offset: None, border_offset: None,
border_color: Color::TRANSPARENT, border_color: Color::TRANSPARENT,
icon_color: container.on.into(),
// TODO use regular text color here after text rendering handles multiple colors // TODO use regular text color here after text rendering handles multiple colors
// in this case, for selected and unselected text // in this case, for selected and unselected text
text_color: container.on.into(), icon_color: None,
text_color: None,
placeholder_color: { placeholder_color: {
let color: Color = container.on.into(); let color: Color = container.on.into();
color.blend_alpha(background, 0.7) color.blend_alpha(background, 0.7)
@ -346,10 +346,10 @@ impl StyleSheet for crate::Theme {
border_width: 0.0, border_width: 0.0,
border_offset: None, border_offset: None,
border_color: Color::TRANSPARENT, 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 // TODO use regular text color here after text rendering handles multiple colors
// in this case, for selected and unselected text // 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: { placeholder_color: {
let color: Color = container.on.into(); let color: Color = container.on.into();
color.blend_alpha(background, 0.7) color.blend_alpha(background, 0.7)
@ -367,13 +367,6 @@ impl StyleSheet for crate::Theme {
return disabled(self); return disabled(self);
} }
let mut appearance = self.active(style); 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
} }
} }

25
src/widget/text_input/input.rs
View file

@ -7,6 +7,7 @@
//! A [`TextInput`] has some local [`State`]. //! A [`TextInput`] has some local [`State`].
use std::borrow::Cow; use std::borrow::Cow;
use crate::ext::ColorExt;
use crate::theme::THEME; use crate::theme::THEME;
use super::cursor; use super::cursor;
@ -2017,6 +2018,16 @@ pub fn draw<'a, Message>(
theme.active(style) 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 // draw background and its border
if let Some(border_offset) = appearance.border_offset { if let Some(border_offset) = appearance.border_offset {
let offset_bounds = Rectangle { let offset_bounds = Rectangle {
@ -2104,8 +2115,8 @@ pub fn draw<'a, Message>(
renderer, renderer,
theme, theme,
&renderer::Style { &renderer::Style {
icon_color: appearance.icon_color, icon_color,
text_color: appearance.text_color, text_color,
scale_factor: renderer_style.scale_factor, scale_factor: renderer_style.scale_factor,
}, },
icon_layout, icon_layout,
@ -2156,7 +2167,7 @@ pub fn draw<'a, Message>(
blur_radius: 0.0, blur_radius: 0.0,
}, },
}, },
appearance.text_color, text_color,
)), )),
offset, offset,
) )
@ -2233,7 +2244,7 @@ pub fn draw<'a, Message>(
let color = if text.is_empty() { let color = if text.is_empty() {
appearance.placeholder_color appearance.placeholder_color
} else { } else {
appearance.text_color text_color
}; };
renderer.fill_text( renderer.fill_text(
@ -2268,8 +2279,8 @@ pub fn draw<'a, Message>(
renderer, renderer,
theme, theme,
&renderer::Style { &renderer::Style {
icon_color: renderer_style.icon_color, icon_color,
text_color: appearance.text_color, text_color,
scale_factor: renderer_style.scale_factor, scale_factor: renderer_style.scale_factor,
}, },
icon_layout, icon_layout,
@ -2292,7 +2303,7 @@ pub fn draw<'a, Message>(
shaping: text::Shaping::Advanced, shaping: text::Shaping::Advanced,
}, },
helper_text_layout.bounds().position(), helper_text_layout.bounds().position(),
appearance.text_color, text_color,
*viewport, *viewport,
); );
} }

6
src/widget/text_input/style.rs
View file

@ -19,16 +19,16 @@ pub struct Appearance {
pub border_width: f32, pub border_width: f32,
/// The border [`Color`] of the text input. /// The border [`Color`] of the text input.
pub border_color: Color, pub border_color: Color,
/// The [`Color`] of symbolic icons.
pub icon_color: Color,
/// The label [`Color`] of the text input. /// The label [`Color`] of the text input.
pub label_color: Color, pub label_color: Color,
/// The placeholder text [`Color`]. /// The placeholder text [`Color`].
pub placeholder_color: Color, pub placeholder_color: Color,
/// The text [`Color`] of the text input. /// The text [`Color`] of the text input.
pub selected_text_color: Color, pub selected_text_color: Color,
/// The icon [`Color`] of the text input.
pub icon_color: Option<Color>,
/// The text [`Color`] of the text input. /// The text [`Color`] of the text input.
pub text_color: Color, pub text_color: Option<Color>,
/// The selected fill [`Color`] of the text input. /// The selected fill [`Color`] of the text input.
pub selected_fill: Color, pub selected_fill: Color,
} }