From 24a3da813862623b3eec05ef5050ba715e08c684 Mon Sep 17 00:00:00 2001 From: 2 * r + 2 * t <61896496+soramanew@users.noreply.github.com> Date: Mon, 2 Jun 2025 16:31:26 +0800 Subject: feat: bar popouts Create active window popout --- modules/bar/Content.qml | 25 +++++++++++ modules/bar/components/ActiveWindow.qml | 1 + modules/bar/popouts/ActiveWindow.qml | 33 ++++++++++++++ modules/bar/popouts/Background.qml | 63 ++++++++++++++++++++++++++ modules/bar/popouts/Content.qml | 79 +++++++++++++++++++++++++++++++++ modules/bar/popouts/Wrapper.qml | 19 ++++++++ modules/drawers/Backgrounds.qml | 8 ++++ modules/drawers/Interactions.qml | 13 ++++++ modules/drawers/Panels.qml | 12 +++++ services/Popouts.qml | 10 +++++ 10 files changed, 263 insertions(+) create mode 100644 modules/bar/popouts/ActiveWindow.qml create mode 100644 modules/bar/popouts/Background.qml create mode 100644 modules/bar/popouts/Content.qml create mode 100644 modules/bar/popouts/Wrapper.qml create mode 100644 services/Popouts.qml diff --git a/modules/bar/Content.qml b/modules/bar/Content.qml index ac828f8..7d91076 100644 --- a/modules/bar/Content.qml +++ b/modules/bar/Content.qml @@ -12,6 +12,18 @@ StyledRect { required property ShellScreen screen + function checkPopout(y: real): var { + const aw = activeWindow.child + const awy = activeWindow.y + aw.y + if (y >= awy && y <= awy + aw.implicitHeight) { + Popouts.currentName = "activewindow" + Popouts.currentCenter = Qt.binding(() => activeWindow.y + aw.y + aw.implicitHeight / 2); + Popouts.hasCurrent = true; + } else { + Popouts.hasCurrent = false; + } + } + anchors.top: parent.top anchors.bottom: parent.bottom @@ -21,6 +33,19 @@ StyledRect { Component.onCompleted: Visibilities.bars[screen] = this + MouseArea { + anchors.fill: parent + + hoverEnabled: true + + onPositionChanged: event => root.checkPopout(event.y) + + onContainsMouseChanged: { + if (!containsMouse) + Popouts.hasCurrent = false; + } + } + Item { id: child diff --git a/modules/bar/components/ActiveWindow.qml b/modules/bar/components/ActiveWindow.qml index 8195b51..6f387f4 100644 --- a/modules/bar/components/ActiveWindow.qml +++ b/modules/bar/components/ActiveWindow.qml @@ -10,6 +10,7 @@ Item { id: root property color colour: Colours.palette.m3primary + readonly property Item child: child implicitWidth: child.implicitWidth implicitHeight: child.implicitHeight diff --git a/modules/bar/popouts/ActiveWindow.qml b/modules/bar/popouts/ActiveWindow.qml new file mode 100644 index 0000000..06ad52c --- /dev/null +++ b/modules/bar/popouts/ActiveWindow.qml @@ -0,0 +1,33 @@ + + +import "root:/widgets" +import "root:/services" +import "root:/utils" +import "root:/config" +import Quickshell.Wayland +import QtQuick + +Item { + id: root + + implicitWidth: child.implicitWidth + implicitHeight: child.implicitHeight + + Column { + id: child + + anchors.centerIn: parent + + StyledText { + text: Hyprland.activeClient?.title ?? "" + } + + StyledText { + text: Hyprland.activeClient?.wmClass ?? "" + } + + ScreencopyView { + + } + } +} diff --git a/modules/bar/popouts/Background.qml b/modules/bar/popouts/Background.qml new file mode 100644 index 0000000..dd76af8 --- /dev/null +++ b/modules/bar/popouts/Background.qml @@ -0,0 +1,63 @@ +import "root:/services" +import "root:/config" +import QtQuick +import QtQuick.Shapes + +ShapePath { + id: root + + required property Wrapper wrapper + readonly property real rounding: BorderConfig.rounding + readonly property bool flatten: wrapper.width < rounding * 2 + readonly property real roundingX: flatten ? wrapper.width / 2 : rounding + + strokeWidth: -1 + fillColor: BorderConfig.colour + + PathArc { + relativeX: root.roundingX + relativeY: root.rounding + radiusX: Math.min(root.rounding, root.wrapper.width) + radiusY: root.rounding + direction: PathArc.Counterclockwise + } + PathLine { + relativeX: root.wrapper.width - root.roundingX * 2 + relativeY: 0 + } + PathArc { + relativeX: root.roundingX + relativeY: root.rounding + radiusX: Math.min(root.rounding, root.wrapper.width) + radiusY: root.rounding + } + PathLine { + relativeX: 0 + relativeY: root.wrapper.height - root.rounding * 4 + } + PathArc { + relativeX: -root.roundingX + relativeY: root.rounding + radiusX: Math.min(root.rounding, root.wrapper.width) + radiusY: root.rounding + } + PathLine { + relativeX: -(root.wrapper.width - root.roundingX * 2) + relativeY: 0 + } + PathArc { + relativeX: -root.roundingX + relativeY: root.rounding + radiusX: Math.min(root.rounding, root.wrapper.width) + radiusY: root.rounding + direction: PathArc.Counterclockwise + } + + Behavior on fillColor { + ColorAnimation { + duration: Appearance.anim.durations.normal + easing.type: Easing.BezierSpline + easing.bezierCurve: Appearance.anim.curves.standard + } + } +} diff --git a/modules/bar/popouts/Content.qml b/modules/bar/popouts/Content.qml new file mode 100644 index 0000000..be45eac --- /dev/null +++ b/modules/bar/popouts/Content.qml @@ -0,0 +1,79 @@ +import "root:/services" +import "root:/config" +import Quickshell +import Quickshell.Widgets +import QtQuick + +Item { + id: root + + required property ShellScreen screen + + anchors.centerIn: parent + + implicitWidth: Popouts.hasCurrent ? content.children.find(c => c.shouldBeActive).implicitWidth + Appearance.padding.large * 2 : 0 + implicitHeight: Popouts.hasCurrent ? content.children.find(c => c.shouldBeActive).implicitHeight + Appearance.padding.large * 2 : 0 + clip: true + + Item { + id: content + + anchors.fill: parent + anchors.margins: Appearance.padding.large + + clip: true + + Popout { + name: "activewindow" + sourceComponent: ActiveWindow {} + } + } + + Behavior on implicitWidth { + Anim { + easing.bezierCurve: Appearance.anim.curves.emphasized + } + } + + Behavior on implicitHeight { + Anim { + easing.bezierCurve: Appearance.anim.curves.emphasized + } + } + + component Popout: Loader { + id: popout + + required property string name + property bool shouldBeActive: Popouts.currentName === name + + active: shouldBeActive + asynchronous: true + + Behavior on active { + SequentialAnimation { + Anim { + target: popout + property: "opacity" + from: popout.shouldBeActive ? 1 : 0 + to: popout.shouldBeActive ? 0 : 1 + duration: popout.shouldBeActive ? 0 : Appearance.anim.durations.normal + } + PropertyAction {} + Anim { + target: popout + property: "opacity" + from: popout.shouldBeActive ? 0 : 1 + to: popout.shouldBeActive ? 1 : 0 + duration: popout.shouldBeActive ? Appearance.anim.durations.normal : 0 + } + } + } + } + + component Anim: NumberAnimation { + duration: Appearance.anim.durations.normal + easing.type: Easing.BezierSpline + easing.bezierCurve: Appearance.anim.curves.standard + } +} diff --git a/modules/bar/popouts/Wrapper.qml b/modules/bar/popouts/Wrapper.qml new file mode 100644 index 0000000..7782d90 --- /dev/null +++ b/modules/bar/popouts/Wrapper.qml @@ -0,0 +1,19 @@ +import "root:/services" +import "root:/config" +import Quickshell +import QtQuick + +Item { + id: root + + required property ShellScreen screen + + implicitWidth: content.implicitWidth + implicitHeight: content.implicitHeight + BorderConfig.rounding * 2 + + Content { + id: content + + screen: root.screen + } +} diff --git a/modules/drawers/Backgrounds.qml b/modules/drawers/Backgrounds.qml index a78c667..d4ea1d7 100644 --- a/modules/drawers/Backgrounds.qml +++ b/modules/drawers/Backgrounds.qml @@ -5,6 +5,7 @@ import "root:/modules/notifications" as Notifications import "root:/modules/session" as Session import "root:/modules/launcher" as Launcher import "root:/modules/dashboard" as Dashboard +import "root:/modules/bar/popouts" as BarPopouts import QtQuick.Shapes Shape { @@ -51,4 +52,11 @@ Shape { startX: (root.width - wrapper.width) / 2 startY: 0 } + + BarPopouts.Background { + wrapper: panels.popouts + + startX: 0 + startY: wrapper.y + } } diff --git a/modules/drawers/Interactions.qml b/modules/drawers/Interactions.qml index cd09140..03c4e5e 100644 --- a/modules/drawers/Interactions.qml +++ b/modules/drawers/Interactions.qml @@ -37,6 +37,7 @@ MouseArea { visibilities.osd = false; osdHovered = false; visibilities.dashboard = false; + Popouts.hasCurrent = false; } } @@ -58,6 +59,18 @@ MouseArea { // Show dashboard on hover const showDashboard = root.inTopPanel(panels.dashboard, x, y); visibilities.dashboard = showDashboard; + + // Show popouts on hover + const popout = panels.popouts; + if (x < BorderConfig.thickness + popout.width) { + if (x < BorderConfig.thickness) + // Handle like part of bar + Visibilities.bars[screen].checkPopout(y); + else + // Keep on hover + Popouts.hasCurrent = withinPanelHeight(popout, x, y); + } else + Popouts.hasCurrent = false; } Osd.Interactions { diff --git a/modules/drawers/Panels.qml b/modules/drawers/Panels.qml index 5ea7e83..844a719 100644 --- a/modules/drawers/Panels.qml +++ b/modules/drawers/Panels.qml @@ -5,6 +5,7 @@ import "root:/modules/notifications" as Notifications import "root:/modules/session" as Session import "root:/modules/launcher" as Launcher import "root:/modules/dashboard" as Dashboard +import "root:/modules/bar/popouts" as BarPopouts import Quickshell import QtQuick @@ -19,6 +20,7 @@ Item { readonly property Session.Wrapper session: session readonly property Launcher.Wrapper launcher: launcher readonly property Dashboard.Wrapper dashboard: dashboard + readonly property BarPopouts.Wrapper popouts: popouts anchors.fill: parent anchors.margins: BorderConfig.thickness @@ -70,4 +72,14 @@ Item { anchors.horizontalCenter: parent.horizontalCenter anchors.top: parent.top } + + BarPopouts.Wrapper { + id: popouts + + screen: root.screen + + anchors.left: parent.left + anchors.verticalCenter: parent.top + anchors.verticalCenterOffset: Popouts.currentCenter - BorderConfig.thickness + } } diff --git a/services/Popouts.qml b/services/Popouts.qml new file mode 100644 index 0000000..fa5b2d6 --- /dev/null +++ b/services/Popouts.qml @@ -0,0 +1,10 @@ +pragma Singleton + +import Quickshell +import QtQuick + +Singleton { + property string currentName + property real currentCenter + property bool hasCurrent +} -- cgit v1.2.3-freya