me/iced
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Implement theme styling for TextInput

Browse source
This commit is contained in:
Héctor Ramón Jiménez 2022-06-07 01:11:35 +02:00
parent 835877fc63
commit ce53d3933c
No known key found for this signature in database
GPG key ID: 140CC052C94F138E
12 changed files with 145 additions and 183 deletions
Download patch file Download diff file Expand all files Collapse all files

76
style/src/text_input.rs
View file

@ -3,87 +3,31 @@ use iced_core::{Background, Color};
/// The appearance of a text input.
#[derive(Debug, Clone, Copy)]
pub struct Style {
pub struct Appearance {
pub background: Background,
pub border_radius: f32,
pub border_width: f32,
pub border_color: Color,
}
impl std::default::Default for Style {
fn default() -> Self {
Self {
background: Background::Color(Color::WHITE),
border_radius: 0.0,
border_width: 0.0,
border_color: Color::TRANSPARENT,
}
}
}
/// A set of rules that dictate the style of a text input.
pub trait StyleSheet {
type Style: Default + Copy;
/// Produces the style of an active text input.
fn active(&self) -> Style;
fn active(&self, style: Self::Style) -> Appearance;
/// Produces the style of a focused text input.
fn focused(&self) -> Style;
fn focused(&self, style: Self::Style) -> Appearance;
fn placeholder_color(&self) -> Color;
fn placeholder_color(&self, style: Self::Style) -> Color;
fn value_color(&self) -> Color;
fn value_color(&self, style: Self::Style) -> Color;
fn selection_color(&self) -> Color;
fn selection_color(&self, style: Self::Style) -> Color;
/// Produces the style of an hovered text input.
fn hovered(&self) -> Style {
self.focused()
}
}
struct Default;
impl StyleSheet for Default {
fn active(&self) -> Style {
Style {
background: Background::Color(Color::WHITE),
border_radius: 5.0,
border_width: 1.0,
border_color: Color::from_rgb(0.7, 0.7, 0.7),
}
}
fn focused(&self) -> Style {
Style {
border_color: Color::from_rgb(0.5, 0.5, 0.5),
..self.active()
}
}
fn placeholder_color(&self) -> Color {
Color::from_rgb(0.7, 0.7, 0.7)
}
fn value_color(&self) -> Color {
Color::from_rgb(0.3, 0.3, 0.3)
}
fn selection_color(&self) -> Color {
Color::from_rgb(0.8, 0.8, 1.0)
}
}
impl<'a> std::default::Default for Box<dyn StyleSheet + 'a> {
fn default() -> Self {
Box::new(Default)
}
}
impl<'a, T> From<T> for Box<dyn StyleSheet + 'a>
where
T: StyleSheet + 'a,
{
fn from(style_sheet: T) -> Self {
Box::new(style_sheet)
fn hovered(&self, style: Self::Style) -> Appearance {
self.focused(style)
}
}

85
style/src/theme.rs
View file

@ -10,6 +10,7 @@ use crate::progress_bar;
use crate::radio;
use crate::rule;
use crate::slider;
use crate::text_input;
use crate::toggler;
use iced_core::{Background, Color};
@ -152,22 +153,22 @@ impl checkbox::StyleSheet for Theme {
match style {
Checkbox::Primary => checkbox_appearance(
palette.background.weak,
palette.background.base,
palette.primary.strong,
is_checked,
),
Checkbox::Secondary => checkbox_appearance(
palette.background.weak,
palette.background.base,
palette.background.base,
is_checked,
),
Checkbox::Success => checkbox_appearance(
palette.background.weak,
palette.background.base,
palette.success.base,
is_checked,
),
Checkbox::Danger => checkbox_appearance(
palette.background.weak,
palette.background.base,
palette.danger.base,
is_checked,
),
@ -183,23 +184,23 @@ impl checkbox::StyleSheet for Theme {
match style {
Checkbox::Primary => checkbox_appearance(
palette.background.strong,
palette.primary.strong,
palette.background.weak,
palette.primary.base,
is_checked,
),
Checkbox::Secondary => checkbox_appearance(
palette.background.strong,
palette.background.strong,
palette.background.weak,
palette.background.base,
is_checked,
),
Checkbox::Success => checkbox_appearance(
palette.background.strong,
palette.success.strong,
palette.background.weak,
palette.success.base,
is_checked,
),
Checkbox::Danger => checkbox_appearance(
palette.background.strong,
palette.danger.strong,
palette.background.weak,
palette.danger.base,
is_checked,
),
}
@ -410,7 +411,7 @@ impl progress_bar::StyleSheet for Theme {
let palette = self.extended_palette();
let from_palette = |bar: Color| progress_bar::Appearance {
background: palette.background.weak.color.into(),
background: palette.background.strong.color.into(),
bar: bar.into(),
border_radius: 2.0,
};
@ -456,3 +457,61 @@ impl rule::StyleSheet for Theme {
}
}
}
/*
* Text Input
*/
impl text_input::StyleSheet for Theme {
type Style = ();
fn active(&self, _style: Self::Style) -> text_input::Appearance {
let palette = self.extended_palette();
text_input::Appearance {
background: palette.background.base.color.into(),
border_radius: 2.0,
border_width: 1.0,
border_color: palette.background.strong.color,
}
}
fn hovered(&self, _style: Self::Style) -> text_input::Appearance {
let palette = self.extended_palette();
text_input::Appearance {
background: palette.background.base.color.into(),
border_radius: 2.0,
border_width: 1.0,
border_color: palette.background.base.text,
}
}
fn focused(&self, _style: Self::Style) -> text_input::Appearance {
let palette = self.extended_palette();
text_input::Appearance {
background: palette.background.base.color.into(),
border_radius: 2.0,
border_width: 1.0,
border_color: palette.primary.strong.color,
}
}
fn placeholder_color(&self, _style: Self::Style) -> Color {
let palette = self.extended_palette();
palette.background.strong.color
}
fn value_color(&self, _style: Self::Style) -> Color {
let palette = self.extended_palette();
palette.background.base.text
}
fn selection_color(&self, _style: Self::Style) -> Color {
let palette = self.extended_palette();
palette.primary.weak.color
}
}

2
style/src/theme/palette.rs
View file

@ -120,7 +120,7 @@ pub struct Background {
impl Background {
pub fn new(base: Color, text: Color) -> Self {
let weak = mix(base, text, 0.15);
let strong = mix(base, text, 0.25);
let strong = mix(base, text, 0.40);
Self {
base: Pair::new(base, text),