RibbonView,RibbonTabBar,RibbonBottomBar: blur effect migrated.

example/qml/Qt5/example.qml

@@ -652,8 +652,6 @@ RibbonWindow {
     RibbonPaperView{
         id: view
         anchors.fill: parent
-        topPadding: tab_bar.height
-        bottomPadding: bottom_bar.height
         pageWidth: (page_slider.value / 100.0) * width
         spacing: 0
         ColumnLayout{

example/qml/Qt6/example.qml

@@ -1,7 +1,7 @@
 import QtQuick
-import QtQuick.Window
-import QtQuick.Layouts
 import QtQuick.Controls
+import QtQuick.Layouts
+import QtQuick.Window
 import RibbonUI
 
 RibbonWindow {
@@ -652,8 +652,6 @@ RibbonWindow {
     RibbonPaperView{
         id: view
         anchors.fill: parent
-        topPadding: tab_bar.height
-        bottomPadding: bottom_bar.height
         pageWidth: (page_slider.value / 100.0) * width
         spacing: 0
         ColumnLayout{

lib_source/qml/Qt5/RibbonBlur.qml

@@ -5,6 +5,10 @@ import RibbonUI 1.0
 Item {
     id: control
     property int radius: 0
+    property int topLeftRadius: radius
+    property int bottomLeftRadius: radius
+    property int topRightRadius: radius
+    property int bottomRightRadius: radius
     property int blurRadius: 32
     property alias target: effect.sourceItem
     property rect targetRect : Qt.rect(control.x, control.y, control.width, control.height)
@@ -17,7 +21,6 @@ Item {
         id: effect
         anchors.fill: parent
         sourceRect: control.targetRect
-        sourceItem: control.target
         visible: false
     }
 
@@ -31,10 +34,14 @@ Item {
         visible: false
     }
 
-    Rectangle{
+    RibbonRectangle{
         anchors.fill: parent
         color: control.useSolidBg ? control.maskColor : 'transparent'
         radius: control.radius
+        topLeftRadius: control.topLeftRadius
+        bottomLeftRadius: control.bottomLeftRadius
+        topRightRadius: control.topRightRadius
+        bottomRightRadius: control.bottomRightRadius
         OpacityMask {
             anchors.fill: parent
             source: blur

lib_source/qml/Qt5/RibbonBottomBar.qml

@@ -1,5 +1,6 @@
 import QtQuick 2.15
 import QtQuick.Layouts 1.11
+import QtQuick.Window 2.15
 import RibbonUI 1.0
 
 Item {
@@ -13,7 +14,8 @@ Item {
     property bool modernStyle: RibbonTheme.modernStyle
     property bool isDarkMode: RibbonTheme.isDarkMode
     property bool showVersion: true
-    property real bgOpacity: 0.8
+    property real bgOpacity: blurEnabled ? 0.8 : 1
+    property bool blurEnabled: typeof Window.window.viewItems !== "undefined"
 
     anchors{
         left: parent.left
@@ -21,6 +23,25 @@ Item {
         bottom: parent.bottom
     }
 
+    RibbonBlur{
+        id: blur
+        anchors.fill: parent
+        maskColor: modernStyle ? isDarkMode ? "#141414" : "#F5F5F5" : isDarkMode ? "#3D3D3D" : "#D9D9D9"
+        maskOpacity: bgOpacity
+        useSolidBg: true
+        clip: true
+        target: Window.window.viewItems
+        targetRect: Qt.rect(x, Window.window.viewItems.y + Window.window.viewItems.height, width, height)
+        bottomLeftRadius: Qt.platform.os === 'windows' ? RibbonUI.isWin11 ? 7 : 0 : 10
+        bottomRightRadius: bottomLeftRadius
+        Behavior on maskColor {
+            ColorAnimation {
+                duration: 60
+                easing.type: Easing.OutSine
+            }
+        }
+    }
+
     Rectangle{
         visible: !modernStyle
         color: "#3D3D3D"
@@ -84,4 +105,6 @@ Item {
             onClicked: Qt.openUrlExternally("https://github.com/mentalfl0w/RibbonUI")
         }
     }
+
+    Component.onCompleted: Window.window.bottomBar = root
 }

lib_source/qml/Qt5/RibbonPopup.qml

@@ -1,6 +1,7 @@
 import QtQuick 2.15
-import QtQuick.Controls 2.15
 import QtQuick.Layouts 1.11
+import QtQuick.Controls 2.15
+import QtQuick.Window 2.15
 import RibbonUI 1.0
 import QtGraphicalEffects 1.0
 

lib_source/qml/Qt5/RibbonTabBar.qml

@@ -1,6 +1,7 @@
 import QtQuick 2.15
 import QtQuick.Controls 2.15
 import QtQuick.Layouts 1.11
+import QtQuick.Window 2.15
 import QtGraphicalEffects 1.0
 import RibbonUI 1.0
 
@@ -20,10 +21,12 @@ Item{
     property bool modernStyle: RibbonTheme.modernStyle
     property bool isDarkMode: RibbonTheme.isDarkMode
     property string bgColor: isDarkMode ? "#2D2D2D" : "#F4F5F3"
-    property real bgOpacity: 0.8
+    property real bgOpacity: blurEnabled ? 0.8 : 1
     property string borderColor: isDarkMode ? "black" : "#CCCCCC"
     property bool showSettingsBtn: true
     property alias count: bar.count
+    property bool blurEnabled: typeof Window.window.viewItems !== "undefined"
+    property real modernMargin: modernStyle ? 10 : 0
 
     signal settingsBtnClicked()
 
@@ -56,21 +59,25 @@ Item{
             top: modernStyle ? bar_view.bottom : top_border.bottom
             left: parent.left
             right: parent.right
-            bottom:bottom_border.top
+            bottom: bottom_border.top
-            topMargin: modernStyle ? 10 :0
+            topMargin: modernMargin
-            leftMargin: modernStyle ? 10 :0
+            leftMargin: anchors.topMargin
-            rightMargin: modernStyle ? 10 :0
+            rightMargin: anchors.topMargin
-            bottomMargin: modernStyle ? 10 :0
+            bottomMargin: anchors.topMargin
         }
         clip: true
-        opacity:bgOpacity
 
-        Rectangle{
+        RibbonBlur{
+            id: blur
             anchors.fill: parent
-            color: bgColor
+            maskColor: bgColor
-            opacity:bgOpacity
+            maskOpacity: bgOpacity
+            useSolidBg: true
             radius: modernStyle ? 10 :0
-            Behavior on color {
+            clip: true
+            target: Window.window.viewItems
+            targetRect: mapToItem(Window.window.viewItems, blur.x, blur.y, width, height)
+            Behavior on maskColor {
                 ColorAnimation {
                     duration: 60
                     easing.type: Easing.OutSine
@@ -278,6 +285,7 @@ Item{
         onTriggered: folded = false
     }
 
+    Component.onCompleted: Window.window.tabBar = root
     //onModern_styleChanged: refresh()
 
     function addPage(content, is_highlight)

lib_source/qml/Qt5/RibbonView.qml

@@ -1,6 +1,7 @@
 import QtQuick 2.15
 import QtQuick.Controls 2.15
 import QtQuick.Layouts 1.11
+import QtQuick.Window 2.15
 import QtGraphicalEffects 1.0
 import RibbonUI 1.0
 
@@ -10,8 +11,6 @@ Item {
     property bool modernStyle: RibbonTheme.modernStyle
     property bool isDarkMode: RibbonTheme.isDarkMode
     property int spacing: 5
-    property int topPadding: 0
-    property int bottomPadding: 0
     property alias bgColor: bg.color
     property alias bgVisible: bg.visible
     z:-2
@@ -25,27 +24,21 @@ Item {
         visible: !modernStyle
     }
 
-    RibbonBlur{
+    Item{
-        id: top_mask
+        id: top_border
         anchors{
             left: parent.left
             right: parent.right
             top: parent.top
         }
-        height: Math.abs(topPadding)
+        height: Window.window.tabBar ? Math.abs(Window.window.tabBar.height - Window.window.tabBar.modernMargin) : 0
-        target: container
-        maskOpacity: 0
-        visible: topPadding
-        clip: true
-        targetRect: Qt.rect(x,y-topPadding,width,height)
-        useSolidBg: false
     }
 
     Item{
         id: clipper
         anchors.horizontalCenter: parent.horizontalCenter
-        anchors.top:top_mask.bottom
+        anchors.top: top_border.bottom
-        implicitHeight: parent.height - Math.abs(topPadding) - Math.abs(bottomPadding)
+        implicitHeight: parent.height - Math.abs(top_border.height) - Math.abs(bottom_border.height)
         implicitWidth: parent.width
         clip: true
         ColumnLayout{
@@ -59,19 +52,15 @@ Item {
         }
     }
 
-    RibbonBlur{
+    Item{
-        id: bottom_mask
+        id: bottom_border
         anchors{
             left: parent.left
             right: parent.right
             bottom: parent.bottom
         }
-        height: Math.abs(bottomPadding)
+        height: Window.window.tabBar ? Math.abs(Window.window.bottomBar.height) : 0
-        target: container
-        maskOpacity: 0
-        visible: bottomPadding
-        clip: true
-        targetRect: Qt.rect(x,y-topPadding,width,height)
-        useSolidBg: false
     }
+
+    Component.onCompleted: Window.window.viewItems = container
 }

lib_source/qml/Qt5/RibbonWindow.qml

@@ -19,6 +19,9 @@ Window {
     property bool comfirmedQuit: false
     property bool blurBehindWindow: true
     property int windowsTopFix: Qt.platform.os === 'windows' ? 1 : 0 // a trick to fix Qt or QWindowKit's bug
+    property var viewItems
+    property var tabBar
+    property var bottomBar
     readonly property int borderWidth: border_rect.border.width
     readonly property int borderRadius: border_rect.radius
     visible: false

lib_source/qml/Qt6/RibbonBlur.qml

@@ -5,6 +5,10 @@ import RibbonUI
 Item {
     id: control
     property int radius: 0
+    property int topLeftRadius: radius
+    property int bottomLeftRadius: radius
+    property int topRightRadius: radius
+    property int bottomRightRadius: radius
     property int blurRadius: 32
     property alias target: effect.sourceItem
     property rect targetRect : Qt.rect(control.x, control.y, control.width, control.height)
@@ -17,7 +21,6 @@ Item {
         id: effect
         anchors.fill: parent
         sourceRect: control.targetRect
-        sourceItem: control.target
         visible: false
     }
 
@@ -31,10 +34,14 @@ Item {
         visible: false
     }
 
-    Rectangle{
+    RibbonRectangle{
         anchors.fill: parent
         color: control.useSolidBg ? control.maskColor : 'transparent'
         radius: control.radius
+        topLeftRadius: control.topLeftRadius
+        bottomLeftRadius: control.bottomLeftRadius
+        topRightRadius: control.topRightRadius
+        bottomRightRadius: control.bottomRightRadius
         OpacityMask {
             anchors.fill: parent
             source: blur

lib_source/qml/Qt6/RibbonBottomBar.qml

@@ -1,5 +1,6 @@
 import QtQuick
 import QtQuick.Layouts
+import QtQuick.Window
 import RibbonUI
 
 Item {
@@ -13,7 +14,8 @@ Item {
     property bool modernStyle: RibbonTheme.modernStyle
     property bool isDarkMode: RibbonTheme.isDarkMode
     property bool showVersion: true
-    property real bgOpacity: 0.8
+    property real bgOpacity: blurEnabled ? 0.8 : 1
+    property bool blurEnabled: typeof Window.window.viewItems !== "undefined"
 
     anchors{
         left: parent.left
@@ -21,6 +23,25 @@ Item {
         bottom: parent.bottom
     }
 
+    RibbonBlur{
+        id: blur
+        anchors.fill: parent
+        maskColor: modernStyle ? isDarkMode ? "#141414" : "#F5F5F5" : isDarkMode ? "#3D3D3D" : "#D9D9D9"
+        maskOpacity: bgOpacity
+        useSolidBg: true
+        clip: true
+        target: Window.window.viewItems
+        targetRect: Qt.rect(x, Window.window.viewItems.y + Window.window.viewItems.height, width, height)
+        bottomLeftRadius: Qt.platform.os === 'windows' ? RibbonUI.isWin11 ? 7 : 0 : 10
+        bottomRightRadius: bottomLeftRadius
+        Behavior on maskColor {
+            ColorAnimation {
+                duration: 60
+                easing.type: Easing.OutSine
+            }
+        }
+    }
+
     Rectangle{
         visible: !modernStyle
         color: "#3D3D3D"
@@ -84,4 +105,6 @@ Item {
             onClicked: Qt.openUrlExternally("https://github.com/mentalfl0w/RibbonUI")
         }
     }
+
+    Component.onCompleted: Window.window.bottomBar = root
 }

lib_source/qml/Qt6/RibbonScrollIndicator.qml

@@ -1,5 +1,6 @@
 import QtQuick
 import QtQuick.Controls
+import QtQuick.Layouts
 import RibbonUI
 
 ScrollIndicator {

lib_source/qml/Qt6/RibbonTabBar.qml

@@ -1,6 +1,7 @@
 import QtQuick
 import QtQuick.Controls
 import QtQuick.Layouts
+import QtQuick.Window
 import Qt5Compat.GraphicalEffects
 import RibbonUI
 
@@ -20,10 +21,12 @@ Item{
     property bool modernStyle: RibbonTheme.modernStyle
     property bool isDarkMode: RibbonTheme.isDarkMode
     property string bgColor: isDarkMode ? "#2D2D2D" : "#F4F5F3"
-    property real bgOpacity: 0.8
+    property real bgOpacity: blurEnabled ? 0.8 : 1
     property string borderColor: isDarkMode ? "black" : "#CCCCCC"
     property bool showSettingsBtn: true
     property alias count: bar.count
+    property bool blurEnabled: typeof Window.window.viewItems !== "undefined"
+    property real modernMargin: modernStyle ? 10 : 0
 
     signal settingsBtnClicked()
 
@@ -56,21 +59,25 @@ Item{
             top: modernStyle ? bar_view.bottom : top_border.bottom
             left: parent.left
             right: parent.right
-            bottom:bottom_border.top
+            bottom: bottom_border.top
-            topMargin: modernStyle ? 10 :0
+            topMargin: modernMargin
-            leftMargin: modernStyle ? 10 :0
+            leftMargin: anchors.topMargin
-            rightMargin: modernStyle ? 10 :0
+            rightMargin: anchors.topMargin
-            bottomMargin: modernStyle ? 10 :0
+            bottomMargin: anchors.topMargin
         }
         clip: true
-        opacity:bgOpacity
 
-        Rectangle{
+        RibbonBlur{
+            id: blur
             anchors.fill: parent
-            color: bgColor
+            maskColor: bgColor
-            opacity:bgOpacity
+            maskOpacity: bgOpacity
+            useSolidBg: true
             radius: modernStyle ? 10 :0
-            Behavior on color {
+            clip: true
+            target: Window.window.viewItems
+            targetRect: mapToItem(Window.window.viewItems, blur.x, blur.y, width, height)
+            Behavior on maskColor {
                 ColorAnimation {
                     duration: 60
                     easing.type: Easing.OutSine
@@ -278,6 +285,8 @@ Item{
         onTriggered: folded = false
     }
 
+    Component.onCompleted: Window.window.tabBar = root
+
     //onModern_styleChanged: refresh()
 
     function addPage(content, is_highlight)

lib_source/qml/Qt6/RibbonView.qml

@@ -1,6 +1,7 @@
 import QtQuick
 import QtQuick.Controls
 import QtQuick.Layouts
+import QtQuick.Window
 import Qt5Compat.GraphicalEffects
 import RibbonUI
 
@@ -10,8 +11,6 @@ Item {
     property bool modernStyle: RibbonTheme.modernStyle
     property bool isDarkMode: RibbonTheme.isDarkMode
     property int spacing: 5
-    property int topPadding: 0
-    property int bottomPadding: 0
     property alias bgColor: bg.color
     property alias bgVisible: bg.visible
     z:-2
@@ -25,27 +24,21 @@ Item {
         visible: !modernStyle
     }
 
-    RibbonBlur{
+    Item{
-        id: top_mask
+        id: top_border
         anchors{
             left: parent.left
             right: parent.right
             top: parent.top
         }
-        height: Math.abs(topPadding)
+        height: Window.window.tabBar ? Math.abs(Window.window.tabBar.height - Window.window.tabBar.modernMargin) : 0
-        target: container
-        maskOpacity: 0
-        visible: topPadding
-        clip: true
-        targetRect: Qt.rect(x,y-topPadding,width,height)
-        useSolidBg: false
     }
 
     Item{
         id: clipper
         anchors.horizontalCenter: parent.horizontalCenter
-        anchors.top:top_mask.bottom
+        anchors.top: top_border.bottom
-        implicitHeight: parent.height - Math.abs(topPadding) - Math.abs(bottomPadding)
+        implicitHeight: parent.height - Math.abs(top_border.height) - Math.abs(bottom_border.height)
         implicitWidth: parent.width
         clip: true
         ColumnLayout{
@@ -59,19 +52,15 @@ Item {
         }
     }
 
-    RibbonBlur{
+    Item{
-        id: bottom_mask
+        id: bottom_border
         anchors{
             left: parent.left
             right: parent.right
             bottom: parent.bottom
         }
-        height: Math.abs(bottomPadding)
+        height: Window.window.tabBar ? Math.abs(Window.window.bottomBar.height) : 0
-        target: container
-        maskOpacity: 0
-        visible: bottomPadding
-        clip: true
-        targetRect: Qt.rect(x,y-topPadding,width,height)
-        useSolidBg: false
     }
+
+    Component.onCompleted: Window.window.viewItems = container
 }

lib_source/qml/Qt6/RibbonWindow.qml

@@ -1,5 +1,6 @@
 import QtQuick
 import RibbonUI
+import QtQuick.Window
 import QWindowKit
 
 Window {
@@ -18,6 +19,9 @@ Window {
     property bool comfirmedQuit: false
     property bool blurBehindWindow: true
     property int windowsTopFix: Qt.platform.os === 'windows' ? 1 : 0 // a trick to fix Qt or QWindowKit's bug
+    property var viewItems
+    property var tabBar
+    property var bottomBar
     readonly property int borderWidth: border_rect.border.width
     readonly property int borderRadius: border_rect.radius
     visible: false