Simplify nav button and add pick list

examples/cosmic/src/main.rs

@@ -1,20 +1,26 @@
 use cosmic::{
     widget::{
         button,
-        icon,
         list_item,
         list_row,
         list_section,
         list_view,
         nav_bar,
+        nav_button,
         toggler,
     },
     settings,
     iced::{theme, Alignment, Color, Element, Length, Sandbox, Theme},
     iced::widget::{
-        checkbox, container, horizontal_space, progress_bar, radio,
+        checkbox,
-        row, slider, text,
+        container,
-        vertical_space,
+        horizontal_space,
+        pick_list,
+        progress_bar,
+        radio,
+        row,
+        slider,
+        text,
     },
 };
 
@@ -31,6 +37,7 @@ struct Window {
     slider_value: f32,
     checkbox_value: bool,
     toggler_value: bool,
+    pick_list_selected: Option<&'static str>,
 }
 
 #[derive(Debug, Clone)]
@@ -42,6 +49,7 @@ enum Message {
     SliderChanged(f32),
     CheckboxToggled(bool),
     TogglerToggled(bool),
+    PickListSelected(&'static str),
 }
 
 impl Sandbox for Window {
@@ -66,37 +74,24 @@ impl Sandbox for Window {
             Message::SliderChanged(value) => self.slider_value = value,
             Message::CheckboxToggled(value) => self.checkbox_value = value,
             Message::TogglerToggled(value) => self.toggler_value = value,
+            Message::PickListSelected(value) => self.pick_list_selected = Some(value),
         }
     }
 
     fn view(&self) -> Element<Message> {
         let sidebar: Element<_> = nav_bar!(
             //TODO: Support symbolic icons
-            button!(
+            nav_button!("network-wireless", "Wi-Fi")
-                icon("network-wireless", 16),
+                .on_press(Message::Page(0))
-                text("Wi-Fi"),
+                .style(if self.page == 0 { theme::Button::Primary } else { theme::Button::Text })
-                horizontal_space(Length::Fill),
-            )
-            .on_press(Message::Page(0))
-            .style(if self.page == 0 { theme::Button::Primary } else { theme::Button::Text })
             ,
-            button!(
+            nav_button!("preferences-desktop", "Desktop")
-                icon("preferences-desktop", 16),
+                .on_press(Message::Page(1))
-                text("Desktop"),
+                .style(if self.page == 1 { theme::Button::Primary } else { theme::Button::Text })
-                horizontal_space(Length::Fill),
-            )
-            .on_press(Message::Page(1))
-            .style(if self.page == 1 { theme::Button::Primary } else { theme::Button::Text })
             ,
-            button!(
+            nav_button!("system-software-update", "OS Upgrade & Recovery")
-                icon("system-software-update", 16),
+                .on_press(Message::Page(2))
-                text("OS Upgrade & Recovery"),
+                .style(if self.page == 2 { theme::Button::Primary } else { theme::Button::Text })
-                horizontal_space(Length::Fill),
-            )
-            .on_press(Message::Page(2))
-            .style(if self.page == 2 { theme::Button::Primary } else { theme::Button::Text })
-            ,
-            vertical_space(Length::Fill),
         )
         .into();
 
@@ -175,6 +170,15 @@ impl Sandbox for Window {
                     "Toggler",
                     toggler(None, self.toggler_value, Message::TogglerToggled)
                 ),
+                list_item!(
+                    "Pick List (TODO)",
+                    pick_list(vec![
+                        "Option 1",
+                        "Option 2",
+                        "Option 3",
+                        "Option 4",
+                    ], self.pick_list_selected, Message::PickListSelected)
+                ),
                 list_item!(
                     "Slider",
                     slider(0.0..=100.0, self.slider_value, Message::SliderChanged)

src/widget/mod.rs

@@ -7,8 +7,8 @@ pub use self::icon::*;
 mod list;
 pub use list::*;
 
-mod nav_bar;
+mod nav;
-pub use nav_bar::*;
+pub use nav::*;
 
 mod toggler;
 pub use toggler::*;

src/widget/nav.rs

@@ -9,9 +9,12 @@ use iced::{
 macro_rules! nav_bar {
     ($($x:expr),+ $(,)?) => (
         $crate::iced::widget::Container::new(
-            $crate::iced::widget::Column::with_children(
+            $crate::iced::widget::Column::with_children(vec![
-                vec![$($crate::iced::Element::from($x)),+]
+                $($crate::iced::Element::from($x)),+,
-            )
+                $crate::iced::widget::vertical_space(
+                    $crate::iced::Length::Fill
+                ).into()
+            ])
             .spacing(12)
         )
         .max_width(300)
@@ -37,3 +40,17 @@ pub fn nav_bar_style(theme: &Theme) -> widget::container::Appearance {
         border_color: Color::TRANSPARENT,
     }
 }
+
+#[macro_export]
+macro_rules! nav_button {
+    ($icon: expr, $title:expr) => (
+        $crate::widget::button!(
+            $crate::widget::icon($icon, 16),
+            $crate::iced::widget::Text::new($title),
+            $crate::iced::widget::horizontal_space(
+                $crate::iced::Length::Fill
+            ),
+        )
+    );
+}
+pub use nav_button;