diff --git a/modules/drawers/Drawers.qml b/modules/drawers/Drawers.qml index 7a5b15b3..f4f4fc71 100644 --- a/modules/drawers/Drawers.qml +++ b/modules/drawers/Drawers.qml @@ -172,9 +172,10 @@ Variants { id: sessionBg blobGroup: blobGroup - panel: panels.session + panel: panels.sessionWrapper bar: bar deformAmount: 0.25 + x: panels.sessionWrapper.x + panels.session.x + bar.implicitWidth } PanelBg { @@ -190,9 +191,10 @@ Variants { id: osdBg blobGroup: blobGroup - panel: panels.osd + panel: panels.osdWrapper bar: bar deformAmount: 0.3 + x: panels.osdWrapper.x + panels.osd.x + bar.implicitWidth } PanelBg { diff --git a/modules/drawers/Interactions.qml b/modules/drawers/Interactions.qml index 6008a853..c906b9d1 100644 --- a/modules/drawers/Interactions.qml +++ b/modules/drawers/Interactions.qml @@ -104,7 +104,7 @@ CustomMouseArea { if (panels.sidebar.anchors.rightMargin === -panels.sidebar.implicitWidth - 5) { // 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 if (!osdShortcutActive) { @@ -119,23 +119,23 @@ CustomMouseArea { const showSidebar = pressed && dragStart.x > Math.min(width - Config.border.minThickness, bar.implicitWidth + panels.sidebar.x); // 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) visibilities.session = true; else if (dragX > Config.session.dragThreshold) visibilities.session = false; // 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; } else if (showSidebar && dragX < -Config.sidebar.dragThreshold) { // Show sidebar on drag if not in session area visibilities.sidebar = true; } } else { - const outOfSidebar = x < width - panels.sidebar.width; + const outOfSidebar = x < width - panels.sidebar.width * (1 - panels.sidebar.offsetScale); // 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 if (!osdShortcutActive) { @@ -148,7 +148,7 @@ CustomMouseArea { } // 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) visibilities.session = true; else if (dragX > Config.session.dragThreshold) @@ -221,7 +221,7 @@ CustomMouseArea { // Also hide dashboard and OSD if they're not being hovered 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) { root.visibilities.dashboard = false; @@ -249,7 +249,7 @@ CustomMouseArea { function onOsdChanged() { if (root.visibilities.osd) { // 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) { root.osdShortcutActive = true; } diff --git a/modules/drawers/Panels.qml b/modules/drawers/Panels.qml index 006205fd..15140103 100644 --- a/modules/drawers/Panels.qml +++ b/modules/drawers/Panels.qml @@ -21,8 +21,10 @@ Item { required property Bar.BarWrapper bar readonly property alias osd: osd + readonly property alias osdWrapper: osdWrapper readonly property alias notifications: notifications readonly property alias session: session + readonly property alias sessionWrapper: sessionWrapper readonly property alias launcher: launcher readonly property alias dashboard: dashboard readonly property alias popouts: popouts @@ -34,16 +36,27 @@ Item { anchors.margins: Config.border.thickness anchors.leftMargin: bar.implicitWidth - Osd.Wrapper { - id: osd - - clip: session.width > 0 || sidebar.width > 0 - screen: root.screen - visibilities: root.visibilities + Item { + id: osdWrapper anchors.verticalCenter: parent.verticalCenter - anchors.right: session.left - // anchors.rightMargin: session.width + sidebar.width + 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 { + id: osd + + screen: root.screen + visibilities: root.visibilities + sidebarOrSessionVisible: sidebar.visible || session.visible + + anchors.verticalCenter: parent.verticalCenter + anchors.right: parent.right + } } Notifications.Wrapper { @@ -58,16 +71,26 @@ Item { anchors.right: parent.right } - Session.Wrapper { - id: session - - clip: sidebar.width > 0 - visibilities: root.visibilities - panels: root + Item { + id: sessionWrapper anchors.verticalCenter: parent.verticalCenter - anchors.right: sidebar.left - // anchors.rightMargin: sidebar.width + anchors.right: parent.right + anchors.rightMargin: sidebar.width * (1 - sidebar.offsetScale) + clip: sidebar.visible + + implicitWidth: session.implicitWidth + implicitHeight: session.implicitHeight + + Session.Wrapper { + id: session + + visibilities: root.visibilities + sidebarVisible: sidebar.visible + + anchors.verticalCenter: parent.verticalCenter + anchors.right: parent.right + } } Launcher.Wrapper { @@ -131,7 +154,6 @@ Item { id: sidebar visibilities: root.visibilities - panels: root anchors.top: notifications.bottom anchors.bottom: utilities.top diff --git a/modules/osd/Wrapper.qml b/modules/osd/Wrapper.qml index 87350d92..39215cd8 100644 --- a/modules/osd/Wrapper.qml +++ b/modules/osd/Wrapper.qml @@ -11,9 +11,13 @@ Item { required property ShellScreen screen required property DrawerVisibilities visibilities + required property bool sidebarOrSessionVisible + property bool hovered readonly property Brightness.Monitor monitor: Brightness.getMonitorForScreen(root.screen) 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 bool muted @@ -34,44 +38,24 @@ Item { brightness = root.monitor?.brightness ?? 0; } - visible: anchors.rightMargin > -implicitWidth - anchors.rightMargin: -implicitWidth + visible: offsetScale < 1 + anchors.rightMargin: (-implicitWidth - 5 - sidebarOffset) * offsetScale implicitWidth: content.implicitWidth implicitHeight: content.implicitHeight - states: State { - name: "visible" - when: root.shouldBeActive - - PropertyChanges { - root.anchors.rightMargin: 0 + Behavior on offsetScale { + Anim { + duration: Appearance.anim.durations.expressiveDefaultSpatial + easing.bezierCurve: Appearance.anim.curves.expressiveDefaultSpatial } } - transitions: [ - Transition { - // from: "" - // to: "visible" - - Anim { - target: root.anchors - property: "rightMargin" - easing.bezierCurve: Appearance.anim.curves.expressiveDefaultSpatial - } + Behavior on sidebarOffset { + Anim { + duration: Appearance.anim.durations.expressiveDefaultSpatial + easing.bezierCurve: Appearance.anim.curves.expressiveDefaultSpatial } - // Transition { - // from: "visible" - // to: "" - - // Anim { - // target: root - // property: "implicitWidth" - // easing.bezierCurve: Appearance.anim.curves.emphasized - // } - // } - - - ] + } Connections { function onMutedChanged(): void { @@ -122,7 +106,7 @@ Item { anchors.verticalCenter: parent.verticalCenter anchors.left: parent.left - Component.onCompleted: active = Qt.binding(() => root.shouldBeActive || root.visible) + active: root.shouldBeActive || root.visible sourceComponent: Content { monitor: root.monitor diff --git a/modules/session/Wrapper.qml b/modules/session/Wrapper.qml index b829409b..32d6fea2 100644 --- a/modules/session/Wrapper.qml +++ b/modules/session/Wrapper.qml @@ -8,47 +8,31 @@ Item { id: root required property DrawerVisibilities visibilities - required property var panels + required property bool sidebarVisible readonly property real nonAnimWidth: content.implicitWidth - visible: anchors.rightMargin > -implicitWidth - 1 - anchors.rightMargin: -implicitWidth - 1 + readonly property bool shouldBeActive: visibilities.session && Config.session.enabled + 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 - 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 + Behavior on offsetScale { + Anim { + duration: Appearance.anim.durations.expressiveDefaultSpatial + easing.bezierCurve: Appearance.anim.curves.expressiveDefaultSpatial } } - transitions: [ - Transition { - // from: "" - // to: "visible" - - Anim { - target: root.anchors - property: "rightMargin" - easing.bezierCurve: Appearance.anim.curves.expressiveDefaultSpatial - } + Behavior on sidebarOffset { + Anim { + duration: Appearance.anim.durations.expressiveDefaultSpatial + easing.bezierCurve: Appearance.anim.curves.expressiveDefaultSpatial } - // Transition { - // from: "visible" - // to: "" - - // Anim { - // target: root - // property: "implicitWidth" - // easing.bezierCurve: root.panels.osd.width > 0 ? Appearance.anim.curves.expressiveDefaultSpatial : Appearance.anim.curves.emphasized - // } - // } - - - ] + } Loader { id: content @@ -56,7 +40,7 @@ Item { anchors.verticalCenter: parent.verticalCenter anchors.left: parent.left - Component.onCompleted: active = Qt.binding(() => (root.visibilities.session && Config.session.enabled) || root.visible) + active: root.shouldBeActive || root.visible sourceComponent: Content { visibilities: root.visibilities diff --git a/modules/sidebar/Wrapper.qml b/modules/sidebar/Wrapper.qml index 67929bd7..4a777ca3 100644 --- a/modules/sidebar/Wrapper.qml +++ b/modules/sidebar/Wrapper.qml @@ -8,48 +8,22 @@ Item { id: root required property DrawerVisibilities visibilities - required property var panels readonly property Props props: Props {} - visible: anchors.rightMargin > -implicitWidth - 5 - anchors.rightMargin: -implicitWidth - 5 + readonly property bool shouldBeActive: visibilities.sidebar && Config.sidebar.enabled + property real offsetScale: shouldBeActive ? 0 : 1 + + visible: offsetScale < 1 + anchors.rightMargin: (-implicitWidth - 5) * offsetScale implicitWidth: Config.sidebar.sizes.width - states: State { - name: "visible" - when: root.visibilities.sidebar && Config.sidebar.enabled - - PropertyChanges { - root.anchors.rightMargin: 0 + Behavior on offsetScale { + Anim { + duration: Appearance.anim.durations.expressiveDefaultSpatial + easing.bezierCurve: Appearance.anim.curves.expressiveDefaultSpatial } } - transitions: [ - Transition { - // from: "" - // to: "visible" - - Anim { - target: root.anchors - property: "rightMargin" - duration: Appearance.anim.durations.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 { id: content @@ -59,8 +33,7 @@ Item { anchors.margins: Appearance.padding.large anchors.bottomMargin: 0 - active: true - Component.onCompleted: active = Qt.binding(() => (root.visibilities.sidebar && Config.sidebar.enabled) || root.visible) + active: root.shouldBeActive || root.visible sourceComponent: Content { implicitWidth: Config.sidebar.sizes.width - Appearance.padding.large * 2