Simplify theming for Text widget
This commit is contained in:
parent
ce309db37b
commit
4130ae4be9
12 changed files with 116 additions and 122 deletions
|
|
@ -29,7 +29,7 @@ where
|
|||
vertical_alignment: alignment::Vertical,
|
||||
font: Option<Renderer::Font>,
|
||||
shaping: Shaping,
|
||||
style: Theme::Style,
|
||||
style: Style<Theme>,
|
||||
}
|
||||
|
||||
impl<'a, Theme, Renderer> Text<'a, Theme, Renderer>
|
||||
|
|
@ -49,7 +49,7 @@ where
|
|||
horizontal_alignment: alignment::Horizontal::Left,
|
||||
vertical_alignment: alignment::Vertical::Top,
|
||||
shaping: Shaping::Basic,
|
||||
style: Default::default(),
|
||||
style: Style::Themed(Theme::default()),
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -74,8 +74,20 @@ where
|
|||
}
|
||||
|
||||
/// Sets the style of the [`Text`].
|
||||
pub fn style(mut self, style: impl Into<Theme::Style>) -> Self {
|
||||
self.style = style.into();
|
||||
pub fn style(mut self, style: fn(&Theme) -> Appearance) -> Self {
|
||||
self.style = Style::Themed(style);
|
||||
self
|
||||
}
|
||||
|
||||
/// Sets the [`Color`] of the [`Text`].
|
||||
pub fn color(mut self, color: impl Into<Color>) -> Self {
|
||||
self.style = Style::Colored(Some(color.into()));
|
||||
self
|
||||
}
|
||||
|
||||
/// Sets the [`Color`] of the [`Text`].
|
||||
pub fn color_maybe(mut self, color: Option<impl Into<Color>>) -> Self {
|
||||
self.style = Style::Colored(color.map(Into::into));
|
||||
self
|
||||
}
|
||||
|
||||
|
|
@ -175,14 +187,12 @@ where
|
|||
) {
|
||||
let state = tree.state.downcast_ref::<State<Renderer::Paragraph>>();
|
||||
|
||||
draw(
|
||||
renderer,
|
||||
style,
|
||||
layout,
|
||||
state,
|
||||
theme.appearance(self.style.clone()),
|
||||
viewport,
|
||||
);
|
||||
let appearance = match self.style {
|
||||
Style::Themed(f) => f(theme),
|
||||
Style::Colored(color) => Appearance { color },
|
||||
};
|
||||
|
||||
draw(renderer, style, layout, state, appearance, viewport);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -298,7 +308,7 @@ where
|
|||
horizontal_alignment: self.horizontal_alignment,
|
||||
vertical_alignment: self.vertical_alignment,
|
||||
font: self.font,
|
||||
style: self.style.clone(),
|
||||
style: self.style,
|
||||
shaping: self.shaping,
|
||||
}
|
||||
}
|
||||
|
|
@ -327,11 +337,18 @@ where
|
|||
|
||||
/// The style sheet of some text.
|
||||
pub trait StyleSheet {
|
||||
/// The supported style of the [`StyleSheet`].
|
||||
type Style: Default + Clone;
|
||||
/// Returns the default styling strategy for [`Text`].
|
||||
fn default() -> fn(&Self) -> Appearance {
|
||||
|_| Appearance::default()
|
||||
}
|
||||
}
|
||||
|
||||
/// Produces the [`Appearance`] of some text.
|
||||
fn appearance(&self, style: Self::Style) -> Appearance;
|
||||
impl StyleSheet for Color {
|
||||
fn default() -> fn(&Self) -> Appearance {
|
||||
|color| Appearance {
|
||||
color: Some(*color),
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/// The apperance of some text.
|
||||
|
|
@ -342,3 +359,17 @@ pub struct Appearance {
|
|||
/// The default, `None`, means using the inherited color.
|
||||
pub color: Option<Color>,
|
||||
}
|
||||
|
||||
#[derive(Debug)]
|
||||
enum Style<Theme> {
|
||||
Themed(fn(&Theme) -> Appearance),
|
||||
Colored(Option<Color>),
|
||||
}
|
||||
|
||||
impl<Theme> Clone for Style<Theme> {
|
||||
fn clone(&self) -> Self {
|
||||
*self
|
||||
}
|
||||
}
|
||||
|
||||
impl<Theme> Copy for Style<Theme> {}
|
||||
|
|
|
|||
|
|
@ -1,25 +1,26 @@
|
|||
use iced_wgpu::Renderer;
|
||||
use iced_widget::{slider, text_input, Column, Row, Text};
|
||||
use iced_winit::core::{Alignment, Color, Element, Length};
|
||||
use iced_widget::{column, container, row, slider, text, text_input};
|
||||
use iced_winit::core::alignment;
|
||||
use iced_winit::core::{Color, Element, Length};
|
||||
use iced_winit::runtime::{Command, Program};
|
||||
use iced_winit::style::Theme;
|
||||
|
||||
pub struct Controls {
|
||||
background_color: Color,
|
||||
text: String,
|
||||
input: String,
|
||||
}
|
||||
|
||||
#[derive(Debug, Clone)]
|
||||
pub enum Message {
|
||||
BackgroundColorChanged(Color),
|
||||
TextChanged(String),
|
||||
InputChanged(String),
|
||||
}
|
||||
|
||||
impl Controls {
|
||||
pub fn new() -> Controls {
|
||||
Controls {
|
||||
background_color: Color::BLACK,
|
||||
text: String::default(),
|
||||
input: String::default(),
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -38,8 +39,8 @@ impl Program for Controls {
|
|||
Message::BackgroundColorChanged(color) => {
|
||||
self.background_color = color;
|
||||
}
|
||||
Message::TextChanged(text) => {
|
||||
self.text = text;
|
||||
Message::InputChanged(input) => {
|
||||
self.input = input;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -48,60 +49,48 @@ impl Program for Controls {
|
|||
|
||||
fn view(&self) -> Element<Message, Theme, Renderer> {
|
||||
let background_color = self.background_color;
|
||||
let text = &self.text;
|
||||
|
||||
let sliders = Row::new()
|
||||
.width(500)
|
||||
.spacing(20)
|
||||
.push(
|
||||
slider(0.0..=1.0, background_color.r, move |r| {
|
||||
Message::BackgroundColorChanged(Color {
|
||||
r,
|
||||
..background_color
|
||||
})
|
||||
let sliders = row![
|
||||
slider(0.0..=1.0, background_color.r, move |r| {
|
||||
Message::BackgroundColorChanged(Color {
|
||||
r,
|
||||
..background_color
|
||||
})
|
||||
.step(0.01),
|
||||
)
|
||||
.push(
|
||||
slider(0.0..=1.0, background_color.g, move |g| {
|
||||
Message::BackgroundColorChanged(Color {
|
||||
g,
|
||||
..background_color
|
||||
})
|
||||
})
|
||||
.step(0.01),
|
||||
slider(0.0..=1.0, background_color.g, move |g| {
|
||||
Message::BackgroundColorChanged(Color {
|
||||
g,
|
||||
..background_color
|
||||
})
|
||||
.step(0.01),
|
||||
)
|
||||
.push(
|
||||
slider(0.0..=1.0, background_color.b, move |b| {
|
||||
Message::BackgroundColorChanged(Color {
|
||||
b,
|
||||
..background_color
|
||||
})
|
||||
})
|
||||
.step(0.01),
|
||||
slider(0.0..=1.0, background_color.b, move |b| {
|
||||
Message::BackgroundColorChanged(Color {
|
||||
b,
|
||||
..background_color
|
||||
})
|
||||
.step(0.01),
|
||||
);
|
||||
})
|
||||
.step(0.01),
|
||||
]
|
||||
.width(500)
|
||||
.spacing(20);
|
||||
|
||||
Row::new()
|
||||
.height(Length::Fill)
|
||||
.align_items(Alignment::End)
|
||||
.push(
|
||||
Column::new().align_items(Alignment::End).push(
|
||||
Column::new()
|
||||
.padding(10)
|
||||
.spacing(10)
|
||||
.push(Text::new("Background color").style(Color::WHITE))
|
||||
.push(sliders)
|
||||
.push(
|
||||
Text::new(format!("{background_color:?}"))
|
||||
.size(14)
|
||||
.style(Color::WHITE),
|
||||
)
|
||||
.push(
|
||||
text_input("Placeholder", text)
|
||||
.on_input(Message::TextChanged),
|
||||
),
|
||||
),
|
||||
)
|
||||
.into()
|
||||
container(
|
||||
column![
|
||||
text("Background color").color(Color::WHITE),
|
||||
text(format!("{background_color:?}"))
|
||||
.size(14)
|
||||
.color(Color::WHITE),
|
||||
text_input("Placeholder", &self.input)
|
||||
.on_input(Message::InputChanged),
|
||||
sliders,
|
||||
]
|
||||
.spacing(10),
|
||||
)
|
||||
.padding(10)
|
||||
.height(Length::Fill)
|
||||
.align_y(alignment::Vertical::Bottom)
|
||||
.into()
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -184,8 +184,7 @@ impl Sandbox for App {
|
|||
.style(theme::Button::Destructive);
|
||||
|
||||
row![
|
||||
text(&item.name)
|
||||
.style(theme::Text::Color(item.color.into())),
|
||||
text(&item.name).color(item.color),
|
||||
horizontal_space(),
|
||||
pick_list(Color::ALL, Some(item.color), move |color| {
|
||||
Message::ItemColorChanged(item.clone(), color)
|
||||
|
|
|
|||
|
|
@ -162,7 +162,7 @@ impl Application for Example {
|
|||
let title = row![
|
||||
pin_button,
|
||||
"Pane",
|
||||
text(pane.id.to_string()).style(if is_focused {
|
||||
text(pane.id.to_string()).color(if is_focused {
|
||||
PANE_ID_COLOR_FOCUSED
|
||||
} else {
|
||||
PANE_ID_COLOR_UNFOCUSED
|
||||
|
|
|
|||
|
|
@ -1,8 +1,6 @@
|
|||
use iced::futures;
|
||||
use iced::widget::{self, column, container, image, row, text};
|
||||
use iced::{
|
||||
Alignment, Application, Color, Command, Element, Length, Settings, Theme,
|
||||
};
|
||||
use iced::{Alignment, Application, Command, Element, Length, Settings, Theme};
|
||||
|
||||
pub fn main() -> iced::Result {
|
||||
Pokedex::run(Settings::default())
|
||||
|
|
@ -116,7 +114,7 @@ impl Pokemon {
|
|||
text(&self.name).size(30).width(Length::Fill),
|
||||
text(format!("#{}", self.number))
|
||||
.size(20)
|
||||
.style(Color::from([0.5, 0.5, 0.5])),
|
||||
.color([0.5, 0.5, 0.5]),
|
||||
]
|
||||
.align_items(Alignment::Center)
|
||||
.spacing(20),
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ use iced::widget::{
|
|||
};
|
||||
use iced::window;
|
||||
use iced::{Application, Element};
|
||||
use iced::{Color, Command, Length, Settings, Size, Subscription};
|
||||
use iced::{Command, Length, Settings, Size, Subscription};
|
||||
|
||||
use once_cell::sync::Lazy;
|
||||
use serde::{Deserialize, Serialize};
|
||||
|
|
@ -209,7 +209,7 @@ impl Application for Todos {
|
|||
let title = text("todos")
|
||||
.width(Length::Fill)
|
||||
.size(100)
|
||||
.style(Color::from([0.5, 0.5, 0.5]))
|
||||
.color([0.5, 0.5, 0.5])
|
||||
.horizontal_alignment(alignment::Horizontal::Center);
|
||||
|
||||
let input = text_input("What needs to be done?", input_value)
|
||||
|
|
@ -467,7 +467,7 @@ fn empty_message(message: &str) -> Element<'_, Message> {
|
|||
.width(Length::Fill)
|
||||
.size(25)
|
||||
.horizontal_alignment(alignment::Horizontal::Center)
|
||||
.style(Color::from([0.7, 0.7, 0.7])),
|
||||
.color([0.7, 0.7, 0.7]),
|
||||
)
|
||||
.height(200)
|
||||
.center_y()
|
||||
|
|
|
|||
|
|
@ -474,7 +474,7 @@ impl<'a> Step {
|
|||
|
||||
let color_section = column![
|
||||
"And its color:",
|
||||
text(format!("{color:?}")).style(color),
|
||||
text(format!("{color:?}")).color(color),
|
||||
color_sliders,
|
||||
]
|
||||
.padding(20)
|
||||
|
|
|
|||
|
|
@ -82,7 +82,10 @@ impl Application for Example {
|
|||
row![
|
||||
text(label),
|
||||
horizontal_space(),
|
||||
text(value).font(Font::MONOSPACE).size(14).style(color),
|
||||
text(value)
|
||||
.font(Font::MONOSPACE)
|
||||
.size(14)
|
||||
.color_maybe(color),
|
||||
]
|
||||
.height(40)
|
||||
.align_items(Alignment::Center)
|
||||
|
|
@ -102,13 +105,12 @@ impl Application for Example {
|
|||
})
|
||||
.unwrap_or_default()
|
||||
{
|
||||
Color {
|
||||
Some(Color {
|
||||
g: 1.0,
|
||||
..Color::BLACK
|
||||
}
|
||||
.into()
|
||||
})
|
||||
} else {
|
||||
theme::Text::Default
|
||||
None
|
||||
},
|
||||
)
|
||||
};
|
||||
|
|
@ -120,7 +122,7 @@ impl Application for Example {
|
|||
Some(Point { x, y }) => format!("({x}, {y})"),
|
||||
None => "unknown".to_string(),
|
||||
},
|
||||
theme::Text::Default,
|
||||
None,
|
||||
),
|
||||
view_bounds("Outer container", self.outer_bounds),
|
||||
view_bounds("Inner container", self.inner_bounds),
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ use iced::widget::{
|
|||
button, column, container, row, scrollable, text, text_input,
|
||||
};
|
||||
use iced::{
|
||||
Application, Color, Command, Element, Length, Settings, Subscription, Theme,
|
||||
color, Application, Command, Element, Length, Settings, Subscription, Theme,
|
||||
};
|
||||
use once_cell::sync::Lazy;
|
||||
|
||||
|
|
@ -99,7 +99,7 @@ impl Application for WebSocket {
|
|||
let message_log: Element<_> = if self.messages.is_empty() {
|
||||
container(
|
||||
text("Your messages will appear here...")
|
||||
.style(Color::from_rgb8(0x88, 0x88, 0x88)),
|
||||
.color(color!(0x888888)),
|
||||
)
|
||||
.width(Length::Fill)
|
||||
.height(Length::Fill)
|
||||
|
|
|
|||
|
|
@ -1203,32 +1203,7 @@ impl scrollable::StyleSheet for Theme {
|
|||
}
|
||||
}
|
||||
|
||||
/// The style of text.
|
||||
#[derive(Clone, Copy, Default)]
|
||||
pub enum Text {
|
||||
/// The default style.
|
||||
#[default]
|
||||
Default,
|
||||
/// Colored text.
|
||||
Color(Color),
|
||||
}
|
||||
|
||||
impl From<Color> for Text {
|
||||
fn from(color: Color) -> Self {
|
||||
Text::Color(color)
|
||||
}
|
||||
}
|
||||
|
||||
impl text::StyleSheet for Theme {
|
||||
type Style = Text;
|
||||
|
||||
fn appearance(&self, style: Self::Style) -> text::Appearance {
|
||||
match style {
|
||||
Text::Default => text::Appearance::default(),
|
||||
Text::Color(c) => text::Appearance { color: Some(c) },
|
||||
}
|
||||
}
|
||||
}
|
||||
impl text::StyleSheet for Theme {}
|
||||
|
||||
/// The style of a text input.
|
||||
#[derive(Default)]
|
||||
|
|
|
|||
|
|
@ -39,7 +39,7 @@ pub struct Checkbox<
|
|||
Theme = crate::Theme,
|
||||
Renderer = crate::Renderer,
|
||||
> where
|
||||
Theme: StyleSheet + crate::text::StyleSheet,
|
||||
Theme: StyleSheet,
|
||||
Renderer: text::Renderer,
|
||||
{
|
||||
is_checked: bool,
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ pub struct Tooltip<
|
|||
Theme = crate::Theme,
|
||||
Renderer = crate::Renderer,
|
||||
> where
|
||||
Theme: container::StyleSheet + crate::text::StyleSheet,
|
||||
Theme: container::StyleSheet,
|
||||
Renderer: text::Renderer,
|
||||
{
|
||||
content: Element<'a, Message, Theme, Renderer>,
|
||||
|
|
@ -34,7 +34,7 @@ pub struct Tooltip<
|
|||
|
||||
impl<'a, Message, Theme, Renderer> Tooltip<'a, Message, Theme, Renderer>
|
||||
where
|
||||
Theme: container::StyleSheet + crate::text::StyleSheet,
|
||||
Theme: container::StyleSheet,
|
||||
Renderer: text::Renderer,
|
||||
{
|
||||
/// The default padding of a [`Tooltip`] drawn by this renderer.
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue