RibbonMessageGroup: Animation improved and blank view bug fixed.

example/qml/Qt5/example.qml

@@ -16,8 +16,9 @@ RibbonWindow {
         id: msg_bar
         implicitWidth: windowItems.width
         x: windowItems.x
-        y: titleBar.height + tab_bar.y + tab_bar.height - tab_bar.modernMargin + (RibbonTheme.modernStyle ? 5 : 0)
+        y: titleBar.height + tab_bar.y + tab_bar.height - tab_bar.modernMargin + msg_bar.topMargin
         target: windowItems
+        targetRect: Qt.rect(tab_bar.x,y,width,height)
         Component.onCompleted: {
             messageModel.append([{
                     type: RibbonMessageBar.Info,
@@ -59,7 +60,6 @@ RibbonWindow {
                     externalURL: "https://github.com/mentalfl0w/RibbonUI",
                     externalURLLabel: "Visit our website."
                 }])
-            messageBar.showMessage(RibbonMessageBar.Info, "test")
         }
     }
 
@@ -157,7 +157,6 @@ RibbonWindow {
         pageWidth: (page_slider.value / 100.0) * width
         spacing: 0
         isMainView: true
-        topBorderFix: msg_bar.folded ? msg_bar.barHeight : 0
         ColumnLayout{
             Layout.alignment: Qt.AlignCenter
             Layout.topMargin: 30

example/qml/Qt6/example.qml

@@ -16,8 +16,9 @@ RibbonWindow {
         id: msg_bar
         implicitWidth: windowItems.width
         x: windowItems.x
-        y: titleBar.height + tab_bar.y + tab_bar.height - tab_bar.modernMargin + (RibbonTheme.modernStyle ? 5 : 0)
+        y: titleBar.height + tab_bar.y + tab_bar.height - tab_bar.modernMargin + msg_bar.topMargin
         target: windowItems
+        targetRect: Qt.rect(tab_bar.x,y,width,height)
         Component.onCompleted: {
             messageModel.append([{
                     type: RibbonMessageBar.Info,
@@ -59,7 +60,6 @@ RibbonWindow {
                     externalURL: "https://github.com/mentalfl0w/RibbonUI",
                     externalURLLabel: "Visit our website."
                 }])
-            messageBar.showMessage(RibbonMessageBar.Info, "test")
         }
     }
 
@@ -157,7 +157,6 @@ RibbonWindow {
         pageWidth: (page_slider.value / 100.0) * width
         spacing: 0
         isMainView: true
-        topBorderFix: msg_bar.folded ? msg_bar.barHeight : 0
         ColumnLayout{
             Layout.alignment: Qt.AlignCenter
             Layout.topMargin: 30

lib_source/qml/Qt5/RibbonBlur.qml

@@ -19,7 +19,7 @@ RibbonRectangle {
         id: effect
         anchors.fill: parent
         sourceRect: control.targetRect
-        visible: !enableEffect
+        visible: false
     }
 
     GaussianBlur{

lib_source/qml/Qt5/RibbonMessageBarGroup.qml

@@ -7,9 +7,9 @@ RibbonBlur {
     id: control
     parent: Overlay.overlay
     implicitWidth: parent.width
-    useSolidBg: true
     implicitHeight: 30
-    maskColor: folded ? "transparent" : RibbonTheme.isDarkMode ? Qt.rgba(0,0,0,1) : Qt.rgba(1,1,1,1)
+    maskColor: folded && !handler.visible ? "transparent" : RibbonTheme.isDarkMode ? Qt.rgba(0,0,0,1) : Qt.rgba(1,1,1,1)
+    maskOpacity: 0
     bottomLeftRadius: folded ? 0 : 5
     bottomRightRadius: bottomLeftRadius
     enableEffect: handler.visible || !folded
@@ -17,10 +17,11 @@ RibbonBlur {
     property int animationTime: 400
     property real barHeight: implicitHeight - handler.height
     property alias messageModel: messageModel
+    property real topMargin: RibbonTheme.modernStyle ? 5 : 0
 
     Behavior on implicitHeight {
         NumberAnimation {
-            duration: control.animationTime / 2
+            duration: control.animationTime
             easing.type: Easing.OutSine
         }
     }
@@ -30,13 +31,13 @@ RibbonBlur {
         onCountChanged: {
             message_list.currentIndex = count ? count - 1 : 0
             if(count === 0)
-                folded_btn.checked = true
+                clearMessages()
         }
     }
 
     Timer{
         id: auto_scroll_btn_timer
-        interval: control.animationTime
+        interval: control.animationTime * 2
         repeat: false
         onTriggered: {
             message_list.positionViewAtIndex(message_list.currentIndex, ListView.Center)
@@ -119,7 +120,7 @@ RibbonBlur {
             NumberAnimation {
                 properties: "y"
                 from: message_list.height
-                duration: control.animationTime / 2
+                duration: control.animationTime
             }
         }
         remove: Transition {
@@ -127,7 +128,7 @@ RibbonBlur {
                 property: "opacity"
                 from: 1
                 to: 0
-                duration: control.animationTime / 2
+                duration: control.animationTime
             }
         }
         ScrollBar.vertical: RibbonScrollBar {
@@ -140,7 +141,7 @@ RibbonBlur {
         }
         Behavior on height {
             NumberAnimation {
-                duration: control.animationTime / 2
+                duration: control.animationTime
                 easing.type: Easing.OutSine
             }
         }
@@ -154,17 +155,13 @@ RibbonBlur {
         id: handler
         x: message_list.x + (message_list.width - width) / 2
         y: message_list.y + message_list.height * (folded ? 1 : 0)
-        implicitHeight: 20
+        implicitHeight: folded ? 10 : 20
         implicitWidth: parent.width
-        topLeftRadius: folded ? 0 : 10
-        topRightRadius: topLeftRadius
-        bottomLeftRadius: folded ? 10 : 0
-        bottomRightRadius: bottomLeftRadius
         visible: hover.hovered && messageModel.count
         color: RibbonTheme.isDarkMode ? Qt.rgba(0,0,0,0.5) : Qt.rgba(1,1,1,0.5)
         Behavior on color {
             ColorAnimation {
-                duration: control.animationTime / 2
+                duration: control.animationTime
                 easing.type: Easing.OutSine
             }
         }
@@ -176,6 +173,7 @@ RibbonBlur {
                 showBg: false
                 showHoveredBg: false
                 iconSource: RibbonIcons.DismissCircle
+                ribbonIcon.iconSize: handler.implicitHeight - 2
                 tipText: qsTr("Clear All")
                 onClicked: clearMessages()
                 visible: !folded
@@ -186,6 +184,7 @@ RibbonBlur {
                 checkable: true
                 showBg: false
                 showHoveredBg: false
+                ribbonIcon.iconSize: handler.implicitHeight - 2
                 iconSource: RibbonIcons.TriangleDown
                 rotation: checked ? 0 : 180
                 checked: true
@@ -241,6 +240,7 @@ RibbonBlur {
     }
 
     function clearMessages(){
+        folded_btn.checked = true
         messageModel.clear()
         implicitHeight = 0
         barHeight = 0

lib_source/qml/Qt5/RibbonView.qml

@@ -34,7 +34,16 @@ Item {
             right: parent.right
             top: parent.top
         }
-        height: (isMainView ? Window.window ? Window.window.tabBar ? Math.abs(Window.window.tabBar.height - Window.window.tabBar.modernMargin) : 0 : 0 : 0) + topBorderFix
+        height: {
+            var w = topBorderFix
+            if(isMainView && Window.window){
+                if(Window.window.tabBar)
+                    w += Math.abs(Window.window.tabBar.height - Window.window.tabBar.modernMargin)
+                if(Window.window.messageBar)
+                    w += (Window.window.messageBar.folded ? Window.window.messageBar.barHeight + Window.window.messageBar.topMargin : 0)
+            }
+            return w
+        }
     }
 
     Item{
@@ -62,7 +71,14 @@ Item {
             right: parent.right
             bottom: parent.bottom
         }
-        height: (isMainView ? Window.window ? Window.window.tabBar ? Math.abs(Window.window.bottomBar.height) : 0 : 0 : 0) + bottomBorderFix
+        height: {
+            var w = bottomBorderFix
+            if(isMainView && Window.window){
+                if(Window.window.bottomBar)
+                    w += Math.abs(Window.window.bottomBar.height)
+            }
+            return w
+        }
     }
 
     Component.onCompleted: {

lib_source/qml/Qt6/RibbonBlur.qml

@@ -19,7 +19,7 @@ RibbonRectangle {
         id: effect
         anchors.fill: parent
         sourceRect: control.targetRect
-        visible: !enableEffect
+        visible: false
     }
 
     GaussianBlur{

lib_source/qml/Qt6/RibbonMessageBarGroup.qml

@@ -7,9 +7,9 @@ RibbonBlur {
     id: control
     parent: Overlay.overlay
     implicitWidth: parent.width
-    useSolidBg: true
     implicitHeight: 30
-    maskColor: folded ? "transparent" : RibbonTheme.isDarkMode ? Qt.rgba(0,0,0,1) : Qt.rgba(1,1,1,1)
+    maskColor: folded && !handler.visible ? "transparent" : RibbonTheme.isDarkMode ? Qt.rgba(0,0,0,1) : Qt.rgba(1,1,1,1)
+    maskOpacity: 0
     bottomLeftRadius: folded ? 0 : 5
     bottomRightRadius: bottomLeftRadius
     enableEffect: handler.visible || !folded
@@ -17,10 +17,11 @@ RibbonBlur {
     property int animationTime: 400
     property real barHeight: implicitHeight - handler.height
     property alias messageModel: messageModel
+    property real topMargin: RibbonTheme.modernStyle ? 5 : 0
 
     Behavior on implicitHeight {
         NumberAnimation {
-            duration: control.animationTime / 2
+            duration: control.animationTime
             easing.type: Easing.OutSine
         }
     }
@@ -30,13 +31,13 @@ RibbonBlur {
         onCountChanged: {
             message_list.currentIndex = count ? count - 1 : 0
             if(count === 0)
-                folded_btn.checked = true
+                clearMessages()
         }
     }
 
     Timer{
         id: auto_scroll_btn_timer
-        interval: control.animationTime
+        interval: control.animationTime * 2
         repeat: false
         onTriggered: {
             message_list.positionViewAtIndex(message_list.currentIndex, ListView.Center)
@@ -119,7 +120,7 @@ RibbonBlur {
             NumberAnimation {
                 properties: "y"
                 from: message_list.height
-                duration: control.animationTime / 2
+                duration: control.animationTime
             }
         }
         remove: Transition {
@@ -127,7 +128,7 @@ RibbonBlur {
                 property: "opacity"
                 from: 1
                 to: 0
-                duration: control.animationTime / 2
+                duration: control.animationTime
             }
         }
         ScrollBar.vertical: RibbonScrollBar {
@@ -140,7 +141,7 @@ RibbonBlur {
         }
         Behavior on height {
             NumberAnimation {
-                duration: control.animationTime / 2
+                duration: control.animationTime
                 easing.type: Easing.OutSine
             }
         }
@@ -154,17 +155,13 @@ RibbonBlur {
         id: handler
         x: message_list.x + (message_list.width - width) / 2
         y: message_list.y + message_list.height * (folded ? 1 : 0)
-        implicitHeight: 20
+        implicitHeight: folded ? 10 : 20
         implicitWidth: parent.width
-        topLeftRadius: folded ? 0 : 10
-        topRightRadius: topLeftRadius
-        bottomLeftRadius: folded ? 10 : 0
-        bottomRightRadius: bottomLeftRadius
         visible: hover.hovered && messageModel.count
         color: RibbonTheme.isDarkMode ? Qt.rgba(0,0,0,0.5) : Qt.rgba(1,1,1,0.5)
         Behavior on color {
             ColorAnimation {
-                duration: control.animationTime / 2
+                duration: control.animationTime
                 easing.type: Easing.OutSine
             }
         }
@@ -176,6 +173,7 @@ RibbonBlur {
                 showBg: false
                 showHoveredBg: false
                 iconSource: RibbonIcons.DismissCircle
+                ribbonIcon.iconSize: handler.implicitHeight - 2
                 tipText: qsTr("Clear All")
                 onClicked: clearMessages()
                 visible: !folded
@@ -186,6 +184,7 @@ RibbonBlur {
                 checkable: true
                 showBg: false
                 showHoveredBg: false
+                ribbonIcon.iconSize: handler.implicitHeight - 2
                 iconSource: RibbonIcons.TriangleDown
                 rotation: checked ? 0 : 180
                 checked: true
@@ -241,6 +240,7 @@ RibbonBlur {
     }
 
     function clearMessages(){
+        folded_btn.checked = true
         messageModel.clear()
         implicitHeight = 0
         barHeight = 0

lib_source/qml/Qt6/RibbonView.qml

@@ -34,7 +34,16 @@ Item {
             right: parent.right
             top: parent.top
         }
-        height: (isMainView ? Window.window ? Window.window.tabBar ? Math.abs(Window.window.tabBar.height - Window.window.tabBar.modernMargin) : 0 : 0 : 0) + topBorderFix
+        height: {
+            var w = topBorderFix
+            if(isMainView && Window.window){
+                if(Window.window.tabBar)
+                    w += Math.abs(Window.window.tabBar.height - Window.window.tabBar.modernMargin)
+                if(Window.window.messageBar)
+                    w += (Window.window.messageBar.folded ? Window.window.messageBar.barHeight + Window.window.messageBar.topMargin : 0)
+            }
+            return w
+        }
     }
 
     Item{
@@ -62,7 +71,14 @@ Item {
             right: parent.right
             bottom: parent.bottom
         }
-        height: (isMainView ? Window.window ? Window.window.tabBar ? Math.abs(Window.window.bottomBar.height) : 0 : 0 : 0) + bottomBorderFix
+        height: {
+            var w = bottomBorderFix
+            if(isMainView && Window.window){
+                if(Window.window.bottomBar)
+                    w += Math.abs(Window.window.bottomBar.height)
+            }
+            return w
+        }
     }
 
     Component.onCompleted: {