diff --git a/src/app/mod.rs b/src/app/mod.rs index 426f92f83c6..d08b29460a0 100644 --- a/src/app/mod.rs +++ b/src/app/mod.rs @@ -703,11 +703,14 @@ impl ApplicationExt for App { .focused_window() .is_some_and(|i| Some(i) == self.core().main_window_id()); + // Offset for the window border + let window_padding = if sharp_corners { 8 } else { 7 }; + let main_content_padding = if content_container { if nav_bar_active { - [0, 8, 8, 0] + [0, window_padding, window_padding, 0] } else { - [0, 8, 8, 8] + [0, window_padding, window_padding, window_padding] } } else { [0, 0, 0, 0] @@ -721,7 +724,11 @@ impl ApplicationExt for App { .nav_bar() .map(|nav| id_container(nav, iced_core::id::Id::new("COSMIC_nav_bar"))) { - widgets.push(container(nav).padding([0, 8, 8, 8]).into()); + widgets.push( + container(nav) + .padding([0, window_padding, window_padding, window_padding]) + .into(), + ); true } else { false @@ -753,7 +760,7 @@ impl ApplicationExt for App { }) .apply(container) .padding(if content_container { - [0, 8, 8, 0] + [0, window_padding, window_padding, 0] } else { [0, 0, 0, 0] }) @@ -801,7 +808,7 @@ impl ApplicationExt for App { }) .apply(container) .padding(if content_container { - [0, 8, 8, 0] + [0, window_padding, window_padding, 0] } else { [0, 0, 0, 0] }) @@ -818,10 +825,14 @@ impl ApplicationExt for App { }); let content_col = crate::widget::column::with_capacity(2) .push(content_row) - .push_maybe( - self.footer() - .map(|footer| container(footer.map(Message::App)).padding([0, 8, 8, 8])), - ); + .push_maybe(self.footer().map(|footer| { + container(footer.map(Message::App)).padding([ + 0, + window_padding, + window_padding, + window_padding, + ]) + })); let content: Element<_> = if core.window.content_container { content_col .apply(container) @@ -834,12 +845,19 @@ impl ApplicationExt for App { content_col.into() }; + // Ensures visually aligned radii for content and window edges + let window_corner_radius = crate::theme::active().cosmic().radius_s(); + // TODO: Uncomment when there's a protocol for reporting corner radius + // to the compositor, to properly display the active hint + // .map(|radius| if radius < 4.0 { radius } else { radius + 4.0 }); + let view_column = crate::widget::column::with_capacity(2) .push_maybe(if core.window.show_headerbar { Some({ let mut header = crate::widget::header_bar() .focused(focused) .title(&core.window.header_title) + .horizontal_padding(window_padding) .on_drag(Message::Cosmic(cosmic::Message::Drag)) .on_right_click(Message::Cosmic(cosmic::Message::ShowWindowMenu)) .on_double_click(Message::Cosmic(cosmic::Message::Maximize)); @@ -852,8 +870,7 @@ impl ApplicationExt for App { Message::Cosmic(cosmic::Message::ToggleNavBarCondensed) } else { Message::Cosmic(cosmic::Message::ToggleNavBar) - }) - .class(crate::theme::Button::HeaderBar); + }); header = header.start(toggle); } @@ -888,21 +905,23 @@ impl 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"))) } @@ -926,7 +945,7 @@ impl 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() } diff --git a/src/theme/style/button.rs b/src/theme/style/button.rs index 873a390f0cb..00681e7af9d 100644 --- a/src/theme/style/button.rs +++ b/src/theme/style/button.rs @@ -14,13 +14,13 @@ use crate::{ #[derive(Default)] pub enum Button { AppletIcon, + AppletMenu, Custom { active: Box Style>, disabled: Box Style>, hovered: Box Style>, pressed: Box Style>, }, - AppletMenu, Destructive, HeaderBar, Icon, @@ -30,6 +30,7 @@ pub enum Button { MenuFolder, MenuItem, MenuRoot, + NavToggle, #[default] Standard, Suggested, @@ -72,7 +73,7 @@ pub fn appearance( } } - Button::Icon | Button::IconVertical | Button::HeaderBar => { + Button::Icon | Button::IconVertical | Button::HeaderBar | Button::NavToggle => { if matches!(style, Button::IconVertical) { corner_radii = &cosmic.corner_radii.radius_m; if selected { @@ -81,6 +82,9 @@ pub fn appearance( ))); } } + if matches!(style, Button::NavToggle) { + corner_radii = &cosmic.corner_radii.radius_s; + } let (background, text, icon) = color(&cosmic.icon_button); appearance.background = Some(Background::Color(background)); diff --git a/src/theme/style/iced.rs b/src/theme/style/iced.rs index 1b6a156d556..29da08d2697 100644 --- a/src/theme/style/iced.rs +++ b/src/theme/style/iced.rs @@ -460,6 +460,11 @@ 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 edges + let window_corner_radius = cosmic.radius_s(); + // TODO: Uncomment when there's a protocol for reporting corner radius + // to the compositor, to properly display the active hint + // .map(|radius| if radius < 4.0 { radius } else { radius + 4.0 }); match class { Container::Transparent => iced_container::Style::default(), @@ -474,8 +479,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 +521,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], ] @@ -528,17 +533,7 @@ impl iced_container::Catalog for Theme { } } - Container::ContextDrawer => { - let mut appearance = Container::primary(cosmic); - - appearance.shadow = Shadow { - color: cosmic.shade.into(), - offset: Vector::new(0.0, 0.0), - blur_radius: 16.0, - }; - - appearance - } + Container::ContextDrawer => Container::primary(cosmic), Container::Background => Container::background(cosmic), diff --git a/src/widget/header_bar.rs b/src/widget/header_bar.rs index fd0106032e9..07b2593bdc5 100644 --- a/src/widget/header_bar.rs +++ b/src/widget/header_bar.rs @@ -22,6 +22,7 @@ pub fn header_bar<'a, Message>() -> HeaderBar<'a, Message> { center: Vec::new(), end: Vec::new(), density: None, + horizontal_padding: 8, focused: false, on_double_click: None, } @@ -74,6 +75,9 @@ pub struct HeaderBar<'a, Message> { #[setters(strip_option)] density: Option, + /// Horizontal padding of the headerbar + horizontal_padding: u16, + /// Focused state of the window focused: bool, } @@ -299,7 +303,6 @@ impl<'a, Message: Clone + 'static> HeaderBar<'a, Message> { let mut end = std::mem::take(&mut self.end); // Also packs the window controls at the very end. - end.push(widget::horizontal_space().width(Length::Fixed(12.0)).into()); end.push(self.window_controls()); let height = match self.density.unwrap_or_else(crate::config::header_size) { @@ -343,7 +346,7 @@ impl<'a, Message: Clone + 'static> HeaderBar<'a, Message> { ) .align_y(iced::Alignment::Center) .height(Length::Fixed(height)) - .padding([0, 8]) + .padding([0, self.horizontal_padding]) .spacing(8) .apply(widget::container) .class(crate::theme::Container::HeaderBar { diff --git a/src/widget/nav_bar_toggle.rs b/src/widget/nav_bar_toggle.rs index bd14cf3f69f..1d80706063f 100644 --- a/src/widget/nav_bar_toggle.rs +++ b/src/widget/nav_bar_toggle.rs @@ -20,7 +20,7 @@ pub fn nav_bar_toggle() -> NavBarToggle { NavBarToggle { active: false, on_toggle: None, - class: crate::theme::Button::Text, + class: crate::theme::Button::NavToggle, selected: false, } }