fix(text_input): inherit text and icon colors from container
This commit is contained in:
Michael Aaron Murphy
Michael Murphy
parent
084ce30478
commit
8c8dbd1420
3 changed files with 56 additions and 52 deletions
|
|
@ -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)
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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<Color>,
|
||||
/// The text [`Color`] of the text input.
|
||||
pub text_color: Color,
|
||||
pub text_color: Option<Color>,
|
||||
/// The selected fill [`Color`] of the text input.
|
||||
pub selected_fill: Color,
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue