From 044994f4e80b7fb9d3a78e8254d2eeac8394a2c6 Mon Sep 17 00:00:00 2001
From: Mentalflow <312902918@qq.com>
Date: Thu, 28 Mar 2024 08:57:09 +0800
Subject: [PATCH] RibbonBlur and RibbonPopup: Fix the blur effect.

---
 example/components/RibbonWindow.qml | 30 ++++++++++++++++--------
 example/example.qml                 |  6 +++++
 lib_source/qml/RibbonBlur.qml       | 36 +++++++++++++++++++++++------
 lib_source/qml/RibbonPopup.qml      | 10 ++++----
 4 files changed, 61 insertions(+), 21 deletions(-)

diff --git a/example/components/RibbonWindow.qml b/example/components/RibbonWindow.qml
index a87f757..c3a4330 100644
--- a/example/components/RibbonWindow.qml
+++ b/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,18 +32,21 @@ Window {
         FramelessHelper.moveWindowToDesktopCenter();
         window.visible = true;
     }
-    RibbonTitleBar {
-        id: titleBar
-    }
     Item{
-        id:container
-        anchors{
-            top: titleBar.bottom
-            left: parent.left
-            right: parent.right
-            bottom: parent.bottom
+        id: window_items
+        anchors.fill: parent
+        RibbonTitleBar {
+            id: titleBar
         }
-        clip: true
+        Item{
+            id:container
+            anchors{
+                top: titleBar.bottom
+                left: parent.left
+                right: parent.right
+                bottom: parent.bottom
+            }
+            clip: true
     }
     Connections{
         target: RibbonTheme
@@ -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")
diff --git a/example/example.qml b/example/example.qml
index aa15f65..62c9c08 100644
--- a/example/example.qml
+++ b/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)
                     }
                 }
             }
diff --git a/lib_source/qml/RibbonBlur.qml b/lib_source/qml/RibbonBlur.qml
index c0f8674..16af97e 100644
--- a/lib_source/qml/RibbonBlur.qml
+++ b/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
-        layer.effect: GaussianBlur{
-            radius: blur_radius
-            deviation: 8
-            samples: (radius / 4) * 3
+        visible: false
+        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
     }
+
+
 }
diff --git a/lib_source/qml/RibbonPopup.qml b/lib_source/qml/RibbonPopup.qml
index 649a3ac..715ab3a 100644
--- a/lib_source/qml/RibbonPopup.qml
+++ b/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_border.color: RibbonTheme.dark_mode ? "#5C5D5D" : "#B5B4B5"
+            mask_opacity: blur_enabled ? 0.9 : 1
+            mask_border.color: RibbonTheme.modern_style ?
+                                   RibbonTheme.dark_mode ? "#7A7A7A" : "#2C59B7" :
+                                   RibbonTheme.dark_mode ? "#5C5D5D" : "#B5B4B5"
             mask_border.width: 1
         }
     }