Skip to content

Commit

Permalink
refactor: text input styling
Browse files Browse the repository at this point in the history
  • Loading branch information
@wash2
wash2 committed Aug 17, 2023
1 parent 736254d commit be7578c
Show file tree
Hide file tree
Showing 2 changed files with 53 additions and 51 deletions.
90 changes: 47 additions & 43 deletions src/widget/text_input/style.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,10 +14,14 @@ pub struct Appearance {
pub border_width: f32,
/// The border [`Color`] of the text input.
pub border_color: Color,
/// The icon [`Color`] of the text input.
pub icon_color: Color,
/// The label [`Color`] of the text input.
pub label_color: Color,
/// The text [`Color`] of the text input.
pub selected_text_color: Color,
/// The text [`Color`] of the text input.
pub text_color: Color,
/// The selected fill [`Color`] of the text input.
pub selected_fill: Color,
}

/// A set of rules that dictate the style of a text input.
Expand All @@ -37,15 +41,6 @@ pub trait StyleSheet {
/// Produces the [`Color`] of the placeholder of a text input.
fn placeholder_color(&self, style: &Self::Style) -> Color;

/// Produces the [`Color`] of the value of a text input.
fn value_color(&self, style: &Self::Style) -> Color;

/// Produces the [`Color`] of the value of a disabled text input.
fn disabled_color(&self, style: &Self::Style) -> Color;

/// Produces the [`Color`] of the selection of a text input.
fn selection_color(&self, style: &Self::Style) -> Color;

/// Produces the style of an hovered text input.
fn hovered(&self, style: &Self::Style) -> Appearance {
self.focused(style)
Expand Down Expand Up @@ -80,7 +75,9 @@ impl StyleSheet for crate::Theme {
border_width: 1.0,
border_offset: None,
border_color: self.current_container().component.divider.into(),
icon_color: self.current_container().on.into(),
text_color: self.current_container().on.into(),
selected_text_color: palette.on_accent_color().into(),
selected_fill: palette.accent_color().into(),
label_color: label_color.into(),
},
TextInput::ExpandableSearch => Appearance {
Expand All @@ -89,7 +86,9 @@ impl StyleSheet for crate::Theme {
border_width: 0.0,
border_offset: None,
border_color: Color::TRANSPARENT,
icon_color: self.current_container().on.into(),
text_color: self.current_container().on.into(),
selected_text_color: palette.on_accent_color().into(),
selected_fill: palette.accent_color().into(),
label_color: label_color.into(),
},
TextInput::Search => Appearance {
Expand All @@ -98,7 +97,9 @@ impl StyleSheet for crate::Theme {
border_width: 0.0,
border_offset: None,
border_color: Color::TRANSPARENT,
icon_color: self.current_container().on.into(),
text_color: self.current_container().on.into(),
selected_text_color: palette.on_accent_color().into(),
selected_fill: palette.accent_color().into(),
label_color: label_color.into(),
},
TextInput::Inline => Appearance {
Expand All @@ -107,7 +108,9 @@ impl StyleSheet for crate::Theme {
border_width: 0.0,
border_offset: None,
border_color: Color::TRANSPARENT,
icon_color: self.current_container().on.into(),
text_color: self.current_container().on.into(),
selected_text_color: palette.on_accent_color().into(),
selected_fill: palette.accent_color().into(),
label_color: label_color.into(),
},
}
Expand All @@ -127,7 +130,9 @@ impl StyleSheet for crate::Theme {
border_width: 1.0,
border_offset: Some(2.0),
border_color: Color::from(palette.destructive_color()),
icon_color: self.current_container().on.into(),
text_color: self.current_container().on.into(),
selected_text_color: palette.on_accent_color().into(),
selected_fill: palette.accent_color().into(),
label_color: label_color.into(),
},
TextInput::Search | TextInput::ExpandableSearch => Appearance {
Expand All @@ -136,7 +141,9 @@ impl StyleSheet for crate::Theme {
border_width: 0.0,
border_offset: None,
border_color: Color::TRANSPARENT,
icon_color: self.current_container().on.into(),
text_color: self.current_container().on.into(),
selected_text_color: palette.on_accent_color().into(),
selected_fill: palette.accent_color().into(),
label_color: label_color.into(),
},
TextInput::Inline => Appearance {
Expand All @@ -145,7 +152,9 @@ impl StyleSheet for crate::Theme {
border_width: 0.0,
border_offset: None,
border_color: Color::TRANSPARENT,
icon_color: self.current_container().on.into(),
text_color: self.current_container().on.into(),
selected_text_color: palette.on_accent_color().into(),
selected_fill: palette.accent_color().into(),
label_color: label_color.into(),
},
}
Expand All @@ -165,7 +174,9 @@ impl StyleSheet for crate::Theme {
border_width: 1.0,
border_offset: None,
border_color: palette.accent.base.into(),
icon_color: self.current_container().on.into(),
text_color: self.current_container().on.into(),
selected_text_color: palette.on_accent_color().into(),
selected_fill: palette.accent_color().into(),
label_color: label_color.into(),
},
TextInput::Search | TextInput::ExpandableSearch => Appearance {
Expand All @@ -174,7 +185,9 @@ impl StyleSheet for crate::Theme {
border_offset: None,
border_width: 0.0,
border_color: Color::TRANSPARENT,
icon_color: self.current_container().on.into(),
text_color: self.current_container().on.into(),
selected_text_color: palette.on_accent_color().into(),
selected_fill: palette.accent_color().into(),
label_color: label_color.into(),
},
TextInput::Inline => Appearance {
Expand All @@ -183,7 +196,9 @@ impl StyleSheet for crate::Theme {
border_width: 0.0,
border_offset: None,
border_color: Color::TRANSPARENT,
icon_color: self.current_container().on.into(),
text_color: self.current_container().on.into(),
selected_text_color: palette.on_accent_color().into(),
selected_fill: palette.accent_color().into(),
label_color: label_color.into(),
},
}
Expand All @@ -203,7 +218,9 @@ impl StyleSheet for crate::Theme {
border_width: 1.0,
border_offset: Some(2.0),
border_color: palette.accent.base.into(),
icon_color: self.current_container().on.into(),
text_color: self.current_container().on.into(),
selected_text_color: palette.on_accent_color().into(),
selected_fill: palette.accent_color().into(),
label_color: label_color.into(),
},
TextInput::Search | TextInput::ExpandableSearch => Appearance {
Expand All @@ -212,7 +229,9 @@ impl StyleSheet for crate::Theme {
border_width: 0.0,
border_offset: Some(2.0),
border_color: Color::TRANSPARENT,
icon_color: self.current_container().on.into(),
text_color: self.current_container().on.into(),
selected_text_color: palette.on_accent_color().into(),
selected_fill: palette.accent_color().into(),
label_color: label_color.into(),
},
TextInput::Inline => Appearance {
Expand All @@ -221,7 +240,11 @@ impl StyleSheet for crate::Theme {
border_width: 0.0,
border_offset: None,
border_color: Color::TRANSPARENT,
icon_color: palette.accent.on.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(),
selected_text_color: palette.on_accent_color().into(),
selected_fill: palette.accent_color().into(),
label_color: label_color.into(),
},
}
Expand All @@ -234,25 +257,6 @@ impl StyleSheet for crate::Theme {
neutral_9.into()
}

fn value_color(&self, _style: &Self::Style) -> Color {
let palette = self.cosmic();

palette.palette.neutral_9.into()
}

fn selection_color(&self, _style: &Self::Style) -> Color {
let palette = self.cosmic();

palette.accent.base.into()
}

fn disabled_color(&self, _style: &Self::Style) -> Color {
let palette = self.cosmic();
let mut neutral_9 = palette.palette.neutral_9;
neutral_9.alpha = 0.5;
neutral_9.into()
}

fn disabled(&self, style: &Self::Style) -> Appearance {
self.active(style)
}
Expand Down
14 changes: 6 additions & 8 deletions src/widget/text_input/text_input.rs
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
//! Display fields that can be filled with text.
//!
//! A [`TextInput`] has some local [`State`].
use crate::app;
use crate::theme::THEME;

use super::cursor;
Expand All @@ -9,7 +10,6 @@ use super::editor::Editor;
use super::style::StyleSheet;
pub use super::value::Value;

use apply::Also;
use iced::Limits;
use iced_core::event::{self, Event};
use iced_core::keyboard;
Expand Down Expand Up @@ -1798,7 +1798,7 @@ pub fn draw<'a, Message>(
renderer,
theme,
&renderer::Style {
text_color: appearance.icon_color,
text_color: appearance.text_color,
},
icon_layout,
cursor_position,
Expand Down Expand Up @@ -1844,7 +1844,7 @@ pub fn draw<'a, Message>(
border_width: 0.0,
border_color: Color::TRANSPARENT,
},
theme.value_color(style),
appearance.text_color,
)),
offset,
)
Expand Down Expand Up @@ -1893,7 +1893,7 @@ pub fn draw<'a, Message>(
border_width: 0.0,
border_color: Color::TRANSPARENT,
},
theme.selection_color(style),
appearance.selected_fill,
)),
if end == right {
right_offset
Expand All @@ -1917,10 +1917,8 @@ pub fn draw<'a, Message>(

let color = if text.is_empty() {
theme.placeholder_color(style)
} else if is_disabled {
theme.disabled_color(style)
} else {
theme.value_color(style)
appearance.text_color
};

let render = |renderer: &mut crate::Renderer| {
Expand Down Expand Up @@ -1966,7 +1964,7 @@ pub fn draw<'a, Message>(
renderer,
theme,
&renderer::Style {
text_color: appearance.icon_color,
text_color: appearance.text_color,
},
icon_layout,
cursor_position,
Expand Down

0 comments on commit be7578c

Please sign in to comment.