Overflow inside floating element - Classic selectable dropdown

[bsodmike]

Hi, I'm trying to pull off rendering a classic drop-down. Using the on-hover event was bad, as the hover target is SUPER sensitive, so I've abandoned the idea to have a "Filter" type button, with a simple toggle state.

Please forgive the nested mass of closure code below:

// Filter
ui.element()
    .width(grow!())
    .height(fit!())
    // .background_color(0x262220)
    .corner_radius(12.0)
    .layout(|l| l.align(Right, CenterY))
    .children(|ui| {
        ui.element()
            .width(fit!())
            .height(fit!())
            .background_color(0x262220)
            // .corner_radius(12.0)
            .layout(|l| l.padding(16))
            .children(|ui| {
                ui.element()
                    .width(fit!()).height(fit!())
                    .background_color(0x2E2A28)
                    .on_press(|id, pointer| {})
                    .children(|ui| {
                        ui.text("Hover me for info", |t| t.font_size(14).color(0xE8E0DC));

                        ui.element()
                            .floating(|f| f
                                .attach_parent()
                                .anchor((Right, Top), (Right, Top))
                                // compensate for padding in parent
                                .offset((16.0, 30.0))
                            )
                            .children(|ui| {
                                ui.element()
                                    .width(grow!()).height(grow!())
                                    .background_color(0x262220)
                                    // .overflow(|o| {
                                    //     o.scroll_y()
                                    //         .scrollbar(|builder| {
                                    //             builder.width(12.0)
                                    //         })
                                    // })
                                    .layout(|l| {
                                        // Block
                                        l.direction(TopToBottom)
                                            .padding(20)
                                            .gap(30)
                                            .align(Right, Bottom)
                                    })
                                    .children(|ui| {
                                        ui.text("Extra information here - super long text", |t| t.font_size(12).color(0x9E9590));

                                        // child items grow for as many items in the drop-down
                                    });
                        
                                });
                            });
                        });
                    });

One issue I'm facing is this is all inside a root element that is ALREADY an overflow handling parent. It also does not seem floating elements can support overflow out of the box anyways? Have I missed something?

Cheers,
Mike.

[TheRedDeveloper]

Here's the dropdown.rs you're looking for:

use ply_engine::prelude::*;

static ICON_DOWN: GraphicAsset = GraphicAsset::Bytes {
  file_name: "down.png",
  data: include_bytes!("../assets/icons/down.png"),
};
static ICON_UP: GraphicAsset = GraphicAsset::Bytes {
  file_name: "up.png",
  data: include_bytes!("../assets/icons/up.png"),
};

const SURFACE:       u32 = 0x1A1A1A;
const SURFACE_HOVER: u32 = 0x252525;
const BORDER:        u32 = 0x333333;
const BORDER_OPEN:   u32 = 0x5B6EE1;
const ACCENT:        u32 = 0x2D3566;
const ACCENT_TEXT:   u32 = 0xB0BBFF;
const TEXT_PRIMARY:  u32 = 0xDDDDDD;
const LIST_BG:       u32 = 0x141414;

const Z_BACKDROP: i16 = 50;
const Z_LIST:     i16 = 51;

fn hex_alpha(hex: u32, a: u8) -> (u8, u8, u8, u8) {
  (
    ((hex >> 16) & 0xFF) as u8,
    ((hex >> 8)  & 0xFF) as u8,
    (hex         & 0xFF) as u8,
    a,
  )
}

pub fn dropdown(
  ui:       &mut Ui,
  id:       &'static str,
  options:  &[&str],
  selected: &mut usize,
  open:     &mut bool,
) {
  let n = options.len();
  let current_label = options.get(*selected).copied().unwrap_or("—");
  
  let was_open = *open;

  ui.element()
    .id(id)
    .width(fixed!(220.0))
    .height(fixed!(42.0))
    .accessibility(|a| a
      .role(AccessibilityRole::Menu)
      .label(current_label)
      .focusable()
    )
    .children(|ui| {
      if ui.just_released() && !was_open {
        *open = true;
        ui.set_focus((id, *selected as u32));
      }

      if was_open && is_key_released(KeyCode::Escape) {
        *open = false;
        ui.set_focus(id);
      }

      let hovered      = ui.hovered();
      let border_color = if was_open { BORDER_OPEN } else { BORDER };
      let bg_color     = if hovered || was_open { SURFACE_HOVER } else { SURFACE };

      ui.element()
        .width(grow!())
        .height(grow!())
        .background_color(bg_color)
        .border(|b| b
          .color(border_color)
          .all(1)
          .position(Inside)
        )
        .corner_radius(8.0)
        .layout(|l| l
          .direction(LeftToRight)
          .padding((0, 12, 0, 12))
          .align(Left, CenterY)
          .gap(8)
        )
        .children(|ui| {
          ui.element()
            .width(grow!())
            .height(fit!())
            .layout(|l| l.align(Left, CenterY))
            .children(|ui| {
              ui.text(current_label, |t| t
                .font_size(14)
                .color(TEXT_PRIMARY)
              );
            });

          let icon = if was_open { &ICON_UP } else { &ICON_DOWN };
          ui.element()
            .width(fixed!(14.0))
            .height(fixed!(14.0))
            .image(icon)
            .empty();
        });

      if was_open {
        ui.element()
          .width(percent!(1.0))
          .height(percent!(1.0))
          .floating(|f| f
            .attach_root()
            .z_index(Z_BACKDROP)
          )
          .preserve_focus()
          .children(|ui| {
            if ui.just_pressed() {
              *open = false;
            }
          });

        ui.element()
          .width(fixed!(220.0))
          .height(fit!())
          .floating(|f| f
            .attach_parent()
            .anchor((Left, Top), (Left, Bottom))
            .offset((0.0, 6.0))
            .z_index(Z_LIST)
          )
          .background_color(LIST_BG)
          .border(|b| b
            .color(BORDER)
            .all(1)
            .position(Inside)
          )
          .corner_radius(8.0)
          .overflow(|o| o.clip())
          .layout(|l| l
            .direction(TopToBottom)
            .padding(4)
            .gap(2)
          )
          .children(|ui| {
            for (i, option) in options.iter().enumerate() {
              let is_selected = *selected == i;
              let prev = if i > 0     { i - 1 } else { n - 1 };
              let next = if i + 1 < n { i + 1 } else { 0 };

              ui.element()
                .id((id, i as u32))
                .width(grow!())
                .height(fixed!(34.0))
                .preserve_focus()
                .accessibility(|a| a
                  .role(AccessibilityRole::MenuItem)
                  .label(option)
                  .focusable()
                  .tab_index(i as i32)
                  .focus_up((id, prev as u32))
                  .focus_down((id, next as u32))
                )
                .children(|ui| {
                  if ui.just_released() && was_open {
                    *selected = i;
                    *open = false;
                  }

                  let hovered = ui.hovered();
                  let focused = ui.focused();
                  let row_bg = if is_selected {
                    hex_alpha(ACCENT, 255)
                  } else if hovered || focused {
                    hex_alpha(SURFACE_HOVER, 255)
                  } else {
                    (0, 0, 0, 0)
                  };

                  let text_col = if is_selected { ACCENT_TEXT } else { TEXT_PRIMARY };

                  ui.element()
                    .width(grow!())
                    .height(grow!())
                    .background_color(row_bg)
                    .corner_radius(6.0)
                    .layout(|l| l
                      .direction(LeftToRight)
                      .padding((0, 10, 0, 10))
                      .align(Left, CenterY)
                      .gap(8)
                    )
                    .children(|ui| {
                      let pip_a = if is_selected { 255 } else { 0 };
                      ui.element()
                        .width(fixed!(4.0))
                        .height(fixed!(4.0))
                        .background_color(hex_alpha(BORDER_OPEN, pip_a))
                        .corner_radius(2.0)
                        .empty();

                      ui.text(option, |t| t.font_size(14).color(text_col));
                    });
                });
            }
          });
      }
    });
}

This also made me discover a bug with the focus ring I'm currently investigating.

I'm sorry you had to wait this long for a reply. Hope this helps.

[TheRedDeveloper]

3aa1adc fixes the focus ring bug.

[bsodmike]

No worries, I'll try this in the morning.

I used the example on the homepage on the blog as a starting point. Some of these widgets could probably move into the docs as reference material?

Side note: In my test app, I've got Tokio running on a second async thread pulling data from Postgres. There are two MPSC channels (main thread to the second and the second to the main thread).

Ply has been excellent so far; well done on keeping the API ergonomics so decent. It has an intuitive feel to it once you get the hang of it.

Also for the comment on "hover", I just realised, that's because it didn't make the hover target large enough, I.e it should be a larger container like a button body, not the text element. D'oh!

[TheRedDeveloper]

@bsodmike Any results?

[bsodmike]

Thanks, it renders fine; will have a play with event handlers in a parent element. Do you have the icons shared anywhere by any chance?

Consider sharing an "app" UI as an example, with reusable elements - that would be super handy. Have you seen https://flowbite.com/blocks/

[TheRedDeveloper]

Those are the icons. They are mdi:menu-down and mdi:menu-up in white from the free and open source Material Design Icons Icon Library. I usually use those or vector my own.

[TheRedDeveloper]

@bsodmike I kinda want this closed, no pressure.

[bsodmike]

All good to close, thanks - apologies for the late response!