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,
/// 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.
@ -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)
@ -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 {
@ -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 {
@ -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 {
@ -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(),
},
}
@ -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 {
@ -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 {
@ -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(),
},
}
@ -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 {
@ -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 {
@ -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(),
},
}
@ -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 {
@ -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 {
@ -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(),
},
}
@ -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)
}

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

@ -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;
@ -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;
@ -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,
@ -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,
)
@ -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
@ -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| {
@ -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,