feat: allow configuring terminal pane borders

Author: bgub

i18n/en/cosmic_term.ftl

@@ -58,6 +58,7 @@ use-bright-bold = Make bold text brighter
 ### Splits
 splits = Splits
 focus-follow-mouse = Typing focus follows mouse
+show-pane-borders = Show pane borders
 
 ### Advanced
 advanced = Advanced

src/config.rs

@@ -231,6 +231,7 @@ pub struct Config {
     pub opacity: u8,
     pub profiles: BTreeMap<ProfileId, Profile>,
     pub show_headerbar: bool,
+    pub show_pane_borders: bool,
     pub use_bright_bold: bool,
     pub syntax_theme_dark: String,
     pub syntax_theme_light: String,
@@ -257,6 +258,7 @@ impl Default for Config {
             opacity: 100,
             profiles: BTreeMap::new(),
             show_headerbar: true,
+            show_pane_borders: false,
             syntax_theme_dark: COSMIC_THEME_DARK.to_string(),
             syntax_theme_light: COSMIC_THEME_LIGHT.to_string(),
             use_bright_bold: false,

src/main.rs

@@ -429,6 +429,7 @@ pub enum Message {
     SelectAll(Option<segmented_button::Entity>),
     ShowAdvancedFontSettings(bool),
     ShowHeaderBar(bool),
+    ShowPaneBorders(bool),
     SyntaxTheme(ColorSchemeKind, usize),
     SystemThemeChange,
     TabActivate(segmented_button::Entity),
@@ -1478,10 +1479,16 @@ impl App {
             font_section = font_section.add(advanced_font_settings());
         }
 
-        let splits_section = widget::settings::section().title(fl!("splits")).add(
-            widget::settings::item::builder(fl!("focus-follow-mouse"))
-                .toggler(self.config.focus_follow_mouse, Message::FocusFollowMouse),
-        );
+        let splits_section = widget::settings::section()
+            .title(fl!("splits"))
+            .add(
+                widget::settings::item::builder(fl!("focus-follow-mouse"))
+                    .toggler(self.config.focus_follow_mouse, Message::FocusFollowMouse),
+            )
+            .add(
+                widget::settings::item::builder(fl!("show-pane-borders"))
+                    .toggler(self.config.show_pane_borders, Message::ShowPaneBorders),
+            );
 
         let advanced_section = widget::settings::section().title(fl!("advanced")).add(
             widget::settings::item::builder(fl!("show-headerbar"))
@@ -2720,6 +2727,11 @@ impl Application for App {
                     return self.update_config();
                 }
             }
+            Message::ShowPaneBorders(show_pane_borders) => {
+                if show_pane_borders != self.config.show_pane_borders {
+                    config_set!(show_pane_borders, show_pane_borders);
+                }
+            }
             Message::UseBrightBold(use_bright_bold) => {
                 if use_bright_bold != self.config.use_bright_bold {
                     config_set!(use_bright_bold, use_bright_bold);
@@ -3248,8 +3260,22 @@ impl Application for App {
 
     /// Creates a view after each update.
     fn view(&self) -> Element<'_, Self::Message> {
-        let cosmic_theme::Spacing { space_xxs, .. } = self.core().system_theme().cosmic().spacing;
-
+        let cosmic = self.core().system_theme().cosmic();
+        let cosmic_theme::Spacing {
+            space_xxxs,
+            space_xxs,
+            ..
+        } = cosmic.spacing;
+
+        let show_pane_borders =
+            self.config.show_pane_borders && self.pane_model.panes.panes.len() > 1;
+        let pane_corner_radius: iced::border::Radius = {
+            let pad = f32::from(space_xxxs) / 2.0;
+            cosmic
+                .radius_s()
+                .map(|r| if r > 0.0 { r + pad } else { 0.0 })
+                .into()
+        };
         let pane_grid = PaneGrid::new(&self.pane_model.panes, |pane, tab_model, _is_maximized| {
             let mut tab_column = widget::column::with_capacity(1);
 
@@ -3301,7 +3327,8 @@ impl Application for App {
                     .opacity(self.config.opacity_ratio())
                     .padding(space_xxs)
                     .sharp_corners(self.core.window.sharp_corners)
-                    .show_headerbar(self.config.show_headerbar);
+                    .show_headerbar(self.config.show_headerbar)
+                    .pane_border_radius(show_pane_borders.then_some(pane_corner_radius));
 
                 if self.config.focus_follow_mouse {
                     terminal_box = terminal_box.on_mouse_enter(move || Message::MouseEnter(pane));
@@ -3412,7 +3439,21 @@ impl Application for App {
         .on_drag(Message::PaneDragged);
 
         //TODO: apply window border radius xs at bottom of window
-        pane_grid.into()
+        if show_pane_borders {
+            let bg_divider = Color::from(cosmic.bg_divider());
+            let pane_grid = pane_grid.spacing(space_xxxs);
+            widget::container(pane_grid)
+                .width(Length::Fill)
+                .height(Length::Fill)
+                .padding(space_xxxs)
+                .style(move |_theme| widget::container::Style {
+                    background: Some(bg_divider.into()),
+                    ..Default::default()
+                })
+                .into()
+        } else {
+            pane_grid.into()
+        }
     }
 
     fn system_theme_update(

src/terminal_box.rs

@@ -19,7 +19,7 @@ use cosmic::{
         window::RedrawRequest,
     },
     iced_core::{
-        Border, Shell,
+        Border, Shell, border::Radius,
         clipboard::Clipboard,
         keyboard::key::Named,
         layout::{self, Layout},
@@ -112,6 +112,7 @@ pub struct TerminalBox<'a, Message> {
     border: Border,
     padding: Padding,
     show_headerbar: bool,
+    pane_border_radius: Option<Radius>,
     click_timing: Duration,
     context_menu: Option<Point>,
     on_context_menu: Option<Box<dyn Fn(Option<MenuState>) -> Message + 'a>>,
@@ -138,6 +139,7 @@ where
             border: Border::default(),
             padding: Padding::new(0.0),
             show_headerbar: true,
+            pane_border_radius: None,
             click_timing: Duration::from_millis(500),
             context_menu: None,
             on_context_menu: None,
@@ -174,6 +176,11 @@ where
         self
     }
 
+    pub fn pane_border_radius(mut self, pane_border_radius: Option<Radius>) -> Self {
+        self.pane_border_radius = pane_border_radius;
+        self
+    }
+
     pub fn click_timing(mut self, click_timing: Duration) -> Self {
         self.click_timing = click_timing;
         self
@@ -369,13 +376,22 @@ where
         let state = tree.state.downcast_ref::<State>();
 
         let cosmic_theme = theme.cosmic();
-        // matches the corners to the window border
-        let corner_radius = if self.sharp_corners {
+        let corner_radius = if let Some(r) = self.pane_border_radius {
+            r.into()
+        } else if self.sharp_corners {
+            // matches the corners to the window border
             cosmic_theme.radius_0()
         } else {
-            cosmic_theme.radius_s()
-        }
-        .map(|x| if x < 4.0 { x - 1.0 } else { x + 3.0 });
+            cosmic_theme
+                .radius_s()
+                .map(|x| if x < 4.0 { x - 1.0 } else { x + 3.0 })
+        };
+        // When there's a headerbar and no pane border, only round the bottom corners
+        let border_radius: Radius = if self.show_headerbar && self.pane_border_radius.is_none() {
+            [0.0, 0.0, corner_radius[2], corner_radius[3]].into()
+        } else {
+            corner_radius.into()
+        };
         let scrollbar_w = f32::from(cosmic_theme.spacing.space_xxs);
 
         let view_position = layout.position() + [self.padding.left, self.padding.top].into();
@@ -394,11 +410,7 @@ where
                 Quad {
                     bounds: layout.bounds(),
                     border: Border {
-                        radius: if self.show_headerbar {
-                            [0.0, 0.0, corner_radius[2], corner_radius[3]].into()
-                        } else {
-                            corner_radius.into()
-                        },
+                        radius: border_radius,
                         width: self.border.width,
                         color: self.border.color,
                     },
@@ -438,11 +450,7 @@ where
                 Quad {
                     bounds: layout.bounds(),
                     border: Border {
-                        radius: if self.show_headerbar {
-                            [0.0, 0.0, corner_radius[2], corner_radius[3]].into()
-                        } else {
-                            corner_radius.into()
-                        },
+                        radius: border_radius,
                         width: self.border.width,
                         color: self.border.color,
                     },