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

Simplify theming for TextEditor widget

Browse source
This commit is contained in:
Héctor Ramón Jiménez 2024-03-06 15:20:10 +01:00
parent 69bc1df252
commit 68c8f23f02
No known key found for this signature in database
GPG key ID: 7CC46565708259A7
5 changed files with 105 additions and 185 deletions
Download patch file Download diff file Expand all files Collapse all files

1
style/src/lib.rs
View file

@ -20,7 +20,6 @@ pub mod application;
pub mod menu;
pub mod pane_grid;
pub mod pick_list;
pub mod text_editor;
pub mod theme;
pub use theme::Theme;

43
style/src/text_editor.rs
View file

@ -1,43 +0,0 @@
//! Change the appearance of a text editor.
use crate::core::{Background, Border, Color};
/// The appearance of a text input.
#[derive(Debug, Clone, Copy)]
pub struct Appearance {
/// The [`Background`] of the text editor.
pub background: Background,
/// The [`Border`] of the text editor.
pub border: Border,
}
/// A set of rules that dictate the style of a text input.
pub trait StyleSheet {
/// The supported style of the [`StyleSheet`].
type Style: Default;
/// Produces the style of an active text input.
fn active(&self, style: &Self::Style) -> Appearance;
/// Produces the style of a focused text input.
fn focused(&self, style: &Self::Style) -> Appearance;
/// 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)
}
/// Produces the style of a disabled text input.
fn disabled(&self, style: &Self::Style) -> Appearance;
}

121
style/src/theme.rs
View file

@ -8,7 +8,6 @@ use crate::core::widget::text;
use crate::menu;
use crate::pane_grid;
use crate::pick_list;
use crate::text_editor;
use crate::core::{Background, Border, Color};
@ -440,123 +439,3 @@ impl pane_grid::StyleSheet for Theme {
}
impl text::StyleSheet for Theme {}
/// The style of a text input.
#[derive(Default)]
pub enum TextEditor {
/// The default style.
#[default]
Default,
/// A custom style.
Custom(Box<dyn text_editor::StyleSheet<Style = Theme>>),
}
impl text_editor::StyleSheet for Theme {
type Style = TextEditor;
fn active(&self, style: &Self::Style) -> text_editor::Appearance {
if let TextEditor::Custom(custom) = style {
return custom.active(self);
}
let palette = self.extended_palette();
text_editor::Appearance {
background: palette.background.base.color.into(),
border: Border {
radius: 2.0.into(),
width: 1.0,
color: palette.background.strong.color,
},
}
}
fn hovered(&self, style: &Self::Style) -> text_editor::Appearance {
if let TextEditor::Custom(custom) = style {
return custom.hovered(self);
}
let palette = self.extended_palette();
text_editor::Appearance {
background: palette.background.base.color.into(),
border: Border {
radius: 2.0.into(),
width: 1.0,
color: palette.background.base.text,
},
}
}
fn focused(&self, style: &Self::Style) -> text_editor::Appearance {
if let TextEditor::Custom(custom) = style {
return custom.focused(self);
}
let palette = self.extended_palette();
text_editor::Appearance {
background: palette.background.base.color.into(),
border: Border {
radius: 2.0.into(),
width: 1.0,
color: palette.primary.strong.color,
},
}
}
fn placeholder_color(&self, style: &Self::Style) -> Color {
if let TextEditor::Custom(custom) = style {
return custom.placeholder_color(self);
}
let palette = self.extended_palette();
palette.background.strong.color
}
fn value_color(&self, style: &Self::Style) -> Color {
if let TextEditor::Custom(custom) = style {
return custom.value_color(self);
}
let palette = self.extended_palette();
palette.background.base.text
}
fn selection_color(&self, style: &Self::Style) -> Color {
if let TextEditor::Custom(custom) = style {
return custom.selection_color(self);
}
let palette = self.extended_palette();
palette.primary.weak.color
}
fn disabled(&self, style: &Self::Style) -> text_editor::Appearance {
if let TextEditor::Custom(custom) = style {
return custom.disabled(self);
}
let palette = self.extended_palette();
text_editor::Appearance {
background: palette.background.weak.color.into(),
border: Border {
radius: 2.0.into(),
width: 1.0,
color: palette.background.strong.color,
},
}
}
fn disabled_color(&self, style: &Self::Style) -> Color {
if let TextEditor::Custom(custom) = style {
return custom.disabled_color(self);
}
self.placeholder_color(style)
}
}

2
widget/src/helpers.rs
View file

