Extend border radius on relevant widgets

This commit is contained in:
Casper Storm 2023-05-23 12:26:16 +02:00
parent 8300d86c24
commit 1c86defab5
19 changed files with 111 additions and 99 deletions

22
core/src/border_radius.rs Normal file
View file

@ -0,0 +1,22 @@
/// The border radii for the corners of a graphics primitive in the order:
/// top-left, top-right, bottom-right, bottom-left.
#[derive(Debug, Clone, Copy, PartialEq, Default)]
pub struct BorderRadius([f32; 4]);
impl From<f32> for BorderRadius {
fn from(w: f32) -> Self {
Self([w; 4])
}
}
impl From<[f32; 4]> for BorderRadius {
fn from(radi: [f32; 4]) -> Self {
Self(radi)
}
}
impl From<BorderRadius> for [f32; 4] {
fn from(radi: BorderRadius) -> Self {
radi.0
}
}

View file

@ -44,6 +44,7 @@ pub mod window;
mod angle;
mod background;
mod border_radius;
mod color;
mod content_fit;
mod element;
@ -60,6 +61,7 @@ mod vector;
pub use alignment::Alignment;
pub use angle::{Degrees, Radians};
pub use background::Background;
pub use border_radius::BorderRadius;
pub use clipboard::Clipboard;
pub use color::Color;
pub use content_fit::ContentFit;

View file

