diff options
Diffstat (limited to 'quickshell/modules/bar/QuickControl.qml')
| -rw-r--r-- | quickshell/modules/bar/QuickControl.qml | 246 |
1 files changed, 246 insertions, 0 deletions
diff --git a/quickshell/modules/bar/QuickControl.qml b/quickshell/modules/bar/QuickControl.qml new file mode 100644 index 0000000..4b54d22 --- /dev/null +++ b/quickshell/modules/bar/QuickControl.qml @@ -0,0 +1,246 @@ +import QtQuick +import QtQuick.Layouts +import Quickshell +import Quickshell.Services.SystemTray +import "../../config.js" as Config + +Rectangle { + id: root + + property bool expanded: false + + implicitWidth: expanded + ? layout.implicitWidth + 24 + : dotsContainer.implicitWidth + 24 + + implicitHeight: Config.blockHeight + + radius: Config.blockRadius + + gradient: Gradient { + GradientStop { + id: stop1 + position: 0.0 + color: Config.accentGreen + } + + GradientStop { + id: stop2 + position: 0.33 + color: Config.accentYellow + } + + GradientStop { + id: stop3 + position: 0.66 + color: Config.accentOrange + } + + GradientStop { + id: stop4 + position: 1.0 + color: Config.accentRed + } + } + + Behavior on implicitWidth { + NumberAnimation { + duration: 250 + easing.type: Easing.OutCubic + } + } + + RowLayout { + id: layout + + anchors { + right: parent.right + verticalCenter: parent.verticalCenter + rightMargin: 12 + } + + spacing: 8 + + Repeater { + model: SystemTray.items + + delegate: Item { + id: trayItem + + required property var modelData + + implicitWidth: 18 + implicitHeight: 18 + + Layout.preferredWidth: 18 + Layout.preferredHeight: 18 + + opacity: root.expanded ? 1 : 0 + + Behavior on opacity { + NumberAnimation { + duration: 200 + easing.type: Easing.OutCubic + } + } + + visible: opacity > 0 + + QsMenuAnchor { + id: menuAnchor + + anchor.item: trayItem + menu: modelData.menu + } + + Image { + anchors.fill: parent + + source: modelData.icon + sourceSize.width: 18 + sourceSize.height: 18 + fillMode: Image.PreserveAspectFit + } + + MouseArea { + anchors.fill: parent + + enabled: root.expanded + + acceptedButtons: Qt.LeftButton | Qt.RightButton | Qt.MiddleButton + + cursorShape: Qt.PointingHandCursor + + onClicked: function(mouse) { + if (mouse.button === Qt.RightButton) { + if (modelData.hasMenu) + menuAnchor.open() + return + } + + if (mouse.button === Qt.MiddleButton) { + modelData.secondaryActivate() + return + } + + if (modelData.onlyMenu && modelData.hasMenu) + menuAnchor.open() + else + modelData.activate() + } + } + } + } + + Item { + id: dotsContainer + + implicitWidth: 24 + implicitHeight: Config.blockHeight + + Layout.preferredWidth: 24 + Layout.preferredHeight: Config.blockHeight + Layout.alignment: Qt.AlignVCenter + + Text { + id: dots + + anchors.centerIn: parent + + text: "•••" + + color: Config.textDark + + font.family: Config.fontFamily + font.pixelSize: Config.fontSize + font.bold: true + + horizontalAlignment: Text.AlignHCenter + verticalAlignment: Text.AlignVCenter + + MouseArea { + anchors.fill: parent + + cursorShape: Qt.PointingHandCursor + + onClicked: { + root.expanded = !root.expanded + } + } + } + } + } + + SequentialAnimation { + running: true + loops: Animation.Infinite + + ParallelAnimation { + ColorAnimation { + target: stop1 + property: "color" + from: Config.accentGreen + to: Config.accentRed + duration: Config.gradientAnimationDuration + } + + ColorAnimation { + target: stop2 + property: "color" + from: Config.accentYellow + to: Config.accentGreen + duration: Config.gradientAnimationDuration + } + + ColorAnimation { + target: stop3 + property: "color" + from: Config.accentOrange + to: Config.accentYellow + duration: Config.gradientAnimationDuration + } + + ColorAnimation { + target: stop4 + property: "color" + from: Config.accentRed + to: Config.accentOrange + duration: Config.gradientAnimationDuration + } + } + + ParallelAnimation { + ColorAnimation { + target: stop1 + property: "color" + from: Config.accentRed + to: Config.accentGreen + duration: Config.gradientAnimationDuration + } + + ColorAnimation { + target: stop2 + property: "color" + from: Config.accentGreen + to: Config.accentYellow + duration: Config.gradientAnimationDuration + } + + ColorAnimation { + target: stop3 + property: "color" + from: Config.accentYellow + to: Config.accentOrange + duration: Config.gradientAnimationDuration + } + + ColorAnimation { + target: stop4 + property: "color" + from: Config.accentOrange + to: Config.accentRed + duration: Config.gradientAnimationDuration + } + } + } +} |