The four header nav tabs each owned a PopupWindow for their dropdown. A PopupWindow grabs the pointer while open, so hovering a sibling tab delivered no hover event and the menus could not be hover-switched. Add a HeaderMenuState global (open-index, anchor-x, items, home-item) and the NavMenuEntry struct to state.slint. Tabs now write their identity into the global on hover/click instead of showing a popup; the menu panel itself will be rendered by a separate in-window overlay. Move NavMenuItem into its own file so the overlay can reuse it. cc
57 lines
1.5 KiB
Plaintext
57 lines
1.5 KiB
Plaintext
// A single row of a header nav-tab dropdown, with an optional leading
|
|
// glyph. Shared by HeaderBar (tab definitions) and HeaderMenuOverlay
|
|
// (the in-window menu panel that actually renders the rows).
|
|
|
|
import { Theme } from "../foundation/semantic-colors.slint";
|
|
import { QbzIcon } from "../primitives/QbzIcon.slint";
|
|
|
|
export component NavMenuItem inherits Rectangle {
|
|
in property <string> label;
|
|
in property <image> icon;
|
|
in property <bool> has-glyph: false;
|
|
callback clicked();
|
|
// Fires whenever the pointer is over the row — drives the dropdown's
|
|
// idle-close timer reset.
|
|
callback hovered();
|
|
|
|
height: 32px;
|
|
background: ta.has-hover ? Theme.surface-hover : transparent;
|
|
|
|
HorizontalLayout {
|
|
padding-left: 14px;
|
|
padding-right: 22px;
|
|
spacing: 9px;
|
|
if root.has-glyph: VerticalLayout {
|
|
alignment: center;
|
|
QbzIcon {
|
|
source: root.icon;
|
|
width: 14px;
|
|
height: 14px;
|
|
tint: Theme.text-secondary;
|
|
}
|
|
}
|
|
Text {
|
|
text: root.label;
|
|
color: Theme.text-secondary;
|
|
font-size: 13px;
|
|
vertical-alignment: center;
|
|
horizontal-stretch: 1;
|
|
}
|
|
}
|
|
|
|
ta := TouchArea {
|
|
mouse-cursor: pointer;
|
|
clicked => {
|
|
root.clicked();
|
|
}
|
|
changed has-hover => {
|
|
if (self.has-hover) {
|
|
root.hovered();
|
|
}
|
|
}
|
|
moved => {
|
|
root.hovered();
|
|
}
|
|
}
|
|
}
|