139 lines
2.5 KiB
QML
139 lines
2.5 KiB
QML
import QtQuick
|
|
import QtQuick.Controls
|
|
import QtQuick.Effects
|
|
import Quickshell
|
|
import Quickshell.Hyprland
|
|
|
|
import "../Color.js" as Colors
|
|
|
|
Item {
|
|
id: containerRoot
|
|
|
|
property color boxColor: Colors.surface0
|
|
property double boxHeight: 28
|
|
property double boxRadius: 9
|
|
property double boxWidth: 100
|
|
readonly property double calculatedTopMargin: {
|
|
if (containerRoot.exclusiveToScreen) {
|
|
if (Hyprland.focusedMonitor != containerRoot.exclusiveMonitor) {
|
|
return -4 - containerRoot.boxHeight - 5;
|
|
} else {
|
|
return visibleTopMargin;
|
|
}
|
|
} else {
|
|
return visibleTopMargin;
|
|
}
|
|
}
|
|
property Component defaultItem
|
|
required property HyprlandMonitor exclusiveMonitor
|
|
property bool exclusiveToScreen: false
|
|
property alias hover: hoverHandler
|
|
property alias rect: container
|
|
property alias stack: containerContent
|
|
property alias tap: tapHandler
|
|
property double visibleTopMargin: 0
|
|
|
|
implicitHeight: boxHeight
|
|
implicitWidth: boxWidth
|
|
|
|
Behavior on anchors.topMargin {
|
|
animation: defaultCurve
|
|
}
|
|
Behavior on boxHeight {
|
|
SpringAnimation {
|
|
damping: 0.3
|
|
spring: 4
|
|
}
|
|
}
|
|
Behavior on boxRadius {
|
|
SpringAnimation {
|
|
damping: 0.3
|
|
spring: 4
|
|
}
|
|
}
|
|
Behavior on boxWidth {
|
|
SpringAnimation {
|
|
damping: 0.3
|
|
spring: 4
|
|
}
|
|
}
|
|
|
|
anchors {
|
|
top: parent.top
|
|
topMargin: calculatedTopMargin
|
|
}
|
|
|
|
NumberAnimation {
|
|
id: defaultCurve
|
|
|
|
duration: 200
|
|
easing: Easing.InOutBack
|
|
}
|
|
|
|
HoverHandler {
|
|
id: hoverHandler
|
|
}
|
|
|
|
TapHandler {
|
|
id: tapHandler
|
|
}
|
|
|
|
RectangularShadow {
|
|
anchors.fill: container
|
|
blur: 30
|
|
color: Colors.mantle
|
|
offset.x: 7
|
|
offset.y: 3
|
|
radius: container.radius
|
|
spread: 10
|
|
}
|
|
|
|
Rectangle {
|
|
id: container
|
|
|
|
anchors.fill: parent
|
|
clip: true
|
|
color: containerRoot.boxColor
|
|
radius: containerRoot.boxRadius
|
|
|
|
StackView {
|
|
id: containerContent
|
|
|
|
anchors.fill: parent
|
|
|
|
replaceEnter: Transition {
|
|
PropertyAnimation {
|
|
duration: 100
|
|
from: 0
|
|
property: "opacity"
|
|
to: 1
|
|
}
|
|
|
|
PropertyAnimation {
|
|
duration: 100
|
|
from: -5
|
|
property: "anchors.topMargin"
|
|
to: 0
|
|
}
|
|
}
|
|
replaceExit: Transition {
|
|
PropertyAnimation {
|
|
duration: 100
|
|
from: 1
|
|
property: "opacity"
|
|
to: 0
|
|
}
|
|
}
|
|
|
|
Component.onCompleted: containerContent.push(containerRoot.defaultItem)
|
|
onCurrentItemChanged: {
|
|
if (currentItem) {
|
|
// Dynamically center the incoming child to the StackView
|
|
currentItem.anchors.horizontalCenter = containerContent.horizontalCenter;
|
|
currentItem.anchors.verticalCenter = containerContent.verticalCenter;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|