hugo/bDS2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: slight reduction of live.js

Browse Source
This commit is contained in:
Chili Palmer
2026-04-26 11:40:59 +02:00
parent c5c8ae731b
commit 4c26fb4841
4 changed files with 60 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

91
lib/bds/desktop/shell_live/index.html.heex
View File

@@ -13,19 +13,53 @@
>
<div class="window-titlebar-menu-bar" data-testid="window-titlebar-menu-bar">
<%= for group <- @menu_groups do %>
<button
class={[
"window-titlebar-menu-button",
if(@titlebar_menu_group == Atom.to_string(group.id), do: "is-active")
]}
data-testid="window-titlebar-menu-button"
data-menu-group={group.id}
type="button"
phx-click="toggle_titlebar_menu"
phx-mouseenter="hover_titlebar_menu"
phx-value-group={group.id}
aria-label={group.label}
><%= group.label %></button>
<div class="window-titlebar-menu-group">
<button
class={[
"window-titlebar-menu-button",
if(@titlebar_menu_group == Atom.to_string(group.id), do: "is-active")
]}
data-testid="window-titlebar-menu-button"
data-menu-group={group.id}
type="button"
phx-click="toggle_titlebar_menu"
phx-mouseenter="hover_titlebar_menu"
phx-value-group={group.id}
aria-label={group.label}
><%= group.label %></button>
<%= if @titlebar_menu_group == Atom.to_string(group.id) do %>
<div
class="window-titlebar-menu-dropdown"
data-testid="window-titlebar-menu-dropdown"
phx-click-away="close_titlebar_menu"
>
<%= for item <- titlebar_menu_dropdown_items(group) do %>
<%= if item.separator do %>
<div class="window-titlebar-menu-separator"></div>
<% else %>
<button
class={[
"window-titlebar-menu-item",
if(@titlebar_menu_item_index == item.keyboard_index, do: "is-keyboard-active")
]}
data-testid="window-titlebar-menu-item"
data-menu-action={item.id}
type="button"
phx-click="titlebar_menu_action"
phx-value-action={item.id}
aria-label={item.label}
>
<span class="window-titlebar-menu-item-label"><%= item.label %></span>
<%= if item.shortcut do %>
<span class="window-titlebar-menu-item-accelerator"><%= item.shortcut %></span>
<% end %>
</button>
<% end %>
<% end %>
</div>
<% end %>
</div>
<% end %>
</div>
<div class="window-titlebar-drag-region"></div>
@@ -68,37 +102,6 @@
</span>
</button>
</div>
<%= if group = active_titlebar_menu_group(assigns) do %>
<div
class="window-titlebar-menu-dropdown"
data-testid="window-titlebar-menu-dropdown"
phx-click-away="close_titlebar_menu"
>
<%= for item <- titlebar_menu_dropdown_items(group) do %>
<%= if item.separator do %>
<div class="window-titlebar-menu-separator"></div>
<% else %>
<button
class={[
"window-titlebar-menu-item",
if(@titlebar_menu_item_index == item.keyboard_index, do: "is-keyboard-active")
]}
data-testid="window-titlebar-menu-item"
data-menu-action={item.id}
type="button"
phx-click="titlebar_menu_action"
phx-value-action={item.id}
aria-label={item.label}
>
<span class="window-titlebar-menu-item-label"><%= item.label %></span>
<%= if item.shortcut do %>
<span class="window-titlebar-menu-item-accelerator"><%= item.shortcut %></span>
<% end %>
</button>
<% end %>
<% end %>
</div>
<% end %>
</div>
<% end %>

9
priv/ui/app.css
View File

@@ -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;

27
priv/ui/live.js
View File

@@ -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() {

7
test/bds/ui/shell_test.exs
View File

@@ -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