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:
@@ -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
|
||||
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -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)
|
||||
|
||||
@@ -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
|
||||
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user