RibbonBlur and RibbonPopup: Fix the blur effect.

example/components/RibbonWindow.qml

@@ -5,6 +5,7 @@ import org.wangwenx190.FramelessHelper
 Window {
     id:window
     default property alias content: container.data
+    property alias window_items: window_items
     property alias title_bar: titleBar
     property alias popup: pop
     property bool comfirmed_quit: false
@@ -31,6 +32,9 @@ Window {
         FramelessHelper.moveWindowToDesktopCenter();
         window.visible = true;
     }
+    Item{
+        id: window_items
+        anchors.fill: parent
         RibbonTitleBar {
             id: titleBar
         }
@@ -61,9 +65,15 @@ Window {
     }
     RibbonPopup{
         id: pop
+        target: window_items
+        target_rect: Qt.rect(window_items.x + x, window_items.y + y, width, height)
+        blur_enabled: true
     }
     RibbonPopupDialog{
         id: dialog
+        target: window_items
+        blur_enabled: true
+        target_rect: Qt.rect(window_items.x + x, window_items.y + y, width, height)
         positiveText: qsTr("Quit")
         neutralText: qsTr("Minimize")
         negativeText: qsTr("Cancel")

example/example.qml

@@ -500,9 +500,15 @@ RibbonWindow {
                         id: popup
                         height: 200
                         width: height
+                        target: window_items
+                        blur_enabled: true
+                        target_rect: Qt.rect(window_items.x + x, window_items.y + y, width, height)
                     }
                     RibbonPopupDialog{
                         id: dialog
+                        target: window_items
+                        blur_enabled: true
+                        target_rect: Qt.rect(window_items.x + x, window_items.y + y, width, height)
                     }
                 }
             }

lib_source/qml/RibbonBlur.qml

@@ -2,9 +2,9 @@ import QtQuick
 import Qt5Compat.GraphicalEffects
 import RibbonUI
 
-Rectangle {
+Item {
     id: control
-    color: "transparent"
+    property int radius: 0
     property int blur_radius: 32
     property alias target: effect.sourceItem
     property rect target_rect : Qt.rect(control.x, control.y, control.width, control.height)
@@ -17,13 +17,33 @@ Rectangle {
         anchors.fill: parent
         sourceRect: target_rect
         sourceItem: target
-        layer.enabled: true
+        visible: false
-        layer.effect: GaussianBlur{
+        Rectangle{
+            radius: control.radius
+            visible: false
+        }
+    }
+
+    GaussianBlur{
+        id: blur
+        anchors.fill: parent
         radius: blur_radius
         deviation: 8
         samples: (radius / 4) * 3
+        source: effect
+        visible: false
+    }
+
+    OpacityMask {
+        anchors.fill: parent
+        source: blur
+        maskSource: Rectangle{
+            width: control.width
+            height: control.height
+            radius: control.radius
         }
     }
+
     Rectangle{
         id: mask
         anchors.fill: parent
@@ -31,4 +51,6 @@ Rectangle {
         opacity: mask_opacity
         radius: control.radius
     }
+
+
 }

lib_source/qml/RibbonPopup.qml

@@ -52,10 +52,10 @@ Popup {
         RectangularGlow {
             id: effect
             anchors.fill: blur
-            anchors.margins: blur.border.width
+            anchors.margins: blur.mask_border.width
             glowRadius: 20
             spread: 0
-            color: RibbonTheme.dark_mode ? Qt.rgba(255,255,255,0.1) : Qt.rgba(0,0,0,0.1)
+            color: RibbonTheme.dark_mode ? Qt.rgba(0,0,0,0.7) : Qt.rgba(0,0,0,0.45)
             cornerRadius: blur.radius + glowRadius + 10
         }
         RibbonBlur{
@@ -63,8 +63,10 @@ Popup {
             implicitWidth: parent.width
             id: blur
             radius: 20
-            mask_opacity: blur_enabled ? 0.5 : 1
+            mask_opacity: blur_enabled ? 0.9 : 1
-            mask_border.color: RibbonTheme.dark_mode ? "#5C5D5D" : "#B5B4B5"
+            mask_border.color: RibbonTheme.modern_style ?
+                                   RibbonTheme.dark_mode ? "#7A7A7A" : "#2C59B7" :
+                                   RibbonTheme.dark_mode ? "#5C5D5D" : "#B5B4B5"
             mask_border.width: 1
         }
     }