Align interface closer to designs

Makefile

@@ -1,4 +1,4 @@
-prefix ?= /usr/local
+prefix ?= /usr
 bindir = $(prefix)/bin
 libdir = $(prefix)/lib
 includedir = $(prefix)/include

i18n/en/cosmic_workspaces.ftl

@@ -1 +1,2 @@
+workspace = Workspace { $number }
 new-workspace = New Workspace

i18n/sr-Cyrl/cosmic_workspaces.ftl

@@ -1 +1,2 @@
+workspace = Радни простор { $number }
 new-workspace = Нови радни простор

i18n/sr-Latn/cosmic_workspaces.ftl

@@ -1 +1,2 @@
+workspace = Radni prostor { $number }
 new-workspace = Novi radni prostor

src/main.rs

@@ -658,7 +658,6 @@ impl Application for App {
     }
 
     fn view_window(&self, id: iced::window::Id) -> cosmic::prelude::Element<Self::Message> {
-        use iced::widget::*;
         if let Some(surface) = self.layer_surfaces.get(&id) {
             return view::layer_surface(self, surface);
         }
@@ -670,7 +669,7 @@ impl Application for App {
             }
         }
         log::info!("NO VIEW");
-        text("workspaces").into()
+        widget::text("workspaces").into()
     }
 
     fn on_close_requested(&self, _id: SurfaceId) -> Option<Msg> {

src/view/mod.rs

@@ -1,3 +1,5 @@
+use std::collections::HashMap;
+
 use cctk::{
     cosmic_protocols::toplevel_info::v1::client::zcosmic_toplevel_handle_v1,
     wayland_client::protocol::wl_output,
@@ -10,7 +12,7 @@ use cosmic::{
         widget::{column, row},
         Border, Size,
     },
-    iced_core::Shadow,
+    iced_core::{text::Wrap, Shadow},
     iced_sctk::subsurface_widget::Subsurface,
     widget,
 };
@@ -126,9 +128,13 @@ fn workspace_item_appearance(
 ) -> cosmic::widget::button::Appearance {
     let cosmic = theme.cosmic();
     let mut appearance = cosmic::widget::button::Appearance::new();
-    appearance.border_radius = cosmic.corner_radii.radius_s.into();
+    appearance.border_radius = cosmic
+        .corner_radii
+        .radius_s
+        .map(|x| if x < 4.0 { x } else { x + 4.0 })
+        .into();
     if is_active {
-        appearance.border_width = 2.0;
+        appearance.border_width = 4.0;
         appearance.border_color = cosmic.accent.base.into();
     }
     if hovered {
@@ -144,28 +150,30 @@ fn workspace_item<'a>(
 ) -> cosmic::Element<'a, Msg> {
     let image = capture_image(workspace.img_for_output.get(output), 1.0);
     let is_active = workspace.is_active;
-    column![
-        // TODO editable name?
-        widget::button(column![image, widget::text(&workspace.name)])
-            .selected(workspace.is_active)
-            .style(cosmic::theme::Button::Custom {
-                active: Box::new(move |_focused, theme| workspace_item_appearance(
-                    theme,
-                    is_active,
-                    is_drop_target
-                )),
-                disabled: Box::new(|_theme| { unreachable!() }),
-                hovered: Box::new(move |_focused, theme| workspace_item_appearance(
-                    theme, is_active, true
-                )),
-                pressed: Box::new(move |_focused, theme| workspace_item_appearance(
-                    theme, is_active, true
-                )),
-            })
-            .on_press(Msg::ActivateWorkspace(workspace.handle.clone())),
-    ]
-    .spacing(4)
-    //.height(iced::Length::Fill)
+    // TODO editable name?
+    widget::button(
+        column![
+            image,
+            widget::text::body(fl!(
+                "workspace",
+                HashMap::from([("number", &workspace.name)])
+            ))
+        ]
+        .align_items(iced::Alignment::Center)
+        .spacing(4),
+    )
+    .selected(workspace.is_active)
+    .style(cosmic::theme::Button::Custom {
+        active: Box::new(move |_focused, theme| {
+            workspace_item_appearance(theme, is_active, is_drop_target)
+        }),
+        disabled: Box::new(|_theme| unreachable!()),
+        hovered: Box::new(move |_focused, theme| workspace_item_appearance(theme, is_active, true)),
+        pressed: Box::new(move |_focused, theme| workspace_item_appearance(theme, is_active, true)),
+    })
+    .on_press(Msg::ActivateWorkspace(workspace.handle.clone()))
+    .padding(8)
+    .width(iced::Length::Fixed(240.0))
     .into()
 }
 
@@ -226,34 +234,10 @@ fn workspaces_sidebar<'a>(
         WorkspaceLayout::Horizontal => Axis::Horizontal,
     };
     let sidebar_entries_container =
