1
0
mirror of https://github.com/AvengeMedia/DankMaterialShell.git synced 2025-12-07 22:15:38 -05:00

Popup transparency option

This commit is contained in:
bbedward
2025-07-14 15:00:58 -04:00
parent 0a4453ab3b
commit 3b16ae73c7
13 changed files with 132 additions and 38 deletions

View File

@@ -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

View File

@@ -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

View File

@@ -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

View File

@@ -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

View File

@@ -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

View File

@@ -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 {

View File

@@ -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)

View File

@@ -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

View File

@@ -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

View File

@@ -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

View File

@@ -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

View File

@@ -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 {

View File

@@ -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