leyoda/libcosmic
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

improv(app): visually align window corners to content

Browse source
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
Download patch file Download diff file Expand all files Collapse all files

39
src/app/mod.rs
View file

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

13
src/theme/style/iced.rs
View file

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