fix: osd and session clipping

This commit is contained in:
2 * r + 2 * t 2026-03-26 21:01:40 +11:00
parent ea2ed3e5c4
commit 0075d64ca2
6 changed files with 95 additions and 130 deletions

View file

@ -172,9 +172,10 @@ Variants {
id: sessionBg id: sessionBg
blobGroup: blobGroup blobGroup: blobGroup
panel: panels.session panel: panels.sessionWrapper
bar: bar bar: bar
deformAmount: 0.25 deformAmount: 0.25
x: panels.sessionWrapper.x + panels.session.x + bar.implicitWidth
} }
PanelBg { PanelBg {
@ -190,9 +191,10 @@ Variants {
id: osdBg id: osdBg
blobGroup: blobGroup blobGroup: blobGroup
panel: panels.osd panel: panels.osdWrapper
bar: bar bar: bar
deformAmount: 0.3 deformAmount: 0.3
x: panels.osdWrapper.x + panels.osd.x + bar.implicitWidth
} }
PanelBg { PanelBg {

View file

@ -104,7 +104,7 @@ CustomMouseArea {
if (panels.sidebar.anchors.rightMargin === -panels.sidebar.implicitWidth - 5) { if (panels.sidebar.anchors.rightMargin === -panels.sidebar.implicitWidth - 5) {
// Show osd on hover // Show osd on hover
const showOsd = inRightPanel(panels.osd, x, y); const showOsd = inRightPanel(panels.osdWrapper, x, y);
// Always update visibility based on hover if not in shortcut mode // Always update visibility based on hover if not in shortcut mode
if (!osdShortcutActive) { if (!osdShortcutActive) {
@ -119,23 +119,23 @@ CustomMouseArea {
const showSidebar = pressed && dragStart.x > Math.min(width - Config.border.minThickness, bar.implicitWidth + panels.sidebar.x); const showSidebar = pressed && dragStart.x > Math.min(width - Config.border.minThickness, bar.implicitWidth + panels.sidebar.x);
// Show/hide session on drag // Show/hide session on drag
if (pressed && inRightPanel(panels.session, dragStart.x, dragStart.y) && withinPanelHeight(panels.session, x, y)) { if (pressed && inRightPanel(panels.sessionWrapper, dragStart.x, dragStart.y) && withinPanelHeight(panels.sessionWrapper, x, y)) {
if (dragX < -Config.session.dragThreshold) if (dragX < -Config.session.dragThreshold)
visibilities.session = true; visibilities.session = true;
else if (dragX > Config.session.dragThreshold) else if (dragX > Config.session.dragThreshold)
visibilities.session = false; visibilities.session = false;
// Show sidebar on drag if in session area and session is nearly fully visible // Show sidebar on drag if in session area and session is nearly fully visible
if (showSidebar && panels.session.width >= panels.session.nonAnimWidth && dragX < -Config.sidebar.dragThreshold) if (showSidebar && panels.session.offsetScale <= 0 && dragX < -Config.sidebar.dragThreshold)
visibilities.sidebar = true; visibilities.sidebar = true;
} else if (showSidebar && dragX < -Config.sidebar.dragThreshold) { } else if (showSidebar && dragX < -Config.sidebar.dragThreshold) {
// Show sidebar on drag if not in session area // Show sidebar on drag if not in session area
visibilities.sidebar = true; visibilities.sidebar = true;
} }
} else { } else {
const outOfSidebar = x < width - panels.sidebar.width; const outOfSidebar = x < width - panels.sidebar.width * (1 - panels.sidebar.offsetScale);
// Show osd on hover // Show osd on hover
const showOsd = outOfSidebar && inRightPanel(panels.osd, x, y); const showOsd = outOfSidebar && inRightPanel(panels.osdWrapper, x, y);
// Always update visibility based on hover if not in shortcut mode // Always update visibility based on hover if not in shortcut mode
if (!osdShortcutActive) { if (!osdShortcutActive) {
@ -148,7 +148,7 @@ CustomMouseArea {
} }
// Show/hide session on drag // Show/hide session on drag
if (pressed && outOfSidebar && inRightPanel(panels.session, dragStart.x, dragStart.y) && withinPanelHeight(panels.session, x, y)) { if (pressed && outOfSidebar && inRightPanel(panels.sessionWrapper, dragStart.x, dragStart.y) && withinPanelHeight(panels.sessionWrapper, x, y)) {
if (dragX < -Config.session.dragThreshold) if (dragX < -Config.session.dragThreshold)
visibilities.session = true; visibilities.session = true;
else if (dragX > Config.session.dragThreshold) else if (dragX > Config.session.dragThreshold)
@ -221,7 +221,7 @@ CustomMouseArea {
// Also hide dashboard and OSD if they're not being hovered // Also hide dashboard and OSD if they're not being hovered
const inDashboardArea = root.inTopPanel(root.panels.dashboard, root.mouseX, root.mouseY); const inDashboardArea = root.inTopPanel(root.panels.dashboard, root.mouseX, root.mouseY);
const inOsdArea = root.inRightPanel(root.panels.osd, root.mouseX, root.mouseY); const inOsdArea = root.inRightPanel(root.panels.osdWrapper, root.mouseX, root.mouseY);
if (!inDashboardArea) { if (!inDashboardArea) {
root.visibilities.dashboard = false; root.visibilities.dashboard = false;
@ -249,7 +249,7 @@ CustomMouseArea {
function onOsdChanged() { function onOsdChanged() {
if (root.visibilities.osd) { if (root.visibilities.osd) {
// OSD became visible, immediately check if this should be shortcut mode // OSD became visible, immediately check if this should be shortcut mode
const inOsdArea = root.inRightPanel(root.panels.osd, root.mouseX, root.mouseY); const inOsdArea = root.inRightPanel(root.panels.osdWrapper, root.mouseX, root.mouseY);
if (!inOsdArea) { if (!inOsdArea) {
root.osdShortcutActive = true; root.osdShortcutActive = true;
} }

View file

@ -21,8 +21,10 @@ Item {
required property Bar.BarWrapper bar required property Bar.BarWrapper bar
readonly property alias osd: osd readonly property alias osd: osd
readonly property alias osdWrapper: osdWrapper
readonly property alias notifications: notifications readonly property alias notifications: notifications
readonly property alias session: session readonly property alias session: session
readonly property alias sessionWrapper: sessionWrapper
readonly property alias launcher: launcher readonly property alias launcher: launcher
readonly property alias dashboard: dashboard readonly property alias dashboard: dashboard
readonly property alias popouts: popouts readonly property alias popouts: popouts
@ -34,16 +36,27 @@ Item {
anchors.margins: Config.border.thickness anchors.margins: Config.border.thickness
anchors.leftMargin: bar.implicitWidth anchors.leftMargin: bar.implicitWidth
Item {
id: osdWrapper
anchors.verticalCenter: parent.verticalCenter
anchors.right: parent.right
anchors.rightMargin: sessionWrapper.anchors.rightMargin + session.width * (1 - session.offsetScale)
clip: sidebar.visible || session.visible
implicitWidth: osd.implicitWidth
implicitHeight: osd.implicitHeight
Osd.Wrapper { Osd.Wrapper {
id: osd id: osd
clip: session.width > 0 || sidebar.width > 0
screen: root.screen screen: root.screen
visibilities: root.visibilities visibilities: root.visibilities
sidebarOrSessionVisible: sidebar.visible || session.visible
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
anchors.right: session.left anchors.right: parent.right
// anchors.rightMargin: session.width + sidebar.width }
} }
Notifications.Wrapper { Notifications.Wrapper {
@ -58,16 +71,26 @@ Item {
anchors.right: parent.right anchors.right: parent.right
} }
Item {
id: sessionWrapper
anchors.verticalCenter: parent.verticalCenter
anchors.right: parent.right
anchors.rightMargin: sidebar.width * (1 - sidebar.offsetScale)
clip: sidebar.visible
implicitWidth: session.implicitWidth
implicitHeight: session.implicitHeight
Session.Wrapper { Session.Wrapper {
id: session id: session
clip: sidebar.width > 0
visibilities: root.visibilities visibilities: root.visibilities
panels: root sidebarVisible: sidebar.visible
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
anchors.right: sidebar.left anchors.right: parent.right
// anchors.rightMargin: sidebar.width }
} }
Launcher.Wrapper { Launcher.Wrapper {
@ -131,7 +154,6 @@ Item {
id: sidebar id: sidebar
visibilities: root.visibilities visibilities: root.visibilities
panels: root
anchors.top: notifications.bottom anchors.top: notifications.bottom
anchors.bottom: utilities.top anchors.bottom: utilities.top

View file

@ -11,9 +11,13 @@ Item {
required property ShellScreen screen required property ShellScreen screen
required property DrawerVisibilities visibilities required property DrawerVisibilities visibilities
required property bool sidebarOrSessionVisible
property bool hovered property bool hovered
readonly property Brightness.Monitor monitor: Brightness.getMonitorForScreen(root.screen) readonly property Brightness.Monitor monitor: Brightness.getMonitorForScreen(root.screen)
readonly property bool shouldBeActive: visibilities.osd && Config.osd.enabled && !(visibilities.utilities && Config.utilities.enabled) readonly property bool shouldBeActive: visibilities.osd && Config.osd.enabled && !(visibilities.utilities && Config.utilities.enabled)
property real offsetScale: shouldBeActive ? 0 : 1
property real sidebarOffset: !shouldBeActive && sidebarOrSessionVisible ? 16 : 0
property real volume property real volume
property bool muted property bool muted
@ -34,44 +38,24 @@ Item {
brightness = root.monitor?.brightness ?? 0; brightness = root.monitor?.brightness ?? 0;
} }
visible: anchors.rightMargin > -implicitWidth visible: offsetScale < 1
anchors.rightMargin: -implicitWidth anchors.rightMargin: (-implicitWidth - 5 - sidebarOffset) * offsetScale
implicitWidth: content.implicitWidth implicitWidth: content.implicitWidth
implicitHeight: content.implicitHeight implicitHeight: content.implicitHeight
states: State { Behavior on offsetScale {
name: "visible"
when: root.shouldBeActive
PropertyChanges {
root.anchors.rightMargin: 0
}
}
transitions: [
Transition {
// from: ""
// to: "visible"
Anim { Anim {
target: root.anchors duration: Appearance.anim.durations.expressiveDefaultSpatial
property: "rightMargin"
easing.bezierCurve: Appearance.anim.curves.expressiveDefaultSpatial easing.bezierCurve: Appearance.anim.curves.expressiveDefaultSpatial
} }
} }
// Transition {
// from: "visible"
// to: ""
// Anim { Behavior on sidebarOffset {
// target: root Anim {
// property: "implicitWidth" duration: Appearance.anim.durations.expressiveDefaultSpatial
// easing.bezierCurve: Appearance.anim.curves.emphasized easing.bezierCurve: Appearance.anim.curves.expressiveDefaultSpatial
// } }
// } }
]
Connections { Connections {
function onMutedChanged(): void { function onMutedChanged(): void {
@ -122,7 +106,7 @@ Item {
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
anchors.left: parent.left anchors.left: parent.left
Component.onCompleted: active = Qt.binding(() => root.shouldBeActive || root.visible) active: root.shouldBeActive || root.visible
sourceComponent: Content { sourceComponent: Content {
monitor: root.monitor monitor: root.monitor

View file

@ -8,47 +8,31 @@ Item {
id: root id: root
required property DrawerVisibilities visibilities required property DrawerVisibilities visibilities
required property var panels required property bool sidebarVisible
readonly property real nonAnimWidth: content.implicitWidth readonly property real nonAnimWidth: content.implicitWidth
visible: anchors.rightMargin > -implicitWidth - 1 readonly property bool shouldBeActive: visibilities.session && Config.session.enabled
anchors.rightMargin: -implicitWidth - 1 property real offsetScale: shouldBeActive ? 0 : 1
property real sidebarOffset: !shouldBeActive && sidebarVisible ? 14 : 0 // TODO: there is clearly something wrong with the rect to rect edge sink
visible: offsetScale < 1
anchors.rightMargin: (-implicitWidth - 5 - sidebarOffset) * offsetScale
implicitWidth: content.implicitWidth implicitWidth: content.implicitWidth
implicitHeight: content.implicitHeight implicitHeight: content.implicitHeight || 510 // Hard coded fallback for first open
states: State {
name: "visible"
when: root.visibilities.session && Config.session.enabled
PropertyChanges {
root.anchors.rightMargin: 0
}
}
transitions: [
Transition {
// from: ""
// to: "visible"
Behavior on offsetScale {
Anim { Anim {
target: root.anchors duration: Appearance.anim.durations.expressiveDefaultSpatial
property: "rightMargin"
easing.bezierCurve: Appearance.anim.curves.expressiveDefaultSpatial easing.bezierCurve: Appearance.anim.curves.expressiveDefaultSpatial
} }
} }
// Transition {
// from: "visible"
// to: ""
// Anim { Behavior on sidebarOffset {
// target: root Anim {
// property: "implicitWidth" duration: Appearance.anim.durations.expressiveDefaultSpatial
// easing.bezierCurve: root.panels.osd.width > 0 ? Appearance.anim.curves.expressiveDefaultSpatial : Appearance.anim.curves.emphasized easing.bezierCurve: Appearance.anim.curves.expressiveDefaultSpatial
// } }
// } }
]
Loader { Loader {
id: content id: content
@ -56,7 +40,7 @@ Item {
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
anchors.left: parent.left anchors.left: parent.left
Component.onCompleted: active = Qt.binding(() => (root.visibilities.session && Config.session.enabled) || root.visible) active: root.shouldBeActive || root.visible
sourceComponent: Content { sourceComponent: Content {
visibilities: root.visibilities visibilities: root.visibilities

View file

@ -8,47 +8,21 @@ Item {
id: root id: root
required property DrawerVisibilities visibilities required property DrawerVisibilities visibilities
required property var panels
readonly property Props props: Props {} readonly property Props props: Props {}
visible: anchors.rightMargin > -implicitWidth - 5 readonly property bool shouldBeActive: visibilities.sidebar && Config.sidebar.enabled
anchors.rightMargin: -implicitWidth - 5 property real offsetScale: shouldBeActive ? 0 : 1
visible: offsetScale < 1
anchors.rightMargin: (-implicitWidth - 5) * offsetScale
implicitWidth: Config.sidebar.sizes.width implicitWidth: Config.sidebar.sizes.width
states: State { Behavior on offsetScale {
name: "visible"
when: root.visibilities.sidebar && Config.sidebar.enabled
PropertyChanges {
root.anchors.rightMargin: 0
}
}
transitions: [
Transition {
// from: ""
// to: "visible"
Anim { Anim {
target: root.anchors
property: "rightMargin"
duration: Appearance.anim.durations.expressiveDefaultSpatial duration: Appearance.anim.durations.expressiveDefaultSpatial
easing.bezierCurve: Appearance.anim.curves.expressiveDefaultSpatial easing.bezierCurve: Appearance.anim.curves.expressiveDefaultSpatial
} }
} }
// Transition {
// from: "visible"
// to: ""
// Anim {
// target: root
// property: "implicitWidth"
// easing.bezierCurve: root.panels.osd.width > 0 || root.panels.session.width > 0 ? Appearance.anim.curves.expressiveDefaultSpatial : Appearance.anim.curves.emphasized
// }
// }
]
Loader { Loader {
id: content id: content
@ -59,8 +33,7 @@ Item {
anchors.margins: Appearance.padding.large anchors.margins: Appearance.padding.large
anchors.bottomMargin: 0 anchors.bottomMargin: 0
active: true active: root.shouldBeActive || root.visible
Component.onCompleted: active = Qt.binding(() => (root.visibilities.sidebar && Config.sidebar.enabled) || root.visible)
sourceComponent: Content { sourceComponent: Content {
implicitWidth: Config.sidebar.sizes.width - Appearance.padding.large * 2 implicitWidth: Config.sidebar.sizes.width - Appearance.padding.large * 2