@ -224,7 +224,7 @@ pub fn text_editor<Message, Theme, Renderer>(
) -> TextEditor<'_, core::text::highlighter::PlainText, Message, Theme, Renderer>
where
Message: Clone,
Theme: text_editor::StyleSheet,
Theme: text_editor::Style,
Renderer: core::text::Renderer,
{
TextEditor::new(content)

123
widget/src/text_editor.rs
View file

@ -11,15 +11,16 @@ use crate::core::text::highlighter::{self, Highlighter};
use crate::core::text::{self, LineHeight};
use crate::core::widget::{self, Widget};
use crate::core::{
Element, Length, Padding, Pixels, Rectangle, Shell, Size, Vector,
Background, Border, Color, Element, Length, Padding, Pixels, Rectangle,
Shell, Size, Vector,
};
use crate::style::Theme;
use std::cell::RefCell;
use std::fmt;
use std::ops::DerefMut;
use std::sync::Arc;
pub use crate::style::text_editor::{Appearance, StyleSheet};
pub use text::editor::{Action, Edit, Motion};
/// A multi-line text input.
@ -32,7 +33,6 @@ pub struct TextEditor<
Renderer = crate::Renderer,
> where
Highlighter: text::Highlighter,
Theme: StyleSheet,
Renderer: text::Renderer,
{
content: &'a Content<Renderer>,
@ -42,7 +42,7 @@ pub struct TextEditor<
width: Length,
height: Length,
padding: Padding,
style: Theme::Style,
style: fn(&Theme, Status) -> Appearance,
on_edit: Option<Box<dyn Fn(Action) -> Message + 'a>>,
highlighter_settings: Highlighter::Settings,
highlighter_format: fn(
@ -54,11 +54,13 @@ pub struct TextEditor<
impl<'a, Message, Theme, Renderer>
TextEditor<'a, highlighter::PlainText, Message, Theme, Renderer>
where
Theme: StyleSheet,
Renderer: text::Renderer,
{
/// Creates new [`TextEditor`] with the given [`Content`].
pub fn new(content: &'a Content<Renderer>) -> Self {
pub fn new(content: &'a Content<Renderer>) -> Self
where
Theme: Style,
{
Self {
content,
font: None,
@ -67,7 +69,7 @@ where
width: Length::Fill,
height: Length::Shrink,
padding: Padding::new(5.0),
style: Default::default(),
style: Theme::style(),
on_edit: None,
highlighter_settings: (),
highlighter_format: |_highlight, _theme| {
@ -81,7 +83,6 @@ impl<'a, Highlighter, Message, Theme, Renderer>
TextEditor<'a, Highlighter, Message, Theme, Renderer>
where
Highlighter: text::Highlighter,
Theme: StyleSheet,
Renderer: text::Renderer,
{
/// Sets the height of the [`TextEditor`].
@ -142,8 +143,8 @@ where
}
/// Sets the style of the [`TextEditor`].
pub fn style(mut self, style: impl Into<Theme::Style>) -> Self {
self.style = style.into();
pub fn style(mut self, style: fn(&Theme, Status) -> Appearance) -> Self {
self.style = style;
self
}
}
@ -306,7 +307,6 @@ impl<'a, Highlighter, Message, Theme, Renderer> Widget<Message, Theme, Renderer>
for TextEditor<'a, Highlighter, Message, Theme, Renderer>
where
Highlighter: text::Highlighter,
Theme: StyleSheet,
Renderer: text::Renderer,
{
fn tag(&self) -> widget::tree::Tag {
@ -496,16 +496,18 @@ where
let is_disabled = self.on_edit.is_none();
let is_mouse_over = cursor.is_over(bounds);
let appearance = if is_disabled {
theme.disabled(&self.style)
let status = if is_disabled {
Status::Disabled
} else if state.is_focused {
theme.focused(&self.style)
Status::Focused
} else if is_mouse_over {
theme.hovered(&self.style)
Status::Hovered
} else {
theme.active(&self.style)
Status::Active
};
let appearance = (self.style)(theme, status);
renderer.fill_quad(
renderer::Quad {
bounds,
@ -551,7 +553,7 @@ where
},
..renderer::Quad::default()
},
theme.value_color(&self.style),
appearance.value,
);
}
}
@ -564,7 +566,7 @@ where
bounds: range,
..renderer::Quad::default()
},
theme.selection_color(&self.style),
appearance.selection,
);
}
}
@ -600,7 +602,7 @@ impl<'a, Highlighter, Message, Theme, Renderer>
where
Highlighter: text::Highlighter,
Message: 'a,
Theme: StyleSheet + 'a,
Theme: 'a,
Renderer: text::Renderer,
{
fn from(
@ -776,3 +778,86 @@ mod platform {
}
}
}
/// The possible status of a [`TextInput`].
#[derive(Debug, Clone, Copy, PartialEq, Eq)]
pub enum Status {
/// The [`TextInput`] can be interacted with.
Active,
/// The [`TextInput`] is being hovered.
Hovered,
/// The [`TextInput`] is focused.
Focused,
/// The [`TextInput`] cannot be interacted with.
Disabled,
}
/// The appearance of a text input.
#[derive(Debug, Clone, Copy)]
pub struct Appearance {
/// The [`Background`] of the text input.
pub background: Background,
/// The [`Border`] of the text input.
pub border: Border,
/// The [`Color`] of the icon of the text input.
pub icon: Color,
/// The [`Color`] of the placeholder of the text input.
pub placeholder: Color,
/// The [`Color`] of the value of the text input.
pub value: Color,
/// The [`Color`] of the selection of the text input.
pub selection: Color,
}
/// The definiton of the default style of a [`TextInput`].
pub trait Style {
/// Returns the default style of a [`TextInput`].
fn style() -> fn(&Self, Status) -> Appearance;
}
impl Style for Theme {
fn style() -> fn(&Self, Status) -> Appearance {
default
}
}
/// The default style of a [`TextInput`].
pub fn default(theme: &Theme, status: Status) -> Appearance {
let palette = theme.extended_palette();
let active = Appearance {
background: Background::Color(palette.background.base.color),
border: Border {
radius: 2.0.into(),
width: 1.0,
color: palette.background.strong.color,
},
icon: palette.background.weak.text,
placeholder: palette.background.strong.color,
value: palette.background.base.text,
selection: palette.primary.weak.color,
};
match status {
Status::Active => active,
Status::Hovered => Appearance {
border: Border {
color: palette.background.base.text,
..active.border
},
..active
},
Status::Focused => Appearance {
border: Border {
color: palette.primary.strong.color,
..active.border
},
..active
},
Status::Disabled => Appearance {
background: Background::Color(palette.background.weak.color),
value: active.placeholder,
..active
},
}
}