diff --git a/Common/Prefs.qml b/Common/Prefs.qml index 26ad0b48..49205c73 100644 --- a/Common/Prefs.qml +++ b/Common/Prefs.qml @@ -11,6 +11,7 @@ Singleton { property bool themeIsDynamic: false property bool isLightMode: false property real topBarTransparency: 0.75 + property real popupTransparency: 0.92 property var recentlyUsedApps: [] // New global preferences @@ -75,6 +76,8 @@ Singleton { isLightMode = settings.isLightMode !== undefined ? settings.isLightMode : false topBarTransparency = settings.topBarTransparency !== undefined ? (settings.topBarTransparency > 1 ? settings.topBarTransparency / 100.0 : settings.topBarTransparency) : 0.75 + popupTransparency = settings.popupTransparency !== undefined ? + (settings.popupTransparency > 1 ? settings.popupTransparency / 100.0 : settings.popupTransparency) : 0.92 recentlyUsedApps = settings.recentlyUsedApps || [] use24HourClock = settings.use24HourClock !== undefined ? settings.use24HourClock : true useFahrenheit = settings.useFahrenheit !== undefined ? settings.useFahrenheit : false @@ -107,6 +110,7 @@ Singleton { themeIsDynamic, isLightMode, topBarTransparency, + popupTransparency, recentlyUsedApps, use24HourClock, useFahrenheit, @@ -159,6 +163,12 @@ Singleton { saveSettings() } + function setPopupTransparency(transparency) { + console.log("Prefs setPopupTransparency called - popupTransparency:", transparency) + popupTransparency = transparency + saveSettings() + } + function addRecentApp(app) { if (!app) return diff --git a/Common/Theme.qml b/Common/Theme.qml index 9b8fa253..e2599f83 100644 --- a/Common/Theme.qml +++ b/Common/Theme.qml @@ -19,9 +19,25 @@ QtObject { Colors.colorsUpdated.connect(root.onColorsUpdated) } + // Initialize transparency values from Prefs + if (typeof Prefs !== "undefined") { + if (Prefs.popupTransparency !== undefined) { + root.popupTransparency = Prefs.popupTransparency + } + // Connect to transparency changes + if (Prefs.popupTransparencyChanged) { + Prefs.popupTransparencyChanged.connect(function() { + if (typeof Prefs !== "undefined" && Prefs.popupTransparency !== undefined) { + root.popupTransparency = Prefs.popupTransparency + } + }) + } + } + console.log("Theme initialized, waiting for Prefs to load settings and apply theme") } + // Handle successful color extraction function onColorsUpdated() { console.log("Colors updated successfully - switching to dynamic theme") @@ -502,6 +518,37 @@ QtObject { property real opacityHigh: 0.87 property real opacityFull: 1.0 + // Transparency system - can be overridden by Prefs + property real panelTransparency: 0.85 + property real popupTransparency: 0.92 + + // Smart transparency functions for content-aware backgrounds + function getPopupBackgroundAlpha() { + return popupTransparency + } + + function getContentBackgroundAlpha() { + return popupTransparency + } + + function getPopupBorderAlpha() { + // Borders can be more transparent than the main content + return popupTransparency * 0.6 + } + + // Convenience functions for themed backgrounds with transparency + function popupBackground() { + return Qt.rgba(surfaceContainer.r, surfaceContainer.g, surfaceContainer.b, popupTransparency) + } + + function contentBackground() { + return Qt.rgba(surfaceContainer.r, surfaceContainer.g, surfaceContainer.b, popupTransparency) + } + + function panelBackground() { + return Qt.rgba(surfaceContainer.r, surfaceContainer.g, surfaceContainer.b, panelTransparency) + } + property string iconFont: "Material Symbols Rounded" property string iconFontFilled: "Material Symbols Rounded" property int iconFontWeight: Font.Normal diff --git a/Widgets/AppLauncher.qml b/Widgets/AppLauncher.qml index 30453b11..5b58b144 100644 --- a/Widgets/AppLauncher.qml +++ b/Widgets/AppLauncher.qml @@ -285,7 +285,7 @@ PanelWindow { leftMargin: Theme.spacingL } - color: Qt.rgba(Theme.surfaceContainer.r, Theme.surfaceContainer.g, Theme.surfaceContainer.b, 0.98) + color: Theme.popupBackground() radius: Theme.cornerRadiusXLarge // Material 3 elevation with multiple layers @@ -437,7 +437,7 @@ PanelWindow { width: parent.width height: 52 radius: Theme.cornerRadiusLarge - color: Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, 0.6) + color: Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, Theme.getContentBackgroundAlpha() * 0.7) border.width: searchField.activeFocus ? 2 : 1 border.color: searchField.activeFocus ? Theme.primary : Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.3) @@ -550,8 +550,8 @@ PanelWindow { width: 200 height: 36 radius: Theme.cornerRadius - color: Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, 0.3) - border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.2) + color: Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, Theme.getContentBackgroundAlpha() * 0.4) + border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, Theme.getPopupBorderAlpha()) border.width: 1 Row { @@ -776,8 +776,8 @@ PanelWindow { width: 200 height: Math.min(250, categories.length * 40 + Theme.spacingM * 2) radius: Theme.cornerRadiusLarge - color: Theme.surfaceContainer - border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.2) + color: Theme.contentBackground() + border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, Theme.getPopupBorderAlpha()) border.width: 1 visible: showCategories z: 1000 diff --git a/Widgets/BatteryControlPopup.qml b/Widgets/BatteryControlPopup.qml index 40655e1b..fc278155 100644 --- a/Widgets/BatteryControlPopup.qml +++ b/Widgets/BatteryControlPopup.qml @@ -40,9 +40,9 @@ PanelWindow { height: Math.min(450, parent.height - Theme.barHeight - Theme.spacingS * 2) x: Math.max(Theme.spacingL, parent.width - width - Theme.spacingL) y: Theme.barHeight + Theme.spacingS - color: Theme.surfaceContainer + color: Theme.popupBackground() radius: Theme.cornerRadiusLarge - border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.12) + border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, Theme.getPopupBorderAlpha()) border.width: 1 opacity: root.batteryPopupVisible ? 1.0 : 0.0 diff --git a/Widgets/ClipboardHistory.qml b/Widgets/ClipboardHistory.qml index 7e2af1ac..4cddce1f 100644 --- a/Widgets/ClipboardHistory.qml +++ b/Widgets/ClipboardHistory.qml @@ -184,9 +184,9 @@ PanelWindow { height: Math.min(500, parent.height - 100) anchors.centerIn: parent - color: activeTheme.surfaceContainer + color: activeTheme.popupBackground() radius: activeTheme.cornerRadiusXLarge - border.color: Qt.rgba(activeTheme.outline.r, activeTheme.outline.g, activeTheme.outline.b, 0.2) + border.color: Qt.rgba(activeTheme.outline.r, activeTheme.outline.g, activeTheme.outline.b, activeTheme.getPopupBorderAlpha()) border.width: 1 opacity: clipboardHistory.isVisible ? 1.0 : 0.0 @@ -300,8 +300,8 @@ PanelWindow { width: parent.width height: 48 radius: activeTheme.cornerRadiusLarge - color: Qt.rgba(activeTheme.surfaceVariant.r, activeTheme.surfaceVariant.g, activeTheme.surfaceVariant.b, 0.3) - border.color: searchField.focus ? activeTheme.primary : Qt.rgba(activeTheme.outline.r, activeTheme.outline.g, activeTheme.outline.b, 0.2) + color: Qt.rgba(activeTheme.surfaceVariant.r, activeTheme.surfaceVariant.g, activeTheme.surfaceVariant.b, activeTheme.getContentBackgroundAlpha() * 0.4) + border.color: searchField.focus ? activeTheme.primary : Qt.rgba(activeTheme.outline.r, activeTheme.outline.g, activeTheme.outline.b, activeTheme.getPopupBorderAlpha()) border.width: searchField.focus ? 2 : 1 Row { @@ -642,8 +642,8 @@ PanelWindow { width: 350 height: 200 // Increased height for better spacing radius: activeTheme.cornerRadiusLarge - color: activeTheme.surfaceContainer - border.color: Qt.rgba(activeTheme.outline.r, activeTheme.outline.g, activeTheme.outline.b, 0.3) + color: activeTheme.popupBackground() + border.color: Qt.rgba(activeTheme.outline.r, activeTheme.outline.g, activeTheme.outline.b, activeTheme.getPopupBorderAlpha()) border.width: 1 visible: showClearConfirmation z: 1000 diff --git a/Widgets/ControlCenter/ControlCenterPopup.qml b/Widgets/ControlCenter/ControlCenterPopup.qml index 46c44eb0..1f05de6a 100644 --- a/Widgets/ControlCenter/ControlCenterPopup.qml +++ b/Widgets/ControlCenter/ControlCenterPopup.qml @@ -37,9 +37,9 @@ PanelWindow { height: controlCenterPopup.powerOptionsExpanded ? 570 : 500 x: Math.max(Theme.spacingL, parent.width - width - Theme.spacingL) y: Theme.barHeight + Theme.spacingXS - color: Theme.surfaceContainer + color: Theme.popupBackground() radius: Theme.cornerRadiusLarge - border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.12) + border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, Theme.getPopupBorderAlpha()) border.width: 1 // TopBar dropdown animation - optimized for performance @@ -122,8 +122,8 @@ PanelWindow { width: parent.width height: 90 radius: Theme.cornerRadiusLarge - color: Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, 0.3) - border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.08) + color: Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, Theme.getContentBackgroundAlpha() * 0.4) + border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, Theme.getPopupBorderAlpha()) border.width: 1 Row { @@ -362,8 +362,8 @@ PanelWindow { width: parent.width height: controlCenterPopup.powerOptionsExpanded ? 60 : 0 radius: Theme.cornerRadius - color: Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, 0.3) - border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.08) + color: Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, Theme.getContentBackgroundAlpha() * 0.4) + border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, Theme.getPopupBorderAlpha()) border.width: controlCenterPopup.powerOptionsExpanded ? 1 : 0 opacity: controlCenterPopup.powerOptionsExpanded ? 1.0 : 0.0 clip: true @@ -635,7 +635,7 @@ PanelWindow { width: parent.width height: controlCenterPopup.powerOptionsExpanded ? 240 : 300 radius: Theme.cornerRadius - color: Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, 0.08) + color: Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, Theme.getContentBackgroundAlpha() * 0.1) Behavior on height { NumberAnimation { diff --git a/Widgets/NotificationHistoryPopup.qml b/Widgets/NotificationHistoryPopup.qml index 941a1e89..f02bd76e 100644 --- a/Widgets/NotificationHistoryPopup.qml +++ b/Widgets/NotificationHistoryPopup.qml @@ -45,9 +45,9 @@ PanelWindow { height: 500 x: parent.width - width - Theme.spacingL y: Theme.barHeight + Theme.spacingXS - color: Theme.surfaceContainer + color: Theme.popupBackground() radius: Theme.cornerRadiusLarge - border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.12) + border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, Theme.getPopupBorderAlpha()) border.width: 1 // TopBar dropdown animation - slide down from bar (consistent with other TopBar widgets) diff --git a/Widgets/NotificationPopup.qml b/Widgets/NotificationPopup.qml index 2dc1e9b5..582cae34 100644 --- a/Widgets/NotificationPopup.qml +++ b/Widgets/NotificationPopup.qml @@ -37,7 +37,7 @@ PanelWindow { anchors.topMargin: 16 // 16px from the top of this window anchors.rightMargin: 16 // 16px from the right edge - color: Theme.surfaceContainer + color: Theme.popupBackground() radius: Theme.cornerRadiusLarge border.width: 0 // Remove border completely diff --git a/Widgets/PowerMenuPopup.qml b/Widgets/PowerMenuPopup.qml index 1c02533a..34ba10db 100644 --- a/Widgets/PowerMenuPopup.qml +++ b/Widgets/PowerMenuPopup.qml @@ -40,9 +40,9 @@ PanelWindow { height: 320 // Fixed height to prevent cropping x: Math.max(Theme.spacingL, parent.width - width - Theme.spacingL) y: Theme.barHeight + Theme.spacingXS - color: Theme.surfaceContainer + color: Theme.popupBackground() radius: Theme.cornerRadiusLarge - border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.12) + border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, Theme.getPopupBorderAlpha()) border.width: 1 opacity: root.powerMenuVisible ? 1.0 : 0.0 diff --git a/Widgets/ProcessListDropdown.qml b/Widgets/ProcessListDropdown.qml index d458724a..fb9ded87 100644 --- a/Widgets/ProcessListDropdown.qml +++ b/Widgets/ProcessListDropdown.qml @@ -53,8 +53,8 @@ PanelWindow { y: Theme.barHeight + Theme.spacingXS radius: Theme.cornerRadiusLarge - color: Theme.surfaceContainer - border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.12) + color: Theme.popupBackground() + border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, Theme.getPopupBorderAlpha()) border.width: 1 clip: true @@ -664,8 +664,8 @@ PanelWindow { width: 180 height: menuColumn.implicitHeight + Theme.spacingS * 2 radius: Theme.cornerRadiusLarge - color: Theme.surfaceContainer - border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.12) + color: Theme.popupBackground() + border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, Theme.getPopupBorderAlpha()) border.width: 1 // Material 3 drop shadow diff --git a/Widgets/SettingsPopup.qml b/Widgets/SettingsPopup.qml index 0101479b..6a742f1d 100644 --- a/Widgets/SettingsPopup.qml +++ b/Widgets/SettingsPopup.qml @@ -48,9 +48,9 @@ PanelWindow { width: Math.min(600, parent.width - Theme.spacingXL * 2) height: Math.min(700, parent.height - Theme.spacingXL * 2) anchors.centerIn: parent - color: Theme.surfaceContainer + color: Theme.popupBackground() radius: Theme.cornerRadiusLarge - border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.12) + border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, Theme.getPopupBorderAlpha()) border.width: 1 // Simple opacity and scale control tied directly to settingsVisible @@ -451,6 +451,43 @@ PanelWindow { } } + // Popup Transparency + Column { + width: parent.width + spacing: Theme.spacingS + + Text { + text: "Popup Transparency" + font.pixelSize: Theme.fontSizeMedium + color: Theme.surfaceText + font.weight: Font.Medium + } + + CustomSlider { + width: parent.width + value: Math.round(Prefs.popupTransparency * 100) + minimum: 0 + maximum: 100 + leftIcon: "blur_on" + rightIcon: "circle" + unit: "%" + showValue: true + + onSliderDragFinished: (finalValue) => { + let transparencyValue = finalValue / 100.0 + Prefs.setPopupTransparency(transparencyValue) + } + } + + Text { + text: "Adjust transparency for dialogs, menus, and popups" + font.pixelSize: Theme.fontSizeSmall + color: Theme.surfaceVariantText + wrapMode: Text.WordWrap + width: parent.width + } + } + // Theme Picker Column { width: parent.width diff --git a/Widgets/SpotlightLauncher.qml b/Widgets/SpotlightLauncher.qml index 6af6f0bb..ee4845c3 100644 --- a/Widgets/SpotlightLauncher.qml +++ b/Widgets/SpotlightLauncher.qml @@ -306,9 +306,9 @@ PanelWindow { return Math.min(Math.max(baseHeight, 500), parent.height - 40) } anchors.centerIn: parent - color: Theme.surfaceContainer + color: Theme.popupBackground() radius: Theme.cornerRadiusXLarge - border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.2) + border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, Theme.getPopupBorderAlpha()) border.width: 1 layer.enabled: true layer.effect: MultiEffect { @@ -439,9 +439,9 @@ PanelWindow { width: parent.width - 80 - Theme.spacingM // Leave space for view toggle buttons height: 56 radius: Theme.cornerRadiusLarge - color: Theme.surfaceVariant + color: Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, Theme.getContentBackgroundAlpha() * 0.7) border.width: searchField.activeFocus ? 2 : 1 - border.color: searchField.activeFocus ? Theme.primary : Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.3) + border.color: searchField.activeFocus ? Theme.primary : Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, Theme.getPopupBorderAlpha()) Behavior on border.color { ColorAnimation { duration: Theme.shortDuration; easing.type: Theme.standardEasing } } Row { diff --git a/Widgets/TrayMenuPopup.qml b/Widgets/TrayMenuPopup.qml index 2265b169..1772c7cf 100644 --- a/Widgets/TrayMenuPopup.qml +++ b/Widgets/TrayMenuPopup.qml @@ -29,9 +29,9 @@ PanelWindow { y: root.trayMenuY width: Math.max(180, Math.min(300, menuList.maxTextWidth + Theme.spacingL * 2)) height: Math.max(60, menuList.contentHeight + Theme.spacingS * 2) - color: Theme.surfaceContainer + color: Theme.popupBackground() radius: Theme.cornerRadiusLarge - border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.12) + border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, Theme.getPopupBorderAlpha()) border.width: 1 // Material 3 drop shadow