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

Simplify theming for Rule widget

Browse source
This commit is contained in:
Héctor Ramón Jiménez 2024-03-05 22:38:27 +01:00
parent 420f49bef5
commit a43afc791e
No known key found for this signature in database
GPG key ID: 7CC46565708259A7
5 changed files with 132 additions and 164 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 rule;
pub mod svg;
pub mod text_editor;
pub mod theme;

89
style/src/rule.rs
View file

@ -1,89 +0,0 @@
//! Change the appearance of a rule.
use crate::core::border;
use crate::core::Color;
/// The appearance of a rule.
#[derive(Debug, Clone, Copy)]
pub struct Appearance {
/// The color of the rule.
pub color: Color,
/// The width (thickness) of the rule line.
pub width: u16,
/// The radius of the line corners.
pub radius: border::Radius,
/// The [`FillMode`] of the rule.
pub fill_mode: FillMode,
}
/// A set of rules that dictate the style of a rule.
pub trait StyleSheet {
/// The supported style of the [`StyleSheet`].
type Style: Default;
/// Produces the style of a rule.
fn appearance(&self, style: &Self::Style) -> Appearance;
}
/// The fill mode of a rule.
#[derive(Debug, Clone, Copy)]
pub enum FillMode {
/// Fill the whole length of the container.
Full,
/// Fill a percent of the length of the container. The rule
/// will be centered in that container.
///
/// The range is `[0.0, 100.0]`.
Percent(f32),
/// Uniform offset from each end, length units.
Padded(u16),
/// Different offset on each end of the rule, length units.
/// First = top or left.
AsymmetricPadding(u16, u16),
}
impl FillMode {
/// Return the starting offset and length of the rule.
///
/// * `space` - The space to fill.
///
/// # Returns
///
/// * (`starting_offset`, `length`)
pub fn fill(&self, space: f32) -> (f32, f32) {
match *self {
FillMode::Full => (0.0, space),
FillMode::Percent(percent) => {
if percent >= 100.0 {
(0.0, space)
} else {
let percent_width = (space * percent / 100.0).round();
(((space - percent_width) / 2.0).round(), percent_width)
}
}
FillMode::Padded(padding) => {
if padding == 0 {
(0.0, space)
} else {
let padding = padding as f32;
let mut line_width = space - (padding * 2.0);
if line_width < 0.0 {
line_width = 0.0;
}
(padding, line_width)
}
}
FillMode::AsymmetricPadding(first_pad, second_pad) => {
let first_pad = first_pad as f32;
let second_pad = second_pad as f32;
let mut line_width = space - first_pad - second_pad;
if line_width < 0.0 {
line_width = 0.0;
}
(first_pad, line_width)
}
}
}
}

43
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::rule;
use crate::svg;
use crate::text_editor;
use crate::toggler;
@ -511,48 +510,6 @@ impl pane_grid::StyleSheet for Theme {
}
}
/// The style of a rule.
#[derive(Default)]
pub enum Rule {
/// The default style.
#[default]
Default,
/// A custom style.
Custom(Box<dyn rule::StyleSheet<Style = Theme>>),
}
impl<T: Fn(&Theme) -> rule::Appearance + 'static> From<T> for Rule {
fn from(f: T) -> Self {
Self::Custom(Box::new(f))
}
}
impl rule::StyleSheet for Theme {
type Style = Rule;
fn appearance(&self, style: &Self::Style) -> rule::Appearance {
let palette = self.extended_palette();
match style {
Rule::Default => rule::Appearance {
color: palette.background.strong.color,
width: 1,
radius: 0.0.into(),
fill_mode: rule::FillMode::Full,
},
Rule::Custom(custom) => custom.appearance(self),
}
}
}
impl<T: Fn(&Theme) -> rule::Appearance> rule::StyleSheet for T {
type Style = Theme;
fn appearance(&self, style: &Self::Style) -> rule::Appearance {
(self)(style)
}
}
/**
* Svg
*/

4
widget/src/helpers.rs
View file

