diff --git a/Drawers/Interactions.qml b/Drawers/Interactions.qml index e09228f..c3abfe8 100644 --- a/Drawers/Interactions.qml +++ b/Drawers/Interactions.qml @@ -96,25 +96,25 @@ CustomMouseArea { if (dragY < -10) visibilities.dock = true; - if (panels.sidebar.width === 0) { - const showOsd = inRightPanel(panels.osd, x, y); + if (panels.sidebar.width === 0) { + const showOsd = inRightPanel(panels.osdWrapper, x, y); - if (showOsd) { - osdShortcutActive = false; - root.panels.osd.hovered = true; - } - } else { - const outOfSidebar = x < width - panels.sidebar.width; - const showOsd = outOfSidebar && inRightPanel(panels.osd, x, y); + if (showOsd) { + osdShortcutActive = false; + root.panels.osd.hovered = true; + } + } else { + const outOfSidebar = x < width - panels.sidebar.width; + const showOsd = outOfSidebar && inRightPanel(panels.osdWrapper, x, y); - if (!osdShortcutActive) { - visibilities.osd = showOsd; - root.panels.osd.hovered = showOsd; - } else if (showOsd) { - osdShortcutActive = false; - root.panels.osd.hovered = true; + if (!osdShortcutActive) { + visibilities.osd = showOsd; + root.panels.osd.hovered = showOsd; + } else if (showOsd) { + osdShortcutActive = false; + root.panels.osd.hovered = true; + } } - } if (Config.dock.enable && !Config.dock.hoverToReveal && !visibilities.dock && !visibilities.launcher && inBottomPanel(panels.dock, x, y)) visibilities.dock = true; diff --git a/Drawers/Panels.qml b/Drawers/Panels.qml index a328fa7..b9d230c 100644 --- a/Drawers/Panels.qml +++ b/Drawers/Panels.qml @@ -26,6 +26,7 @@ Item { readonly property alias launcher: launcher readonly property alias notifications: notifications readonly property alias osd: osd + readonly property alias osdWrapper: osdWrapper readonly property alias popouts: popouts.content readonly property alias popoutsWrapper: popouts readonly property alias resources: resources @@ -48,6 +49,28 @@ Item { visibilities: root.visibilities } + Item { + id: osdWrapper + + anchors.right: parent.right + anchors.rightMargin: sidebar.width * (1 - sidebar.offsetScale) + anchors.verticalCenter: parent.verticalCenter + clip: sidebar.visible + + implicitHeight: osd.implicitHeight + implicitWidth: osd.implicitWidth * (1 - osd.offsetScale) + + Osd.Wrapper { + id: osd + + anchors.right: parent.right + anchors.verticalCenter: parent.verticalCenter + screen: root.screen + sidebarOrSessionVisible: sidebar.visible + visibilities: root.visibilities + } + } + Drawing.Wrapper { id: drawing @@ -58,17 +81,6 @@ Item { visibilities: root.visibilities } - Osd.Wrapper { - id: osd - - anchors.right: parent.right - anchors.rightMargin: sidebar.width - anchors.verticalCenter: parent.verticalCenter - clip: sidebar.width > 0 - screen: root.screen - visibilities: root.visibilities - } - Modules.ClipWrapper { id: popouts diff --git a/Drawers/Windows.qml b/Drawers/Windows.qml index 790b9c6..b1364b5 100644 --- a/Drawers/Windows.qml +++ b/Drawers/Windows.qml @@ -188,7 +188,7 @@ Variants { bottomLeftRadius: 0 deformAmount: 0.1 * Config.appearance.deform.scale - exclude: panels.sidebar.offsetscale > 0.08 ? [] : [utilsBg] + exclude: panels.sidebar.offsetScale > 0.08 ? [] : [utilsBg] implicitHeight: panel.height * (1 / rawDeformMatrix.m22) + 2 panel: panels.sidebar } @@ -197,8 +197,10 @@ Variants { id: osdBg deformAmount: 0.1 * Config.appearance.deform.scale - panel: panels.osd + implicitWidth: panels.osd.width + panel: panels.osdWrapper radius: 20 + x: panels.osdWrapper.x + panels.osd.x + Config.barConfig.border } PanelBg { diff --git a/Modules/Dashboard/Wrapper.qml b/Modules/Dashboard/Wrapper.qml index 11858d6..757eab9 100644 --- a/Modules/Dashboard/Wrapper.qml +++ b/Modules/Dashboard/Wrapper.qml @@ -17,76 +17,33 @@ Item { readonly property real nonAnimHeight: state === "visible" ? (content.item?.nonAnimHeight ?? 0) : 0 required property PersistentProperties visibilities - implicitHeight: 0 - implicitWidth: content.implicitWidth - visible: height > 0 + readonly property bool shouldBeActive: root.visibilities.dashboard && Config.dashboard.enabled + property real offsetScale: shouldBeActive ? 0 : 1 - states: State { - name: "visible" - when: root.visibilities.dashboard && Config.dashboard.enabled + visible: offsetScale < 1 + anchors.topMargin: (-implicitHeight - 5) * offsetScale + implicitHeight: content.implicitHeight + implicitWidth: content.implicitWidth || 854 // Hard coded fallback for first open + opacity: 1 - offsetScale - PropertyChanges { - root.implicitHeight: content.implicitHeight - } - } - transitions: [ - Transition { - from: "" - to: "visible" - - Anim { - duration: MaterialEasing.expressiveEffectsTime - easing.bezierCurve: MaterialEasing.expressiveEffects - property: "implicitHeight" - target: root - } - }, - Transition { - from: "visible" - to: "" - - Anim { - easing.bezierCurve: MaterialEasing.expressiveEffects - property: "implicitHeight" - target: root - } - } - ] - - onStateChanged: { - if (state === "visible" && timer.running) { - timer.triggered(); - timer.stop(); + Behavior on offsetScale { + Anim { + duration: Appearance.anim.durations.expressiveDefaultSpatial + easing.bezierCurve: Appearance.anim.curves.expressiveDefaultSpatial } } - Timer { - id: timer + Loader { + id: content - interval: Appearance.anim.durations.extraLarge - running: true + anchors.bottom: parent.bottom + anchors.horizontalCenter: parent.horizontalCenter - onTriggered: { - content.active = Qt.binding(() => (root.visibilities.dashboard && Config.dashboard.enabled) || root.visible); - content.visible = true; - } - } + active: root.shouldBeActive || root.visible - CustomClippingRect { - anchors.fill: parent - - Loader { - id: content - - active: true - anchors.bottom: parent.bottom - anchors.horizontalCenter: parent.horizontalCenter - visible: false - - sourceComponent: Content { - state: root.dashState - visibilities: root.visibilities - } + sourceComponent: Content { + state: root.dashState + visibilities: root.visibilities } } } diff --git a/Modules/Dock/Wrapper.qml b/Modules/Dock/Wrapper.qml index 667ab62..26dbb15 100644 --- a/Modules/Dock/Wrapper.qml +++ b/Modules/Dock/Wrapper.qml @@ -11,97 +11,36 @@ Item { property int contentHeight required property var panels required property ShellScreen screen - readonly property bool shouldBeActive: visibilities.dock required property PersistentProperties visibilities - implicitHeight: 0 - implicitWidth: content.implicitWidth - visible: height > 0 + readonly property bool shouldBeActive: visibilities.dock + property real offsetScale: shouldBeActive ? 0 : 1 - Behavior on implicitWidth { + visible: offsetScale < 1 + anchors.bottomMargin: (-implicitHeight - 5) * offsetScale + implicitHeight: content.implicitHeight + implicitWidth: content.implicitWidth || 400 + opacity: 1 - offsetScale + + Behavior on offsetScale { Anim { - duration: Appearance.anim.durations.small - } - } - - onShouldBeActiveChanged: { - if (shouldBeActive) { - timer.stop(); - hideAnim.stop(); - showAnim.start(); - } else { - showAnim.stop(); - hideAnim.start(); - } - } - - SequentialAnimation { - id: showAnim - - Anim { - duration: Appearance.anim.durations.small - easing.bezierCurve: Appearance.anim.curves.expressiveEffects - property: "implicitHeight" - target: root - to: root.contentHeight - } - - ScriptAction { - script: root.implicitHeight = Qt.binding(() => content.implicitHeight) - } - } - - SequentialAnimation { - id: hideAnim - - ScriptAction { - script: root.implicitHeight = root.implicitHeight - } - - Anim { - easing.bezierCurve: Appearance.anim.curves.expressiveEffects - property: "implicitHeight" - target: root - to: 0 - } - } - - Timer { - id: timer - - interval: Appearance.anim.durations.small - - onRunningChanged: { - if (running && !root.shouldBeActive) { - content.visible = false; - content.active = true; - } else { - content.active = Qt.binding(() => root.shouldBeActive || root.visible); - content.visible = true; - if (showAnim.running) { - showAnim.stop(); - showAnim.start(); - } - } + duration: Appearance.anim.durations.expressiveDefaultSpatial + easing.bezierCurve: Appearance.anim.curves.expressiveDefaultSpatial } } Loader { id: content - active: false anchors.left: parent.left anchors.top: parent.top - visible: false + + active: root.shouldBeActive || root.visible sourceComponent: Content { panels: root.panels screen: root.screen visibilities: root.visibilities - - Component.onCompleted: root.contentHeight = implicitHeight } - - Component.onCompleted: timer.start() } } diff --git a/Modules/Launcher/Wrapper.qml b/Modules/Launcher/Wrapper.qml index 677abb1..a2c6ea6 100644 --- a/Modules/Launcher/Wrapper.qml +++ b/Modules/Launcher/Wrapper.qml @@ -21,53 +21,27 @@ Item { } required property var panels required property ShellScreen screen - readonly property bool shouldBeActive: visibilities.launcher required property PersistentProperties visibilities + readonly property bool shouldBeActive: visibilities.launcher + property real offsetScale: shouldBeActive ? 0 : 1 - implicitHeight: 0 - implicitWidth: content.implicitWidth - visible: height > 0 + visible: offsetScale < 1 + anchors.bottomMargin: (-implicitHeight - 5) * offsetScale + implicitHeight: contentHeight + implicitWidth: content.implicitWidth || 400 + opacity: 1 - offsetScale + + Behavior on offsetScale { + Anim { + duration: Appearance.anim.durations.expressiveDefaultSpatial + easing.bezierCurve: Appearance.anim.curves.expressiveDefaultSpatial + } + } onMaxHeightChanged: timer.start() onShouldBeActiveChanged: { if (shouldBeActive) { timer.stop(); - hideAnim.stop(); - showAnim.start(); - } else { - showAnim.stop(); - hideAnim.start(); - } - } - - SequentialAnimation { - id: showAnim - - Anim { - duration: Appearance.anim.durations.small - easing.bezierCurve: Appearance.anim.curves.expressiveEffects - property: "implicitHeight" - target: root - to: root.contentHeight - } - - ScriptAction { - script: root.implicitHeight = Qt.binding(() => content.implicitHeight) - } - } - - SequentialAnimation { - id: hideAnim - - ScriptAction { - script: root.implicitHeight = root.implicitHeight - } - - Anim { - easing.bezierCurve: Appearance.anim.curves.expressiveEffects - property: "implicitHeight" - target: root - to: 0 } } @@ -105,10 +79,6 @@ Item { root.contentHeight = Math.min(root.maxHeight, content.implicitHeight); content.active = Qt.binding(() => root.shouldBeActive || root.visible); content.visible = true; - if (showAnim.running) { - showAnim.stop(); - showAnim.start(); - } } } } @@ -119,7 +89,6 @@ Item { active: false anchors.horizontalCenter: parent.horizontalCenter anchors.top: parent.top - visible: false sourceComponent: Content { maxHeight: root.maxHeight diff --git a/Modules/Notifications/Sidebar/Utils/Wrapper.qml b/Modules/Notifications/Sidebar/Utils/Wrapper.qml index b37fd1c..81d7d00 100644 --- a/Modules/Notifications/Sidebar/Utils/Wrapper.qml +++ b/Modules/Notifications/Sidebar/Utils/Wrapper.qml @@ -20,69 +20,29 @@ Item { required property Item sidebar required property var visibilities - implicitHeight: 0 - implicitWidth: sidebar.visible ? sidebar.width : Config.utilities.sizes.width - visible: height > 0 + property real offsetScale: shouldBeActive ? 0 : 1 - states: State { - name: "visible" - when: root.shouldBeActive + visible: offsetScale < 1 + anchors.bottomMargin: (-implicitHeight - 5) * offsetScale + implicitHeight: content.implicitHeight + 8 * 2 + implicitWidth: sidebar.width * (1 - sidebar.offsetScale) + opacity: 1 - offsetScale - PropertyChanges { - root.implicitHeight: content.implicitHeight + 8 * 2 - } - } - transitions: [ - Transition { - from: "" - to: "visible" - - Anim { - duration: MaterialEasing.expressiveEffectsTime - easing.bezierCurve: MaterialEasing.expressiveEffects - property: "implicitHeight" - target: root - } - }, - Transition { - from: "visible" - to: "" - - Anim { - easing.bezierCurve: MaterialEasing.expressiveEffects - property: "implicitHeight" - target: root - } - } - ] - - onStateChanged: { - if (state === "visible" && timer.running) { - timer.triggered(); - timer.stop(); - } - } - - Timer { - id: timer - - interval: 1000 - running: true - - onTriggered: { - content.active = Qt.binding(() => root.shouldBeActive || root.visible); - content.visible = true; + Behavior on offsetScale { + Anim { + duration: Appearance.anim.durations.expressiveDefaultSpatial + easing.bezierCurve: Appearance.anim.curves.expressiveDefaultSpatial } } Loader { id: content - active: true anchors.left: parent.left anchors.margins: 8 anchors.top: parent.top - visible: false + + active: root.shouldBeActive || root.visible sourceComponent: Content { implicitWidth: root.implicitWidth - 8 * 2 diff --git a/Modules/Notifications/Sidebar/Wrapper.qml b/Modules/Notifications/Sidebar/Wrapper.qml index 4e10cd4..e48f9fc 100644 --- a/Modules/Notifications/Sidebar/Wrapper.qml +++ b/Modules/Notifications/Sidebar/Wrapper.qml @@ -12,57 +12,36 @@ Item { } required property var visibilities - implicitWidth: 0 - visible: width > 0 + readonly property bool shouldBeActive: root.visibilities.sidebar && Config.sidebar.enabled + property real offsetScale: shouldBeActive ? 0 : 1 - states: State { - name: "visible" - when: root.visibilities.sidebar + visible: offsetScale < 1 + anchors.rightMargin: (-implicitWidth - 5) * offsetScale + implicitWidth: Config.sidebar.sizes.width + opacity: 1 - offsetScale - PropertyChanges { - root.implicitWidth: Config.sidebar.sizes.width + Behavior on offsetScale { + Anim { + duration: Appearance.anim.durations.expressiveDefaultSpatial + easing.bezierCurve: Appearance.anim.curves.expressiveDefaultSpatial } } - transitions: [ - Transition { - from: "" - to: "visible" - - Anim { - duration: MaterialEasing.expressiveEffectsTime - easing.bezierCurve: MaterialEasing.expressiveEffects - property: "implicitWidth" - target: root - } - }, - Transition { - from: "visible" - to: "" - - Anim { - easing.bezierCurve: MaterialEasing.expressiveEffects - property: "implicitWidth" - target: root - } - } - ] Loader { id: content - active: true anchors.bottom: parent.bottom anchors.bottomMargin: 0 anchors.left: parent.left anchors.margins: 8 anchors.top: parent.top + active: root.shouldBeActive || root.visible + sourceComponent: Content { implicitWidth: Config.sidebar.sizes.width - 8 * 2 props: root.props visibilities: root.visibilities } - - Component.onCompleted: active = Qt.binding(() => (root.visibilities.sidebar && Config.sidebar.enabled) || root.visible) } } diff --git a/Modules/Notifications/Wrapper.qml b/Modules/Notifications/Wrapper.qml index 1e7038f..08918ef 100644 --- a/Modules/Notifications/Wrapper.qml +++ b/Modules/Notifications/Wrapper.qml @@ -22,8 +22,8 @@ Item { } transitions: Transition { Anim { - duration: MaterialEasing.expressiveEffectsTime - easing.bezierCurve: MaterialEasing.expressiveEffects + duration: Appearance.anim.durations.expressiveDefaultSpatial + easing.bezierCurve: Appearance.anim.curves.expressiveDefaultSpatial property: "implicitHeight" target: root } diff --git a/Modules/Osd/Wrapper.qml b/Modules/Osd/Wrapper.qml index b0815e8..3d9c3c1 100644 --- a/Modules/Osd/Wrapper.qml +++ b/Modules/Osd/Wrapper.qml @@ -26,40 +26,22 @@ Item { timer.restart(); } + property real offsetScale: shouldBeActive ? 0 : 1 + required property bool sidebarOrSessionVisible + property real sidebarOffset: sidebarOrSessionVisible ? 12 : 0 + + visible: offsetScale < 1 + anchors.rightMargin: (-implicitWidth - 5 - sidebarOffset) * offsetScale + implicitWidth: content.implicitWidth implicitHeight: content.implicitHeight - implicitWidth: 0 - visible: width > 0 + opacity: 1 - offsetScale - states: State { - name: "visible" - when: root.shouldBeActive - - PropertyChanges { - root.implicitWidth: content.implicitWidth + Behavior on offsetScale { + Anim { + duration: Appearance.anim.durations.expressiveDefaultSpatial + easing.bezierCurve: Appearance.anim.curves.expressiveDefaultSpatial } } - transitions: [ - Transition { - from: "" - to: "visible" - - Anim { - easing.bezierCurve: MaterialEasing.expressiveEffects - property: "implicitWidth" - target: root - } - }, - Transition { - from: "visible" - to: "" - - Anim { - easing.bezierCurve: MaterialEasing.expressiveEffects - property: "implicitWidth" - target: root - } - } - ] Component.onCompleted: { volume = Audio.volume; @@ -113,26 +95,22 @@ Item { } } - CustomClippingRect { - anchors.fill: parent + Loader { + id: content - Loader { - id: content + anchors.left: parent.left + anchors.verticalCenter: parent.verticalCenter - anchors.left: parent.left - anchors.verticalCenter: parent.verticalCenter + active: root.shouldBeActive || root.visible - sourceComponent: Content { - brightness: root.brightness - monitor: root.monitor - muted: root.muted - sourceMuted: root.sourceMuted - sourceVolume: root.sourceVolume - visibilities: root.visibilities - volume: root.volume - } - - Component.onCompleted: active = Qt.binding(() => root.shouldBeActive || root.visible) + sourceComponent: Content { + brightness: root.brightness + monitor: root.monitor + muted: root.muted + sourceMuted: root.sourceMuted + sourceVolume: root.sourceVolume + visibilities: root.visibilities + volume: root.volume } } } diff --git a/Modules/Resources/Wrapper.qml b/Modules/Resources/Wrapper.qml index a1f750e..16f7086 100644 --- a/Modules/Resources/Wrapper.qml +++ b/Modules/Resources/Wrapper.qml @@ -11,76 +11,33 @@ Item { readonly property real nonAnimHeight: state === "visible" ? (content.item?.nonAnimHeight ?? 0) : 0 required property PersistentProperties visibilities - implicitHeight: 0 - implicitWidth: content.implicitWidth - visible: height > 0 + readonly property bool shouldBeActive: root.visibilities.resources + property real offsetScale: shouldBeActive ? 0 : 1 - states: State { - name: "visible" - when: root.visibilities.resources + visible: offsetScale < 1 + anchors.topMargin: (-implicitHeight - 5) * offsetScale + implicitHeight: content.implicitHeight + implicitWidth: content.implicitWidth || 854 // Hard coded fallback for first open + opacity: 1 - offsetScale - PropertyChanges { - root.implicitHeight: content.implicitHeight - } - } - transitions: [ - Transition { - from: "" - to: "visible" - - Anim { - duration: MaterialEasing.expressiveEffectsTime - easing.bezierCurve: MaterialEasing.expressiveEffects - property: "implicitHeight" - target: root - } - }, - Transition { - from: "visible" - to: "" - - Anim { - easing.bezierCurve: MaterialEasing.expressiveEffects - property: "implicitHeight" - target: root - } - } - ] - - onStateChanged: { - if (state === "visible" && timer.running) { - timer.triggered(); - timer.stop(); + Behavior on offsetScale { + Anim { + duration: Appearance.anim.durations.expressiveDefaultSpatial + easing.bezierCurve: Appearance.anim.curves.expressiveDefaultSpatial } } - Timer { - id: timer + Loader { + id: content - interval: Appearance.anim.durations.extraLarge - running: true + anchors.bottom: parent.bottom + anchors.horizontalCenter: parent.horizontalCenter - onTriggered: { - content.active = Qt.binding(() => (root.visibilities.resources) || root.visible); - content.visible = true; - } - } + active: root.shouldBeActive || root.visible - CustomClippingRect { - anchors.fill: parent - - Loader { - id: content - - active: true - anchors.bottom: parent.bottom - anchors.horizontalCenter: parent.horizontalCenter - visible: false - - sourceComponent: Content { - padding: Appearance.padding.normal - visibilities: root.visibilities - } + sourceComponent: Content { + padding: Appearance.padding.normal + visibilities: root.visibilities } } }