diff --git a/modules/quickshell/config/Config/Theme/Theme.qml b/modules/quickshell/config/Config/Theme/Theme.qml index 9011b294..4e6129c6 100644 --- a/modules/quickshell/config/Config/Theme/Theme.qml +++ b/modules/quickshell/config/Config/Theme/Theme.qml @@ -65,6 +65,7 @@ Item { readonly property color colorYellow3: '#f6d32d' readonly property color colorYellow4: '#f5c211' readonly property color colorYellow5: '#e5a50a' + readonly property color darkWindowBg: '#21232D' readonly property color destructiveBg: dracula.errorBg readonly property color destructiveFg: dracula.accentFg readonly property color dialogBg: dracula.windowBg @@ -76,6 +77,7 @@ Item { readonly property color headerbarBorder: 'white' readonly property color headerbarFg: dracula.accentFg readonly property color headerbarShade: Qt.rgba(0, 0, 0, 0.36) + readonly property color lightWindowBg: '#333643' readonly property color popoverBg: dracula.windowBg readonly property color popoverFg: dracula.accentFg readonly property color scrollbarOutline: Qt.rgba(0, 0, 0, 0.5) diff --git a/modules/quickshell/config/Services/DateTime/DateTime.qml b/modules/quickshell/config/Services/DateTime/DateTime.qml new file mode 100644 index 00000000..abcc2f56 --- /dev/null +++ b/modules/quickshell/config/Services/DateTime/DateTime.qml @@ -0,0 +1,49 @@ +pragma Singleton +pragma ComponentBehavior: Bound +import QtQuick +import Quickshell +import Quickshell.Io + +Singleton { + property string time: Qt.formatDateTime(clock.date, "ddd. d MMM. h:mm AP") + property string uptime: "0h, 0m" + + SystemClock { + id: clock + + precision: SystemClock.Minutes + } + + Timer { + interval: 10 + repeat: true + running: true + + onTriggered: { + fileUptime.reload(); + const textUptime = fileUptime.text(); + const uptimeSeconds = Number(textUptime.split(" ")[0] ?? 0); + + // Convert seconds to days, hours, and minutes + const days = Math.floor(uptimeSeconds / 86400); + const hours = Math.floor((uptimeSeconds % 86400) / 3600); + const minutes = Math.floor((uptimeSeconds % 3600) / 60); + + // Build the formatted uptime string + let formatted = ""; + if (days > 0) + formatted += `${days}d`; + if (hours > 0) + formatted += `${formatted ? ", " : ""}${hours}h`; + if (minutes > 0 || !formatted) + formatted += `${formatted ? ", " : ""}${minutes}m`; + DateTime.uptime = formatted; + } + } + + FileView { + id: fileUptime + + path: "/proc/uptime" + } +} diff --git a/modules/quickshell/config/Widgets/Bar/Bar.qml b/modules/quickshell/config/Widgets/Bar/Bar.qml index 9ba2ac32..6f781fdc 100644 --- a/modules/quickshell/config/Widgets/Bar/Bar.qml +++ b/modules/quickshell/config/Widgets/Bar/Bar.qml @@ -1,9 +1,11 @@ import Quickshell import QtQuick +import QtQuick.Controls import QtQuick.Layouts import "../../Components/RoundCorner" import "../../Config/Theme" +import "../../Services/DateTime" PanelWindow { id: toplevel @@ -26,17 +28,62 @@ PanelWindow { id: bar color: theme.windowBg - height: 30 + height: 50 anchors { left: parent.left right: parent.right } - Text { + RoundButton { + id: button + anchors.centerIn: parent - color: theme.windowFg - text: "hello world" + radius: 5 + + background: Rectangle { + id: background + + anchors.centerIn: parent + color: { + if (button.down) { + return theme.windowBg; + } else if (button.hovered) { + return theme.lightWindowBg; + } else { + return theme.darkWindowBg; + } + } + height: clockText.height + 0.4 * clockText.height + opacity: enabled ? 1 : 0.3 + radius: 5 + width: clockText.width + 0.1 * clockText.width + + Behavior on color { + ColorAnimation { + duration: 200 + target: background + } + } + } + contentItem: Text { + id: clockText + + anchors.centerIn: parent + color: theme.windowFg + renderType: Text.NativeRendering + text: DateTime.time + + font { + pointSize: 16 + weight: 500 + } + } + + MouseArea { + anchors.fill: parent + cursorShape: Qt.PointingHandCursor + } } }