Simplify theming for Svg widget
This commit is contained in:
parent
40af65c3aa
commit
69bc1df252
6 changed files with 58 additions and 102 deletions
|
|
@ -1,4 +1,3 @@
|
||||||
use iced::theme;
|
|
||||||
use iced::widget::{checkbox, column, container, svg};
|
use iced::widget::{checkbox, column, container, svg};
|
||||||
use iced::{color, Element, Length, Sandbox, Settings};
|
use iced::{color, Element, Length, Sandbox, Settings};
|
||||||
|
|
||||||
|
|
@ -43,11 +42,11 @@ impl Sandbox for Tiger {
|
||||||
|
|
||||||
let svg = svg(handle).width(Length::Fill).height(Length::Fill).style(
|
let svg = svg(handle).width(Length::Fill).height(Length::Fill).style(
|
||||||
if self.apply_color_filter {
|
if self.apply_color_filter {
|
||||||
theme::Svg::custom_fn(|_theme| svg::Appearance {
|
|_theme, _status| svg::Appearance {
|
||||||
color: Some(color!(0x0000ff)),
|
color: Some(color!(0x0000ff)),
|
||||||
})
|
}
|
||||||
} else {
|
} else {
|
||||||
theme::Svg::Default
|
|_theme, _status| svg::Appearance::default()
|
||||||
},
|
},
|
||||||
);
|
);
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -20,7 +20,6 @@ pub mod application;
|
||||||
pub mod menu;
|
pub mod menu;
|
||||||
pub mod pane_grid;
|
pub mod pane_grid;
|
||||||
pub mod pick_list;
|
pub mod pick_list;
|
||||||
pub mod svg;
|
|
||||||
pub mod text_editor;
|
pub mod text_editor;
|
||||||
pub mod theme;
|
pub mod theme;
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,28 +0,0 @@
|
||||||
//! Change the appearance of a svg.
|
|
||||||
|
|
||||||
use iced_core::Color;
|
|
||||||
|
|
||||||
/// The appearance of an SVG.
|
|
||||||
#[derive(Debug, Default, Clone, Copy)]
|
|
||||||
pub struct Appearance {
|
|
||||||
/// The [`Color`] filter of an SVG.
|
|
||||||
///
|
|
||||||
/// Useful for coloring a symbolic icon.
|
|
||||||
///
|
|
||||||
/// `None` keeps the original color.
|
|
||||||
pub color: Option<Color>,
|
|
||||||
}
|
|
||||||
|
|
||||||
/// The stylesheet of a svg.
|
|
||||||
pub trait StyleSheet {
|
|
||||||
/// The supported style of the [`StyleSheet`].
|
|
||||||
type Style: Default;
|
|
||||||
|
|
||||||
/// Produces the [`Appearance`] of the svg.
|
|
||||||
fn appearance(&self, style: &Self::Style) -> Appearance;
|
|
||||||
|
|
||||||
/// Produces the hovered [`Appearance`] of a svg content.
|
|
||||||
fn hovered(&self, style: &Self::Style) -> Appearance {
|
|
||||||
self.appearance(style)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -8,7 +8,6 @@ use crate::core::widget::text;
|
||||||
use crate::menu;
|
use crate::menu;
|
||||||
use crate::pane_grid;
|
use crate::pane_grid;
|
||||||
use crate::pick_list;
|
use crate::pick_list;
|
||||||
use crate::svg;
|
|
||||||
use crate::text_editor;
|
use crate::text_editor;
|
||||||
|
|
||||||
use crate::core::{Background, Border, Color};
|
use crate::core::{Background, Border, Color};
|
||||||
|
|
@ -440,52 +439,6 @@ impl pane_grid::StyleSheet for Theme {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
|
||||||
* Svg
|
|
||||||
*/
|
|
||||||
#[derive(Default)]
|
|
||||||
pub enum Svg {
|
|
||||||
/// No filtering to the rendered SVG.
|
|
||||||
#[default]
|
|
||||||
Default,
|
|
||||||
/// A custom style.
|
|
||||||
Custom(Box<dyn svg::StyleSheet<Style = Theme>>),
|
|
||||||
}
|
|
||||||
|
|
||||||
impl Svg {
|
|
||||||
/// Creates a custom [`Svg`] style.
|
|
||||||
pub fn custom_fn(f: fn(&Theme) -> svg::Appearance) -> Self {
|
|
||||||
Self::Custom(Box::new(f))
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
impl svg::StyleSheet for Theme {
|
|
||||||
type Style = Svg;
|
|
||||||
|
|
||||||
fn appearance(&self, style: &Self::Style) -> svg::Appearance {
|
|
||||||
match style {
|
|
||||||
Svg::Default => svg::Appearance::default(),
|
|
||||||
Svg::Custom(custom) => custom.appearance(self),
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
fn hovered(&self, style: &Self::Style) -> svg::Appearance {
|
|
||||||
self.appearance(style)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
impl svg::StyleSheet for fn(&Theme) -> svg::Appearance {
|
|
||||||
type Style = Theme;
|
|
||||||
|
|
||||||
fn appearance(&self, style: &Self::Style) -> svg::Appearance {
|
|
||||||
(self)(style)
|
|
||||||
}
|
|
||||||
|
|
||||||
fn hovered(&self, style: &Self::Style) -> svg::Appearance {
|
|
||||||
self.appearance(style)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
impl text::StyleSheet for Theme {}
|
impl text::StyleSheet for Theme {}
|
||||||
|
|
||||||
/// The style of a text input.
|
/// The style of a text input.
|
||||||
|
|
|
||||||
|
|
@ -371,7 +371,7 @@ pub fn image<Handle>(handle: impl Into<Handle>) -> crate::Image<Handle> {
|
||||||
#[cfg(feature = "svg")]
|
#[cfg(feature = "svg")]
|
||||||
pub fn svg<Theme>(handle: impl Into<core::svg::Handle>) -> crate::Svg<Theme>
|
pub fn svg<Theme>(handle: impl Into<core::svg::Handle>) -> crate::Svg<Theme>
|
||||||
where
|
where
|
||||||
Theme: crate::svg::StyleSheet,
|
Theme: crate::svg::Style,
|
||||||
{
|
{
|
||||||
crate::Svg::new(handle)
|
crate::Svg::new(handle)
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -5,13 +5,13 @@ use crate::core::renderer;
|
||||||
use crate::core::svg;
|
use crate::core::svg;
|
||||||
use crate::core::widget::Tree;
|
use crate::core::widget::Tree;
|
||||||
use crate::core::{
|
use crate::core::{
|
||||||
ContentFit, Element, Layout, Length, Rectangle, Size, Vector, Widget,
|
Color, ContentFit, Element, Layout, Length, Rectangle, Size, Vector, Widget,
|
||||||
};
|
};
|
||||||
|
use crate::style::Theme;
|
||||||
|
|
||||||
use std::path::PathBuf;
|
use std::path::PathBuf;
|
||||||
|
|
||||||
pub use crate::style::svg::{Appearance, StyleSheet};
|
pub use crate::core::svg::Handle;
|
||||||
pub use svg::Handle;
|
|
||||||
|
|
||||||
/// A vector graphics image.
|
/// A vector graphics image.
|
||||||
///
|
///
|
||||||
|
|
@ -20,36 +20,36 @@ pub use svg::Handle;
|
||||||
/// [`Svg`] images can have a considerable rendering cost when resized,
|
/// [`Svg`] images can have a considerable rendering cost when resized,
|
||||||
/// specially when they are complex.
|
/// specially when they are complex.
|
||||||
#[allow(missing_debug_implementations)]
|
#[allow(missing_debug_implementations)]
|
||||||
pub struct Svg<Theme = crate::Theme>
|
pub struct Svg<Theme = crate::Theme> {
|
||||||
where
|
|
||||||
Theme: StyleSheet,
|
|
||||||
{
|
|
||||||
handle: Handle,
|
handle: Handle,
|
||||||
width: Length,
|
width: Length,
|
||||||
height: Length,
|
height: Length,
|
||||||
content_fit: ContentFit,
|
content_fit: ContentFit,
|
||||||
style: <Theme as StyleSheet>::Style,
|
style: fn(&Theme, Status) -> Appearance,
|
||||||
}
|
}
|
||||||
|
|
||||||
impl<Theme> Svg<Theme>
|
impl<Theme> Svg<Theme> {
|
||||||
where
|
|
||||||
Theme: StyleSheet,
|
|
||||||
{
|
|
||||||
/// Creates a new [`Svg`] from the given [`Handle`].
|
/// Creates a new [`Svg`] from the given [`Handle`].
|
||||||
pub fn new(handle: impl Into<Handle>) -> Self {
|
pub fn new(handle: impl Into<Handle>) -> Self
|
||||||
|
where
|
||||||
|
Theme: Style,
|
||||||
|
{
|
||||||
Svg {
|
Svg {
|
||||||
handle: handle.into(),
|
handle: handle.into(),
|
||||||
width: Length::Fill,
|
width: Length::Fill,
|
||||||
height: Length::Shrink,
|
height: Length::Shrink,
|
||||||
content_fit: ContentFit::Contain,
|
content_fit: ContentFit::Contain,
|
||||||
style: Default::default(),
|
style: Theme::style(),
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/// Creates a new [`Svg`] that will display the contents of the file at the
|
/// Creates a new [`Svg`] that will display the contents of the file at the
|
||||||
/// provided path.
|
/// provided path.
|
||||||
#[must_use]
|
#[must_use]
|
||||||
pub fn from_path(path: impl Into<PathBuf>) -> Self {
|
pub fn from_path(path: impl Into<PathBuf>) -> Self
|
||||||
|
where
|
||||||
|
Theme: Style,
|
||||||
|
{
|
||||||
Self::new(Handle::from_path(path))
|
Self::new(Handle::from_path(path))
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -80,7 +80,7 @@ where
|
||||||
|
|
||||||
/// Sets the style variant of this [`Svg`].
|
/// Sets the style variant of this [`Svg`].
|
||||||
#[must_use]
|
#[must_use]
|
||||||
pub fn style(mut self, style: impl Into<Theme::Style>) -> Self {
|
pub fn style(mut self, style: fn(&Theme, Status) -> Appearance) -> Self {
|
||||||
self.style = style.into();
|
self.style = style.into();
|
||||||
self
|
self
|
||||||
}
|
}
|
||||||
|
|
@ -88,7 +88,6 @@ where
|
||||||
|
|
||||||
impl<Message, Theme, Renderer> Widget<Message, Theme, Renderer> for Svg<Theme>
|
impl<Message, Theme, Renderer> Widget<Message, Theme, Renderer> for Svg<Theme>
|
||||||
where
|
where
|
||||||
Theme: iced_style::svg::StyleSheet,
|
|
||||||
Renderer: svg::Renderer,
|
Renderer: svg::Renderer,
|
||||||
{
|
{
|
||||||
fn size(&self) -> Size<Length> {
|
fn size(&self) -> Size<Length> {
|
||||||
|
|
@ -158,12 +157,14 @@ where
|
||||||
..bounds
|
..bounds
|
||||||
};
|
};
|
||||||
|
|
||||||
let appearance = if is_mouse_over {
|
let status = if is_mouse_over {
|
||||||
theme.hovered(&self.style)
|
Status::Hovered
|
||||||
} else {
|
} else {
|
||||||
theme.appearance(&self.style)
|
Status::Idle
|
||||||
};
|
};
|
||||||
|
|
||||||
|
let appearance = (self.style)(theme, status);
|
||||||
|
|
||||||
renderer.draw(
|
renderer.draw(
|
||||||
self.handle.clone(),
|
self.handle.clone(),
|
||||||
appearance.color,
|
appearance.color,
|
||||||
|
|
@ -184,10 +185,42 @@ where
|
||||||
impl<'a, Message, Theme, Renderer> From<Svg<Theme>>
|
impl<'a, Message, Theme, Renderer> From<Svg<Theme>>
|
||||||
for Element<'a, Message, Theme, Renderer>
|
for Element<'a, Message, Theme, Renderer>
|
||||||
where
|
where
|
||||||
Theme: iced_style::svg::StyleSheet + 'a,
|
Theme: 'a,
|
||||||
Renderer: svg::Renderer + 'a,
|
Renderer: svg::Renderer + 'a,
|
||||||
{
|
{
|
||||||
fn from(icon: Svg<Theme>) -> Element<'a, Message, Theme, Renderer> {
|
fn from(icon: Svg<Theme>) -> Element<'a, Message, Theme, Renderer> {
|
||||||
Element::new(icon)
|
Element::new(icon)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/// The possible status of an [`Svg`].
|
||||||
|
#[derive(Debug, Clone, Copy, PartialEq, Eq)]
|
||||||
|
pub enum Status {
|
||||||
|
/// The [`Svg`] is idle.
|
||||||
|
Idle,
|
||||||
|
/// The [`Svg`] is being hovered.
|
||||||
|
Hovered,
|
||||||
|
}
|
||||||
|
|
||||||
|
/// The appearance of an [`Svg`].
|
||||||
|
#[derive(Debug, Clone, Copy, PartialEq, Default)]
|
||||||
|
pub struct Appearance {
|
||||||
|
/// The [`Color`] filter of an [`Svg`].
|
||||||
|
///
|
||||||
|
/// Useful for coloring a symbolic icon.
|
||||||
|
///
|
||||||
|
/// `None` keeps the original color.
|
||||||
|
pub color: Option<Color>,
|
||||||
|
}
|
||||||
|
|
||||||
|
/// The definiton of the default style of an [`Svg`].
|
||||||
|
pub trait Style {
|
||||||
|
/// Returns the default style of an [`Svg`].
|
||||||
|
fn style() -> fn(&Self, Status) -> Appearance;
|
||||||
|
}
|
||||||
|
|
||||||
|
impl Style for Theme {
|
||||||
|
fn style() -> fn(&Self, Status) -> Appearance {
|
||||||
|
|_, _| Appearance::default()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue