From 165cb498800189b9cebcc779ed7e1de112cf2855 Mon Sep 17 00:00:00 2001 From: Manuel Cillero Date: Sat, 26 Sep 2026 14:21:39 +0200 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20(base):=20A=C3=B1ade=20with=5Fmenu?= =?UTF-8?q?=5Fend()=20para=20men=C3=BA=20al=20final?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- assets/css/basic.css | 5 ++ .../pagetop-bootsier/src/theme/bs/dropdown.rs | 15 +++++- .../pagetop-bootsier/src/theme/bs/nav.rs | 7 ++- .../tests/breakpoint_class.rs | 53 +++++++++++++++++++ src/base/component/dropdown/component.rs | 25 ++++++++- src/base/component/nav/item.rs | 2 +- tests/component_dropdown.rs | 50 +++++++++++++++++ 7 files changed, 152 insertions(+), 5 deletions(-) create mode 100644 tests/component_dropdown.rs diff --git a/assets/css/basic.css b/assets/css/basic.css index b323e0e0..92e1b943 100644 --- a/assets/css/basic.css +++ b/assets/css/basic.css @@ -425,6 +425,11 @@ body { .dropdown-menu.show { display: block; } +/* Anchors the menu's right edge to the button's right edge, so it opens inwards. */ +.dropdown-menu-end { + left: auto; + right: 0; +} /* Options and headers stay on one line, so the menu grows to fit the longest one. */ .dropdown-item { diff --git a/extensions/pagetop-bootsier/src/theme/bs/dropdown.rs b/extensions/pagetop-bootsier/src/theme/bs/dropdown.rs index 829f0f24..f988605f 100644 --- a/extensions/pagetop-bootsier/src/theme/bs/dropdown.rs +++ b/extensions/pagetop-bootsier/src/theme/bs/dropdown.rs @@ -56,6 +56,11 @@ pub trait DropdownBootsier { fn with_direction(self, direction: Direction) -> Self; /// Configura la alineación horizontal (con posible comportamiento *responsive* adicional). + /// + /// Si se deja en [`MenuAlign::Start`] (por defecto), se respeta [`with_menu_end()`]; cualquier + /// otra alineación prevalece sobre él. + /// + /// [`with_menu_end()`]: pagetop::base::component::Dropdown::with_menu_end fn with_menu_align(self, align: MenuAlign) -> Self; /// Configura la posición del menú. @@ -135,9 +140,15 @@ pub(crate) async fn render( let direction = dropdown .props() .extra_or(EXTRA_DIRECTION, Direction::default()); - let menu_align = dropdown + let menu_align = match dropdown .props() - .extra_or(EXTRA_MENU_ALIGN, MenuAlign::default()); + .extra_or(EXTRA_MENU_ALIGN, MenuAlign::default()) + { + // `with_menu_end()` del núcleo se traduce a `MenuAlign::End`, pero sólo si no hay una + // alineación propia diferente a la predeterminada (`Start`), que prevalece. + MenuAlign::Start if *dropdown.menu_end() => MenuAlign::End, + align => align, + }; let menu_position = dropdown .props() .extra_or(EXTRA_MENU_POSITION, MenuPosition::default()); diff --git a/extensions/pagetop-bootsier/src/theme/bs/nav.rs b/extensions/pagetop-bootsier/src/theme/bs/nav.rs index 5567bef9..90373526 100644 --- a/extensions/pagetop-bootsier/src/theme/bs/nav.rs +++ b/extensions/pagetop-bootsier/src/theme/bs/nav.rs @@ -169,6 +169,11 @@ pub(crate) async fn item_render(item: &Item, cx: &mut Context) -> Result Result String { + let mut dropdown = dropdown + .with_title(Lc::n("Menu")) + .with_item(bs::dropdown::Item::link(Lc::n("Home"), "/")); + dropdown.render(&mut cx()).await.into_string() +} + +#[pagetop::test] +async fn dropdown_menu_end_maps_to_the_end_alignment() { + let html = dropdown_menu_html(bs::Dropdown::new().with_menu_end(true)).await; + assert!(html.contains(r#"
    "#)); + + // Without `with_menu_end()` the menu keeps the default (start) alignment. + let html = dropdown_menu_html(bs::Dropdown::new()).await; + assert!(html.contains(r#"
      "#)); + assert!(!html.contains("dropdown-menu-end")); +} + +#[pagetop::test] +async fn dropdown_menu_end_is_ignored_without_title() { + // A titleless menu is static (no button to align to), so it never gets the end alignment. + let mut dropdown = bs::Dropdown::new() + .with_menu_end(true) + .with_item(bs::dropdown::Item::link(Lc::n("Home"), "/")); + let html = dropdown.render(&mut cx()).await.into_string(); + assert!(html.contains(r#"
        "#)); + assert!(!html.contains("dropdown-menu-end")); +} + +#[pagetop::test] +async fn dropdown_own_menu_align_wins_over_menu_end() { + let html = dropdown_menu_html( + bs::Dropdown::new() + .with_menu_end(true) + .with_menu_align(bs::dropdown::MenuAlign::StartAt(Breakpoint::Md)), + ) + .await; + assert!(html.contains("dropdown-menu-md-start")); + assert!(!html.contains("dropdown-menu-end")); +} + +#[pagetop::test] +async fn nav_dropdown_menu_end_adds_the_end_class() { + let mut nav = bs::Nav::new().with_item(bs::nav::Item::dropdown( + bs::Dropdown::new() + .with_title(Lc::n("Menu")) + .with_menu_end(true) + .with_item(bs::dropdown::Item::link(Lc::n("Home"), "/")), + )); + let html = nav.render(&mut cx()).await.into_string(); + assert!(html.contains(r#"
          "#)); +} + #[pagetop::test] async fn navbar_expands_at_md_by_default_and_at_the_chosen_breakpoint() { let item = diff --git a/src/base/component/dropdown/component.rs b/src/base/component/dropdown/component.rs index dad4b5d4..5de952ee 100644 --- a/src/base/component/dropdown/component.rs +++ b/src/base/component/dropdown/component.rs @@ -37,6 +37,8 @@ pub struct Dropdown { /// Devuelve el estilo visual del botón. #[getters(copy)] button_style: button::Style, + /// Devuelve si el menú se alinea al final del botón (por defecto, al inicio). + menu_end: bool, /// Devuelve la lista de elementos del menú. items: Children, } @@ -124,12 +126,23 @@ impl Component for Dropdown { (&title) } } - ul class="dropdown-menu" { (items) } + ul class=(self.menu_classes()) { (items) } } }) } } +impl Dropdown { + // Clases del `
            ` del menú, compartidas con el renderizado de `nav::Item::dropdown()`. + pub(crate) fn menu_classes(&self) -> &'static str { + if *self.menu_end() { + "dropdown-menu dropdown-menu-end" + } else { + "dropdown-menu" + } + } +} + #[builder_impl] impl Dropdown { // **< Dropdown BUILDER >*********************************************************************** @@ -170,6 +183,16 @@ impl Dropdown { self } + /// Alinea el menú al final del botón (por defecto, al inicio). + /// + /// Útil cuando el desplegable está pegado al borde final de la página, p. ej. el último de una + /// [`Navbar`], para que el menú se abra hacia el interior y no se salga de la pantalla. No + /// tiene efecto en un menú sin título, que es estático y no tiene botón al que alinearse. + pub fn with_menu_end(mut self, end: bool) -> Self { + self.menu_end = end; + self + } + /// Añade un nuevo elemento al menú o modifica la lista de elementos del menú con una operación /// [`TypedOp`]. /// diff --git a/src/base/component/nav/item.rs b/src/base/component/nav/item.rs index 7c1d9c85..8b0391f5 100644 --- a/src/base/component/nav/item.rs +++ b/src/base/component/nav/item.rs @@ -163,7 +163,7 @@ impl Component for Item { { (title) } - ul class="dropdown-menu" { + ul class=(dd.menu_classes()) { (items) } } diff --git a/tests/component_dropdown.rs b/tests/component_dropdown.rs new file mode 100644 index 00000000..05ff49f7 --- /dev/null +++ b/tests/component_dropdown.rs @@ -0,0 +1,50 @@ +use pagetop::prelude::*; + +fn dropdown() -> Dropdown { + Dropdown::new() + .with_title(Lc::n("Menu")) + .with_item(dropdown::Item::link(Lc::n("Home"), "/")) +} + +#[pagetop::test] +async fn menu_is_aligned_to_the_start_by_default() { + let html = dropdown() + .render(&mut Context::default()) + .await + .into_string(); + + assert!(html.contains(r#"
              "#)); + assert!(!html.contains("dropdown-menu-end")); +} + +#[pagetop::test] +async fn menu_end_adds_the_end_class() { + let html = dropdown() + .with_menu_end(true) + .render(&mut Context::default()) + .await + .into_string(); + + assert!(html.contains(r#"
                "#)); +} + +#[pagetop::test] +async fn menu_end_applies_to_a_dropdown_inside_a_nav() { + let mut nav = Nav::new().with_item(nav::Item::dropdown(dropdown().with_menu_end(true))); + let html = nav.render(&mut Context::default()).await.into_string(); + + assert!(html.contains(r#"
                  "#)); +} + +#[pagetop::test] +async fn menu_end_is_ignored_without_title() { + let html = Dropdown::new() + .with_menu_end(true) + .with_item(dropdown::Item::link(Lc::n("Home"), "/")) + .render(&mut Context::default()) + .await + .into_string(); + + assert!(html.contains(r#"
                    "#)); + assert!(!html.contains("dropdown-menu-end")); +}