improv(app): visually align window corners to content

This commit is contained in:
Vukašin Vojinović 2025-03-12 22:27:25 +01:00 committed by Michael Murphy
parent 872e7dd65e
commit 617de4dc95
2 changed files with 32 additions and 20 deletions

View file

@ -838,6 +838,13 @@ impl<App: Application> ApplicationExt for App {
content_col.into()
};
// Ensures visually aligned radii for content and window corners
let window_corner_radius =
crate::theme::active()
.cosmic()
.radius_s()
.map(|x| if x < 4.0 { x } else { x + 4.0 });
let view_column = crate::widget::column::with_capacity(2)
.push_maybe(if core.window.show_headerbar {
Some({
@ -891,21 +898,23 @@ impl<App: Application> ApplicationExt for App {
// Needed to avoid header bar corner gaps for apps without a content container
header
.apply(container)
.class(crate::theme::Container::custom(|theme| container::Style {
background: Some(iced::Background::Color(
theme.cosmic().background.base.into(),
)),
border: iced::Border {
radius: [
theme.cosmic().radius_s()[0] - 1.0,
theme.cosmic().radius_s()[1] - 1.0,
theme.cosmic().radius_0()[2],
theme.cosmic().radius_0()[3],
]
.into(),
.class(crate::theme::Container::custom(move |theme| {
container::Style {
background: Some(iced::Background::Color(
theme.cosmic().background.base.into(),
)),
border: iced::Border {
radius: [
window_corner_radius[0] - 1.0,
window_corner_radius[1] - 1.0,
theme.cosmic().radius_0()[2],
theme.cosmic().radius_0()[3],
]
.into(),
..Default::default()
},
..Default::default()
},
..Default::default()
}
}))
.apply(|w| id_container(w, iced_core::id::Id::new("COSMIC_header")))
}
@ -929,7 +938,7 @@ impl<App: Application> ApplicationExt for App {
border: iced::Border {
color: theme.cosmic().bg_divider().into(),
width: if sharp_corners { 0.0 } else { 1.0 },
radius: theme.cosmic().radius_s().into(),
radius: window_corner_radius.into(),
},
..Default::default()
}

View file

@ -461,6 +461,9 @@ impl iced_container::Catalog for Theme {
fn style(&self, class: &Self::Class<'_>) -> iced_container::Style {
let cosmic = self.cosmic();
// Ensures visually aligned radii for content and window corners
let window_corner_radius = cosmic.radius_s().map(|x| if x < 4.0 { x } else { x + 4.0 });
match class {
Container::Transparent => iced_container::Style::default(),
@ -474,8 +477,8 @@ impl iced_container::Catalog for Theme {
radius: [
cosmic.corner_radii.radius_0[0],
cosmic.corner_radii.radius_0[1],
cosmic.corner_radii.radius_s[2],
cosmic.corner_radii.radius_s[3],
window_corner_radius[2],
window_corner_radius[3],
]
.into(),
..Default::default()
@ -516,8 +519,8 @@ impl iced_container::Catalog for Theme {
background: Some(iced::Background::Color(cosmic.background.base.into())),
border: Border {
radius: [
cosmic.corner_radii.radius_s[0],
cosmic.corner_radii.radius_s[1],
window_corner_radius[0],
window_corner_radius[1],
cosmic.corner_radii.radius_0[2],
cosmic.corner_radii.radius_0[3],
]
@ -1001,7 +1004,7 @@ impl progress_bar::Catalog for Theme {
(theme.accent.base, theme.background.divider)
};
let border = Border {
radius: theme.corner_radii.radius_xs.into(),
radius: theme.corner_radii.radius_xl.into(),
color: if theme.is_high_contrast && !theme.is_dark {
self.current_container().component.border.into()
} else {