Notification: add transparency slider (implements #586)

Assets/Translations/de.json

@@ -360,6 +360,10 @@
         "always-on-top": {
           "label": "Immer im Vordergrund",
           "description": "Benachrichtigungen über Vollbildfenstern und anderen Ebenen anzeigen."
+        },
+        "background-opacity": {
+          "label": "Hintergrund-Transparenz",
+          "description": "Transparenz der Benachrichtigungshintergründe anpassen."
         }
       },
       "duration": {

Assets/Translations/en.json

@@ -360,6 +360,10 @@
         "always-on-top": {
           "label": "Always on top",
           "description": "Display notifications above fullscreen windows and other layers."
+        },
+        "background-opacity": {
+          "label": "Background opacity",
+          "description": "Adjust the opacity of notification backgrounds."
         }
       },
       "duration": {

Assets/Translations/es.json

@@ -360,6 +360,10 @@
         "always-on-top": {
           "label": "Siempre visible",
           "description": "Muestra las notificaciones sobre ventanas a pantalla completa y otras capas."
+        },
+        "background-opacity": {
+          "label": "Opacidad del fondo",
+          "description": "Ajustar la opacidad de los fondos de las notificaciones."
         }
       },
       "duration": {

Assets/Translations/fr.json

@@ -360,6 +360,10 @@
         "always-on-top": {
           "label": "Toujours au premier plan",
           "description": "Afficher les notifications au-dessus des fenêtres en plein écran et des autres applications."
+        },
+        "background-opacity": {
+          "label": "Opacité du fond",
+          "description": "Ajuster l'opacité des arrière-plans de notifications."
         }
       },
       "duration": {

Assets/Translations/pt.json

@@ -360,6 +360,10 @@
         "always-on-top": {
           "label": "Sempre no topo",
           "description": "Exibe notificações acima de janelas em tela cheia e outras camadas."
+        },
+        "background-opacity": {
+          "label": "Opacidade do fundo",
+          "description": "Ajustar a opacidade dos fundos das notificações."
         }
       },
       "duration": {

Assets/Translations/zh-CN.json

@@ -360,6 +360,10 @@
         "always-on-top": {
           "label": "始终置顶",
           "description": "在全屏窗口和其他图层上方显示通知。"
+        },
+        "background-opacity": {
+          "label": "背景透明度",
+          "description": "调整通知背景的透明度。"
         }
       },
       "duration": {

Assets/settings-default.json

@@ -189,6 +189,7 @@
     "monitors": [],
     "location": "top_right",
     "overlayLayer": true,
+    "backgroundOpacity": 1,
     "respectExpireTimeout": false,
     "lowUrgencyDuration": 3,
     "normalUrgencyDuration": 8,

Commons/Settings.qml

@@ -318,6 +318,7 @@ Singleton {
       property list<string> monitors: []
       property string location: "top_right"
       property bool overlayLayer: true
+      property real backgroundOpacity: 1.0
       property bool respectExpireTimeout: false
       property int lowUrgencyDuration: 3
       property int normalUrgencyDuration: 8

Modules/Notification/Notification.qml

@@ -185,9 +185,9 @@ Variants {
             Layout.maximumHeight: Layout.preferredHeight
 
             radius: Style.radiusL
-            border.color: Color.mOutline
+            border.color: Qt.alpha(Color.mOutline, Settings.data.notifications.backgroundOpacity || 1.0)
             border.width: Style.borderS
-            color: Color.mSurface
+            color: Qt.alpha(Color.mSurface, Settings.data.notifications.backgroundOpacity || 1.0)
 
             // Optimized progress bar container
             Rectangle {
@@ -212,12 +212,14 @@ Variants {
                 width: parent.availableWidth * model.progress
 
                 color: {
+                  var baseColor
                   if (model.urgency === NotificationUrgency.Critical || model.urgency === 2)
-                    return Color.mError
+                    baseColor = Color.mError
                   else if (model.urgency === NotificationUrgency.Low || model.urgency === 0)
-                    return Color.mOnSurface
+                    baseColor = Color.mOnSurface
                   else
-                    return Color.mPrimary
+                    baseColor = Color.mPrimary
+                  return Qt.alpha(baseColor, Settings.data.notifications.backgroundOpacity || 1.0)
                 }
 
                 antialiasing: true

Modules/Settings/Tabs/NotificationsTab.qml

@@ -72,6 +72,27 @@ ColumnLayout {
       onToggled: checked => Settings.data.notifications.overlayLayer = checked
     }
 
+    // Background Opacity
+    ColumnLayout {
+      spacing: Style.marginXXS
+      Layout.fillWidth: true
+
+      NLabel {
+        label: I18n.tr("settings.notifications.settings.background-opacity.label")
+        description: I18n.tr("settings.notifications.settings.background-opacity.description")
+      }
+
+      NValueSlider {
+        Layout.fillWidth: true
+        from: 0
+        to: 100
+        stepSize: 1
+        value: Settings.data.notifications.backgroundOpacity * 100
+        onMoved: value => Settings.data.notifications.backgroundOpacity = value / 100
+        text: Math.round(Settings.data.notifications.backgroundOpacity * 100) + "%"
+      }
+    }
+
     // OSD settings moved to the dedicated OSD tab
   }