vicrodh
63a80f49dd
In the mini (icon-only) sidebar the rows show no name. Add a hover bubble to the right of each folder/top-level-playlist row surfacing the name (folders also append their playlist count), mirroring the native title Tauri puts on its collapsed buttons. Rendered at the AppShell level (SidebarTooltip + SidebarTooltipState) because the sidebar clips its overflow; anchored with the same Flickable absolute-position correction as the folder flyout. Closes on click so it does not linger behind the flyout. cc
45 lines
1.8 KiB
Plaintext
45 lines
1.8 KiB
Plaintext
// Collapsed-sidebar hover tooltip. When the sidebar is in the mini (icon-only)
|
|
// state, hovering a folder or top-level playlist row surfaces its name in a
|
|
// small bubble to the right (folders append their playlist count). Mirrors the
|
|
// native `title` Tauri puts on the collapsed buttons. Rendered at the AppShell
|
|
// level because the sidebar clips its own overflow. Visual only (no TouchArea),
|
|
// so it never blocks the pointer.
|
|
|
|
import { Theme } from "../foundation/semantic-colors.slint";
|
|
import { Radius } from "../foundation/radius.slint";
|
|
import { SidebarTooltipState, ShellState } from "../state.slint";
|
|
|
|
export component SidebarTooltip inherits Rectangle {
|
|
// Auto-hides if the sidebar leaves the mini state while a tooltip lingers.
|
|
visible: SidebarTooltipState.open && ShellState.sidebar-mini;
|
|
|
|
if SidebarTooltipState.open && ShellState.sidebar-mini: bubble := Rectangle {
|
|
x: SidebarTooltipState.anchor-x;
|
|
// Center the bubble against the 32px row.
|
|
y: SidebarTooltipState.anchor-y + (32px - self.height) / 2;
|
|
width: row.preferred-width;
|
|
height: row.preferred-height;
|
|
background: Theme.surface-elevated;
|
|
border-radius: Radius.sm;
|
|
border-width: 1px;
|
|
border-color: Theme.border-muted;
|
|
drop-shadow-blur: 16px;
|
|
drop-shadow-color: Theme.card-shadow;
|
|
drop-shadow-offset-y: 4px;
|
|
|
|
row := HorizontalLayout {
|
|
padding-left: 10px;
|
|
padding-right: 10px;
|
|
padding-top: 5px;
|
|
padding-bottom: 5px;
|
|
Text {
|
|
text: SidebarTooltipState.text;
|
|
color: Theme.text-primary;
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
vertical-alignment: center;
|
|
}
|
|
}
|
|
}
|
|
}
|