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

4
examples/component/src/main.rs
View file

@ -95,7 +95,7 @@ mod numeric_input {
for NumericInput<'a, Message>
where
Renderer: 'a + text::Renderer,
Renderer::Theme: button::StyleSheet,
Renderer::Theme: button::StyleSheet + text_input::StyleSheet,
{
type Event = Event;
@ -173,7 +173,7 @@ mod numeric_input {
where
Message: 'a,
Renderer: text::Renderer + 'a,
Renderer::Theme: button::StyleSheet,
Renderer::Theme: button::StyleSheet + text_input::StyleSheet,
{
fn from(numeric_input: NumericInput<'a, Message>) -> Self {
component::view(numeric_input)

6
examples/pure/component/src/main.rs
View file

@ -89,7 +89,8 @@ mod numeric_input {
impl<Message, Renderer> Component<Message, Renderer> for NumericInput<Message>
where
Renderer: text::Renderer + 'static,
Renderer::Theme: widget::button::StyleSheet,
Renderer::Theme:
widget::button::StyleSheet + widget::text_input::StyleSheet,
{
type State = ();
type Event = Event;
@ -160,7 +161,8 @@ mod numeric_input {
where
Message: 'a,
Renderer: 'static + text::Renderer,
Renderer::Theme: widget::button::StyleSheet,
Renderer::Theme:
widget::button::StyleSheet + widget::text_input::StyleSheet,
{
fn from(numeric_input: NumericInput<Message>) -> Self {
pure::component(numeric_input)

6
examples/scrollable/src/style.rs
View file

@ -43,12 +43,6 @@ mod dark {
0x3F as f32 / 255.0,
);
const SURFACE: Color = Color::from_rgb(
0x40 as f32 / 255.0,
0x44 as f32 / 255.0,
0x4B as f32 / 255.0,
);
const ACCENT: Color = Color::from_rgb(
0x6F as f32 / 255.0,
0xFF as f32 / 255.0,

63
examples/styling/src/main.rs
View file

@ -77,8 +77,7 @@ impl Sandbox for Styling {
Message::InputChanged,
)
.padding(10)
.size(20)
.style(self.theme);
.size(20);
let button = Button::new(&mut self.button, Text::new("Submit"))
.padding(10)
@ -157,7 +156,7 @@ impl Sandbox for Styling {
}
mod style {
use iced::{scrollable, text_input};
use iced::scrollable;
#[derive(Debug, Clone, Copy, PartialEq, Eq)]
pub enum Theme {
@ -175,15 +174,6 @@ mod style {
}
}
impl<'a> From<Theme> for Box<dyn text_input::StyleSheet + 'a> {
fn from(theme: Theme) -> Self {
match theme {
Theme::Light => Default::default(),
Theme::Dark => dark::TextInput.into(),
}
}
}
impl<'a> From<Theme> for Box<dyn scrollable::StyleSheet + 'a> {
fn from(theme: Theme) -> Self {
match theme {
@ -194,7 +184,7 @@ mod style {
}
mod dark {
use iced::{scrollable, text_input, Color};
use iced::{scrollable, Color};
const SURFACE: Color = Color::from_rgb(
0x40 as f32 / 255.0,
@ -202,12 +192,6 @@ mod style {
0x4B as f32 / 255.0,
);
const ACCENT: Color = Color::from_rgb(
0x6F as f32 / 255.0,
0xFF as f32 / 255.0,
0xE9 as f32 / 255.0,
);
const ACTIVE: Color = Color::from_rgb(
0x72 as f32 / 255.0,
0x89 as f32 / 255.0,
@ -220,47 +204,6 @@ mod style {
0xC4 as f32 / 255.0,
);
pub struct TextInput;
impl text_input::StyleSheet for TextInput {
fn active(&self) -> text_input::Style {
text_input::Style {
background: SURFACE.into(),
border_radius: 2.0,
border_width: 0.0,
border_color: Color::TRANSPARENT,
}
}
fn focused(&self) -> text_input::Style {
text_input::Style {
border_width: 1.0,
border_color: ACCENT,
..self.active()
}
}
fn hovered(&self) -> text_input::Style {
text_input::Style {
border_width: 1.0,
border_color: Color { a: 0.3, ..ACCENT },
..self.focused()
}
}
fn placeholder_color(&self) -> Color {
Color::from_rgb(0.4, 0.4, 0.4)
}
fn value_color(&self) -> Color {
Color::WHITE
}
fn selection_color(&self) -> Color {
ACTIVE
}
}
pub struct Scrollable;
impl scrollable::StyleSheet for Scrollable {

55
native/src/widget/text_input.rs
View file

@ -24,7 +24,7 @@ use crate::{
Shell, Size, Vector, Widget,
};
pub use iced_style::text_input::{Style, StyleSheet};
pub use iced_style::text_input::{Appearance, StyleSheet};
/// A field that can be filled with text.
///
@ -52,7 +52,11 @@ pub use iced_style::text_input::{Style, StyleSheet};
/// ```
/// ![Text input drawn by `iced_wgpu`](https://github.com/iced-rs/iced/blob/7760618fb112074bc40b148944521f312152012a/docs/images/text_input.png?raw=true)
#[allow(missing_debug_implementations)]
pub struct TextInput<'a, Message, Renderer: text::Renderer> {
pub struct TextInput<'a, Message, Renderer>
where
Renderer: text::Renderer,
Renderer::Theme: StyleSheet,
{
state: &'a mut State,
placeholder: String,
value: Value,
@ -63,13 +67,14 @@ pub struct TextInput<'a, Message, Renderer: text::Renderer> {
size: Option<u16>,
on_change: Box<dyn Fn(String) -> Message + 'a>,
on_submit: Option<Message>,
style_sheet: Box<dyn StyleSheet + 'a>,
style: <Renderer::Theme as StyleSheet>::Style,
}
impl<'a, Message, Renderer> TextInput<'a, Message, Renderer>
where
Message: Clone,
Renderer: text::Renderer,
Renderer::Theme: StyleSheet,
{
/// Creates a new [`TextInput`].
///
@ -98,7 +103,7 @@ where
size: None,
on_change: Box::new(on_change),
on_submit: None,
style_sheet: Default::default(),
style: Default::default(),
}
}
@ -143,9 +148,9 @@ where
/// Sets the style of the [`TextInput`].
pub fn style(
mut self,
style_sheet: impl Into<Box<dyn StyleSheet + 'a>>,
style: impl Into<<Renderer::Theme as StyleSheet>::Style>,
) -> Self {
self.style_sheet = style_sheet.into();
self.style = style.into();
self
}
@ -161,12 +166,14 @@ where
pub fn draw(
&self,
renderer: &mut Renderer,
theme: &Renderer::Theme,
layout: Layout<'_>,
cursor_position: Point,
value: Option<&Value>,
) {
draw(
renderer,
theme,
layout,
cursor_position,
&self.state,
@ -175,7 +182,7 @@ where
self.size,
&self.font,
self.is_secure,
self.style_sheet.as_ref(),
self.style,
)
}
}
@ -575,6 +582,7 @@ where
/// [`Renderer`]: text::Renderer
pub fn draw<Renderer>(
renderer: &mut Renderer,
theme: &Renderer::Theme,
layout: Layout<'_>,
cursor_position: Point,
state: &State,
@ -583,9 +591,10 @@ pub fn draw<Renderer>(
size: Option<u16>,
font: &Renderer::Font,
is_secure: bool,
style_sheet: &dyn StyleSheet,
style: <Renderer::Theme as StyleSheet>::Style,
) where
Renderer: text::Renderer,
Renderer::Theme: StyleSheet,
{
let secure_value = is_secure.then(|| value.secure());
let value = secure_value.as_ref().unwrap_or(&value);
@ -595,22 +604,22 @@ pub fn draw<Renderer>(
let is_mouse_over = bounds.contains(cursor_position);
let style = if state.is_focused() {
style_sheet.focused()
let appearance = if state.is_focused() {
theme.focused(style)
} else if is_mouse_over {
style_sheet.hovered()
theme.hovered(style)
} else {
style_sheet.active()
theme.active(style)
};
renderer.fill_quad(
renderer::Quad {
bounds,
border_radius: style.border_radius,
border_width: style.border_width,
border_color: style.border_color,
border_radius: appearance.border_radius,
border_width: appearance.border_width,
border_color: appearance.border_color,
},
style.background,
appearance.background,
);
let text = value.to_string();
@ -642,7 +651,7 @@ pub fn draw<Renderer>(
border_width: 0.0,
border_color: Color::TRANSPARENT,
},
style_sheet.value_color(),
theme.value_color(style),
)),
offset,
)
@ -686,7 +695,7 @@ pub fn draw<Renderer>(
border_width: 0.0,
border_color: Color::TRANSPARENT,
},
style_sheet.selection_color(),
theme.selection_color(style),
)),
if end == right {
right_offset
@ -714,9 +723,9 @@ pub fn draw<Renderer>(
renderer.fill_text(Text {
content: if text.is_empty() { placeholder } else { &text },
color: if text.is_empty() {
style_sheet.placeholder_color()
theme.placeholder_color(style)
} else {
style_sheet.value_color()
theme.value_color(style)
},
font: font.clone(),
bounds: Rectangle {
@ -756,6 +765,7 @@ impl<'a, Message, Renderer> Widget<Message, Renderer>
where
Message: Clone,
Renderer: text::Renderer,
Renderer::Theme: StyleSheet,
{
fn width(&self) -> Length {
self.width
@ -812,13 +822,13 @@ where
fn draw(
&self,
renderer: &mut Renderer,
_theme: &Renderer::Theme,
theme: &Renderer::Theme,
_style: &renderer::Style,
layout: Layout<'_>,
cursor_position: Point,
_viewport: &Rectangle,
) {
self.draw(renderer, layout, cursor_position, None)
self.draw(renderer, theme, layout, cursor_position, None)
}
}
@ -827,6 +837,7 @@ impl<'a, Message, Renderer> From<TextInput<'a, Message, Renderer>>
where
Message: 'a + Clone,
Renderer: 'a + text::Renderer,
Renderer::Theme: StyleSheet,
{
fn from(
text_input: TextInput<'a, Message, Renderer>,

1
pure/src/helpers.rs
View file

@ -142,6 +142,7 @@ pub fn text_input<'a, Message, Renderer>(
where
Message: Clone,
Renderer: iced_native::text::Renderer,
Renderer::Theme: widget::text_input::StyleSheet,
{
widget::TextInput::new(placeholder, value, on_change)
}

26
pure/src/widget/text_input.rs
View file

@ -10,7 +10,7 @@ use iced_native::text;
use iced_native::widget::text_input;
use iced_native::{Clipboard, Length, Padding, Point, Rectangle, Shell};
pub use iced_style::text_input::{Style, StyleSheet};
pub use iced_style::text_input::{Appearance, StyleSheet};
/// A field that can be filled with text.
///
@ -33,7 +33,11 @@ pub use iced_style::text_input::{Style, StyleSheet};
/// ```
/// ![Text input drawn by `iced_wgpu`](https://github.com/iced-rs/iced/blob/7760618fb112074bc40b148944521f312152012a/docs/images/text_input.png?raw=true)
#[allow(missing_debug_implementations)]
pub struct TextInput<'a, Message, Renderer: text::Renderer> {
pub struct TextInput<'a, Message, Renderer>
where
Renderer: text::Renderer,
Renderer::Theme: StyleSheet,
{
placeholder: String,
value: text_input::Value,
is_secure: bool,
@ -43,13 +47,14 @@ pub struct TextInput<'a, Message, Renderer: text::Renderer> {
size: Option<u16>,
on_change: Box<dyn Fn(String) -> Message + 'a>,
on_submit: Option<Message>,
style_sheet: Box<dyn StyleSheet + 'a>,
style: <Renderer::Theme as StyleSheet>::Style,
}
impl<'a, Message, Renderer> TextInput<'a, Message, Renderer>
where
Message: Clone,
Renderer: text::Renderer,
Renderer::Theme: StyleSheet,
{
/// Creates a new [`TextInput`].
///
@ -71,7 +76,7 @@ where
size: None,
on_change: Box::new(on_change),
on_submit: None,
style_sheet: Default::default(),
style: Default::default(),
}
}
@ -83,7 +88,7 @@ where
/// Sets the [`Font`] of the [`TextInput`].
///
/// [`Font`]: iced_native::text::Renderer::Font
/// [`Font`]: text::Renderer::Font
pub fn font(mut self, font: Renderer::Font) -> Self {
self.font = font;
self
@ -116,9 +121,9 @@ where
/// Sets the style of the [`TextInput`].
pub fn style(
mut self,
style_sheet: impl Into<Box<dyn StyleSheet + 'a>>,
style: impl Into<<Renderer::Theme as StyleSheet>::Style>,
) -> Self {
self.style_sheet = style_sheet.into();
self.style = style.into();
self
}
}
@ -127,7 +132,8 @@ impl<'a, Message, Renderer> Widget<Message, Renderer>
for TextInput<'a, Message, Renderer>
where
Message: Clone,
Renderer: iced_native::text::Renderer,
Renderer: text::Renderer,
Renderer::Theme: StyleSheet,
{
fn tag(&self) -> tree::Tag {
tree::Tag::of::<text_input::State>()
@ -198,6 +204,7 @@ where
) {
text_input::draw(
renderer,
theme,
layout,
cursor_position,
tree.state.downcast_ref::<text_input::State>(),
@ -206,7 +213,7 @@ where
self.size,
&self.font,
self.is_secure,
self.style_sheet.as_ref(),
self.style,
)
}
@ -227,6 +234,7 @@ impl<'a, Message, Renderer> From<TextInput<'a, Message, Renderer>>
where
Message: 'a + Clone,
Renderer: 'a + text::Renderer,
Renderer::Theme: StyleSheet,
{
fn from(
text_input: TextInput<'a, Message, Renderer>,

2
src/pure/widget.rs
View file

@ -120,7 +120,7 @@ pub mod text_input {
//! Display fields that can be filled with text.
use crate::Renderer;
pub use iced_pure::widget::text_input::{Style, StyleSheet};
pub use iced_pure::widget::text_input::{Appearance, StyleSheet};
/// A field that can be filled with text.
pub type TextInput<'a, Message, Theme> =

2
src/widget.rs
View file

@ -140,7 +140,7 @@ pub mod text_input {
//! A [`TextInput`] has some local [`State`].
use crate::Renderer;
pub use iced_native::widget::text_input::{State, Style, StyleSheet};
pub use iced_native::widget::text_input::{Appearance, State, StyleSheet};
/// A field that can be filled with text.
pub type TextInput<'a, Message, Theme> =

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),