CMakeLists.txt

@@ -1,6 +1,6 @@
 cmake_minimum_required(VERSION 3.21)
 
-project(RibbonUI_Project VERSION 1.1.1 LANGUAGES CXX)
+project(RibbonUI_Project VERSION 1.1.0 LANGUAGES CXX)
 
 # Find Qt Package
 find_package(QT NAMES Qt6 Qt5 REQUIRED COMPONENTS Core)

lib_source/qml/Qt5/RibbonMessageBarGroup.qml

@@ -9,19 +9,17 @@ RibbonBlur {
     parent: Overlay.overlay
     implicitWidth: parent.width
     implicitHeight: folded ? barHeight : Window.window.viewItems.height
-    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
-    leftPadding: Window.window.tabBar && folded ? Window.window.tabBar.modernMargin : 0
+    enableEffect: handler.visible || !folded
-    rightPadding: leftPadding
-    enableEffect: !folded
     readonly property alias folded: folded_btn.checked
     property int animationTime: 400
-    readonly property real currentMessageHeight: message_list.currentItem ? message_list.currentItem.height : 0
+    property real currentMessageHeight: message_list.currentItem ? message_list.currentItem.height : 0
-    readonly property real barHeight: folded ? currentMessageHeight + handler.height : 0
+    property real barHeight: folded ? currentMessageHeight + handler.height : 0
     property alias messageModel: messageModel
-    property real topMargin: RibbonTheme.modernStyle && !folded ? 10 : 0
+    property real topMargin: RibbonTheme.modernStyle ? 5 : 0
 
     Behavior on implicitHeight {
         NumberAnimation {
@@ -48,104 +46,98 @@ RibbonBlur {
         }
     }
 
-    RibbonRectangle{
+    ListView{
-        id: message_list_rect
+        id: message_list
+        cacheBuffer: Math.abs(message_list.height * 2)
+        interactive: !folded
+        clip: true
         anchors{
             top: parent.top
             left: parent.left
             right: parent.right
         }
-        color: folded ? RibbonTheme.isDarkMode ? "black" : "white" : "transparent"
         height: control.implicitHeight - (folded ? handler.height : 0)
-        bottomLeftRadius: RibbonTheme.modernStyle && folded ? 10 : 0
+        model: messageModel
-        bottomRightRadius: bottomLeftRadius
+        delegate: Item{
-        ListView{
+            id: item
-            id: message_list
+            implicitHeight: bar.contentHeight + (control.folded ? 0 : 10)
-            cacheBuffer: Math.abs(message_list.height * 2)
+            implicitWidth: control.width
-            interactive: !folded
+            RibbonMessageBar{
-            clip: true
+                id: bar
-            anchors.fill: parent
+                anchors.centerIn: parent
-            model: messageModel
+                property bool isCurrentItem: item === message_list.currentItem
-            delegate: Item{
-                id: item
-                implicitHeight: bar.contentHeight + (control.folded ? 0 : 10)
-                implicitWidth: message_list.width
-                RibbonMessageBar{
-                    id: bar
-                    anchors.centerIn: parent
-                    property bool isCurrentItem: item === message_list.currentItem
 
-                    text: model.text
+                text: model.text
-                    externalURL: model.externalURL ? model.externalURL : ""
+                externalURL: model.externalURL ? model.externalURL : ""
-                    dismissAction: ()=>messageModel.remove(index)
+                dismissAction: ()=>messageModel.remove(index)
-                    Component.onCompleted: {
+                Component.onCompleted: {
-                        if(model.disableMultiline)
+                    if(model.disableMultiline)
-                            isMultiline = !model.disableMultiline
+                        isMultiline = !model.disableMultiline
-                        if(model.type)
+                    if(model.type)
-                            type = model.type
+                        type = model.type
-                        if(model.rounded)
+                    if(model.rounded)
-                            rounded = model.rounded
+                        rounded = model.rounded
-                        if(model.externalURLLabel)
+                    if(model.externalURLLabel)
-                            externalURLLabel = model.externalURLLabel
+                        externalURLLabel = model.externalURLLabel
-                        if(model.dismissLabel)
+                    if(model.dismissLabel)
-                            dismissLabel = model.dismissLabel
+                        dismissLabel = model.dismissLabel
-                        if(model.overflowLabel)
+                    if(model.overflowLabel)
-                            overflowLabel = model.overflowLabel
+                        overflowLabel = model.overflowLabel
-                        if(model.actionALabel){
+                    if(model.actionALabel){
-                            actionALabel = model.actionALabel
+                        actionALabel = model.actionALabel
-                            showActionA = true
+                        showActionA = true
-                            if(model.actionA){
+                        if(model.actionA){
-                                actionA = model.actionA
+                            actionA = model.actionA
-                            }else{
+                        }else{
-                                actionA = ()=>console.log(index+qsTr(`'s ${model.actionALabel} Clicked`))
+                            actionA = ()=>console.log(index+qsTr(`'s ${model.actionALabel} Clicked`))
-                            }
                         }
-                        if(model.actionBLabel){
+                    }
-                            actionBLabel = model.actionBLabel
+                    if(model.actionBLabel){
-                            showActionB = true
+                        actionBLabel = model.actionBLabel
-                            if(model.actionB){
+                        showActionB = true
-                                actionB = model.actionB
+                        if(model.actionB){
-                            }else{
+                            actionB = model.actionB
-                                actionB = ()=>console.log(index+qsTr(`'s ${model.actionBLabel} Clicked`))
+                        }else{
-                            }
+                            actionB = ()=>console.log(index+qsTr(`'s ${model.actionBLabel} Clicked`))
                         }
                     }
                 }
             }
+        }
 
-            verticalLayoutDirection: ListView.BottomToTop
+        verticalLayoutDirection: ListView.BottomToTop
 
-            add: Transition {
+        add: Transition {
-                NumberAnimation {
+            NumberAnimation {
-                    properties: "y"
+                properties: "y"
-                    from: -message_list.height
+                from: -message_list.height
-                    duration: control.animationTime
+                duration: control.animationTime
-                }
             }
-            remove: Transition {
+        }
-                NumberAnimation {
+        remove: Transition {
-                    property: "opacity"
+            NumberAnimation {
-                    from: 1
+                property: "opacity"
-                    to: 0
+                from: 1
-                    duration: control.animationTime
+                to: 0
-                }
+                duration: control.animationTime
             }
-            ScrollBar.vertical: RibbonScrollBar {
+        }
-                anchors.right: message_list.right
+        ScrollBar.vertical: RibbonScrollBar {
-                anchors.rightMargin: 2
+            anchors.right: message_list.right
-                interactive: !folded
+            anchors.rightMargin: 2
-            }
+            interactive: !folded
-            onCurrentItemChanged: {
+        }
-                auto_scroll_btn_timer.restart()
+        onCurrentItemChanged: {
-            }
+            auto_scroll_btn_timer.restart()
-            Behavior on height {
+        }
-                NumberAnimation {
+        Behavior on height {
-                    duration: control.animationTime
+            NumberAnimation {
-                    easing.type: Easing.OutSine
+                duration: control.animationTime
-                }
+                easing.type: Easing.OutSine
             }
         }
     }
+
     HoverHandler{
         id: hover
     }
@@ -155,11 +147,9 @@ RibbonBlur {
         x: message_list.x + (message_list.width - width) / 2
         y: message_list.y + message_list.height * (folded ? 1 : 0)
         implicitHeight: folded ? 10 : 20
-        implicitWidth: folded ? 100 : control.width
+        implicitWidth: parent.width
         visible: hover.hovered && messageModel.count > 1
-        bottomLeftRadius: folded ? 10 : 0
+        color: RibbonTheme.isDarkMode ? Qt.rgba(0,0,0,0.5) : Qt.rgba(1,1,1,0.5)
-        bottomRightRadius: bottomLeftRadius
-        color: RibbonTheme.isDarkMode ? Qt.rgba(0,0,0,1) : Qt.rgba(1,1,1,1)
         Behavior on color {
             ColorAnimation {
                 duration: control.animationTime

lib_source/qml/Qt5/RibbonRectangle.qml

@@ -11,10 +11,6 @@ Item {
     property int topRightRadius: radius
     property int bottomLeftRadius: radius
     property int bottomRightRadius: radius
-    property int topPadding: 0
-    property int leftPadding: 0
-    property int rightPadding: 0
-    property int bottomPadding: 0
     property real borderWidth: 0
     property string borderColor: "transparent"
     default property alias contentItem: container.data
@@ -69,13 +65,7 @@ Item {
 
     Item{
         id: container
-        anchors{
+        anchors.fill: parent
-            fill: parent
-            topMargin: control.topPadding
-            bottomMargin: control.bottomPadding
-            leftMargin: control.leftPadding
-            rightMargin: control.rightPadding
-        }
         clip: true
         layer.enabled: true
         layer.effect: OpacityMask {

lib_source/qml/Qt5/RibbonTabBar.qml

@@ -13,6 +13,7 @@ Item{
         left: parent.left
         right:parent.right
     }
+    clip: true
     property bool folded: false
     property int lastIndex
     default property alias content: stack.contentData
@@ -241,7 +242,6 @@ Item{
     Rectangle {
         id: bottom_border
         anchors.top: stack.bottom
-        anchors.topMargin: modernStyle && Window.window.messageBar && Window.window.messageBar.folded ? Window.window.messageBar.currentMessageHeight : 0
         width: parent.width
         height: 1
         color: modernStyle ? "transparent" : bgColor

lib_source/qml/Qt6/RibbonMessageBarGroup.qml

@@ -9,19 +9,17 @@ RibbonBlur {
     parent: Overlay.overlay
     implicitWidth: parent.width
     implicitHeight: folded ? barHeight : Window.window.viewItems.height
-    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
-    leftPadding: Window.window.tabBar && folded ? Window.window.tabBar.modernMargin : 0
+    enableEffect: handler.visible || !folded
-    rightPadding: leftPadding
-    enableEffect: !folded
     readonly property alias folded: folded_btn.checked
     property int animationTime: 400
-    readonly property real currentMessageHeight: message_list.currentItem ? message_list.currentItem.height : 0
+    property real currentMessageHeight: message_list.currentItem ? message_list.currentItem.height : 0
-    readonly property real barHeight: folded ? currentMessageHeight + handler.height : 0
+    property real barHeight: folded ? currentMessageHeight + handler.height : 0
     property alias messageModel: messageModel
-    property real topMargin: RibbonTheme.modernStyle && !folded ? 10 : 0
+    property real topMargin: RibbonTheme.modernStyle ? 5 : 0
 
     Behavior on implicitHeight {
         NumberAnimation {
@@ -48,104 +46,98 @@ RibbonBlur {
         }
     }
 
-    RibbonRectangle{
+    ListView{
-        id: message_list_rect
+        id: message_list
+        cacheBuffer: Math.abs(message_list.height * 2)
+        interactive: !folded
+        clip: true
         anchors{
             top: parent.top
             left: parent.left
             right: parent.right
         }
-        color: folded ? RibbonTheme.isDarkMode ? "black" : "white" : "transparent"
         height: control.implicitHeight - (folded ? handler.height : 0)
-        bottomLeftRadius: RibbonTheme.modernStyle && folded ? 10 : 0
+        model: messageModel
-        bottomRightRadius: bottomLeftRadius
+        delegate: Item{
-        ListView{
+            id: item
-            id: message_list
+            implicitHeight: bar.contentHeight + (control.folded ? 0 : 10)
-            cacheBuffer: Math.abs(message_list.height * 2)
+            implicitWidth: control.width
-            interactive: !folded
+            RibbonMessageBar{
-            clip: true
+                id: bar
-            anchors.fill: parent
+                anchors.centerIn: parent
-            model: messageModel
+                property bool isCurrentItem: item === message_list.currentItem
-            delegate: Item{
-                id: item
-                implicitHeight: bar.contentHeight + (control.folded ? 0 : 10)
-                implicitWidth: message_list.width
-                RibbonMessageBar{
-                    id: bar
-                    anchors.centerIn: parent
-                    property bool isCurrentItem: item === message_list.currentItem
 
-                    text: model.text
+                text: model.text
-                    externalURL: model.externalURL ? model.externalURL : ""
+                externalURL: model.externalURL ? model.externalURL : ""
-                    dismissAction: ()=>messageModel.remove(index)
+                dismissAction: ()=>messageModel.remove(index)
-                    Component.onCompleted: {
+                Component.onCompleted: {
-                        if(model.disableMultiline)
+                    if(model.disableMultiline)
-                            isMultiline = !model.disableMultiline
+                        isMultiline = !model.disableMultiline
-                        if(model.type)
+                    if(model.type)
-                            type = model.type
+                        type = model.type
-                        if(model.rounded)
+                    if(model.rounded)
-                            rounded = model.rounded
+                        rounded = model.rounded
-                        if(model.externalURLLabel)
+                    if(model.externalURLLabel)
-                            externalURLLabel = model.externalURLLabel
+                        externalURLLabel = model.externalURLLabel
-                        if(model.dismissLabel)
+                    if(model.dismissLabel)
-                            dismissLabel = model.dismissLabel
+                        dismissLabel = model.dismissLabel
-                        if(model.overflowLabel)
+                    if(model.overflowLabel)
-                            overflowLabel = model.overflowLabel
+                        overflowLabel = model.overflowLabel
-                        if(model.actionALabel){
+                    if(model.actionALabel){
-                            actionALabel = model.actionALabel
+                        actionALabel = model.actionALabel
-                            showActionA = true
+                        showActionA = true
-                            if(model.actionA){
+                        if(model.actionA){
-                                actionA = model.actionA
+                            actionA = model.actionA
-                            }else{
+                        }else{
-                                actionA = ()=>console.log(index+qsTr(`'s ${model.actionALabel} Clicked`))
+                            actionA = ()=>console.log(index+qsTr(`'s ${model.actionALabel} Clicked`))
-                            }
                         }
-                        if(model.actionBLabel){
+                    }
-                            actionBLabel = model.actionBLabel
+                    if(model.actionBLabel){
-                            showActionB = true
+                        actionBLabel = model.actionBLabel
-                            if(model.actionB){
+                        showActionB = true
-                                actionB = model.actionB
+                        if(model.actionB){
-                            }else{
+                            actionB = model.actionB
-                                actionB = ()=>console.log(index+qsTr(`'s ${model.actionBLabel} Clicked`))
+                        }else{
-                            }
+                            actionB = ()=>console.log(index+qsTr(`'s ${model.actionBLabel} Clicked`))
                         }
                     }
                 }
             }
+        }
 
-            verticalLayoutDirection: ListView.BottomToTop
+        verticalLayoutDirection: ListView.BottomToTop
 
-            add: Transition {
+        add: Transition {
-                NumberAnimation {
+            NumberAnimation {
-                    properties: "y"
+                properties: "y"
-                    from: -message_list.height
+                from: -message_list.height
-                    duration: control.animationTime
+                duration: control.animationTime
-                }
             }
-            remove: Transition {
+        }
-                NumberAnimation {
+        remove: Transition {
-                    property: "opacity"
+            NumberAnimation {
-                    from: 1
+                property: "opacity"
-                    to: 0
+                from: 1
-                    duration: control.animationTime
+                to: 0
-                }
+                duration: control.animationTime
             }
-            ScrollBar.vertical: RibbonScrollBar {
+        }
-                anchors.right: message_list.right
+        ScrollBar.vertical: RibbonScrollBar {
-                anchors.rightMargin: 2
+            anchors.right: message_list.right
-                interactive: !folded
+            anchors.rightMargin: 2
-            }
+            interactive: !folded
-            onCurrentItemChanged: {
+        }
-                auto_scroll_btn_timer.restart()
+        onCurrentItemChanged: {
-            }
+            auto_scroll_btn_timer.restart()
-            Behavior on height {
+        }
-                NumberAnimation {
+        Behavior on height {
-                    duration: control.animationTime
+            NumberAnimation {
-                    easing.type: Easing.OutSine
+                duration: control.animationTime
-                }
+                easing.type: Easing.OutSine
             }
         }
     }
+
     HoverHandler{
         id: hover
     }
@@ -155,11 +147,9 @@ RibbonBlur {
         x: message_list.x + (message_list.width - width) / 2
         y: message_list.y + message_list.height * (folded ? 1 : 0)
         implicitHeight: folded ? 10 : 20
-        implicitWidth: folded ? 100 : control.width
+        implicitWidth: parent.width
         visible: hover.hovered && messageModel.count > 1
-        bottomLeftRadius: folded ? 10 : 0
+        color: RibbonTheme.isDarkMode ? Qt.rgba(0,0,0,0.5) : Qt.rgba(1,1,1,0.5)
-        bottomRightRadius: bottomLeftRadius
-        color: RibbonTheme.isDarkMode ? Qt.rgba(0,0,0,1) : Qt.rgba(1,1,1,1)
         Behavior on color {
             ColorAnimation {
                 duration: control.animationTime

lib_source/qml/Qt6/RibbonRectangle.qml

@@ -11,10 +11,6 @@ Item {
     property int topRightRadius: radius
     property int bottomLeftRadius: radius
     property int bottomRightRadius: radius
-    property int topPadding: 0
-    property int leftPadding: 0
-    property int rightPadding: 0
-    property int bottomPadding: 0
     property real borderWidth: 0
     property string borderColor: "transparent"
     default property alias contentItem: container.data
@@ -69,13 +65,7 @@ Item {
 
     Item{
         id: container
-        anchors{
+        anchors.fill: parent
-            fill: parent
-            topMargin: control.topPadding
-            bottomMargin: control.bottomPadding
-            leftMargin: control.leftPadding
-            rightMargin: control.rightPadding
-        }
         clip: true
         layer.enabled: true
         layer.effect: OpacityMask {

lib_source/qml/Qt6/RibbonTabBar.qml

@@ -13,6 +13,7 @@ Item{
         left: parent.left
         right:parent.right
     }
+    clip: true
     property bool folded: false
     property int lastIndex
     default property alias content: stack.contentData
@@ -241,7 +242,6 @@ Item{
     Rectangle {
         id: bottom_border
         anchors.top: stack.bottom
-        anchors.topMargin: modernStyle && Window.window.messageBar && Window.window.messageBar.folded ? Window.window.messageBar.currentMessageHeight : 0
         width: parent.width
         height: 1
         color: modernStyle ? "transparent" : bgColor