From c66d043ece16576969060b023322546a057544aa Mon Sep 17 00:00:00 2001 From: Amaro Lopes Date: Wed, 24 Sep 2025 17:02:46 -0300 Subject: [PATCH] Fix hover, systray menu and theming --- AudioWidget.qml | 2 +- ClockWidget.qml | 31 +++++++++++++++++++++-- Common/HoverMediator.qml | 4 --- Common/Theme.qml | 40 +++++++++++++++-------------- NotificationsWidget.qml | 4 +-- Services/PopUpHover.qml | 54 +++++++++++++++++++++++++++++++++------- SysTrayWidget.qml | 25 +++++++++++-------- Workspaces.qml | 9 +++---- 8 files changed, 116 insertions(+), 53 deletions(-) diff --git a/AudioWidget.qml b/AudioWidget.qml index 1fe100d..e76b712 100644 --- a/AudioWidget.qml +++ b/AudioWidget.qml @@ -67,7 +67,7 @@ Rectangle { anchors.centerIn: parent text: audioTextText font.bold: true - font.pixelSize: 14 + font.pixelSize: Theme.pixelSize font.family: Theme.fontFamily color: Theme.textColor } diff --git a/ClockWidget.qml b/ClockWidget.qml index a4a35ca..d9ce5b6 100644 --- a/ClockWidget.qml +++ b/ClockWidget.qml @@ -1,5 +1,6 @@ import QtQuick import Quickshell.Widgets +import Quickshell.Io import qs.Services import qs.Common @@ -12,22 +13,48 @@ Item { } Rectangle { + id: clock + color: Theme.backgroudColor implicitWidth: clockText.implicitWidth * 1.6 - implicitHeight: Theme.heightGaps //root.implicitHeight*0.8 + implicitHeight: Theme.heightGaps radius: 25 + property string calendar: "" + Text { id: clockText anchors.centerIn: parent text: Time.time font.bold: true - font.pixelSize: 14 + font.pixelSize: Theme.pixelSize font.family: Theme.fontFamily color: Theme.textColor } + Process { + id: cal + running: true + command: ["cal","-S3"] + stdout: StdioCollector { + onStreamFinished: {clock.calendar=this.text} + } + } + + MouseArea { + anchors.fill: parent + hoverEnabled: true + onEntered: { + cal.running = true + PopUpHover.start(clock,"time") + } + onExited: { + PopUpHover.exit() + } + } + + } } diff --git a/Common/HoverMediator.qml b/Common/HoverMediator.qml index 480aa5c..4359f65 100644 --- a/Common/HoverMediator.qml +++ b/Common/HoverMediator.qml @@ -8,11 +8,7 @@ Singleton { property var component: null property string type: "" - property int width: 100 - property int height: 100 property int x: component? component.implicitWidth : 0 property int y: component? (component.implicitHeight + Theme.gaps) : 100 - property bool visible: false - } diff --git a/Common/Theme.qml b/Common/Theme.qml index 22a1059..29fd2e1 100644 --- a/Common/Theme.qml +++ b/Common/Theme.qml @@ -9,7 +9,9 @@ Singleton { readonly property int barSize: 35 readonly property double heightGaps: barSize * 0.8 - readonly property string fontFamily: "Source Code Pro" + readonly property string fontFamily: "Noto Sans" + readonly property string fontFamilyMono: "SauceCodePro Nerd Font Mono" + readonly property int pixelSize: 14 readonly property int gaps: 5 readonly property int animationDuration: 200 @@ -23,25 +25,25 @@ Singleton { } readonly property var walColorsText: walColors.text().split('\n') - property double barOpacity: 0.2 - property color backgroudColor: walColorsText[0] - property color color2: walColorsText[1] - property color color3: walColorsText[2] - property color color4: walColorsText[3] - property color color5: walColorsText[4] - property color color6: walColorsText[5] - property color color7: walColorsText[6] - property color foregroundColor: walColorsText[7] - property color backgroudColorBright: walColorsText[8] - property color color2Bright: walColorsText[9] - property color color3Bright: walColorsText[10] - property color color4Bright: walColorsText[11] - property color color5Bright: walColorsText[12] - property color color6Bright: walColorsText[13] - property color color7Bright: walColorsText[14] - property color foregroundColorBright: walColorsText[15] + readonly property double barOpacity: 0.2 + readonly property color backgroudColor: walColorsText[0] + readonly property color color2: walColorsText[1] + readonly property color color3: walColorsText[2] + readonly property color color4: walColorsText[3] + readonly property color color5: walColorsText[4] + readonly property color color6: walColorsText[5] + readonly property color color7: walColorsText[6] + readonly property color foregroundColor: walColorsText[7] + readonly property color backgroudColorBright: walColorsText[8] + readonly property color color2Bright: walColorsText[9] + readonly property color color3Bright: walColorsText[10] + readonly property color color4Bright: walColorsText[11] + readonly property color color5Bright: walColorsText[12] + readonly property color color6Bright: walColorsText[13] + readonly property color color7Bright: walColorsText[14] + readonly property color foregroundColorBright: walColorsText[15] - readonly property color textColor: foregroundColor + readonly property color textColor: foregroundColorBright // background "#0e1721" // color2 "#463e44" // color3 "#7b4834" diff --git a/NotificationsWidget.qml b/NotificationsWidget.qml index 083ea0d..c2ab563 100644 --- a/NotificationsWidget.qml +++ b/NotificationsWidget.qml @@ -15,7 +15,7 @@ Item { Rectangle { color: Theme.backgroudColor implicitWidth: clockText.implicitWidth * 1.6 - implicitHeight: Theme.heightGaps //root.implicitHeight*0.8 + implicitHeight: Theme.heightGaps radius: 25 Text { @@ -24,7 +24,7 @@ Item { anchors.centerIn: parent text: "OPA!" font.bold: true - font.pixelSize: 14 + font.pixelSize: Theme.pixelSize font.family: Theme.fontFamily color: Theme.textColor } diff --git a/Services/PopUpHover.qml b/Services/PopUpHover.qml index 8e35adb..6c475a2 100644 --- a/Services/PopUpHover.qml +++ b/Services/PopUpHover.qml @@ -14,12 +14,13 @@ Singleton { function start(component, type) { HoverMediator.component = component HoverMediator.type = type + hoverPopUp.anchor.updateAnchor() hoverTimer.start() } function exit() { hoverTimer.stop() - wsPopUp.opacity=0 + hoverPopUp.visible = false } PopupWindow { @@ -31,25 +32,58 @@ Singleton { anchor.rect.x: (HoverMediator.x - this.implicitWidth)/2 implicitHeight: wsPopUp.implicitHeight implicitWidth: wsPopUp.implicitWidth - // implicitHeight: HoverMediator.height - // implicitWidth: HoverMediator.width color:"transparent" - visible:true Component { id: stub Text { text: "stub" + font.bold: true + font.pixelSize: Theme.pixelSize + font.family: Theme.fontFamily + color: Theme.textColor + } + } + + Component { + id: systray + Text { + text: { + if (!HoverMediator.component.model) return "" + if (HoverMediator.component.model.tooltipTitle) return HoverMediator.component.model.tooltipTitle + if (HoverMediator.component.model.title) return HoverMediator.component.model.title + else return "" + } + font.bold: true + font.pixelSize: Theme.pixelSize + font.family: Theme.fontFamily + color: Theme.textColor + } + } + + Component { + id: time + Text { + property string calendar:(HoverMediator.component.calendar)? HoverMediator.component.calendar: "" + + text: calendar + font.bold: true + font.pixelSize: Theme.pixelSize + font.family: Theme.fontFamilyMono + color: Theme.textColor } } Component { id: audio Text { - property string sinkDescription:(HoverMediator.component && HoverMediator.component.sink)? HoverMediator.component.sink.description : "" + property string sinkDescription:(HoverMediator.component.sink)? HoverMediator.component.sink.description : "" text: sinkDescription - color:"white" + font.bold: true + font.pixelSize: Theme.pixelSize + font.family: Theme.fontFamily + color: Theme.textColor } } @@ -86,7 +120,7 @@ Singleton { bottomMargin: Theme.gaps color: Theme.backgroudColor radius: 25 - opacity: 0 + opacity: 1 Behavior on opacity { NumberAnimation { property: "opacity"; duration: Theme.animationDuration} } @@ -97,6 +131,8 @@ Singleton { if(!HoverMediator.type) return stub if(HoverMediator.type === "workspace") return workspaceComponent if(HoverMediator.type === "audio") return audio + if(HoverMediator.type === "time") return time + if(HoverMediator.type === "systray") return systray } } } @@ -108,8 +144,8 @@ Singleton { interval: 300 onTriggered: { - wsPopUp.opacity = 1 - // hoverPopUp.visible = true + // wsPopUp.opacity = 1 + hoverPopUp.visible = true } } } \ No newline at end of file diff --git a/SysTrayWidget.qml b/SysTrayWidget.qml index 66577da..3f0569f 100644 --- a/SysTrayWidget.qml +++ b/SysTrayWidget.qml @@ -7,6 +7,7 @@ import Quickshell import Quickshell.Widgets import Quickshell.Services.SystemTray import qs.Common +import qs.Services WrapperRectangle { id: systrayRoot @@ -60,24 +61,26 @@ WrapperRectangle { source: systrayItem.iconSource } - MouseArea { anchors.fill: parent acceptedButtons: Qt.LeftButton | Qt.RightButton + hoverEnabled: true + onEntered: { + PopUpHover.start(systrayItem,"systray") + } + onExited: { + PopUpHover.exit() + } onClicked: (mouse) => { if (mouse.button === Qt.RightButton) { - const globalPos = mapToGlobal(0, 0); - - const currentScreen = parent.monitor - const relativeX = globalPos.x; menuAnchor.menu = systrayItem.model.menu; - menuAnchor.anchor.window = root; + menuAnchor.anchor.item = systrayItem; menuAnchor.anchor.rect = Qt.rect( - globalPos.x, - globalPos.y+10, - 1, - 1 + 0, + systrayItem.implicitHeight, + 0, + 0 ); menuAnchor.open(); @@ -97,4 +100,4 @@ WrapperRectangle { id: menuAnchor } -} \ No newline at end of file +} diff --git a/Workspaces.qml b/Workspaces.qml index 53babd5..5555537 100644 --- a/Workspaces.qml +++ b/Workspaces.qml @@ -78,7 +78,9 @@ WrapperMouseArea { ] Behavior on color { - ColorAnimation {duration: Theme.animationDuration} + ColorAnimation { + duration: Theme.animationDuration + } } Behavior on implicitWidth { @@ -94,7 +96,7 @@ WrapperMouseArea { anchors.centerIn: parent text: workspaceName font.bold: true - font.pixelSize: 14 + font.pixelSize: Theme.pixelSize font.family: Theme.fontFamily color: Theme.textColor } @@ -104,13 +106,10 @@ WrapperMouseArea { hoverEnabled: true onEntered: { if (parent.hasTopLevel) { - // PopUpHover.show(workspacesRectangle) - PopUpHover.start(workspacesRectangle, "workspace") } } onExited: { - // PopUpHover.exit() PopUpHover.exit() } onClicked: {