diff --git a/Bar.qml b/Bar.qml index 08a4137..49449ef 100644 --- a/Bar.qml +++ b/Bar.qml @@ -1,6 +1,7 @@ pragma ComponentBehavior: Bound import QtQuick +import QtQuick.Effects import QtQuick.Layouts import Quickshell import Quickshell.Io @@ -72,16 +73,28 @@ Scope { Region { required property Item modelData - x: modelData.x + x: modelData.x + 9 y: modelData.y + backgroundRect.implicitHeight width: modelData.width - height: modelData.height + height: panels.popouts.hasCurrent ? modelData.height + 70 : 0 intersection: Intersection.Subtract } } Item { anchors.fill: parent + opacity: Config.transparency.enabled ? DynamicColors.transparency.base : 1 + layer.enabled: true + layer.effect: MultiEffect { + shadowEnabled: true + blurMax: 32 + shadowColor: Qt.alpha(DynamicColors.palette.m3shadow, 1) + } + + Border { + bar: backgroundRect + } + Backgrounds { panels: panels bar: backgroundRect @@ -117,7 +130,7 @@ Scope { anchors.right: parent.right anchors.top: parent.top implicitHeight: 34 - color: Config.useDynamicColors ? DynamicColors.tPalette.m3surface : Config.baseBgColor + color: "transparent" radius: 0 Behavior on color { diff --git a/Clock.qml b/Clock.qml index ac8e8e0..5fc1a19 100644 --- a/Clock.qml +++ b/Clock.qml @@ -1,8 +1,9 @@ import QtQuick import qs.Config import qs.Modules +import qs.Components -Text { +CustomText { text: Time.time color: Config.useDynamicColors ? DynamicColors.palette.m3tertiary : "white" diff --git a/Components/CustomRadioButton.qml b/Components/CustomRadioButton.qml index 56d3927..cfaa64c 100644 --- a/Components/CustomRadioButton.qml +++ b/Components/CustomRadioButton.qml @@ -14,8 +14,8 @@ RadioButton { indicator: Rectangle { id: outerCircle - implicitWidth: 20 - implicitHeight: 20 + implicitWidth: 16 + implicitHeight: 16 radius: 1000 color: "transparent" border.color: root.checked ? DynamicColors.palette.m3primary : DynamicColors.palette.m3onSurfaceVariant diff --git a/Components/CustomSlider.qml b/Components/CustomSlider.qml index 5cb6a38..63c5bd0 100644 --- a/Components/CustomSlider.qml +++ b/Components/CustomSlider.qml @@ -41,8 +41,9 @@ Slider { handle: CustomRect { x: root.visualPosition * root.availableWidth - implicitWidth / 2 - implicitWidth: root.implicitHeight / 4.5 - implicitHeight: root.implicitHeight + implicitWidth: 5 + implicitHeight: 15 + anchors.verticalCenter: parent.verticalCenter color: DynamicColors.palette.m3primary radius: 1000 diff --git a/Components/CustomText.qml b/Components/CustomText.qml index eb72ca5..37f8533 100644 --- a/Components/CustomText.qml +++ b/Components/CustomText.qml @@ -16,7 +16,7 @@ Text { renderType: Text.NativeRendering textFormat: Text.PlainText color: DynamicColors.palette.m3onSurface - font.family: "Rubik" + font.family: "Segoe UI Variable Text" font.pointSize: 12 Behavior on color { diff --git a/Config/Config.qml b/Config/Config.qml index d2c1b55..628be38 100644 --- a/Config/Config.qml +++ b/Config/Config.qml @@ -19,6 +19,7 @@ Singleton { property alias background: adapter.background property alias useDynamicColors: adapter.useDynamicColors property alias barConfig: adapter.barConfig + property alias transparency: adapter.transparency FileView { id: root @@ -46,6 +47,7 @@ Singleton { property BackgroundConfig background: BackgroundConfig {} property bool useDynamicColors: false property BarConfig barConfig: BarConfig {} + property Transparency transparency: Transparency {} } } } diff --git a/Config/DynamicColors.qml b/Config/DynamicColors.qml index bd90994..0952f19 100644 --- a/Config/DynamicColors.qml +++ b/Config/DynamicColors.qml @@ -88,9 +88,9 @@ Singleton { } component Transparency: QtObject { - readonly property bool enabled: true - readonly property real base: 0.85 - (root.light ? 0.1 : 0) - readonly property real layers: 0.4 + readonly property bool enabled: Config.transparency.enabled + readonly property real base: Config.transparency.base - (root.light ? 0.1 : 0) + readonly property real layers: Config.transparency.layers } component M3TPalette: QtObject { diff --git a/Config/Transparency.qml b/Config/Transparency.qml new file mode 100644 index 0000000..e3df2e9 --- /dev/null +++ b/Config/Transparency.qml @@ -0,0 +1,7 @@ +import Quickshell.Io + +JsonObject { + property bool enabled: false + property real base: 0.85 + property real layers: 0.4 +} diff --git a/Modules/AudioPopup.qml b/Modules/AudioPopup.qml index 7559f1d..780d47a 100644 --- a/Modules/AudioPopup.qml +++ b/Modules/AudioPopup.qml @@ -80,7 +80,7 @@ Item { CustomMouseArea { Layout.fillWidth: true - implicitHeight: 10 * 3 + implicitHeight: 10 CustomSlider { anchors.left: parent.left @@ -105,7 +105,7 @@ Item { CustomMouseArea { Layout.fillWidth: true - implicitHeight: 10 * 3 + implicitHeight: 10 CustomSlider { anchors.left: parent.left @@ -128,7 +128,7 @@ Item { implicitWidth: expandBtn.implicitWidth + 10 * 2 implicitHeight: expandBtn.implicitHeight + 5 - radius: 17 + radius: 4 color: DynamicColors.palette.m3primaryContainer StateLayer { @@ -136,6 +136,7 @@ Item { function onClicked(): void { Quickshell.execDetached(["app2unit", "--", "pavucontrol"]); + root.wrapper.hasCurrent = false; } } @@ -152,6 +153,7 @@ Item { } MaterialIcon { + Layout.topMargin: 2 text: "chevron_right" color: DynamicColors.palette.m3onPrimaryContainer font.pointSize: 18 diff --git a/Modules/AudioWidget.qml b/Modules/AudioWidget.qml index 254c323..313c739 100644 --- a/Modules/AudioWidget.qml +++ b/Modules/AudioWidget.qml @@ -1,11 +1,10 @@ import QtQuick import QtQuick.Layouts -import Quickshell import Quickshell.Io import Quickshell.Services.Pipewire -import Quickshell.Widgets import qs.Modules import qs.Config +import qs.Components Item { id: root @@ -42,7 +41,6 @@ Item { CAnim {} } - // Background circle Rectangle { anchors.centerIn: parent width: parent.width @@ -53,244 +51,72 @@ Item { border.width: 0 } - MouseArea { - id: mouseArea - anchors.fill: parent - hoverEnabled: true - cursorShape: Qt.PointingHandCursor + RowLayout { + anchors { + fill: parent + leftMargin: 10 + rightMargin: 15 + } - RowLayout { - anchors { - fill: parent - leftMargin: 10 - rightMargin: 15 - } + MaterialIcon { + Layout.alignment: Qt.AlignVCenter + font.pixelSize: 18 + text: "volume_up" + color: root.textColor + } - Text { - Layout.alignment: Qt.AlignVCenter - font.family: "Material Symbols Rounded" - font.pixelSize: 18 - text: "\ue050" // volumeUp icon - color: root.textColor - Behavior on color { - CAnim {} - } - } + Rectangle { + Layout.fillWidth: true + + implicitHeight: 4 + radius: 20 + color: "#50ffffff" Rectangle { - Layout.fillWidth: true - - implicitHeight: 4 - radius: 20 - color: "#50ffffff" - - Rectangle { - id: sinkVolumeBar - anchors { - left: parent.left - top: parent.top - bottom: parent.bottom - } - - implicitWidth: parent.width * ( Pipewire.defaultAudioSink?.audio.volume ?? 0 ) - radius: parent.radius - color: root.textColor + id: sinkVolumeBar + anchors { + left: parent.left + top: parent.top + bottom: parent.bottom } - Rectangle { - id: sinkGrabber - visible: root.expanded - opacity: root.expanded ? 1 : 0 - width: sinkVolumeMouseArea.pressed ? 25 : 12 - height: sinkVolumeMouseArea.pressed ? 25 : 12 - radius: width / 2 - color: sinkVolumeMouseArea.containsMouse || sinkVolumeMouseArea.pressed ? (Config.useDynamicColors ? DynamicColors.palette.m3onSurface : "#ffffff") : (Config.useDynamicColors ? DynamicColors.palette.m3onSurfaceVariant : "#aaaaaa") - border.color: "#40000000" - border.width: 2 - anchors.verticalCenter: parent.verticalCenter - x: sinkVolumeBar.width - width / 2 - - Text { - anchors.centerIn: parent - anchors.verticalCenterOffset: text.length === 3 ? -0.5 : 0 - visible: sinkVolumeMouseArea.pressed - font.pixelSize: text.length === 3 ? 10 : 12 - text: Math.round(( Pipewire.defaultAudioSink?.audio.volume ?? 0 ) * 100 ).toString() - } - - Behavior on width { - NumberAnimation { - duration: 50 - } - } - - Behavior on height { - NumberAnimation { - duration: 50 - } - } - - Behavior on opacity { - NumberAnimation { - duration: 300 - } - } - - Behavior on color { - ColorAnimation { - duration: 150 - } - } - } - - MouseArea { - id: sinkVolumeMouseArea - anchors.fill: parent - anchors { - leftMargin: 0 - rightMargin: 0 - topMargin: -10 - bottomMargin: -10 - } - cursorShape: Qt.PointingHandCursor - hoverEnabled: true - - onPressed: function( mouse ) { - var newVolume = Math.max( 0, Math.min( 1, mouse.x / width )) - if ( Pipewire.defaultAudioSink?.audio ) { - Pipewire.defaultAudioSink.audio.volume = newVolume - } - } - - onPositionChanged: function( mouse ) { - if ( pressed ) { - var newVolume = Math.max( 0, Math.min( 1, mouse.x / width )) - if ( Pipewire.defaultAudioSink?.audio ) { - Pipewire.defaultAudioSink.audio.volume = newVolume - } - } - } - } + implicitWidth: parent.width * ( Pipewire.defaultAudioSink?.audio.volume ?? 0 ) + radius: parent.radius + color: root.textColor } + } - Text { - Layout.alignment: Qt.AlignVCenter - font.family: "Material Symbols Rounded" - font.pixelSize: 18 - text: "\ue029" + MaterialIcon { + Layout.alignment: Qt.AlignVCenter + font.pixelSize: 18 + text: Pipewire.defaultAudioSource?.audio.muted ? "mic_off" : "mic" + color: ( Pipewire.defaultAudioSource?.audio.muted ?? false ) ? (Config.useDynamicColors ? DynamicColors.palette.m3error : "#ff4444") : root.textColor + } + + Rectangle { + Layout.fillWidth: true + + implicitHeight: 4 + radius: 20 + color: "#50ffffff" + + Rectangle { + id: sourceVolumeBar + anchors { + left: parent.left + top: parent.top + bottom: parent.bottom + } + + implicitWidth: parent.width * ( Pipewire.defaultAudioSource?.audio.volume ?? 0 ) + radius: parent.radius color: ( Pipewire.defaultAudioSource?.audio.muted ?? false ) ? (Config.useDynamicColors ? DynamicColors.palette.m3error : "#ff4444") : root.textColor Behavior on color { CAnim {} } } - - Rectangle { - Layout.fillWidth: true - - implicitHeight: 4 - radius: 20 - color: "#50ffffff" - - Rectangle { - id: sourceVolumeBar - anchors { - left: parent.left - top: parent.top - bottom: parent.bottom - } - - implicitWidth: parent.width * ( Pipewire.defaultAudioSource?.audio.volume ?? 0 ) - radius: parent.radius - color: ( Pipewire.defaultAudioSource?.audio.muted ?? false ) ? (Config.useDynamicColors ? DynamicColors.palette.m3error : "#ff4444") : root.textColor - - Behavior on color { - CAnim {} - } - } - - Rectangle { - id: sourceGrabber - visible: root.expanded - opacity: root.expanded ? 1 : 0 - width: sourceVolumeMouseArea.pressed ? 25 : 12 - height: sourceVolumeMouseArea.pressed ? 25 : 12 - radius: width / 2 - color: sourceVolumeMouseArea.containsMouse || sourceVolumeMouseArea.pressed ? (Config.useDynamicColors ? DynamicColors.palette.m3onSurface : "#ffffff") : (Config.useDynamicColors ? DynamicColors.palette.m3onSurfaceVariant : "#aaaaaa") - border.color: "#40000000" - border.width: 2 - anchors.verticalCenter: parent.verticalCenter - x: sourceVolumeBar.width - width / 2 - - Text { - anchors.centerIn: parent - anchors.verticalCenterOffset: text.length === 3 ? -0.5 : 0 - visible: sourceVolumeMouseArea.pressed - font.pixelSize: text.length === 3 ? 10 : 12 - text: Math.round(( Pipewire.defaultAudioSource?.audio.volume ?? 0 ) * 100 ).toString() - } - - Behavior on width { - NumberAnimation { - duration: 50 - } - } - - Behavior on height { - NumberAnimation { - duration: 50 - } - } - - Behavior on opacity { - NumberAnimation { - duration: 300 - } - } - - Behavior on color { - ColorAnimation { - duration: 150 - } - } - } - - MouseArea { - id: sourceVolumeMouseArea - anchors.fill: parent - anchors { - leftMargin: 0 - rightMargin: 0 - topMargin: -10 - bottomMargin: -10 - } - cursorShape: Qt.PointingHandCursor - hoverEnabled: true - - onPressed: function( mouse ) { - var newVolume = Math.max( 0, Math.min( 1, mouse.x / width )) - if ( Pipewire.defaultAudioSource?.audio ) { - Pipewire.defaultAudioSource.audio.volume = newVolume - } - } - - onPositionChanged: function( mouse ) { - if ( pressed ) { - var newVolume = Math.max( 0, Math.min( 1, mouse.x / width )) - if ( Pipewire.defaultAudioSource?.audio ) { - Pipewire.defaultAudioSource.audio.volume = newVolume - } - } - } - } - } } } - - Process { - id: pavucontrolProc - command: ["pavucontrol"] - running: false - } } } diff --git a/Modules/Background.qml b/Modules/Background.qml index c43e7ab..c4597c7 100644 --- a/Modules/Background.qml +++ b/Modules/Background.qml @@ -11,7 +11,7 @@ ShapePath { readonly property real roundingY: flatten ? wrapper.height / 2 : rounding strokeWidth: -1 - fillColor: DynamicColors.tPalette.m3surface + fillColor: DynamicColors.palette.m3surface PathArc { relativeX: root.rounding diff --git a/Modules/Bar/BarLoader.qml b/Modules/Bar/BarLoader.qml index ea6cd99..707677f 100644 --- a/Modules/Bar/BarLoader.qml +++ b/Modules/Bar/BarLoader.qml @@ -45,7 +45,7 @@ RowLayout { const trayItem = item.items.itemAt(index); if (trayItem) { popouts.currentName = `traymenu${index}`; - popouts.currentCenter = Qt.binding(() => trayItem.mapToItem(root, trayItem.implicitWidth / 2, 0).x); + popouts.currentCenter = Qt.binding(() => trayItem.mapToItem(root, trayItem.implicitWidth / 2 + 4, 0).x); popouts.hasCurrent = true; } else { popouts.hasCurrent = false; diff --git a/Modules/Bar/Border.qml b/Modules/Bar/Border.qml new file mode 100644 index 0000000..0edfe55 --- /dev/null +++ b/Modules/Bar/Border.qml @@ -0,0 +1,44 @@ +pragma ComponentBehavior: Bound + +import QtQuick +import QtQuick.Effects +import qs.Modules +import qs.Config +import qs.Components + +Item { + id: root + + required property Item bar + + anchors.fill: parent + + CustomRect { + anchors.fill: parent + color: DynamicColors.palette.m3surface + + layer.enabled: true + + layer.effect: MultiEffect { + maskSource: mask + maskEnabled: true + maskInverted: true + maskThresholdMin: 0.5 + maskSpreadAtMin: 1 + } + } + + Item { + id: mask + anchors.fill: parent + layer.enabled: true + visible: false + + Rectangle { + anchors.fill: parent + anchors.topMargin: root.bar.implicitHeight + topLeftRadius: 8 + topRightRadius: 8 + } + } +} diff --git a/Modules/NotifBell.qml b/Modules/NotifBell.qml index cb32edd..786e6fa 100644 --- a/Modules/NotifBell.qml +++ b/Modules/NotifBell.qml @@ -1,11 +1,12 @@ import QtQuick import qs.Config import qs.Helpers +import qs.Components Item { implicitWidth: 20 implicitHeight: 18 - Text { + MaterialIcon { id: notificationCenterIcon property color iconColor: Config.useDynamicColors ? DynamicColors.palette.m3tertiaryFixed : "white" text: HasNotifications.hasNotifications ? "\uf4fe" : "\ue7f4" diff --git a/Modules/ResourceDetail.qml b/Modules/ResourceDetail.qml index a687fe0..76484e2 100644 --- a/Modules/ResourceDetail.qml +++ b/Modules/ResourceDetail.qml @@ -2,6 +2,7 @@ import Quickshell import QtQuick import QtQuick.Layouts import qs.Config +import qs.Components Item { id: root @@ -27,17 +28,17 @@ Item { Layout.alignment: Qt.AlignLeft Layout.fillWidth: true - Text { + MaterialIcon { font.family: "Material Symbols Rounded" - font.pixelSize: 32 + font.pointSize: 28 text: root.iconString color: root.textColor } - Text { + CustomText { anchors.verticalCenter: parent.verticalCenter text: root.resourceName - font.pixelSize: 14 + font.pointSize: 12 color: root.textColor } } @@ -64,10 +65,10 @@ Item { } } - Text { + CustomText { Layout.alignment: Qt.AlignLeft text: root.details - font.pixelSize: 12 + font.pointSize: 10 color: "#cccccc" } } diff --git a/Modules/Resources.qml b/Modules/Resources.qml index 3afd5e9..17c61c5 100644 --- a/Modules/Resources.qml +++ b/Modules/Resources.qml @@ -7,6 +7,7 @@ import Quickshell.Wayland import qs.Modules import qs.Config import qs.Effects +import qs.Components Item { id: root @@ -31,15 +32,11 @@ Item { anchors.leftMargin: 5 anchors.rightMargin: 5 - Text { + MaterialIcon { Layout.alignment: Qt.AlignVCenter - font.family: "Material Symbols Rounded" font.pixelSize: 18 - text: "\uf7a3" + text: "memory_alt" color: root.textColor - Behavior on color { - CAnim {} - } } Resource { @@ -47,15 +44,11 @@ Item { warningThreshold: 95 } - Text { + MaterialIcon { Layout.alignment: Qt.AlignVCenter - font.family: "Material Symbols Rounded" font.pixelSize: 18 - text: "\ue322" + text: "memory" color: root.textColor - Behavior on color { - CAnim {} - } } Resource { @@ -63,30 +56,22 @@ Item { warningThreshold: 80 } - Text { + MaterialIcon { Layout.alignment: Qt.AlignVCenter - font.family: "Material Symbols Rounded" - font.pixelSize: 16 - text: "\ue30f" + font.pixelSize: 18 + text: "gamepad" color: root.textColor - Behavior on color { - CAnim {} - } } Resource { percentage: ResourceUsage.gpuUsage } - Text { + MaterialIcon { Layout.alignment: Qt.AlignVCenter - font.family: "Material Symbols Rounded" font.pixelSize: 18 - text: "\ue30d" + text: "developer_board" color: root.textColor - Behavior on color { - CAnim {} - } } Resource { diff --git a/Modules/TrayMenuPopout.qml b/Modules/TrayMenuPopout.qml index e018ec1..26c7849 100644 --- a/Modules/TrayMenuPopout.qml +++ b/Modules/TrayMenuPopout.qml @@ -182,7 +182,7 @@ StackView { Item { anchors.bottom: parent.bottom - implicitWidth: back.implicitWidth + implicitWidth: back.implicitWidth + 10 implicitHeight: back.implicitHeight CustomRect { diff --git a/Modules/Workspaces.qml b/Modules/Workspaces.qml index 938e156..d5fe931 100644 --- a/Modules/Workspaces.qml +++ b/Modules/Workspaces.qml @@ -63,9 +63,9 @@ Item { height: 16 radius: height / 2 - color: modelData.id === Hyprland.focusedWorkspace.id ? ( Config.useDynamicColors ? DynamicColors.palette.m3primary : Config.accentColor.accents.primary ) : ( Config.useDynamicColors ? DynamicColors.palette.m3inverseOnSurface : "#606060" ) + color: modelData.id === Hyprland.focusedWorkspace.id ? ( Config.useDynamicColors ? DynamicColors.palette.m3primary : Config.accentColor.accents.primary ) : ( Config.useDynamicColors ? DynamicColors.palette.m3outline : "#606060" ) - border.color: modelData.id === Hyprland.focusedWorkspace.id ? ( Config.useDynamicColors ? DynamicColors.palette.m3onPrimary : Config.accentColor.accents.primaryAlt ) : ( Config.useDynamicColors ? DynamicColors.palette.m3inverseOnSurface : "#808080" ) + border.color: modelData.id === Hyprland.focusedWorkspace.id ? ( Config.useDynamicColors ? DynamicColors.palette.m3onPrimary : Config.accentColor.accents.primaryAlt ) : ( Config.useDynamicColors ? DynamicColors.palette.m3outlineVariant : "#808080" ) border.width: 1 visible: root.shouldShow( modelData.monitor )