fix: better button sizing so there are no gaps

cosmic-applet-time/src/window.rs

@@ -8,14 +8,14 @@ use cosmic::iced::{
 };
 use cosmic::iced_core::alignment::{Horizontal, Vertical};
 use cosmic::iced_style::application;
-use cosmic::widget::{button, container, divider, grid, Button, Grid, Space};
+use cosmic::widget::{button, container, divider, grid, horizontal_space, Button, Grid, Space};
 use cosmic::{app, applet::cosmic_panel_config::PanelAnchor, Command};
 use cosmic::{
     widget::{icon, rectangle_tracker::*},
     Element, Theme,
 };
 
-use chrono::{DateTime, Datelike, DurationRound, Local, Months, NaiveDate, Timelike, Weekday};
+use chrono::{DateTime, Datelike, DurationRound, Local, Months, NaiveDate, Weekday};
 
 use crate::fl;
 use crate::time::get_calender_first;
@@ -209,36 +209,58 @@ impl cosmic::Application for Window {
     }
 
     fn view(&self) -> Element<Message> {
-        let button = cosmic::widget::button(
+        let horizontal = matches!(
-            if matches!(
+            self.core.applet.anchor,
-                self.core.applet.anchor,
+            PanelAnchor::Top | PanelAnchor::Bottom
-                PanelAnchor::Top | PanelAnchor::Bottom
+        );
-            ) {
+        let button = cosmic::widget::button(if horizontal {
-                Element::from(
+            Element::from(
+                row!(
                     cosmic::widget::text(self.now.format("%b %-d %-I:%M %p").to_string()).size(14),
+                    container(vertical_space(Length::Fixed(
+                        (self.core.applet.suggested_size().1
+                            + 2 * self.core.applet.suggested_padding())
+                            as f32
+                    )))
                 )
-            } else {
+                .align_items(Alignment::Center),
-                let mut date_time_col = column![
+            )
-                    icon::from_name("emoji-recent-symbolic")
+        } else {
-                        .size(self.core.applet.suggested_size().0)
+            let mut date_time_col = column![
-                        .symbolic(true),
+                icon::from_name("emoji-recent-symbolic")
-                    text(self.now.format("%I").to_string()).size(14),
+                    .size(self.core.applet.suggested_size().0)
-                    text(self.now.format("%M").to_string()).size(14),
+                    .symbolic(true),
-                    text(self.now.format("%p").to_string()).size(14),
+                text(self.now.format("%I").to_string()).size(14),
-                    vertical_space(Length::Fixed(4.0)),
+                text(self.now.format("%M").to_string()).size(14),
-                    // TODO better calendar icon?
+                text(self.now.format("%p").to_string()).size(14),
-                    icon::from_name("calendar-go-today-symbolic")
+                vertical_space(Length::Fixed(4.0)),
-                        .size(self.core.applet.suggested_size().0)
+                // TODO better calendar icon?
-                        .symbolic(true),
+                icon::from_name("calendar-go-today-symbolic")
-                ]
+                    .size(self.core.applet.suggested_size().0)
-                .align_items(Alignment::Center)
+                    .symbolic(true),
-                .spacing(4);
+            ]
-                for d in self.now.format("%x").to_string().split('/') {
+            .align_items(Alignment::Center)
-                    date_time_col = date_time_col.push(text(d.to_string()).size(14));
+            .spacing(4);
-                }
+            for d in self.now.format("%x").to_string().split('/') {
-                date_time_col.into()
+                date_time_col = date_time_col.push(text(d.to_string()).size(14));
-            },
+            }
-        )
+            Element::from(
+                column!(
+                    date_time_col,
+                    horizontal_space(Length::Fixed(
+                        (self.core.applet.suggested_size().0
+                            + 2 * self.core.applet.suggested_padding())
+                            as f32
+                    ))
+                )
+                .align_items(Alignment::Center),
+            )
+        })
+        .padding(if horizontal {
+            [0, self.core.applet.suggested_padding()]
+        } else {
+            [self.core.applet.suggested_padding(), 0]
+        })
         .on_press(Message::TogglePopup)
         .style(cosmic::theme::Button::AppletIcon);
 

cosmic-applet-workspaces/src/components/app.rs

@@ -6,6 +6,7 @@ use cosmic::iced::widget::{button, column, container, row, text};
 use cosmic::iced::{Event::Mouse, Length, Subscription};
 use cosmic::iced_core::{Background, Border};
 use cosmic::iced_style::application;
+use cosmic::widget::{horizontal_space, vertical_space};
 use cosmic::{applet::cosmic_panel_config::PanelAnchor, font::FONT_BOLD, Command};
 use cosmic::{Element, Theme};
 
@@ -121,30 +122,41 @@ impl cosmic::Application for IcedWorkspacesApplet {
         if self.workspaces.is_empty() {
             return row![].padding(8).into();
         }
+        let horizontal = matches!(
+            self.core.applet.anchor,
+            PanelAnchor::Top | PanelAnchor::Bottom
+        );
         let buttons = self.workspaces.iter().filter_map(|w| {
-            let btn = button(
+            let content = text(w.0.clone()).font(FONT_BOLD).size(16);
-                text(w.0.clone())
+
-                    .font(FONT_BOLD)
+            let content = row!(
-                    .size(16)
+                content,
-                    .horizontal_alignment(Horizontal::Center)
+                vertical_space(Length::Fixed(
-                    .vertical_alignment(Vertical::Center)
+                    (self.core.applet.suggested_size().1 + 2 * self.core.applet.suggested_padding())
-                    .width(Length::Fill)
+                        as f32
-                    .height(Length::Fill),
+                ))
             )
-            .width(Length::Fixed(
+            .align_items(cosmic::iced::Alignment::Center);
-                self.core.applet.suggested_size().0 as f32
+
-                    + match self.layout {
+            let content = column!(
-                        Layout::Row => 20.0,
+                content,
-                        Layout::Column => 16.0,
+                horizontal_space(Length::Fixed(
-                    },
+                    (self.core.applet.suggested_size().0 + 2 * self.core.applet.suggested_padding())
-            ))
+                        as f32
-            .height(Length::Fixed(
+                ))
-                self.core.applet.suggested_size().0 as f32
+            )
-                    + match self.layout {
+            .align_items(cosmic::iced::Alignment::Center);
-                        Layout::Row => 16.0,
+
-                        Layout::Column => 20.0,
+            let btn = button(
-                    },
+                container(content)
-            ))
+                    .align_x(Horizontal::Center)
+                    .align_y(Vertical::Center),
+            )
+            .padding(if horizontal {
+                [0, self.core.applet.suggested_padding()]
+            } else {
+                [self.core.applet.suggested_padding(), 0]
+            })
             .on_press(Message::WorkspacePressed(w.2.clone()))
             .padding(0);
 
@@ -217,25 +229,11 @@ impl cosmic::Application for IcedWorkspacesApplet {
             )
         });
         let layout_section: Element<_> = match self.layout {
-            Layout::Row => row(buttons)
+            Layout::Row => row(buttons).spacing(4).into(),
-                .width(Length::Shrink)
+            Layout::Column => column(buttons).spacing(4).into(),
-                .height(Length::Shrink)
-                .padding([0, 4])
-                .spacing(4)
-                .into(),
-            Layout::Column => column(buttons)
-                .width(Length::Shrink)
-                .height(Length::Shrink)
-                .padding([4, 0])
-                .spacing(4)
-                .into(),
         };
 
-        container(layout_section)
+        container(layout_section).padding(0).into()
-            .width(Length::Shrink)
-            .height(Length::Shrink)
-            .padding(0)
-            .into()
     }
 
     fn subscription(&self) -> Subscription<Message> {

cosmic-panel-button/src/main.rs

@@ -1,4 +1,7 @@
-use cosmic::iced_widget::text;
+use cosmic::applet::cosmic_panel_config::PanelAnchor;
+use cosmic::iced::Length;
+use cosmic::iced_widget::{row, text};
+use cosmic::widget::vertical_space;
 use cosmic::{app, iced, iced_style::application, theme::Theme};
 use freedesktop_desktop_entry::DesktopEntry;
 use std::{env, fs, process::Command};
@@ -52,10 +55,29 @@ impl cosmic::Application for Button {
     }
 
     fn view(&self) -> cosmic::Element<Msg> {
-        cosmic::widget::button(text(&self.desktop.name).size(14.0))
+        if matches!(
-            .style(cosmic::theme::Button::AppletIcon)
+            self.core.applet.anchor,
-            .on_press(Msg::Press)
+            PanelAnchor::Left | PanelAnchor::Right
-            .into()
+        ) && self.desktop.icon.is_some()
+        {
+            self.core
+                .applet
+                .icon_button(self.desktop.icon.as_ref().unwrap())
+        } else {
+            let content = row!(
+                text(&self.desktop.name).size(14.0),
+                vertical_space(Length::Fixed(
+                    (self.core.applet.suggested_size().1 + 2 * self.core.applet.suggested_padding())
+                        as f32
+                ))
+            )
+            .align_items(iced::Alignment::Center);
+            cosmic::widget::button(content)
+                .padding([0, self.core.applet.suggested_padding()])
+                .style(cosmic::theme::Button::AppletIcon)
+        }
+        .on_press(Msg::Press)
+        .into()
     }
 }