feat(widget): add dropdown widget as pick_list replacement

The Dropdown widget is based on the PickList widget from iced.

examples/cosmic/src/window/demo.rs

@@ -3,12 +3,12 @@ use std::{cell::RefCell, rc::Rc};
 use apply::Apply;
 use cosmic::{
     cosmic_theme,
-    iced::widget::{checkbox, column, pick_list, progress_bar, radio, slider, text, text_input},
+    iced::widget::{checkbox, column, progress_bar, radio, slider, text, text_input},
     iced::{id, Alignment, Length},
     iced_core::Color,
     theme::ThemeType,
     widget::{
-        button, color_picker::ColorPickerUpdate, cosmic_container::container, icon,
+        button, color_picker::ColorPickerUpdate, cosmic_container::container, dropdown, icon,
         segmented_button, segmented_selection, settings, spin_button, toggler, view_switcher,
         ColorPickerModel,
     },
@@ -74,7 +74,7 @@ pub enum Message {
     Debug(bool),
     IconTheme(segmented_button::Entity),
     MultiSelection(segmented_button::Entity),
-    PickListSelected(&'static str),
+    DropdownSelect(usize),
     RowSelected(usize),
     ScalingFactor(spin_button::Message),
     Selection(segmented_button::Entity),
@@ -102,8 +102,8 @@ pub struct State {
     pub checkbox_value: bool,
     pub icon_themes: segmented_button::SingleSelectModel,
     pub multi_selection: segmented_button::MultiSelectModel,
-    pub pick_list_selected: Option<&'static str>,
-    pub pick_list_options: Vec<&'static str>,
+    pub dropdown_selected: Option<usize>,
+    pub dropdown_options: Vec<&'static str>,
     pub scaling_value: spin_button::Model<Decimal>,
     pub selection: segmented_button::SingleSelectModel,
     pub slider_value: f32,
@@ -121,8 +121,8 @@ impl Default for State {
     fn default() -> State {
         State {
             checkbox_value: false,
-            pick_list_selected: Some("Option 1"),
-            pick_list_options: vec!["Option 1", "Option 2", "Option 3", "Option 4"],
+            dropdown_selected: Some(0),
+            dropdown_options: vec!["Option 1", "Option 2", "Option 3", "Option 4"],
             scaling_value: spin_button::Model::default()
                 .value(1.0)
                 .min(0.5)
@@ -172,7 +172,7 @@ impl State {
             Message::ButtonPressed => (),
             Message::CheckboxToggled(value) => self.checkbox_value = value,
             Message::Debug(value) => return Some(Output::Debug(value)),
-            Message::PickListSelected(value) => self.pick_list_selected = Some(value),
+            Message::DropdownSelect(value) => self.dropdown_selected = Some(value),
             Message::RowSelected(row) => println!("Selected row {row}"),
             Message::MultiSelection(key) => self.multi_selection.activate(key),
             Message::ScalingFactor(message) => {
@@ -277,10 +277,10 @@ impl State {
                         ))
                         .add(settings::item(
                             "Pick List (TODO)",
-                            pick_list(
-                                &self.pick_list_options,
-                                self.pick_list_selected,
-                                Message::PickListSelected,
+                            dropdown(
+                                &self.dropdown_options,
+                                self.dropdown_selected,
+                                Message::DropdownSelect,
                             )
                             .padding([8, 0, 8, 16]),
                         ))

src/theme/style/dropdown.rs

@@ -0,0 +1,28 @@
+// Copyright 2023 System76 <[email protected]>
+// SPDX-License-Identifier: MPL-2.0
+
+use crate::widget::dropdown;
+use crate::Theme;
+use iced::{Background, Color};
+
+impl dropdown::menu::StyleSheet for Theme {
+    type Style = ();
+
+    fn appearance(&self, _style: &Self::Style) -> dropdown::menu::Appearance {
+        let cosmic = self.cosmic();
+
+        dropdown::menu::Appearance {
+            text_color: cosmic.on_bg_color().into(),
+            background: Background::Color(cosmic.background.component.base.into()),
+            border_width: 0.0,
+            border_radius: 16.0.into(),
+            border_color: Color::TRANSPARENT,
+
+            hovered_text_color: cosmic.on_bg_color().into(),
+            hovered_background: Background::Color(cosmic.primary.component.hover.into()),
+
+            selected_text_color: cosmic.accent.base.into(),
+            selected_background: Background::Color(cosmic.primary.component.hover.into()),
+        }
+    }
+}

src/theme/style/iced.rs

@@ -364,6 +364,7 @@ pub enum Container {
     Background,
     Card,
     Custom(Box<dyn Fn(&Theme) -> container::Appearance>),
+    Dropdown,
     HeaderBar,
     Primary,
     Secondary,
@@ -447,6 +448,19 @@ impl container::StyleSheet for Theme {
                 }
             }
 
+            Container::Dropdown => {
+                let theme = self.cosmic();
+
+                container::Appearance {
+                    icon_color: None,
+                    text_color: None,
+                    background: Some(iced::Background::Color(theme.primary.base.into())),
+                    border_radius: f32::from(theme.space_xxs()).into(),
+                    border_width: 1.0,
+                    border_color: theme.bg_divider().into(),
+                }
+            }
+
             Container::Tooltip => {
                 let theme = self.cosmic();
 
@@ -593,8 +607,7 @@ impl menu::StyleSheet for Theme {
             border_width: 0.0,
             border_radius: 16.0.into(),
             border_color: Color::TRANSPARENT,
-            selected_text_color: cosmic.on_bg_color().into(),
-            // TODO doesn't seem to be specified
+            selected_text_color: cosmic.accent.base.into(),
             selected_background: Background::Color(cosmic.background.component.hover.into()),
         }
     }

src/theme/style/mod.rs

@@ -6,6 +6,8 @@
 mod button;
 pub use self::button::Button;
 
+mod dropdown;
+
 pub mod iced;
 pub use self::iced::Application;
 pub use self::iced::Checkbox;

src/widget/dropdown/menu/appearance.rs

@@ -0,0 +1,38 @@
+// Copyright 2023 System76 <[email protected]>
+// Copyright 2019 Héctor Ramón, Iced contributors
+// SPDX-License-Identifier: MPL-2.0 AND MIT
+
+//! Change the appearance of menus.
+use iced_core::{Background, BorderRadius, Color};
+
+/// The appearance of a menu.
+#[derive(Debug, Clone, Copy)]
+pub struct Appearance {
+    /// Menu text color
+    pub text_color: Color,
+    /// Menu background
+    pub background: Background,
+    /// Menu border width
+    pub border_width: f32,
+    /// Menu border radius
+    pub border_radius: BorderRadius,
+    /// Menu border color
+    pub border_color: Color,
+    /// Text color when hovered
+    pub hovered_text_color: Color,
+    /// Background when hovered
+    pub hovered_background: Background,
+    /// Text color when selected
+    pub selected_text_color: Color,
+    /// Background when selected
+    pub selected_background: Background,
+}
+
+/// The style sheet of a menu.
+pub trait StyleSheet {
+    /// The supported style of the [`StyleSheet`].
+    type Style: Default + Clone;
+
+    /// Produces the [`Appearance`] of a menu.
+    fn appearance(&self, style: &Self::Style) -> Appearance;
+}