@ -6,7 +6,7 @@ mod null;
pub use null::Null;
use crate::layout;
use crate::{Background, Color, Element, Rectangle, Vector};
use crate::{Background, BorderRadius, Color, Element, Rectangle, Vector};
/// A component that can be used by widgets to draw themselves on a screen.
pub trait Renderer: Sized {
@ -60,29 +60,6 @@ pub struct Quad {
pub border_color: Color,
}
/// The border radii for the corners of a graphics primitive in the order:
/// top-left, top-right, bottom-right, bottom-left.
#[derive(Debug, Clone, Copy, PartialEq, Default)]
pub struct BorderRadius([f32; 4]);
impl From<f32> for BorderRadius {
fn from(w: f32) -> Self {
Self([w; 4])
}
}
impl From<[f32; 4]> for BorderRadius {
fn from(radi: [f32; 4]) -> Self {
Self(radi)
}
}
impl From<BorderRadius> for [f32; 4] {
fn from(radi: BorderRadius) -> Self {
radi.0
}
}
/// The styling attributes of a [`Renderer`].
#[derive(Debug, Clone, Copy, PartialEq)]
pub struct Style {

View file

@ -418,7 +418,7 @@ mod modal {
renderer.fill_quad(
renderer::Quad {
bounds: layout.bounds(),
border_radius: renderer::BorderRadius::from(0.0),
border_radius: Default::default(),
border_width: 0.0,
border_color: Color::TRANSPARENT,
},

View file

@ -289,13 +289,18 @@ impl Application for ScrollableDemo {
}
Direction::Horizontal => {
progress_bar(0.0..=1.0, self.current_scroll_offset.x)
.style(progress_bar_custom_style)
.style(theme::ProgressBar::Custom(Box::new(
ProgressBarCustomStyle,
)))
.into()
}
Direction::Multi => column![
progress_bar(0.0..=1.0, self.current_scroll_offset.y),
progress_bar(0.0..=1.0, self.current_scroll_offset.x)
.style(progress_bar_custom_style)
progress_bar(0.0..=1.0, self.current_scroll_offset.x).style(
theme::ProgressBar::Custom(Box::new(
ProgressBarCustomStyle,
))
)
]
.spacing(10)
.into(),
@ -351,12 +356,12 @@ impl scrollable::StyleSheet for ScrollbarCustomStyle {
background: style
.active(&theme::Scrollable::default())
.background,
border_radius: 0.0,
border_radius: 0.0.into(),
border_width: 0.0,
border_color: Default::default(),
scroller: Scroller {
color: Color::from_rgb8(250, 85, 134),
border_radius: 0.0,
border_radius: 0.0.into(),
border_width: 0.0,
border_color: Default::default(),
},
@ -367,10 +372,16 @@ impl scrollable::StyleSheet for ScrollbarCustomStyle {
}
}
fn progress_bar_custom_style(theme: &Theme) -> progress_bar::Appearance {
progress_bar::Appearance {
background: theme.extended_palette().background.strong.color.into(),
bar: Color::from_rgb8(250, 85, 134).into(),
border_radius: 0.0,
struct ProgressBarCustomStyle;
impl progress_bar::StyleSheet for ProgressBarCustomStyle {
type Style = Theme;
fn appearance(&self, style: &Self::Style) -> progress_bar::Appearance {
progress_bar::Appearance {
background: style.extended_palette().background.strong.color.into(),
bar: Color::from_rgb8(250, 85, 134).into(),
border_radius: 0.0.into(),
}
}
}

View file

@ -1,5 +1,5 @@
//! Change the apperance of a button.
use iced_core::{Background, Color, Vector};
use iced_core::{Background, BorderRadius, Color, Vector};
/// The appearance of a button.
#[derive(Debug, Clone, Copy)]
@ -9,7 +9,7 @@ pub struct Appearance {
/// The [`Background`] of the button.
pub background: Option<Background>,
/// The border radius of the button.
pub border_radius: f32,
pub border_radius: BorderRadius,
/// The border width of the button.
pub border_width: f32,
/// The border [`Color`] of the button.
@ -23,7 +23,7 @@ impl std::default::Default for Appearance {
Self {
shadow_offset: Vector::default(),
background: None,
border_radius: 0.0,
border_radius: 0.0.into(),
border_width: 0.0,
border_color: Color::TRANSPARENT,
text_color: Color::BLACK,

View file

@ -1,5 +1,5 @@
//! Change the appearance of a checkbox.
use iced_core::{Background, Color};
use iced_core::{Background, BorderRadius, Color};
/// The appearance of a checkbox.
#[derive(Debug, Clone, Copy)]
@ -9,7 +9,7 @@ pub struct Appearance {
/// The icon [`Color`] of the checkbox.
pub icon_color: Color,
/// The border radius of the checkbox.
pub border_radius: f32,
pub border_radius: BorderRadius,
/// The border width of the checkbox.
pub border_width: f32,
/// The border [`Color`] of the checkbox.

View file

@ -1,5 +1,5 @@
//! Change the appearance of a container.
use iced_core::{Background, Color};
use iced_core::{Background, BorderRadius, Color};
/// The appearance of a container.
#[derive(Debug, Clone, Copy)]
@ -9,7 +9,7 @@ pub struct Appearance {
/// The [`Background`] of the container.
pub background: Option<Background>,
/// The border radius of the container.
pub border_radius: f32,
pub border_radius: BorderRadius,
/// The border width of the container.
pub border_width: f32,
/// The border [`Color`] of the container.
@ -21,7 +21,7 @@ impl std::default::Default for Appearance {
Self {
text_color: None,
background: None,
border_radius: 0.0,
border_radius: 0.0.into(),
border_width: 0.0,
border_color: Color::TRANSPARENT,
}

View file

@ -1,5 +1,5 @@
//! Change the appearance of menus.
use iced_core::{Background, Color};
use iced_core::{Background, BorderRadius, Color};
/// The appearance of a menu.
#[derive(Debug, Clone, Copy)]
@ -11,7 +11,7 @@ pub struct Appearance {
/// The border width of the menu.
pub border_width: f32,
/// The border radius of the menu.
pub border_radius: f32,
pub border_radius: BorderRadius,
/// The border [`Color`] of the menu.
pub border_color: Color,
/// The text [`Color`] of a selected option in the menu.

View file

@ -1,5 +1,5 @@
//! Change the appearance of a pane grid.
use iced_core::{Background, Color};
use iced_core::{Background, BorderRadius, Color};
/// The appearance of the hovered region of a pane grid.
#[derive(Debug, Clone, Copy)]
@ -11,7 +11,7 @@ pub struct Appearance {
/// The border [`Color`] of the hovered pane region.
pub border_color: Color,
/// The border radius of the hovered pane region.
pub border_radius: f32,
pub border_radius: BorderRadius,
}
/// A line.

View file

@ -1,5 +1,5 @@
//! Change the appearance of a pick list.
use iced_core::{Background, Color};
use iced_core::{Background, BorderRadius, Color};
/// The appearance of a pick list.
#[derive(Debug, Clone, Copy)]
@ -13,7 +13,7 @@ pub struct Appearance {
/// The [`Background`] of the pick list.
pub background: Background,
/// The border radius of the pick list.
pub border_radius: f32,
pub border_radius: BorderRadius,
/// The border width of the pick list.
pub border_width: f32,
/// The border color of the pick list.

View file

@ -1,5 +1,5 @@
//! Change the appearance of a progress bar.
use iced_core::Background;
use iced_core::{Background, BorderRadius};
/// The appearance of a progress bar.
#[derive(Debug, Clone, Copy)]
@ -9,7 +9,7 @@ pub struct Appearance {
/// The [`Background`] of the bar of the progress bar.
pub bar: Background,
/// The border radius of the progress bar.
pub border_radius: f32,
pub border_radius: BorderRadius,
}
/// A set of rules that dictate the style of a progress bar.

View file

@ -1,5 +1,5 @@
//! Change the appearance of a rule.
use iced_core::Color;
use iced_core::{BorderRadius, Color};
/// The appearance of a rule.
#[derive(Debug, Clone, Copy)]
@ -9,7 +9,7 @@ pub struct Appearance {
/// The width (thickness) of the rule line.
pub width: u16,
/// The radius of the line corners.
pub radius: f32,
pub radius: BorderRadius,
/// The [`FillMode`] of the rule.
pub fill_mode: FillMode,
}

View file

@ -1,5 +1,5 @@
//! Change the appearance of a scrollable.
use iced_core::{Background, Color};
use iced_core::{Background, BorderRadius, Color};
/// The appearance of a scrollable.
#[derive(Debug, Clone, Copy)]
@ -7,7 +7,7 @@ pub struct Scrollbar {
/// The [`Background`] of a scrollable.
pub background: Option<Background>,
/// The border radius of a scrollable.
pub border_radius: f32,
pub border_radius: BorderRadius,
/// The border width of a scrollable.
pub border_width: f32,
/// The border [`Color`] of a scrollable.
@ -22,7 +22,7 @@ pub struct Scroller {
/// The [`Color`] of the scroller.
pub color: Color,
/// The border radius of the scroller.
pub border_radius: f32,
pub border_radius: BorderRadius,
/// The border width of the scroller.
pub border_width: f32,
/// The border [`Color`] of the scroller.

View file

@ -1,5 +1,5 @@
//! Change the apperance of a slider.
use iced_core::Color;
use iced_core::{BorderRadius, Color};
/// The appearance of a slider.
#[derive(Debug, Clone, Copy)]
@ -45,7 +45,7 @@ pub enum HandleShape {
/// The width of the rectangle.
width: u16,
/// The border radius of the corners of the rectangle.
border_radius: f32,
border_radius: BorderRadius,
},
}

View file

@ -1,5 +1,5 @@
//! Change the appearance of a text input.
use iced_core::{Background, Color};
use iced_core::{Background, BorderRadius, Color};
/// The appearance of a text input.
#[derive(Debug, Clone, Copy)]
@ -7,7 +7,7 @@ pub struct Appearance {
/// The [`Background`] of the text input.
pub background: Background,
/// The border radius of the text input.
pub border_radius: f32,
pub border_radius: BorderRadius,
/// The border width of the text input.
pub border_width: f32,
/// The border [`Color`] of the text input.

View file

@ -157,7 +157,7 @@ impl button::StyleSheet for Theme {
let palette = self.extended_palette();
let appearance = button::Appearance {
border_radius: 2.0,
border_radius: 2.0.into(),
..button::Appearance::default()
};
@ -346,7 +346,7 @@ fn checkbox_appearance(
base.color
}),
icon_color,
border_radius: 2.0,
border_radius: 2.0.into(),
border_width: 1.0,
border_color: accent.color,
text_color: None,
@ -383,7 +383,7 @@ impl container::StyleSheet for Theme {
container::Appearance {
text_color: None,
background: Some(palette.background.weak.color.into()),
border_radius: 2.0,
border_radius: 2.0.into(),
border_width: 0.0,
border_color: Color::TRANSPARENT,
}
@ -422,7 +422,7 @@ impl slider::StyleSheet for Theme {
let handle = slider::Handle {
shape: slider::HandleShape::Rectangle {
width: 8,
border_radius: 4.0,
border_radius: 4.0.into(),
},
color: Color::WHITE,
border_color: Color::WHITE,
@ -507,7 +507,7 @@ impl menu::StyleSheet for Theme {
text_color: palette.background.weak.text,
background: palette.background.weak.color.into(),
border_width: 1.0,
border_radius: 0.0,
border_radius: 0.0.into(),
border_color: palette.background.strong.color,
selected_text_color: palette.primary.strong.text,
selected_background: palette.primary.strong.color.into(),
@ -553,7 +553,7 @@ impl pick_list::StyleSheet for Theme {
background: palette.background.weak.color.into(),
placeholder_color: palette.background.strong.color,
handle_color: palette.background.weak.text,
border_radius: 2.0,
border_radius: 2.0.into(),
border_width: 1.0,
border_color: palette.background.strong.color,
}
@ -572,7 +572,7 @@ impl pick_list::StyleSheet for Theme {
background: palette.background.weak.color.into(),
placeholder_color: palette.background.strong.color,
handle_color: palette.background.weak.text,
border_radius: 2.0,
border_radius: 2.0.into(),
border_width: 1.0,
border_color: palette.primary.strong.color,
}
@ -729,7 +729,7 @@ impl pane_grid::StyleSheet for Theme {
}),
border_width: 2.0,
border_color: palette.primary.strong.color,
border_radius: 0.0,
border_radius: 0.0.into(),
}
}
PaneGrid::Custom(custom) => custom.hovered_region(self),
@ -800,7 +800,7 @@ impl progress_bar::StyleSheet for Theme {
let from_palette = |bar: Color| progress_bar::Appearance {
background: palette.background.strong.color.into(),
bar: bar.into(),
border_radius: 2.0,
border_radius: 2.0.into(),
};
match style {
@ -846,7 +846,7 @@ impl rule::StyleSheet for Theme {
Rule::Default => rule::Appearance {
color: palette.background.strong.color,
width: 1,
radius: 0.0,
radius: 0.0.into(),
fill_mode: rule::FillMode::Full,
},
Rule::Custom(custom) => custom.appearance(self),
@ -929,12 +929,12 @@ impl scrollable::StyleSheet for Theme {
scrollable::Scrollbar {
background: Some(palette.background.weak.color.into()),
border_radius: 2.0,
border_radius: 2.0.into(),
border_width: 0.0,
border_color: Color::TRANSPARENT,
scroller: scrollable::Scroller {
color: palette.background.strong.color,
border_radius: 2.0,
border_radius: 2.0.into(),
border_width: 0.0,
border_color: Color::TRANSPARENT,
},
@ -956,12 +956,12 @@ impl scrollable::StyleSheet for Theme {
scrollable::Scrollbar {
background: Some(palette.background.weak.color.into()),
border_radius: 2.0,
border_radius: 2.0.into(),
border_width: 0.0,
border_color: Color::TRANSPARENT,
scroller: scrollable::Scroller {
color: palette.primary.strong.color,
border_radius: 2.0,
border_radius: 2.0.into(),
border_width: 0.0,
border_color: Color::TRANSPARENT,
},
@ -1063,7 +1063,7 @@ impl text_input::StyleSheet for Theme {
text_input::Appearance {
background: palette.background.base.color.into(),
border_radius: 2.0,
border_radius: 2.0.into(),
border_width: 1.0,
border_color: palette.background.strong.color,
icon_color: palette.background.weak.text,
@ -1079,7 +1079,7 @@ impl text_input::StyleSheet for Theme {
text_input::Appearance {
background: palette.background.base.color.into(),
border_radius: 2.0,
border_radius: 2.0.into(),
border_width: 1.0,
border_color: palette.background.base.text,
icon_color: palette.background.weak.text,
@ -1095,7 +1095,7 @@ impl text_input::StyleSheet for Theme {
text_input::Appearance {
background: palette.background.base.color.into(),
border_radius: 2.0,
border_radius: 2.0.into(),
border_width: 1.0,
border_color: palette.primary.strong.color,
icon_color: palette.background.weak.text,
@ -1141,7 +1141,7 @@ impl text_input::StyleSheet for Theme {
text_input::Appearance {
background: palette.background.weak.color.into(),
border_radius: 2.0,
border_radius: 2.0.into(),
border_width: 1.0,
border_color: palette.background.strong.color,
icon_color: palette.background.strong.color,

View file

@ -368,16 +368,16 @@ pub fn draw<T, R>(
style_sheet.active(style)
};
let (handle_width, handle_height, handle_border_radius) = match style
.handle
.shape
{
HandleShape::Circle { radius } => (radius * 2.0, radius * 2.0, radius),
HandleShape::Rectangle {
width,
border_radius,
} => (f32::from(width), bounds.height, border_radius),
};
let (handle_width, handle_height, handle_border_radius) =
match style.handle.shape {
HandleShape::Circle { radius } => {
(radius * 2.0, radius * 2.0, radius.into())
}
HandleShape::Rectangle {
width,
border_radius,
} => (f32::from(width), bounds.height, border_radius),
};
let value = value.into() as f32;
let (range_start, range_end) = {

View file

@ -366,16 +366,16 @@ pub fn draw<T, R>(
style_sheet.active(style)
};
let (handle_width, handle_height, handle_border_radius) = match style
.handle
.shape
{
HandleShape::Circle { radius } => (radius * 2.0, radius * 2.0, radius),
HandleShape::Rectangle {
width,
border_radius,
} => (f32::from(width), bounds.width, border_radius),
};
let (handle_width, handle_height, handle_border_radius) =
match style.handle.shape {
HandleShape::Circle { radius } => {
(radius * 2.0, radius * 2.0, radius.into())
}
HandleShape::Rectangle {
width,
border_radius,
} => (f32::from(width), bounds.width, border_radius),
};
let value = value.into() as f32;
let (range_start, range_end) = {
@ -431,7 +431,7 @@ pub fn draw<T, R>(
width: handle_height,
height: handle_width,
},
border_radius: handle_border_radius.into(),
border_radius: handle_border_radius,
border_width: style.handle.border_width,
border_color: style.handle.border_color,
},