@ -324,7 +324,7 @@ pub fn vertical_space() -> Space {
/// [`Rule`]: crate::Rule
pub fn horizontal_rule<Theme>(height: impl Into<Pixels>) -> Rule<Theme>
where
Theme: rule::StyleSheet,
Theme: rule::Style,
{
Rule::horizontal(height)
}
@ -334,7 +334,7 @@ where
/// [`Rule`]: crate::Rule
pub fn vertical_rule<Theme>(width: impl Into<Pixels>) -> Rule<Theme>
where
Theme: rule::StyleSheet,
Theme: rule::Style,
{
Rule::vertical(width)
}

159
widget/src/rule.rs
View file

@ -1,53 +1,53 @@
//! Display a horizontal or vertical rule for dividing content.
use crate::core::border::{self, Border};
use crate::core::layout;
use crate::core::mouse;
use crate::core::renderer;
use crate::core::widget::Tree;
use crate::core::{
Border, Element, Layout, Length, Pixels, Rectangle, Size, Widget,
Color, Element, Layout, Length, Pixels, Rectangle, Size, Widget,
};
pub use crate::style::rule::{Appearance, FillMode, StyleSheet};
use crate::style::Theme;
/// Display a horizontal or vertical rule for dividing content.
#[allow(missing_debug_implementations)]
pub struct Rule<Theme = crate::Theme>
where
Theme: StyleSheet,
{
pub struct Rule<Theme = crate::Theme> {
width: Length,
height: Length,
is_horizontal: bool,
style: Theme::Style,
style: fn(&Theme) -> Appearance,
}
impl<Theme> Rule<Theme>
where
Theme: StyleSheet,
{
impl<Theme> Rule<Theme> {
/// Creates a horizontal [`Rule`] with the given height.
pub fn horizontal(height: impl Into<Pixels>) -> Self {
pub fn horizontal(height: impl Into<Pixels>) -> Self
where
Theme: Style,
{
Rule {
width: Length::Fill,
height: Length::Fixed(height.into().0),
is_horizontal: true,
style: Default::default(),
style: Theme::style(),
}
}
/// Creates a vertical [`Rule`] with the given width.
pub fn vertical(width: impl Into<Pixels>) -> Self {
pub fn vertical(width: impl Into<Pixels>) -> Self
where
Theme: Style,
{
Rule {
width: Length::Fixed(width.into().0),
height: Length::Fill,
is_horizontal: false,
style: Default::default(),
style: Theme::style(),
}
}
/// Sets the style of the [`Rule`].
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;
self
}
}
@ -55,7 +55,6 @@ where
impl<Message, Theme, Renderer> Widget<Message, Theme, Renderer> for Rule<Theme>
where
Renderer: crate::core::Renderer,
Theme: StyleSheet,
{
fn size(&self) -> Size<Length> {
Size {
@ -84,34 +83,35 @@ where
_viewport: &Rectangle,
) {
let bounds = layout.bounds();
let style = theme.appearance(&self.style);
let appearance = (self.style)(theme);
let bounds = if self.is_horizontal {
let line_y = (bounds.y + (bounds.height / 2.0)
- (style.width as f32 / 2.0))
- (appearance.width as f32 / 2.0))
.round();
let (offset, line_width) = style.fill_mode.fill(bounds.width);
let (offset, line_width) = appearance.fill_mode.fill(bounds.width);
let line_x = bounds.x + offset;
Rectangle {
x: line_x,
y: line_y,
width: line_width,
height: style.width as f32,
height: appearance.width as f32,
}
} else {
let line_x = (bounds.x + (bounds.width / 2.0)
- (style.width as f32 / 2.0))
- (appearance.width as f32 / 2.0))
.round();
let (offset, line_height) = style.fill_mode.fill(bounds.height);
let (offset, line_height) =
appearance.fill_mode.fill(bounds.height);
let line_y = bounds.y + offset;
Rectangle {
x: line_x,
y: line_y,
width: style.width as f32,
width: appearance.width as f32,
height: line_height,
}
};
@ -119,10 +119,10 @@ where
renderer.fill_quad(
renderer::Quad {
bounds,
border: Border::with_radius(style.radius),
border: Border::with_radius(appearance.radius),
..renderer::Quad::default()
},
style.color,
appearance.color,
);
}
}
@ -131,10 +131,111 @@ impl<'a, Message, Theme, Renderer> From<Rule<Theme>>
for Element<'a, Message, Theme, Renderer>
where
Message: 'a,
Theme: StyleSheet + 'a,
Theme: 'a,
Renderer: 'a + crate::core::Renderer,
{
fn from(rule: Rule<Theme>) -> Element<'a, Message, Theme, Renderer> {
Element::new(rule)
}
}
/// The appearance of a rule.
#[derive(Debug, Clone, Copy)]
pub struct Appearance {
/// The color of the rule.
pub color: Color,
/// The width (thickness) of the rule line.
pub width: u16,
/// The radius of the line corners.
pub radius: border::Radius,
/// The [`FillMode`] of the rule.
pub fill_mode: FillMode,
}
/// The fill mode of a rule.
#[derive(Debug, Clone, Copy)]
pub enum FillMode {
/// Fill the whole length of the container.
Full,
/// Fill a percent of the length of the container. The rule
/// will be centered in that container.
///
/// The range is `[0.0, 100.0]`.
Percent(f32),
/// Uniform offset from each end, length units.
Padded(u16),
/// Different offset on each end of the rule, length units.
/// First = top or left.
AsymmetricPadding(u16, u16),
}
impl FillMode {
/// Return the starting offset and length of the rule.
///
/// * `space` - The space to fill.
///
/// # Returns
///
/// * (`starting_offset`, `length`)
pub fn fill(&self, space: f32) -> (f32, f32) {
match *self {
FillMode::Full => (0.0, space),
FillMode::Percent(percent) => {
if percent >= 100.0 {
(0.0, space)
} else {
let percent_width = (space * percent / 100.0).round();
(((space - percent_width) / 2.0).round(), percent_width)
}
}
FillMode::Padded(padding) => {
if padding == 0 {
(0.0, space)
} else {
let padding = padding as f32;
let mut line_width = space - (padding * 2.0);
if line_width < 0.0 {
line_width = 0.0;
}
(padding, line_width)
}
}
FillMode::AsymmetricPadding(first_pad, second_pad) => {
let first_pad = first_pad as f32;
let second_pad = second_pad as f32;
let mut line_width = space - first_pad - second_pad;
if line_width < 0.0 {
line_width = 0.0;
}
(first_pad, line_width)
}
}
}
}
/// The definiton of the default style of a [`Rule`].
pub trait Style {
/// Returns the default style of a [`Rule`].
fn style() -> fn(&Self) -> Appearance;
}
impl Style for Theme {
fn style() -> fn(&Self) -> Appearance {
default
}
}
/// The default styling of a [`Rule`].
pub fn default(theme: &Theme) -> Appearance {
let palette = theme.extended_palette();
Appearance {
color: palette.background.strong.color,
width: 1,
radius: 0.0.into(),
fill_mode: FillMode::Full,
}
}