Add dropdown (#265)

Add dropdown example

Update svg syntax

Co-authored-by: Dominik Wilkowski <[email protected]>

Get dropdown styling working

Fix ups to styles and event handling

Update dropdown example in widget gallery

examples/widget-gallery/Cargo.toml

@@ -6,3 +6,4 @@ edition = "2021"
 [dependencies]
 im = "15.1.0"
 floem = { path = "../.." }
+strum = { version = "0.25.0", features = ["derive"] }

examples/widget-gallery/src/dropdown.rs

@@ -0,0 +1,75 @@
+use strum::IntoEnumIterator;
+
+use floem::{
+    peniko::Color,
+    reactive::create_rw_signal,
+    unit::UnitExt,
+    view::View,
+    views::{container, label, stack, svg, Decorators},
+    widgets::dropdown::dropdown,
+};
+
+use crate::{
+    follow_popover,
+    form::{self, form_item},
+};
+
+#[derive(strum::EnumIter, Debug, PartialEq, Clone, Copy)]
+enum Values {
+    One,
+    Two,
+    Three,
+    Four,
+    Five,
+}
+impl std::fmt::Display for Values {
+    fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
+        f.write_fmt(format_args!("{:?}", self))
+    }
+}
+
+const CHEVRON_DOWN: &str = r##"<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 185.344 185.344">
+  <path fill="#010002" d="M92.672 144.373a10.707 10.707 0 0 1-7.593-3.138L3.145 59.301c-4.194-4.199-4.194-10.992 0-15.18a10.72 10.72 0 0 1 15.18 0l74.347 74.341 74.347-74.341a10.72 10.72 0 0 1 15.18 0c4.194 4.194 4.194 10.981 0 15.18l-81.939 81.934a10.694 10.694 0 0 1-7.588 3.138z"/>
+</svg>"##;
+
+pub fn dropdown_view() -> impl View {
+    let show_list = create_rw_signal(false);
+    follow_popover(show_list);
+    let driving_signal = create_rw_signal(Values::Three);
+
+    form::form({
+        (form_item("Dropdown".to_string(), 120.0, move || {
+            dropdown(
+                // main view
+                |item| {
+                    stack((
+                        label(move || item),
+                        container(
+                            svg(|| String::from(CHEVRON_DOWN))
+                                .style(|s| s.size(12, 12).color(Color::BLACK)),
+                        )
+                        .style(|s| {
+                            s.items_center()
+                                .padding(3.)
+                                .border_radius(7.pct())
+                                .hover(move |s| s.background(Color::LIGHT_GRAY))
+                        }),
+                    ))
+                    .style(|s| s.items_center().justify_between().size_full())
+                    .any()
+                },
+                // iterator to build list in dropdown
+                Values::iter().map(move |item| {
+                    label(move || item)
+                        .on_click_stop(move |_| {
+                            driving_signal.set(item);
+                            println!("Selected {item:?}!")
+                        })
+                        .style(|s| s.size_full())
+                }),
+                move || driving_signal.get(),
+            )
+            .show_list(move || show_list.get())
+        }),)
+    })
+}

examples/widget-gallery/src/main.rs

@@ -2,6 +2,7 @@ pub mod buttons;
 pub mod checkbox;
 pub mod clipboard;
 pub mod context_menu;
+pub mod dropdown;
 pub mod form;
 pub mod images;
 pub mod inputs;
@@ -15,7 +16,10 @@ use floem::{
     event::{Event, EventListener},
     keyboard::{Key, NamedKey},
     peniko::Color,
-    reactive::create_signal,
+    reactive::{
+        create_effect, create_signal, create_trigger, provide_context, use_context, RwSignal,
+        Trigger,
+    },
     style::{Background, CursorStyle, Transition},
     unit::UnitExt,
     view::View,
@@ -27,6 +31,19 @@ use floem::{
     EventPropagation,
 };
 
+type PopOver = Trigger;
+pub fn follow_popover(visible_state: RwSignal<bool>) {
+    let pop_over = use_context::<PopOver>().unwrap();
+    create_effect(move |_| {
+        pop_over.track();
+        visible_state.set(false);
+    });
+}
+pub fn popover_notify() {
+    let pop_over = use_context::<PopOver>().unwrap();
+    pop_over.notify();
+}
+
 fn app_view() -> impl View {
     let tabs: im::Vector<&str> = vec![
         "Label",
@@ -40,13 +57,17 @@ fn app_view() -> impl View {
         "Image",
         "Clipboard",
         "Slider",
+        "Dropdown",
     ]
     .into_iter()
     .collect();
     let (tabs, _set_tabs) = create_signal(tabs);
 
     let (active_tab, set_active_tab) = create_signal(0);
 
+    let pop_over: PopOver = create_trigger();
+    provide_context(pop_over);
+
     let list = scroll({
         virtual_stack(
             VirtualDirection::Vertical,
@@ -61,6 +82,7 @@ fn app_view() -> impl View {
                     .unwrap();
                 stack((label(move || item).style(|s| s.font_size(18.0)),))
                     .on_click_stop(move |_| {
+                        popover_notify();
                         set_active_tab.update(|v: &mut usize| {
                             *v = tabs
                                 .get_untracked()
@@ -162,6 +184,7 @@ fn app_view() -> impl View {
             "Image" => container_box(images::img_view()),
             "Clipboard" => container_box(clipboard::clipboard_view()),
             "Slider" => container_box(slider::slider_view()),
+            "Dropdown" => container_box(dropdown::dropdown_view()),
             _ => container_box(label(|| "Not implemented".to_owned())),
         },
     )
@@ -171,6 +194,7 @@ fn app_view() -> impl View {
 
     let view = h_stack((left, tab))
         .style(|s| s.padding(5.0).width_full().height_full().gap(5.0, 0.0))
+        .on_click_stop(move |_| popover_notify())
         .window_title(|| "Widget Gallery".to_owned());
 
     let id = view.id();