workspaces: Cleaner design

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

@@ -1,8 +1,11 @@
 use cctk::sctk::reexports::{calloop::channel::SyncSender, client::backend::ObjectId};
 use cosmic::iced::alignment::{Horizontal, Vertical};
 use cosmic::iced::mouse::{self, ScrollDelta};
-use cosmic::iced::widget::{column, container, row, text};
+use cosmic::iced::widget::{button, column, container, row, text};
-use cosmic::iced::{subscription, widget::button, Event::Mouse, Length, Subscription};
+use cosmic::iced::{subscription, Event::Mouse, Length, Subscription};
+use cosmic::iced_core::{font, Background};
+use cosmic::iced_runtime::font::Family;
+use cosmic::iced_runtime::Font;
 use cosmic::iced_style::application;
 use cosmic::{applet::cosmic_panel_config::PanelAnchor, Command};
 use cosmic::{Element, Theme};
@@ -127,29 +130,80 @@ impl cosmic::Application for IcedWorkspacesApplet {
             .filter_map(|w| {
                 let btn = button(
                     text(w.0.clone())
-                        .size(14)
+                        .font(Font {
+                            family: Family::Name("Fira Sans"),
+                            weight: if w.1 == Some(zcosmic_workspace_handle_v1::State::Active) {
+                                font::Weight::Bold
+                            } else {
+                                font::Weight::Normal
+                            },
+                            stretch: font::Stretch::Normal,
+                            monospaced: false,
+                        })
+                        .size(16)
                         .horizontal_alignment(Horizontal::Center)
                         .vertical_alignment(Vertical::Center)
                         .width(Length::Fill)
                         .height(Length::Fill),
                 )
                 .width(Length::Fixed(
-                    self.core.applet.suggested_size().0 as f32 + 16.0,
+                    self.core.applet.suggested_size().0 as f32
+                        + match self.layout {
+                            Layout::Row => 20.0,
+                            Layout::Column => 16.0,
+                        },
                 ))
                 .height(Length::Fixed(
-                    self.core.applet.suggested_size().0 as f32 + 16.0,
+                    self.core.applet.suggested_size().0 as f32
+                        + match self.layout {
+                            Layout::Row => 16.0,
+                            Layout::Column => 20.0,
+                        },
                 ))
                 .on_press(Message::WorkspacePressed(w.2.clone()))
                 .padding(0);
+
                 Some(
                     btn.style(match w.1 {
                         Some(zcosmic_workspace_handle_v1::State::Active) => {
                             cosmic::theme::iced::Button::Primary
                         }
                         Some(zcosmic_workspace_handle_v1::State::Urgent) => {
-                            cosmic::theme::iced::Button::Destructive
+                            let appearence = |theme: &Theme| button::Appearance {
+                                background: Some(Background::Color(
+                                    theme.cosmic().palette.neutral_3.into(),
+                                )),
+                                border_radius: theme.cosmic().radius_xl().into(),
+                                text_color: theme.cosmic().destructive_button.base.into(),
+                                ..button::Appearance::default()
+                            };
+                            cosmic::theme::iced::Button::Custom {
+                                active: Box::new(move |theme| appearence(theme)),
+                                hover: Box::new(move |theme| button::Appearance {
+                                    background: Some(Background::Color(
+                                        theme.current_container().component.hover.into(),
+                                    )),
+                                    ..appearence(theme)
+                                }),
+                            }
+                        }
+                        None => {
+                            let appearence = |theme: &Theme| button::Appearance {
+                                background: None,
+                                border_radius: theme.cosmic().radius_xl().into(),
+                                text_color: theme.current_container().component.on.into(),
+                                ..button::Appearance::default()
+                            };
+                            cosmic::theme::iced::Button::Custom {
+                                active: Box::new(move |theme| appearence(theme)),
+                                hover: Box::new(move |theme| button::Appearance {
+                                    background: Some(Background::Color(
+                                        theme.current_container().component.hover.into(),
+                                    )),
+                                    ..appearence(theme)
+                                }),
+                            }
                         }
-                        None => cosmic::theme::iced::Button::Secondary,
                         _ => return None,
                     })
                     .into(),
@@ -160,12 +214,14 @@ impl cosmic::Application for IcedWorkspacesApplet {
             Layout::Row => row(buttons)
                 .width(Length::Shrink)
                 .height(Length::Shrink)
-                .padding(0)
+                .padding([0, 4])
+                .spacing(4)
                 .into(),
             Layout::Column => column(buttons)
                 .width(Length::Shrink)
                 .height(Length::Shrink)
-                .padding(0)
+                .padding([4, 0])
+                .spacing(4)
                 .into(),
         };