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

refactor: text input styling

Browse source
This commit is contained in:
Ashley Wulber 2023-08-17 13:56:16 -04:00
parent 4a554e9ec5
commit 9a9f2efecd
No known key found for this signature in database
GPG key ID: 5216D4F46A90A820
2 changed files with 53 additions and 51 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -14,10 +14,14 @@ 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 icon [`Color`] of the text input.
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 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. /// A set of rules that dictate the style of a text input.
@ -37,15 +41,6 @@ pub trait StyleSheet {
/// Produces the [`Color`] of the placeholder of a text input. /// Produces the [`Color`] of the placeholder of a text input.
fn placeholder_color(&self, style: &Self::Style) -> Color; 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. /// Produces the style of an hovered text input.
fn hovered(&self, style: &Self::Style) -> Appearance { fn hovered(&self, style: &Self::Style) -> Appearance {
self.focused(style) self.focused(style)
@ -80,7 +75,9 @@ impl StyleSheet for crate::Theme {
border_width: 1.0, border_width: 1.0,
border_offset: None, border_offset: None,
border_color: self.current_container().component.divider.into(), 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(), label_color: label_color.into(),
}, },
TextInput::ExpandableSearch => Appearance { TextInput::ExpandableSearch => Appearance {
@ -89,7 +86,9 @@ 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: 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(), label_color: label_color.into(),
}, },
TextInput::Search => Appearance { TextInput::Search => Appearance {
@ -98,7 +97,9 @@ 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: 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(), label_color: label_color.into(),
}, },
TextInput::Inline => Appearance { TextInput::Inline => Appearance {
@ -107,7 +108,9 @@ 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: 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(), label_color: label_color.into(),
}, },
} }
@ -127,7 +130,9 @@ 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: 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(), label_color: label_color.into(),
}, },
TextInput::Search | TextInput::ExpandableSearch => Appearance { TextInput::Search | TextInput::ExpandableSearch => Appearance {
@ -136,7 +141,9 @@ 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: 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(), label_color: label_color.into(),
}, },
TextInput::Inline => Appearance { TextInput::Inline => Appearance {
@ -145,7 +152,9 @@ 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: 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(), label_color: label_color.into(),
}, },
} }
@ -165,7 +174,9 @@ 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: 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(), label_color: label_color.into(),
}, },
TextInput::Search | TextInput::ExpandableSearch => Appearance { TextInput::Search | TextInput::ExpandableSearch => Appearance {
@ -174,7 +185,9 @@ 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: 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(), label_color: label_color.into(),
}, },
TextInput::Inline => Appearance { TextInput::Inline => Appearance {
@ -183,7 +196,9 @@ 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: 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(), label_color: label_color.into(),
}, },
} }
@ -203,7 +218,9 @@ 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: 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(), label_color: label_color.into(),
}, },
TextInput::Search | TextInput::ExpandableSearch => Appearance { TextInput::Search | TextInput::ExpandableSearch => Appearance {
@ -212,7 +229,9 @@ impl StyleSheet for crate::Theme {
border_width: 0.0, border_width: 0.0,
border_offset: Some(2.0), border_offset: Some(2.0),
border_color: Color::TRANSPARENT, 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(), label_color: label_color.into(),
}, },
TextInput::Inline => Appearance { TextInput::Inline => Appearance {
@ -221,7 +240,11 @@ 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: 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(), label_color: label_color.into(),
}, },
} }
@ -234,25 +257,6 @@ impl StyleSheet for crate::Theme {
neutral_9.into() 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 { fn disabled(&self, style: &Self::Style) -> Appearance {
self.active(style) self.active(style)
} }

14
src/widget/text_input/text_input.rs
View file

@ -1,6 +1,7 @@
//! Display fields that can be filled with text. //! Display fields that can be filled with text.
//! //!
//! A [`TextInput`] has some local [`State`]. //! A [`TextInput`] has some local [`State`].
use crate::app;
use crate::theme::THEME; use crate::theme::THEME;
use super::cursor; use super::cursor;
@ -9,7 +10,6 @@ use super::editor::Editor;
use super::style::StyleSheet; use super::style::StyleSheet;
pub use super::value::Value; pub use super::value::Value;
use apply::Also;
use iced::Limits; use iced::Limits;
use iced_core::event::{self, Event}; use iced_core::event::{self, Event};
use iced_core::keyboard; use iced_core::keyboard;
@ -1798,7 +1798,7 @@ pub fn draw<'a, Message>(
renderer, renderer,
theme, theme,
&renderer::Style { &renderer::Style {
text_color: appearance.icon_color, text_color: appearance.text_color,
}, },
icon_layout, icon_layout,
cursor_position, cursor_position,
@ -1844,7 +1844,7 @@ pub fn draw<'a, Message>(
border_width: 0.0, border_width: 0.0,
border_color: Color::TRANSPARENT, border_color: Color::TRANSPARENT,
}, },
theme.value_color(style), appearance.text_color,
)), )),
offset, offset,
) )
@ -1893,7 +1893,7 @@ pub fn draw<'a, Message>(
border_width: 0.0, border_width: 0.0,
border_color: Color::TRANSPARENT, border_color: Color::TRANSPARENT,
}, },
theme.selection_color(style), appearance.selected_fill,
)), )),
if end == right { if end == right {
right_offset right_offset
@ -1917,10 +1917,8 @@ pub fn draw<'a, Message>(
let color = if text.is_empty() { let color = if text.is_empty() {
theme.placeholder_color(style) theme.placeholder_color(style)
} else if is_disabled {
theme.disabled_color(style)
} else { } else {
theme.value_color(style) appearance.text_color
}; };
let render = |renderer: &mut crate::Renderer| { let render = |renderer: &mut crate::Renderer| {
@ -1966,7 +1964,7 @@ pub fn draw<'a, Message>(
renderer, renderer,
theme, theme,
&renderer::Style { &renderer::Style {
text_color: appearance.icon_color, text_color: appearance.text_color,
}, },
icon_layout, icon_layout,
cursor_position, cursor_position,