-        widget::container(crate::widgets::workspace_bar(sidebar_entries, axis)).padding(12.0);
-    /*
-    let new_workspace_button = widget::button(
-        widget::container(row![
-            widget::icon::from_name("list-add-symbolic").symbolic(true),
-            widget::text(fl!("new-workspace"))
-        ])
-        .width(iced::Length::Fill)
-        .align_x(iced::alignment::Horizontal::Center),
-    )
-    .on_press(Msg::NewWorkspace)
-    .width(iced::Length::Fill);
-    let bar: cosmic::Element<_> = if amount != WorkspaceAmount::Dynamic {
-        match layout {
-            WorkspaceLayout::Vertical => {
-                column![sidebar_entries_container, new_workspace_button,].into()
-            }
-            WorkspaceLayout::Horizontal => {
-                row![sidebar_entries_container, new_workspace_button,].into()
-            }
-        }
-    } else {
-        sidebar_entries_container.into()
-    };
-    */
-    // Shrink?
+        widget::container(crate::widgets::workspace_bar(sidebar_entries, axis)).padding(8.0);
+
     let (width, height) = match layout {
-        WorkspaceLayout::Vertical => (iced::Length::Fill, iced::Length::Shrink),
+        WorkspaceLayout::Vertical => (iced::Length::Fixed(256.0), iced::Length::Shrink),
         WorkspaceLayout::Horizontal => (iced::Length::Shrink, iced::Length::Fill),
     };
     widget::container(
@@ -266,32 +250,71 @@ fn workspaces_sidebar<'a>(
                     icon_color: Some(theme.cosmic().on_bg_color().into()),
                     background: Some(iced::Color::from(theme.cosmic().background.base).into()),
                     border: Border {
-                        radius: (12.0).into(),
-                        width: 0.0,
-                        color: iced::Color::TRANSPARENT,
+                        radius: theme
+                            .cosmic()
+                            .radius_s()
+                            .map(|x| if x < 4.0 { x } else { x + 8.0 })
+                            .into(),
+                        ..Default::default()
                     },
                     shadow: Shadow::default(),
                 }
             })),
     )
-    .width(width)
-    .height(height)
-    .padding(24.0)
+    .padding(8)
     .into()
 }
 
 fn toplevel_preview(toplevel: &Toplevel, is_being_dragged: bool) -> cosmic::Element<Msg> {
-    let label = widget::text(&toplevel.info.title);
+    let cosmic::cosmic_theme::Spacing {
+        space_xxs, space_s, ..
+    } = cosmic::theme::active().cosmic().spacing;
+
+    let label = widget::text::body(if toplevel.info.title.len() > 40 {
+        format!("{:.38}...", &toplevel.info.title)
+    } else {
+        toplevel.info.title.clone()
+    })
+    .wrap(Wrap::None);
     let label = if let Some(icon) = &toplevel.icon {
-        row![widget::icon(widget::icon::from_path(icon.clone())), label].spacing(4)
+        row![
+            widget::icon(widget::icon::from_path(icon.clone())).size(24),
+            label
+        ]
+        .spacing(4)
     } else {
         row![label]
     }
-    .padding(4);
+    .align_items(iced::Alignment::Center)
+    .padding([space_xxs, space_s]);
     let alpha = if is_being_dragged { 0.5 } else { 1.0 };
     crate::widgets::toplevel_item(
         vec![
-            close_button(Msg::CloseToplevel(toplevel.handle.clone())),
+            row![
+                widget::container(
+                    widget::button(label)
+                        .on_press(Msg::ActivateToplevel(toplevel.handle.clone()))
+                        .style(cosmic::theme::Button::Icon)
+                        .padding(0),
+                )
+                .style(cosmic::theme::Container::custom(|theme| {
+                    cosmic::iced_style::container::Appearance {
+                        background: Some(
+                            iced::Color::from(theme.cosmic().background.component.base).into(),
+                        ),
+                        border: Border {
+                            color: theme.cosmic().bg_divider().into(),
+                            width: 1.0,
+                            radius: theme.cosmic().radius_xl().into(),
+                        },
+                        ..Default::default()
+                    }
+                })),
+                close_button(Msg::CloseToplevel(toplevel.handle.clone()))
+            ]
+            .padding([0, 0, 4, 0])
+            .align_items(iced::Alignment::Center)
+            .into(),
             widget::button(capture_image(toplevel.img.as_ref(), alpha))
                 .selected(
                     toplevel
@@ -302,9 +325,6 @@ fn toplevel_preview(toplevel: &Toplevel, is_being_dragged: bool) -> cosmic::Elem
                 .style(cosmic::theme::Button::Image)
                 .on_press(Msg::ActivateToplevel(toplevel.handle.clone()))
                 .into(),
-            widget::button(label)
-                .on_press(Msg::ActivateToplevel(toplevel.handle.clone()))
-                .into(),
         ],
         Axis::Vertical,
     )

src/widgets/workspace_bar.rs

@@ -1,5 +1,5 @@
 // Custom varian of row/column
-// Gives each child widget a maximim size on main axis of total/n
+// Gives each child widget a maximum size on main axis of total/n
 
 use cosmic::iced::{
     advanced::{