From d4d7b06b64c1103faa00a681284e2c14e3a3b5a3 Mon Sep 17 00:00:00 2001 From: LemmyCook Date: Tue, 9 Sep 2025 01:44:14 -0400 Subject: [PATCH] NPill + Clock color uniformisation --- Modules/Bar/Widgets/Battery.qml | 6 +----- Modules/Bar/Widgets/Brightness.qml | 2 -- Modules/Bar/Widgets/Clock.qml | 1 + Modules/Bar/Widgets/KeyboardLayout.qml | 2 -- Modules/Bar/Widgets/Microphone.qml | 2 -- Modules/Bar/Widgets/Volume.qml | 2 -- Widgets/NPill.qml | 29 +++++++++++--------------- 7 files changed, 14 insertions(+), 30 deletions(-) diff --git a/Modules/Bar/Widgets/Battery.qml b/Modules/Bar/Widgets/Battery.qml index 078d7f4..bd1be8d 100644 --- a/Modules/Bar/Widgets/Battery.qml +++ b/Modules/Bar/Widgets/Battery.qml @@ -85,12 +85,8 @@ Item { id: pill rightOpen: BarWidgetRegistry.getNPillDirection(root) - icon: testMode ? BatteryService.getIcon(testPercent, testCharging, true) : BatteryService.getIcon(percent, - charging, isReady) + icon: testMode ? BatteryService.getIcon(testPercent, testCharging, true) : BatteryService.getIcon(percent, charging, isReady) text: (isReady || testMode) ? Math.round(percent) + "%" : "-" - textColor: charging ? Color.mPrimary : Color.mOnSurface - iconCircleColor: Color.mPrimary - collapsedIconColor: Color.mOnSurface autoHide: false forceOpen: isReady && (testMode || battery.isLaptopBattery) && alwaysShowPercentage disableOpen: (!isReady || (!testMode && !battery.isLaptopBattery)) diff --git a/Modules/Bar/Widgets/Brightness.qml b/Modules/Bar/Widgets/Brightness.qml index feafbcc..477cf19 100644 --- a/Modules/Bar/Widgets/Brightness.qml +++ b/Modules/Bar/Widgets/Brightness.qml @@ -79,8 +79,6 @@ Item { rightOpen: BarWidgetRegistry.getNPillDirection(root) icon: getIcon() - iconCircleColor: Color.mPrimary - collapsedIconColor: Color.mOnSurface autoHide: false // Important to be false so we can hover as long as we want text: { var monitor = getMonitor() diff --git a/Modules/Bar/Widgets/Clock.qml b/Modules/Bar/Widgets/Clock.qml index 3b472d9..71526e2 100644 --- a/Modules/Bar/Widgets/Clock.qml +++ b/Modules/Bar/Widgets/Clock.qml @@ -60,6 +60,7 @@ Rectangle { anchors.centerIn: parent font.pointSize: Style.fontSizeS * scaling font.weight: Style.fontWeightBold + color: Color.mPrimary } NTooltip { diff --git a/Modules/Bar/Widgets/KeyboardLayout.qml b/Modules/Bar/Widgets/KeyboardLayout.qml index 60ea83e..a09d1e6 100644 --- a/Modules/Bar/Widgets/KeyboardLayout.qml +++ b/Modules/Bar/Widgets/KeyboardLayout.qml @@ -25,8 +25,6 @@ Item { anchors.verticalCenter: parent.verticalCenter rightOpen: BarWidgetRegistry.getNPillDirection(root) icon: "keyboard" - iconCircleColor: Color.mPrimary - collapsedIconColor: Color.mOnSurface autoHide: false // Important to be false so we can hover as long as we want text: currentLayout tooltipText: "Keyboard layout: " + currentLayout diff --git a/Modules/Bar/Widgets/Microphone.qml b/Modules/Bar/Widgets/Microphone.qml index ed0a54c..3851785 100644 --- a/Modules/Bar/Widgets/Microphone.qml +++ b/Modules/Bar/Widgets/Microphone.qml @@ -92,8 +92,6 @@ Item { rightOpen: BarWidgetRegistry.getNPillDirection(root) icon: getIcon() - iconCircleColor: Color.mPrimary - collapsedIconColor: Color.mOnSurface autoHide: false // Important to be false so we can hover as long as we want text: Math.floor(AudioService.inputVolume * 100) + "%" forceOpen: alwaysShowPercentage diff --git a/Modules/Bar/Widgets/Volume.qml b/Modules/Bar/Widgets/Volume.qml index 928f839..ccc40f9 100644 --- a/Modules/Bar/Widgets/Volume.qml +++ b/Modules/Bar/Widgets/Volume.qml @@ -77,8 +77,6 @@ Item { rightOpen: BarWidgetRegistry.getNPillDirection(root) icon: getIcon() - iconCircleColor: Color.mPrimary - collapsedIconColor: Color.mOnSurface autoHide: false // Important to be false so we can hover as long as we want text: Math.floor(AudioService.volume * 100) + "%" forceOpen: alwaysShowPercentage diff --git a/Widgets/NPill.qml b/Widgets/NPill.qml index 18987a3..1d9bfba 100644 --- a/Widgets/NPill.qml +++ b/Widgets/NPill.qml @@ -9,20 +9,15 @@ Item { property string icon: "" property string text: "" property string tooltipText: "" - property color pillColor: Color.mSurfaceVariant - property color textColor: Color.mOnSurface - property color iconCircleColor: Color.mPrimary - property color iconTextColor: Color.mSurface - property color collapsedIconColor: Color.mOnSurface - property real sizeRatio: 0.8 property bool autoHide: false property bool forceOpen: false property bool disableOpen: false property bool rightOpen: false + property bool hovered: false // Effective shown state (true if hovered/animated open or forced) - readonly property bool effectiveShown: forceOpen || showPill + readonly property bool revealed: forceOpen || showPill signal shown signal hidden @@ -49,14 +44,14 @@ Item { Rectangle { id: pill - width: effectiveShown ? maxPillWidth : 1 + width: revealed ? maxPillWidth : 1 height: pillHeight x: rightOpen ? (iconCircle.x + iconCircle.width / 2) : // Opens right (iconCircle.x + iconCircle.width / 2) - width // Opens left - opacity: effectiveShown ? Style.opacityFull : Style.opacityNone - color: pillColor + opacity: revealed ? Style.opacityFull : Style.opacityNone + color: Color.mSurfaceVariant topLeftRadius: rightOpen ? 0 : pillHeight * 0.5 bottomLeftRadius: rightOpen ? 0 : pillHeight * 0.5 @@ -76,8 +71,8 @@ Item { text: root.text font.pointSize: Style.fontSizeXS * scaling font.weight: Style.fontWeightBold - color: textColor - visible: effectiveShown + color: Color.mPrimary + visible: revealed } Behavior on width { @@ -101,8 +96,7 @@ Item { width: iconSize height: iconSize radius: width * 0.5 - // When forced shown, match pill background; otherwise use accent when hovered - color: forceOpen ? Color.mSurface : (showPill ? iconCircleColor : Color.mSurfaceVariant) + color: hovered && !forceOpen? Color.mPrimary : Color.mSurfaceVariant anchors.verticalCenter: parent.verticalCenter x: rightOpen ? 0 : (parent.width - width) @@ -117,9 +111,8 @@ Item { NIcon { icon: root.icon font.pointSize: Style.fontSizeM * scaling - // When forced shown, use pill text color; otherwise accent color when hovered - color: forceOpen ? textColor : (showPill ? iconTextColor : Color.mOnSurface) - // Center horizontally + color: hovered && !forceOpen? Color.mOnPrimary : Color.mOnSurface + // Center horizontally x: (iconCircle.width - width) / 2 // Center vertically accounting for font metrics y: (iconCircle.height - height) / 2 + (height - contentHeight) / 2 @@ -216,6 +209,7 @@ Item { hoverEnabled: true acceptedButtons: Qt.LeftButton | Qt.RightButton | Qt.MiddleButton onEntered: { + hovered = true root.entered() tooltip.show() if (disableOpen) { @@ -226,6 +220,7 @@ Item { } } onExited: { + hovered = false root.exited() if (!forceOpen) { hide()