diff --git a/lib/bds/desktop/shell_live/index.html.heex b/lib/bds/desktop/shell_live/index.html.heex index 9e680a1..968e4f0 100644 --- a/lib/bds/desktop/shell_live/index.html.heex +++ b/lib/bds/desktop/shell_live/index.html.heex @@ -13,19 +13,53 @@ >
@@ -68,37 +102,6 @@ - <%= if group = active_titlebar_menu_group(assigns) do %> - - <% end %> <% end %> diff --git a/priv/ui/app.css b/priv/ui/app.css index 273a570..524880e 100644 --- a/priv/ui/app.css +++ b/priv/ui/app.css @@ -121,6 +121,13 @@ button { z-index: 2; } +.window-titlebar-menu-group { + position: relative; + display: flex; + align-items: center; + height: 100%; +} + .window-titlebar-menu-bar.is-hidden { display: none; } @@ -161,7 +168,7 @@ button { .window-titlebar-menu-dropdown { position: absolute; top: 30px; - left: var(--bds-titlebar-menu-left, 6px); + left: 0; min-width: 210px; padding: 6px; display: flex; diff --git a/priv/ui/live.js b/priv/ui/live.js index 52d3dd5..43c90f3 100644 --- a/priv/ui/live.js +++ b/priv/ui/live.js @@ -129,28 +129,6 @@ document.addEventListener("DOMContentLoaded", () => { this.syncStoredUiLanguage(); this.destroyOverlaySync = syncTitlebarOverlayInsets(); - this.syncTitlebarMenuAnchor = () => { - const titlebar = this.el.querySelector("[data-testid='window-titlebar']"); - const dropdown = this.el.querySelector("[data-testid='window-titlebar-menu-dropdown']"); - const openGroup = titlebar?.dataset.openMenuGroup; - - if (!dropdown || !titlebar || !openGroup) { - return; - } - - const button = this.getTitlebarMenuButtons().find((candidate) => candidate.dataset.menuGroup === openGroup); - - if (!button) { - return; - } - - const titlebarRect = titlebar.getBoundingClientRect(); - const buttonRect = button.getBoundingClientRect(); - const left = Math.max(6, Math.round(buttonRect.left - titlebarRect.left)); - - dropdown.style.setProperty("--bds-titlebar-menu-left", `${left}px`); - }; - this.handleMouseDown = (event) => { const handle = event.target.closest("[data-role='resize-handle']"); @@ -241,11 +219,6 @@ document.addEventListener("DOMContentLoaded", () => { window.addEventListener("bds:native-menu-action", this.handleNativeMenuAction); window.addEventListener("keydown", this.handleShortcutKeyDown, true); this.el.addEventListener("change", this.handleChange); - this.syncTitlebarMenuAnchor(); - }, - - updated() { - this.syncTitlebarMenuAnchor(); }, destroyed() { diff --git a/test/bds/ui/shell_test.exs b/test/bds/ui/shell_test.exs index 43b6f7a..4577dae 100644 --- a/test/bds/ui/shell_test.exs +++ b/test/bds/ui/shell_test.exs @@ -170,11 +170,14 @@ defmodule BDS.UI.ShellTest do live_ex = File.read!("/Users/gb/Projects/bDS2/lib/bds/desktop/shell_live.ex") template = File.read!("/Users/gb/Projects/bDS2/lib/bds/desktop/shell_live/index.html.heex") - assert css =~ "left: var(--bds-titlebar-menu-left, 6px);" - assert live_js =~ "--bds-titlebar-menu-left" + assert css =~ ".window-titlebar-menu-group {" + assert css =~ "left: 0;" + refute live_js =~ "--bds-titlebar-menu-left" + refute live_js =~ "syncTitlebarMenuAnchor" refute live_js =~ "handleTitlebarMenuKeyDown" refute live_js =~ "keyboardMenuIndex" assert template =~ "phx-window-keydown={if(@titlebar_menu_group, do: \"titlebar_menu_keydown\")}" + assert template =~ "window-titlebar-menu-group" assert live_ex =~ ~s(def handle_event("titlebar_menu_keydown") assert live_ex =~ "titlebar_menu_item_index" end