improv(appearance): place import/export buttons in header

app/src/app.rs

@@ -20,6 +20,7 @@ use crate::PageCommands;
 use cosmic::app::DbusActivationMessage;
 use cosmic::dialog::file_chooser;
 use cosmic::iced::Subscription;
+use cosmic::widget::row;
 use cosmic::{
     app::{Command, Core},
     cosmic_config::config_subscription,
@@ -682,15 +683,26 @@ impl SettingsApp {
 
     /// Displays the view of a page.
     fn page_view(&self, content: &[section::Entity]) -> cosmic::Element<Message> {
-        let page = &self.pages.info[self.active_page];
+        let page = &self.pages.page[self.active_page];
+        let page_info = &self.pages.info[self.active_page];
         let mut column_widgets = Vec::with_capacity(1);
 
-        if let Some(parent) = page.parent {
+        if let Some(parent) = page_info.parent {
-            column_widgets.push(crate::widget::sub_page_header(
+            let page_header = crate::widget::sub_page_header(
-                page.title.as_str(),
+                page_info.title.as_str(),
                 self.pages.info[parent].title.as_str(),
                 Message::Page(parent),
-            ));
+            );
+
+            let mut page_header_content = row::with_capacity(2)
+                .align_items(iced::Alignment::End)
+                .push(page_header);
+
+            if let Some(element) = page.header_view() {
+                page_header_content = page_header_content.push(element.map(Message::from));
+            }
+
+            column_widgets.push(page_header_content.into());
         }
 
         column_widgets.reserve_exact(1 + content.len());

app/src/pages/desktop/appearance.rs

@@ -9,15 +9,14 @@ use cosmic::cosmic_config::{Config, ConfigSet, CosmicConfigEntry};
 use cosmic::cosmic_theme::palette::{FromColor, Hsv, Srgb, Srgba};
 use cosmic::cosmic_theme::{CornerRadii, Theme, ThemeBuilder, ThemeMode};
 use cosmic::iced::wayland::actions::window::SctkWindowSettings;
-use cosmic::iced::widget::{column, row};
 use cosmic::iced::window;
-use cosmic::iced_core::{layout, Color, Length};
+use cosmic::iced_core::{alignment, layout, Alignment, Color, Length};
 use cosmic::iced_sctk::commands::window::{close_window, get_window};
 use cosmic::iced_widget::scrollable;
 use cosmic::widget::icon::{from_name, icon};
 use cosmic::widget::{
-    button, color_picker::ColorPickerUpdate, container, header_bar, horizontal_space, settings,
+    button, color_picker::ColorPickerUpdate, container, header_bar, horizontal_space, row,
-    spin_button, text, ColorPickerModel,
+    settings, spin_button, text, ColorPickerModel,
 };
 use cosmic::{command, Command, Element};
 use cosmic_settings_desktop::wallpaper;
@@ -885,7 +884,7 @@ impl Page {
             }
             None => return text("OOPS!").into(),
         };
-        column![
+        cosmic::iced::widget::column![
             header_bar()
                 .title(fl!("color-picker"))
                 .on_close(msg(ColorPickerUpdate::AppliedColor))
@@ -922,7 +921,6 @@ impl page::Page<crate::pages::Message> for Page {
         sections: &mut SlotMap<section::Entity, Section<crate::pages::Message>>,
     ) -> Option<page::Content> {
         Some(vec![
-            sections.insert(import_export()),
             sections.insert(mode_and_colors()),
             sections.insert(style()),
             sections.insert(window_management()),
@@ -930,6 +928,29 @@ impl page::Page<crate::pages::Message> for Page {
         ])
     }
 
+    fn header_view(&self) -> Option<Element<'_, crate::pages::Message>> {
+        let spacing = self.theme_builder.spacing;
+        let content = row::with_capacity(2)
+            .spacing(self.theme_builder.spacing.space_xxs)
+            .push(
+                button(text(fl!("import")))
+                    .on_press(Message::StartImport)
+                    .padding([spacing.space_xxs, spacing.space_xs]),
+            )
+            .push(
+                button(text(fl!("export")))
+                    .on_press(Message::StartExport)
+                    .padding([spacing.space_xxs, spacing.space_xs]),
+            )
+            .apply(container)
+            .width(Length::Fill)
+            .align_x(alignment::Horizontal::Right)
+            .apply(Element::from)
+            .map(crate::pages::Message::Appearance);
+
+        Some(content)
+    }
+
     fn info(&self) -> page::Info {
         page::Info::new("appearance", "preferences-pop-desktop-appearance-symbolic")
             .title(fl!("appearance"))
@@ -948,7 +969,7 @@ impl page::Page<crate::pages::Message> for Page {
 
     fn context_drawer(&self) -> Option<Element<'_, crate::pages::Message>> {
         Some(
-            column![
+            cosmic::iced::widget::column![
                 text(fl!("container-background", "desc-detail")).width(Length::Fill),
                 self.container_background
                     .builder(Message::ContainerBackground)
@@ -970,30 +991,6 @@ impl page::Page<crate::pages::Message> for Page {
     }
 }
 
-fn import_export() -> Section<crate::pages::Message> {
-    Section::default()
-        .descriptions(vec![fl!("import"), fl!("export")])
-        .view::<Page>(|_binder, page, section| {
-            let spacing = &page.theme_builder.spacing;
-            let descriptions = &section.descriptions;
-            container(
-                row![
-                    button(text(&descriptions[0]))
-                        .on_press(Message::StartImport)
-                        .padding([spacing.space_xxs, spacing.space_xs]),
-                    button(text(&descriptions[1]))
-                        .on_press(Message::StartExport)
-                        .padding([spacing.space_xxs, spacing.space_xs])
-                ]
-                .spacing(8.0),
-            )
-            .width(Length::Fill)
-            .align_x(cosmic::iced_core::alignment::Horizontal::Right)
-            .apply(Element::from)
-            .map(crate::pages::Message::Appearance)
-        })
-}
-
 #[allow(clippy::too_many_lines)]
 pub fn mode_and_colors() -> Section<crate::pages::Message> {
     Section::default()
@@ -1034,8 +1031,8 @@ pub fn mode_and_colors() -> Section<crate::pages::Message> {
             let mut section = settings::view_section(&section.title)
                 .add(
                     container(
-                        row![
+                        cosmic::iced::widget::row![
-                            column![
+                            cosmic::iced::widget::column![
                                 button(
                                     icon(from_name("illustration-appearance-mode-dark").into(),)
                                         .width(Length::Fill)
@@ -1050,7 +1047,7 @@ pub fn mode_and_colors() -> Section<crate::pages::Message> {
                             .spacing(8)
                             .width(Length::FillPortion(1))
                             .align_items(cosmic::iced_core::Alignment::Center),
-                            column![
+                            cosmic::iced::widget::column![
                                 button(
                                     icon(from_name("illustration-appearance-mode-light").into(),)
                                         .width(Length::Fill)
@@ -1079,10 +1076,10 @@ pub fn mode_and_colors() -> Section<crate::pages::Message> {
                         .toggler(page.theme_mode.auto_switch, Message::Autoswitch),
                 )
                 .add(
-                    column![
+                    cosmic::iced::widget::column![
                         text(&descriptions[2]),
                         scrollable(
-                            row![
+                            cosmic::iced::widget::row![
                                 color_button(
                                     Some(Message::PaletteAccent(palette.accent_blue.into())),
                                     palette.accent_blue.into(),
@@ -1265,8 +1262,8 @@ pub fn style() -> Section<crate::pages::Message> {
             settings::view_section(&section.title)
                 .add(
                     container(
-                        row![
+                        cosmic::iced::widget::row![
-                            column![
+                            cosmic::iced::widget::column![
                                 button(
                                     icon(
                                         from_name(if page.theme_mode.is_dark {
@@ -1288,7 +1285,7 @@ pub fn style() -> Section<crate::pages::Message> {
                             .spacing(8)
                             .width(Length::FillPortion(1))
                             .align_items(cosmic::iced_core::Alignment::Center),
-                            column![
+                            cosmic::iced::widget::column![
                                 button(
                                     icon(
                                         from_name(if page.theme_mode.is_dark {
@@ -1310,7 +1307,7 @@ pub fn style() -> Section<crate::pages::Message> {
                             .spacing(8)
                             .width(Length::FillPortion(1))
                             .align_items(cosmic::iced_core::Alignment::Center),
-                            column![
+                            cosmic::iced::widget::column![
                                 button(
                                     icon(
                                         from_name(if page.theme_mode.is_dark {
@@ -1388,7 +1385,7 @@ pub fn reset_button() -> Section<crate::pages::Message> {
             let spacing = &page.theme_builder.spacing;
             let descriptions = &section.descriptions;
             if page.can_reset {
-                row![button(text(&descriptions[0]))
+                cosmic::iced::widget::row![button(text(&descriptions[0]))
                     .on_press(Message::Reset)
                     .padding([spacing.space_xxs, spacing.space_xs])]
                 .apply(Element::from)

app/src/pages/mod.rs

@@ -27,3 +27,9 @@ pub enum Message {
     Panel(desktop::panel::Message),
     PanelApplet(desktop::panel::applets_inner::Message),
 }
+
+impl From<Message> for crate::Message {
+    fn from(message: Message) -> Self {
+        crate::Message::PageMessage(message)
+    }
+}

app/src/widget/mod.rs

@@ -117,13 +117,12 @@ pub fn sub_page_header<'a, Message: 'static + Clone>(
         .style(button::Style::Link)
         .on_press(on_press);
 
-    let sub_page_header = row::with_capacity(2)
+    let sub_page_header = row::with_capacity(2).push(text::title3(sub_page));
-        .push(text::title3(sub_page))
-        .push(horizontal_space(Length::Fill));
 
     column::with_capacity(2)
         .push(previous_button)
         .push(sub_page_header)
         .spacing(6)
+        .width(Length::Shrink)
         .into()
 }

page/src/lib.rs

@@ -46,6 +46,10 @@ pub trait Page<Message: 'static>: Downcast {
         Command::none()
     }
 
+    fn header_view(&self) -> Option<Element<'_, Message>> {
+        None
+    }
+
     #[must_use]
     #[allow(unused)]
     fn reload(&mut self, page: crate::Entity) -> Command<Message> {