From c983cf206b110b5dd80dc6827f8f88bbd168ee58 Mon Sep 17 00:00:00 2001 From: Benjamin Palko Date: Fri, 29 Aug 2025 17:22:04 -0400 Subject: [PATCH] update styledbutton to extend button --- components/StyledButton.qml | 47 ++++++++++--------- modules/bar/components/Cpu.qml | 8 ++-- modules/bar/components/Gpu.qml | 5 +- modules/bar/components/Mpris.qml | 40 +--------------- modules/bar/components/Pipewire.qml | 33 +++++-------- .../components/bluetooth/AvailableDevice.qml | 9 ++-- .../components/bluetooth/ConnectedDevice.qml | 8 ++-- .../bar/components/bluetooth/PairedDevice.qml | 16 +++---- .../notifications/NotificationMenu.qml | 6 +-- modules/bar/components/tray/menu/MenuItem.qml | 9 ++-- modules/drawers/dashboard/Dashboard.qml | 22 ++++----- modules/pomodoro/Pomodoro.qml | 5 +- 12 files changed, 74 insertions(+), 134 deletions(-) diff --git a/components/StyledButton.qml b/components/StyledButton.qml index c14e4f3..ead62b4 100644 --- a/components/StyledButton.qml +++ b/components/StyledButton.qml @@ -1,32 +1,37 @@ import qs.config import QtQuick -import Quickshell.Widgets +import QtQuick.Controls -WrapperMouseArea { +Button { id: root - required property Component content - property alias padding: rectangle.margin - property alias color: rectangle.color property alias border: rectangle.border property alias radius: rectangle.radius - hoverEnabled: true - cursorShape: Qt.PointingHandCursor + font.pixelSize: 14 + padding: 6 - WrapperRectangle { - id: rectangle - margin: 8 - radius: 8 - color: root.containsMouse && root.hoverEnabled ? Theme.palette.primary : Theme.palette.base100 - Behavior on color { - ColorAnimation { - duration: 200 - easing.type: Easing.InOutQuad - } - } - Loader { - active: true - sourceComponent: root.content + palette.button: hovered ? Theme.palette.primary : Theme.palette.base100 + Behavior on palette.button { + ColorAnimation { + duration: 100 } } + palette.buttonText: hoverEnabled && hovered ? Theme.palette.primarycontent : Theme.palette.basecontent + Behavior on palette.buttonText { + ColorAnimation { + duration: 100 + } + } + + wheelEnabled: true + + HoverHandler { + cursorShape: Qt.PointingHandCursor + } + + background: Rectangle { + id: rectangle + color: root.palette.button + radius: 8 + } } diff --git a/modules/bar/components/Cpu.qml b/modules/bar/components/Cpu.qml index 3cde9e1..e663dbe 100644 --- a/modules/bar/components/Cpu.qml +++ b/modules/bar/components/Cpu.qml @@ -16,7 +16,7 @@ StyledButton { showTemp = !showTemp; } - content: RowLayout { + contentItem: RowLayout { id: row Ref { service: SystemInfo @@ -28,8 +28,7 @@ StyledButton { font.pixelSize: Dimensions.cpu.iconSize font.bold: true text: Icons.cpu - - color: root.containsMouse ? Theme.palette.base300 : Theme.palette.basecontent + color: root.hovered ? Theme.palette.primarycontent : Theme.palette.basecontent } StyledText { @@ -37,8 +36,7 @@ StyledButton { font.pixelSize: Dimensions.cpu.fontSize text: ` ${(SystemInfo.cpuPerc * 100).toFixed()}%` - - color: root.containsMouse ? Theme.palette.base300 : Theme.palette.basecontent + color: root.hovered ? Theme.palette.primarycontent : Theme.palette.basecontent states: [ State { diff --git a/modules/bar/components/Gpu.qml b/modules/bar/components/Gpu.qml index dbccc2e..781229b 100644 --- a/modules/bar/components/Gpu.qml +++ b/modules/bar/components/Gpu.qml @@ -16,7 +16,7 @@ StyledButton { root.showTemp = !root.showTemp; } - content: RowLayout { + contentItem: RowLayout { id: row Ref { service: SystemInfo @@ -28,14 +28,15 @@ StyledButton { font.pixelSize: Dimensions.gpu.iconSize font.bold: true text: Icons.gpu + color: root.hovered ? Theme.palette.primarycontent : Theme.palette.basecontent } StyledText { id: text font.pixelSize: Dimensions.gpu.fontSize - text: ` ${(SystemInfo.gpuPerc * 100).toFixed()}%` + color: root.hovered ? Theme.palette.primarycontent : Theme.palette.basecontent states: [ State { diff --git a/modules/bar/components/Mpris.qml b/modules/bar/components/Mpris.qml index 2c7c456..14efb1c 100644 --- a/modules/bar/components/Mpris.qml +++ b/modules/bar/components/Mpris.qml @@ -1,51 +1,15 @@ pragma ComponentBehavior: Bound import qs.components -import qs.config import qs.services -import qs.widgets import QtQuick -import QtQuick.Layouts StyledButton { id: root + text: `${Mpris.active?.isPlaying ? "" : ""} ${Mpris.active?.trackTitle} - ${Mpris.active?.trackArtist}` + onClicked: { Visibility.dashboard = !Visibility.dashboard; } - - content: ColumnLayout { - id: content - - spacing: 0 - - implicitWidth: text.width - implicitHeight: text.height - StyledText { - id: text - text: `${Mpris.active?.isPlaying ? "" : ""} ${Mpris.active?.trackTitle} - ${Mpris.active?.trackArtist}` - - font.pixelSize: Dimensions.mpris.fontSize - - states: State { - name: "hovered" - when: root.containsMouse - PropertyChanges { - text { - color: Theme.palette.primarycontent - } - } - } - transitions: Transition { - from: "" - to: "hovered" - reversible: true - ColorAnimation { - properties: "color" - duration: 100 - easing.type: Easing.InOutCubic - } - } - } - } } diff --git a/modules/bar/components/Pipewire.qml b/modules/bar/components/Pipewire.qml index d65f67a..cde5842 100644 --- a/modules/bar/components/Pipewire.qml +++ b/modules/bar/components/Pipewire.qml @@ -1,25 +1,24 @@ import qs.components import qs.config import qs.services -import qs.widgets import QtQuick StyledButton { id: root - onClicked: mouse => { - if (mouse.button == Qt.LeftButton) { - Pipewire.toggleMute(); - } else if (mouse.button == Qt.RightButton) { - popup.opened = !popup.opened; - } + text: `${Pipewire.muted ? " " : Pipewire.volume <= 0 ? " " : " "} ${(Pipewire.volume * 100).toFixed()}%` + + onClicked: { + Pipewire.toggleMute(); } - onWheel: event => { - if (event.angleDelta.y > 0) { - Pipewire.incrementVolume(); - } else if (event.angleDelta.y < 0) { - Pipewire.decrementVolume(); + WheelHandler { + onWheel: event => { + if (event.angleDelta.y > 0) { + Pipewire.incrementVolume(); + } else if (event.angleDelta.y < 0) { + Pipewire.decrementVolume(); + } } } @@ -29,17 +28,9 @@ StyledButton { when: Pipewire.muted PropertyChanges { root { - color: Theme.palette.error + palette.button: Theme.palette.error } } } ] - - content: StyledText { - id: text - property string icon: Pipewire.muted ? " " : Pipewire.volume <= 0 ? " " : " " - text: `${icon} ${(Pipewire.volume * 100).toFixed()}%` - font.pixelSize: Dimensions.pipewire.fontSize - color: root.containsMouse || Pipewire.muted ? Theme.palette.base300 : Theme.palette.basecontent - } } diff --git a/modules/bar/components/bluetooth/AvailableDevice.qml b/modules/bar/components/bluetooth/AvailableDevice.qml index e50541e..e868b8e 100644 --- a/modules/bar/components/bluetooth/AvailableDevice.qml +++ b/modules/bar/components/bluetooth/AvailableDevice.qml @@ -1,7 +1,6 @@ pragma ComponentBehavior: Bound import qs.components -import qs.config import qs.widgets import QtQuick import QtQuick.Layouts @@ -31,13 +30,11 @@ StyledLabel { } StyledButton { + Layout.alignment: Qt.AlignRight hoverEnabled: !root.modelData.pairing - color: containsMouse ? Theme.palette.primary : Theme.palette.base200 - content: StyledText { - text: 'Pair' - font.pixelSize: 12 - } + text: 'Pair' + onClicked: { if (!hoverEnabled) { return; diff --git a/modules/bar/components/bluetooth/ConnectedDevice.qml b/modules/bar/components/bluetooth/ConnectedDevice.qml index 3a2838c..ce72790 100644 --- a/modules/bar/components/bluetooth/ConnectedDevice.qml +++ b/modules/bar/components/bluetooth/ConnectedDevice.qml @@ -80,11 +80,9 @@ StyledLabel { StyledButton { Layout.alignment: Qt.AlignRight - color: containsMouse ? Theme.palette.error : Theme.palette.base200 - content: StyledText { - text: 'Disconnect' - font.pixelSize: 12 - } + text: 'Disconnect' + palette.button: hovered ? Theme.palette.error : Theme.palette.base200 + onClicked: { if (root.modelData.state != BluetoothDeviceState.Connected) { return; diff --git a/modules/bar/components/bluetooth/PairedDevice.qml b/modules/bar/components/bluetooth/PairedDevice.qml index 411d0c2..443ec90 100644 --- a/modules/bar/components/bluetooth/PairedDevice.qml +++ b/modules/bar/components/bluetooth/PairedDevice.qml @@ -34,11 +34,8 @@ StyledLabel { Layout.alignment: Qt.AlignRight StyledButton { hoverEnabled: root.modelData.state == BluetoothDeviceState.Disconnected - color: containsMouse ? Theme.palette.primary : Theme.palette.base200 - content: StyledText { - text: 'Connect' - font.pixelSize: 12 - } + text: 'Connect' + onClicked: { if (!hoverEnabled) { return; @@ -49,11 +46,10 @@ StyledLabel { StyledButton { hoverEnabled: root.modelData.state == BluetoothDeviceState.Disconnected - color: containsMouse ? Theme.palette.error : Theme.palette.base200 - content: StyledText { - text: 'Unpair' - font.pixelSize: 12 - } + text: 'Unpair' + + palette.button: hovered ? Theme.palette.error : Theme.palette.base100 + onClicked: { if (!hoverEnabled) { return; diff --git a/modules/bar/components/notifications/NotificationMenu.qml b/modules/bar/components/notifications/NotificationMenu.qml index 692937b..16ca99e 100644 --- a/modules/bar/components/notifications/NotificationMenu.qml +++ b/modules/bar/components/notifications/NotificationMenu.qml @@ -7,7 +7,6 @@ import qs.widgets import QtQuick import QtQuick.Controls import QtQuick.Layouts -import Quickshell import Quickshell.Widgets StyledPopupWindow { @@ -34,11 +33,8 @@ StyledPopupWindow { StyledButton { id: clearButton Layout.alignment: Qt.AlignRight + text: "Clear" onClicked: Notifications.clear() - content: StyledText { - text: "Clear" - color: clearButton.containsMouse ? Theme.palette.base300 : Theme.palette.basecontent - } } } diff --git a/modules/bar/components/tray/menu/MenuItem.qml b/modules/bar/components/tray/menu/MenuItem.qml index 1a54f02..056b3ba 100644 --- a/modules/bar/components/tray/menu/MenuItem.qml +++ b/modules/bar/components/tray/menu/MenuItem.qml @@ -1,13 +1,12 @@ import qs.components -import qs.widgets import Quickshell StyledButton { id: root + property QsMenuEntry menuEntry + + text: root.menuEntry.text + onClicked: menuEntry.triggered() - content: StyledText { - font.pixelSize: 14 - text: root.menuEntry.text - } } diff --git a/modules/drawers/dashboard/Dashboard.qml b/modules/drawers/dashboard/Dashboard.qml index def762f..467bda1 100644 --- a/modules/drawers/dashboard/Dashboard.qml +++ b/modules/drawers/dashboard/Dashboard.qml @@ -19,19 +19,18 @@ StyledDrawer { radius: 8 margin: 32 ColumnLayout { - spacing: 8 - RowLayout { spacing: 8 + RowLayout { + spacing: 8 Layout.alignment: Qt.AlignHCenter - StyledButton { + StyledIconButton { id: previousPlayerButton + visible: Mpris.players.length > 1 - content: LucideIcon { - color: previousPlayerButton.containsMouse ? Theme.palette.primarycontent : Theme.palette.basecontent - text: Icons.chevronLeft - } + text: Icons.chevronLeft + onClicked: { Mpris.previousPlayer(); } @@ -52,10 +51,9 @@ StyledDrawer { StyledButton { id: nextPlayerButton visible: Mpris.players.length > 1 - content: LucideIcon { - color: nextPlayerButton.containsMouse ? Theme.palette.primarycontent : Theme.palette.basecontent - text: Icons.chevronRight - } + + text: Icons.chevronRight + onClicked: { Mpris.nextPlayer(); } @@ -63,7 +61,7 @@ StyledDrawer { } MprisController { - player: Mpris.active + player: Mpris.active } } } diff --git a/modules/pomodoro/Pomodoro.qml b/modules/pomodoro/Pomodoro.qml index 4292b1c..d14077e 100644 --- a/modules/pomodoro/Pomodoro.qml +++ b/modules/pomodoro/Pomodoro.qml @@ -108,10 +108,7 @@ StyledWindow { Layout.alignment: Qt.AlignHCenter - content: StyledText { - text: "Reset" - font.pixelSize: 14 - } + text: "Reset" onClicked: { Pomodoro.reset();