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

Simplify theming for Container widget

Browse source
This commit is contained in:
Héctor Ramón Jiménez 2024-03-05 03:48:08 +01:00
parent 1f0a0c235a
commit 29326215cc
No known key found for this signature in database
GPG key ID: 7CC46565708259A7
20 changed files with 275 additions and 186 deletions
Download patch file Download diff file Expand all files Collapse all files

4
widget/src/combo_box.rs
View file

@ -299,7 +299,7 @@ impl<'a, T, Message, Theme, Renderer> Widget<Message, Theme, Renderer>
where
T: Display + Clone + 'static,
Message: Clone,
Theme: container::StyleSheet
Theme: container::Style
+ text_input::StyleSheet
+ scrollable::StyleSheet
+ menu::StyleSheet,
@ -719,7 +719,7 @@ impl<'a, T, Message, Theme, Renderer>
where
T: Display + Clone + 'static,
Message: Clone + 'a,
Theme: container::StyleSheet
Theme: container::Style
+ text_input::StyleSheet
+ scrollable::StyleSheet
+ menu::StyleSheet

118
widget/src/container.rs
View file

@ -8,12 +8,11 @@ use crate::core::renderer;
use crate::core::widget::tree::{self, Tree};
use crate::core::widget::{self, Operation};
use crate::core::{
Background, Clipboard, Color, Element, Layout, Length, Padding, Pixels,
Point, Rectangle, Shell, Size, Vector, Widget,
Background, Border, Clipboard, Color, Element, Layout, Length, Padding,
Pixels, Point, Rectangle, Shadow, Shell, Size, Vector, Widget,
};
use crate::runtime::Command;
pub use iced_style::container::{Appearance, StyleSheet};
use crate::style::Theme;
/// An element decorating some content.
///
@ -25,7 +24,6 @@ pub struct Container<
Theme = crate::Theme,
Renderer = crate::Renderer,
> where
Theme: StyleSheet,
Renderer: crate::core::Renderer,
{
id: Option<Id>,
@ -36,19 +34,19 @@ pub struct Container<
max_height: f32,
horizontal_alignment: alignment::Horizontal,
vertical_alignment: alignment::Vertical,
style: Theme::Style,
style: fn(&Theme, Status) -> Appearance,
clip: bool,
content: Element<'a, Message, Theme, Renderer>,
}
impl<'a, Message, Theme, Renderer> Container<'a, Message, Theme, Renderer>
where
Theme: StyleSheet,
Renderer: crate::core::Renderer,
{
/// Creates an empty [`Container`].
pub fn new<T>(content: T) -> Self
where
Theme: Style,
T: Into<Element<'a, Message, Theme, Renderer>>,
{
let content = content.into();
@ -63,7 +61,7 @@ where
max_height: f32::INFINITY,
horizontal_alignment: alignment::Horizontal::Left,
vertical_alignment: alignment::Vertical::Top,
style: Default::default(),
style: Theme::default(),
clip: false,
content,
}
@ -130,8 +128,8 @@ where
}
/// Sets the style of the [`Container`].
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
}
@ -146,7 +144,6 @@ where
impl<'a, Message, Theme, Renderer> Widget<Message, Theme, Renderer>
for Container<'a, Message, Theme, Renderer>
where
Theme: StyleSheet,
Renderer: crate::core::Renderer,
{
fn tag(&self) -> tree::Tag {
@ -262,10 +259,18 @@ where
cursor: mouse::Cursor,
viewport: &Rectangle,
) {
let style = theme.appearance(&self.style);
let bounds = layout.bounds();
if let Some(clipped_viewport) = layout.bounds().intersection(viewport) {
draw_background(renderer, &style, layout.bounds());
let status = if cursor.is_over(bounds) {
Status::Hovered
} else {
Status::Idle
};
let style = (self.style)(theme, status);
if let Some(clipped_viewport) = bounds.intersection(viewport) {
draw_background(renderer, &style, bounds);
self.content.as_widget().draw(
tree,
@ -307,7 +312,7 @@ impl<'a, Message, Theme, Renderer> From<Container<'a, Message, Theme, Renderer>>
for Element<'a, Message, Theme, Renderer>
where
Message: 'a,
Theme: 'a + StyleSheet,
Theme: 'a,
Renderer: 'a + crate::core::Renderer,
{
fn from(
@ -482,3 +487,86 @@ pub fn visible_bounds(id: Id) -> Command<Option<Rectangle>> {
bounds: None,
})
}
/// The appearance of a container.
#[derive(Debug, Clone, Copy, Default)]
pub struct Appearance {
/// The text [`Color`] of the container.
pub text_color: Option<Color>,
/// The [`Background`] of the container.
pub background: Option<Background>,
/// The [`Border`] of the container.
pub border: Border,
/// The [`Shadow`] of the container.
pub shadow: Shadow,
}
impl Appearance {
/// Derives a new [`Appearance`] with a border of the given [`Color`] and
/// `width`.
pub fn with_border(
self,
color: impl Into<Color>,
width: impl Into<Pixels>,
) -> Self {
Self {
border: Border {
color: color.into(),
width: width.into().0,
..Border::default()
},
..self
}
}
/// Derives a new [`Appearance`] with the given [`Background`].
pub fn with_background(self, background: impl Into<Background>) -> Self {
Self {
background: Some(background.into()),
..self
}
}
}
/// The possible status of a [`Container`].
#[derive(Debug, Clone, Copy, PartialEq, Eq)]
pub enum Status {
/// The [`Container`] is idle.
Idle,
/// The [`Container`] is being hovered.
Hovered,
}
/// The style of a [`Container`] for a theme.
pub trait Style {
/// The default style of a [`Container`].
fn default() -> fn(&Self, Status) -> Appearance;
}
impl Style for Theme {
fn default() -> fn(&Self, Status) -> Appearance {
transparent
}
}
impl Style for Appearance {
fn default() -> fn(&Self, Status) -> Appearance {
|appearance, _status| *appearance
}
}
/// A transparent [`Container`].
pub fn transparent(_theme: &Theme, _status: Status) -> Appearance {
<Appearance as Default>::default()
}
/// A rounded [`Container`] with a background.
pub fn box_(theme: &Theme, _status: Status) -> Appearance {
let palette = theme.extended_palette();
Appearance {
background: Some(palette.background.weak.color.into()),
border: Border::with_radius(2),
..<Appearance as Default>::default()
}
}

6
widget/src/helpers.rs
View file

@ -58,7 +58,7 @@ pub fn container<'a, Message, Theme, Renderer>(
content: impl Into<Element<'a, Message, Theme, Renderer>>,
) -> Container<'a, Message, Theme, Renderer>
where
Theme: container::StyleSheet,
Theme: container::Style,
Renderer: core::Renderer,
{
Container::new(content)
@ -134,7 +134,7 @@ pub fn tooltip<'a, Message, Theme, Renderer>(
position: tooltip::Position,
) -> crate::Tooltip<'a, Message, Theme, Renderer>
where
Theme: container::StyleSheet + text::StyleSheet,
Theme: container::Style + text::StyleSheet,
Renderer: core::text::Renderer,
{
Tooltip::new(content, tooltip, position)
@ -278,7 +278,7 @@ where
Theme: pick_list::StyleSheet
+ scrollable::StyleSheet
+ overlay::menu::StyleSheet
+ container::StyleSheet,
+ container::Style,
<Theme as overlay::menu::StyleSheet>::Style:
From<<Theme as pick_list::StyleSheet>::Style>,
{

8
widget/src/overlay/menu.rs
View file

@ -47,7 +47,7 @@ impl<'a, T, Message, Theme, Renderer> Menu<'a, T, Message, Theme, Renderer>
where
T: ToString + Clone,
Message: 'a,
Theme: StyleSheet + container::StyleSheet + scrollable::StyleSheet + 'a,
Theme: StyleSheet + container::Style + scrollable::StyleSheet + 'a,
Renderer: text::Renderer + 'a,
{
/// Creates a new [`Menu`] with the given [`State`], a list of options, and
@ -165,7 +165,7 @@ impl Default for State {
struct Overlay<'a, Message, Theme, Renderer>
where
Theme: StyleSheet + container::StyleSheet,
Theme: StyleSheet + container::Style,
Renderer: crate::core::Renderer,
{
position: Point,
@ -179,7 +179,7 @@ where
impl<'a, Message, Theme, Renderer> Overlay<'a, Message, Theme, Renderer>
where
Message: 'a,
Theme: StyleSheet + container::StyleSheet + scrollable::StyleSheet + 'a,
Theme: StyleSheet + container::Style + scrollable::StyleSheet + 'a,
Renderer: text::Renderer + 'a,
{
pub fn new<T>(
@ -235,7 +235,7 @@ impl<'a, Message, Theme, Renderer>
crate::core::Overlay<Message, Theme, Renderer>
for Overlay<'a, Message, Theme, Renderer>
where
Theme: StyleSheet + container::StyleSheet,
Theme: StyleSheet + container::Style,
Renderer: text::Renderer,
{
fn layout(&mut self, renderer: &Renderer, bounds: Size) -> layout::Node {

9
widget/src/pane_grid.rs
View file

@ -32,7 +32,6 @@ pub use title_bar::TitleBar;
pub use crate::style::pane_grid::{Appearance, Line, StyleSheet};
use crate::container;
use crate::core::event::{self, Event};
use crate::core::layout;
use crate::core::mouse;
@ -105,7 +104,7 @@ pub struct PaneGrid<
Theme = crate::Theme,
Renderer = crate::Renderer,
> where
Theme: StyleSheet + container::StyleSheet,
Theme: StyleSheet,
Renderer: crate::core::Renderer,
{
contents: Contents<'a, Content<'a, Message, Theme, Renderer>>,
@ -120,7 +119,7 @@ pub struct PaneGrid<
impl<'a, Message, Theme, Renderer> PaneGrid<'a, Message, Theme, Renderer>
where
Theme: StyleSheet + container::StyleSheet,
Theme: StyleSheet,
Renderer: crate::core::Renderer,
{
/// Creates a [`PaneGrid`] with the given [`State`] and view function.
@ -240,7 +239,7 @@ impl<'a, Message, Theme, Renderer> Widget<Message, Theme, Renderer>
for PaneGrid<'a, Message, Theme, Renderer>
where
Renderer: crate::core::Renderer,
Theme: StyleSheet + container::StyleSheet,
Theme: StyleSheet,
{
fn tag(&self) -> tree::Tag {
tree::Tag::of::<state::Action>()
@ -470,7 +469,7 @@ impl<'a, Message, Theme, Renderer> From<PaneGrid<'a, Message, Theme, Renderer>>
for Element<'a, Message, Theme, Renderer>
where
Message: 'a,
Theme: StyleSheet + container::StyleSheet + 'a,
Theme: StyleSheet + 'a,
Renderer: crate::core::Renderer + 'a,
{
fn from(

32
widget/src/pane_grid/content.rs
View file

@ -20,25 +20,26 @@ pub struct Content<
Theme = crate::Theme,
Renderer = crate::Renderer,
> where
Theme: container::StyleSheet,
Renderer: crate::core::Renderer,
{
title_bar: Option<TitleBar<'a, Message, Theme, Renderer>>,
body: Element<'a, Message, Theme, Renderer>,
style: Theme::Style,
style: fn(&Theme, container::Status) -> container::Appearance,
}
impl<'a, Message, Theme, Renderer> Content<'a, Message, Theme, Renderer>
where
Theme: container::StyleSheet,
Renderer: crate::core::Renderer,
{
/// Creates a new [`Content`] with the provided body.
pub fn new(body: impl Into<Element<'a, Message, Theme, Renderer>>) -> Self {
pub fn new(body: impl Into<Element<'a, Message, Theme, Renderer>>) -> Self
where
Theme: container::Style,
{
Self {
title_bar: None,
body: body.into(),
style: Default::default(),
style: Theme::default(),
}
}
@ -52,15 +53,17 @@ where
}
/// Sets the style of the [`Content`].
pub fn style(mut self, style: impl Into<Theme::Style>) -> Self {
self.style = style.into();
pub fn style(
mut self,
style: fn(&Theme, container::Status) -> container::Appearance,
) -> Self {
self.style = style;
self
}
}
impl<'a, Message, Theme, Renderer> Content<'a, Message, Theme, Renderer>
where
Theme: container::StyleSheet,
Renderer: crate::core::Renderer,
{
pub(super) fn state(&self) -> Tree {
@ -104,7 +107,15 @@ where
let bounds = layout.bounds();
{
let style = theme.appearance(&self.style);
let style = {
let status = if cursor.is_over(bounds) {
container::Status::Hovered
} else {
container::Status::Idle
};
(self.style)(theme, status)
};
container::draw_background(renderer, &style, bounds);
}
@ -370,7 +381,6 @@ where
impl<'a, Message, Theme, Renderer> Draggable
for &Content<'a, Message, Theme, Renderer>
where
Theme: container::StyleSheet,
Renderer: crate::core::Renderer,
{
fn can_be_dragged_at(
@ -393,7 +403,7 @@ impl<'a, T, Message, Theme, Renderer> From<T>
for Content<'a, Message, Theme, Renderer>
where
T: Into<Element<'a, Message, Theme, Renderer>>,
Theme: container::StyleSheet,
Theme: container::Style,
Renderer: crate::core::Renderer,
{
fn from(element: T) -> Self {

27
widget/src/pane_grid/title_bar.rs
View file

@ -19,24 +19,23 @@ pub struct TitleBar<
Theme = crate::Theme,
Renderer = crate::Renderer,
> where
Theme: container::StyleSheet,
Renderer: crate::core::Renderer,
{
content: Element<'a, Message, Theme, Renderer>,
controls: Option<Element<'a, Message, Theme, Renderer>>,
padding: Padding,
always_show_controls: bool,
style: Theme::Style,
style: fn(&Theme, container::Status) -> container::Appearance,
}
impl<'a, Message, Theme, Renderer> TitleBar<'a, Message, Theme, Renderer>
where
Theme: container::StyleSheet,
Renderer: crate::core::Renderer,
{
/// Creates a new [`TitleBar`] with the given content.
pub fn new<E>(content: E) -> Self
where
Theme: container::Style,
E: Into<Element<'a, Message, Theme, Renderer>>,
{
Self {
@ -44,7 +43,7 @@ where
controls: None,
padding: Padding::ZERO,
always_show_controls: false,
style: Default::default(),
style: Theme::default(),
}
}
@ -64,8 +63,11 @@ where
}
/// Sets the style of the [`TitleBar`].
pub fn style(mut self, style: impl Into<Theme::Style>) -> Self {
self.style = style.into();
pub fn style(
mut self,
style: fn(&Theme, container::Status) -> container::Appearance,
) -> Self {
self.style = style;
self
}
@ -85,7 +87,6 @@ where
impl<'a, Message, Theme, Renderer> TitleBar<'a, Message, Theme, Renderer>
where
Theme: container::StyleSheet,
Renderer: crate::core::Renderer,
{
pub(super) fn state(&self) -> Tree {
@ -128,7 +129,17 @@ where
show_controls: bool,
) {
let bounds = layout.bounds();
let style = theme.appearance(&self.style);
let style = {
let status = if cursor.is_over(bounds) {
container::Status::Hovered
} else {
container::Status::Idle
};
(self.style)(theme, status)
};
let inherited_style = renderer::Style {
text_color: style.text_color.unwrap_or(inherited_style.text_color),
};

8
widget/src/pick_list.rs
View file

@ -64,7 +64,7 @@ where
Theme: StyleSheet
+ scrollable::StyleSheet
+ menu::StyleSheet
+ container::StyleSheet,
+ container::Style,
<Theme as menu::StyleSheet>::Style: From<<Theme as StyleSheet>::Style>,
Renderer: text::Renderer,
{
@ -179,7 +179,7 @@ where
Theme: StyleSheet
+ scrollable::StyleSheet
+ menu::StyleSheet
+ container::StyleSheet,
+ container::Style,
<Theme as menu::StyleSheet>::Style: From<<Theme as StyleSheet>::Style>,
Renderer: text::Renderer + 'a,
{
@ -320,7 +320,7 @@ where
Theme: StyleSheet
+ scrollable::StyleSheet
+ menu::StyleSheet
+ container::StyleSheet
+ container::Style
+ 'a,
<Theme as menu::StyleSheet>::Style: From<<Theme as StyleSheet>::Style>,
Renderer: text::Renderer + 'a,
@ -630,7 +630,7 @@ where
Theme: StyleSheet
+ scrollable::StyleSheet
+ menu::StyleSheet
+ container::StyleSheet
+ container::Style
+ 'a,
<Theme as menu::StyleSheet>::Style: From<<Theme as StyleSheet>::Style>,
Renderer: text::Renderer + 'a,

12
widget/src/scrollable.rs
View file

@ -1,5 +1,5 @@
//! Navigate an endless amount of content with a scrollbar.
use crate::container;
// use crate::container;
use crate::core::event::{self, Event};
use crate::core::keyboard;
use crate::core::layout;
@ -917,11 +917,11 @@ pub fn draw<Theme, Renderer>(
}
};
container::draw_background(
renderer,
&appearance.container,
layout.bounds(),
);
// container::draw_background(
// renderer,
// &appearance.container,
// layout.bounds(),
// );
// Draw inner content
if scrollbars.active() {

26
widget/src/tooltip.rs
View file

@ -20,7 +20,6 @@ pub struct Tooltip<
Theme = crate::Theme,
Renderer = crate::Renderer,
> where
Theme: container::StyleSheet,
Renderer: text::Renderer,
{
content: Element<'a, Message, Theme, Renderer>,
@ -29,12 +28,11 @@ pub struct Tooltip<
gap: f32,
padding: f32,
snap_within_viewport: bool,
style: <Theme as container::StyleSheet>::Style,
style: fn(&Theme, container::Status) -> container::Appearance,
}
impl<'a, Message, Theme, Renderer> Tooltip<'a, Message, Theme, Renderer>
where
Theme: container::StyleSheet,
Renderer: text::Renderer,
{
/// The default padding of a [`Tooltip`] drawn by this renderer.
@ -47,7 +45,10 @@ where
content: impl Into<Element<'a, Message, Theme, Renderer>>,
tooltip: impl Into<Element<'a, Message, Theme, Renderer>>,
position: Position,
) -> Self {
) -> Self
where
Theme: container::Style,
{
Tooltip {
content: content.into(),
tooltip: tooltip.into(),
@ -55,7 +56,7 @@ where
gap: 0.0,
padding: Self::DEFAULT_PADDING,
snap_within_viewport: true,
style: Default::default(),
style: Theme::default(),
}
}
@ -80,9 +81,9 @@ where
/// Sets the style of the [`Tooltip`].
pub fn style(
mut self,
style: impl Into<<Theme as container::StyleSheet>::Style>,
style: fn(&Theme, container::Status) -> container::Appearance,
) -> Self {
self.style = style.into();
self.style = style;
self
}
}
@ -90,7 +91,6 @@ where
impl<'a, Message, Theme, Renderer> Widget<Message, Theme, Renderer>
for Tooltip<'a, Message, Theme, Renderer>
where
Theme: container::StyleSheet + crate::text::StyleSheet,
Renderer: text::Renderer,
{
fn children(&self) -> Vec<widget::Tree> {
@ -239,7 +239,7 @@ where
positioning: self.position,
gap: self.gap,
padding: self.padding,
style: &self.style,
style: self.style,
})))
} else {
None
@ -262,7 +262,7 @@ impl<'a, Message, Theme, Renderer> From<Tooltip<'a, Message, Theme, Renderer>>
for Element<'a, Message, Theme, Renderer>
where
Message: 'a,
Theme: container::StyleSheet + crate::text::StyleSheet + 'a,
Theme: 'a,
Renderer: text::Renderer + 'a,
{
fn from(
@ -298,7 +298,6 @@ enum State {
struct Overlay<'a, 'b, Message, Theme, Renderer>
where
Theme: container::StyleSheet + widget::text::StyleSheet,
Renderer: text::Renderer,
{
position: Point,
@ -310,14 +309,13 @@ where
positioning: Position,
gap: f32,
padding: f32,
style: &'b <Theme as container::StyleSheet>::Style,
style: fn(&Theme, container::Status) -> container::Appearance,
}
impl<'a, 'b, Message, Theme, Renderer>
overlay::Overlay<Message, Theme, Renderer>
for Overlay<'a, 'b, Message, Theme, Renderer>
where
Theme: container::StyleSheet + widget::text::StyleSheet,
Renderer: text::Renderer,
{
fn layout(&mut self, renderer: &Renderer, bounds: Size) -> layout::Node {
@ -426,7 +424,7 @@ where
layout: Layout<'_>,
cursor_position: mouse::Cursor,
) {
let style = container::StyleSheet::appearance(theme, self.style);
let style = (self.style)(theme, container::Status::Idle);
container::draw_background(renderer, &style, layout.bounds());