From 8c5c2d270fd0f3bbc276e3b1cc28fc1dfae3fa59 Mon Sep 17 00:00:00 2001 From: coast Date: Tue, 13 Oct 2026 05:03:11 +0330 Subject: init --- quickshell/modules/bar/Bar.qml | 171 ++++++++++++++++++++++ quickshell/modules/bar/Music.qml | 237 ++++++++++++++++++++++++++++++ quickshell/modules/bar/QuickControl.qml | 246 ++++++++++++++++++++++++++++++++ quickshell/modules/bar/Time.qml | 144 +++++++++++++++++++ quickshell/modules/bar/Workspaces.qml | 177 +++++++++++++++++++++++ 5 files changed, 975 insertions(+) create mode 100644 quickshell/modules/bar/Bar.qml create mode 100644 quickshell/modules/bar/Music.qml create mode 100644 quickshell/modules/bar/QuickControl.qml create mode 100644 quickshell/modules/bar/Time.qml create mode 100644 quickshell/modules/bar/Workspaces.qml (limited to 'quickshell/modules/bar') diff --git a/quickshell/modules/bar/Bar.qml b/quickshell/modules/bar/Bar.qml new file mode 100644 index 0000000..e983faf --- /dev/null +++ b/quickshell/modules/bar/Bar.qml @@ -0,0 +1,171 @@ +import QtQuick +import QtQuick.Layouts +import Quickshell +import "../../config.js" as Config + +PanelWindow { + id: bar + + required property var modelData + screen: modelData + + readonly property bool atBottom: Config.barPosition === "bottom" + readonly property real hiddenY: atBottom ? Config.barHeight : -Config.barHeight + + anchors { + top: !bar.atBottom + bottom: bar.atBottom + left: true + right: true + } + + implicitHeight: Config.barHeight + color: "transparent" + + Rectangle { + id: content + + anchors.fill: parent + color: Config.barBackground + opacity: 0 + y: bar.hiddenY + + RowLayout { + anchors { + left: parent.left + leftMargin: Config.barMargin + verticalCenter: parent.verticalCenter + } + + spacing: Config.workspaceSpacing + + Loader { + active: true + sourceComponent: Workspaces {} + } + } + + Rectangle { + anchors { + horizontalCenter: parent.horizontalCenter + verticalCenter: parent.verticalCenter + } + + height: Config.blockHeight + width: windowTitle.contentWidth + Config.blockPadding + radius: Config.blockRadius + color: "transparent" + + Text { + id: windowTitle + + anchors.centerIn: parent + + text: (niri.focusedWindow?.appId === "firefox" || + niri.focusedWindow?.appId === "firefox-bin") + ? "Mozilla Firefox" + : (niri.focusedWindow?.appId === "vesktop" || + niri.focusedWindow?.appId === "vesktop-bin") + ? "Vesktop" + : (niri.focusedWindow?.appId === "equibop" || + niri.focusedWindow?.appId === "equibop-bin") + ? "Equibop" + : (niri.focusedWindow?.title ?? "") + + + color: Config.textWindow + + font.family: Config.fontFamily + font.pixelSize: Config.fontSize + font.bold: true + + elide: Text.ElideRight + } + } + + RowLayout { + id: rightLayout + + anchors { + right: parent.right + rightMargin: Config.barMargin + verticalCenter: parent.verticalCenter + } + + spacing: Config.workspaceSpacing + + Loader { + active: true + sourceComponent: Music {} + } + + Loader { + active: true + sourceComponent: Time {} + } + + Loader { + active: true + sourceComponent: QuickControl {} + } + } + } + + ParallelAnimation { + id: showAnimation + + NumberAnimation { + target: content + property: "y" + from: bar.hiddenY + to: 0 + duration: Config.barAnimationDuration + easing.type: Easing.OutCubic + } + + NumberAnimation { + target: content + property: "opacity" + from: 0 + to: 1 + duration: Config.barAnimationDuration + easing.type: Easing.OutCubic + } + } + + ParallelAnimation { + id: hideAnimation + + NumberAnimation { + target: content + property: "y" + from: 0 + to: bar.hiddenY + duration: Config.barAnimationDuration + easing.type: Easing.InCubic + } + + NumberAnimation { + target: content + property: "opacity" + from: 1 + to: 0 + duration: Config.barAnimationDuration + easing.type: Easing.InCubic + } + + onFinished: { + showAnimation.start() + } + } + + Component.onCompleted: { + showAnimation.start() + } + + function restart() { + showAnimation.stop() + hideAnimation.stop() + hideAnimation.start() + } +} diff --git a/quickshell/modules/bar/Music.qml b/quickshell/modules/bar/Music.qml new file mode 100644 index 0000000..50e1cf1 --- /dev/null +++ b/quickshell/modules/bar/Music.qml @@ -0,0 +1,237 @@ +import QtQuick +import QtQuick.Layouts +import Quickshell +import Quickshell.Services.Mpris +import "../../config.js" as Config + +Rectangle { + id: musicBlock + + property var player: null + property var supportedPlayers: ["feishin", "fooyin"] + + implicitWidth: visible + ? Math.min(textMetrics.width + Config.blockPadding + 8, 400) + : 0 + + implicitHeight: Config.blockHeight + + radius: Config.blockRadius + + visible: player !== null && player.isPlaying + + function isSupported(p) { + var identity = (p.identity || "").toLowerCase() + var desktopEntry = (p.desktopEntry || "").toLowerCase() + + for (var i = 0; i < supportedPlayers.length; i++) { + var name = supportedPlayers[i] + + if ( + identity === name || + desktopEntry === name || + desktopEntry.endsWith("." + name) + ) + return true + } + + return false + } + + function findPlayer() { + var fallback = null + + for (var i = 0; i < Mpris.players.values.length; i++) { + var p = Mpris.players.values[i] + + console.log( + "MPRIS:", + "identity =", p.identity, + "desktopEntry =", p.desktopEntry + ) + + if (!isSupported(p)) + continue + + if (p.isPlaying) { + player = p + return + } + + if (!fallback) + fallback = p + } + + player = fallback + } + + function cleanTitle(title) { + if (!title) + return "" + + return title + .replace(/\s*[\(\[][^)\]]*\blive\b[^)\]]*[\)\]]/gi, "") + .replace(/\s*[-–—]\s*\blive\b.*$/i, "") + .trim() + } + + Component.onCompleted: { + findPlayer() + } + + Connections { + target: Mpris.players + + function onValuesChanged() { + findPlayer() + } + } + + 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 + } + } + + TextMetrics { + id: textMetrics + + font.family: Config.fontFamily + font.pixelSize: Config.fontSize + font.bold: true + + text: player + ? "󰎇 " + player.trackArtist + " — " + cleanTitle(player.trackTitle) + : "" + } + + Text { + id: musicText + + anchors { + left: parent.left + right: parent.right + verticalCenter: parent.verticalCenter + } + + leftPadding: Config.blockPadding / 2 + rightPadding: Config.blockPadding / 2 + + text: player + ? "󰎇 " + player.trackArtist + " — " + cleanTitle(player.trackTitle) + : "" + + color: Config.textDark + + font.family: Config.fontFamily + font.pixelSize: Config.fontSize + font.bold: true + + elide: Text.ElideRight + maximumLineCount: 1 + } + + MouseArea { + anchors.fill: parent + + cursorShape: Qt.PointingHandCursor + + onClicked: { + if (player && player.canRaise) + player.raise() + } + } + + 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 + } + } + } +} 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 + } + } + } +} diff --git a/quickshell/modules/bar/Time.qml b/quickshell/modules/bar/Time.qml new file mode 100644 index 0000000..dfa3f0d --- /dev/null +++ b/quickshell/modules/bar/Time.qml @@ -0,0 +1,144 @@ +import QtQuick +import QtQuick.Layouts +import Quickshell +import "../../config.js" as Config + +Rectangle { + id: clockBlock + + implicitWidth: timeText.contentWidth + Config.blockPadding + implicitHeight: Config.blockHeight + + radius: Config.blockRadius + + property bool alternateFormat: false + + 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 + } + } + + SystemClock { + id: clock + precision: SystemClock.Seconds + } + + Text { + id: timeText + + anchors.centerIn: parent + + text: alternateFormat + ? Qt.formatDateTime(clock.date, "󱑃 dddd, dd MMMM yyyy") + : Qt.formatDateTime(clock.date, " hh:mm AP • ddd, dd/MM") + + color: Config.textDark + font.family: Config.fontFamily + font.pixelSize: Config.fontSize + font.bold: true + } + + MouseArea { + anchors.fill: parent + + cursorShape: Qt.PointingHandCursor + + onClicked: { + alternateFormat = !alternateFormat + } + } + + 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 + } + } + } +} diff --git a/quickshell/modules/bar/Workspaces.qml b/quickshell/modules/bar/Workspaces.qml new file mode 100644 index 0000000..c9c8104 --- /dev/null +++ b/quickshell/modules/bar/Workspaces.qml @@ -0,0 +1,177 @@ +import QtQuick +import QtQuick.Layouts +import Quickshell +import "../../config.js" as Config + +Rectangle { + id: workspaceBlock + + implicitWidth: workspaceRow.width + 16 + implicitHeight: Config.blockHeight + + color: "transparent" + + RowLayout { + id: workspaceRow + + anchors.verticalCenter: parent.verticalCenter + spacing: Config.workspaceSpacing + + Repeater { + model: niri.workspaces + + delegate: Rectangle { + id: workspace + + visible: model.output === Config.barOutput && index < 11 + + implicitWidth: Config.workspaceWidth + implicitHeight: Config.blockHeight + + radius: Config.blockRadius + + color: model.isActive + ? "transparent" + : Config.workspaceBackground + + layer.enabled: true + + Rectangle { + anchors.fill: parent + radius: parent.radius + visible: model.isActive + + 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 + } + } + + 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 + } + } + } + } + + Item { + anchors.fill: parent + + Text { + anchors.fill: parent + + text: index + + color: model.isActive + ? Config.textDark + : Config.textInactive + + 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: { + niri.focusWorkspaceById(model.id) + } + } + } + } + } +} -- cgit v1.3