RibbonTitleBar: Add minimumWidth property.

example/CMakeLists.txt

@@ -85,7 +85,7 @@ qt_add_qml_module(${PROJECT_NAME}
     URI ${PROJECT_NAME}
     VERSION ${PROJECT_VERSION_MAJOR}.${PROJECT_VERSION_MINOR}
     RESOURCE_PREFIX "/qt/qml/"
-    QML_FILES example.qml components/RibbonMessageListViewExample.qml
+    QML_FILES example.qml about.qml components/RibbonMessageListViewExample.qml
     RESOURCES resources/imgs/heart.png resources/imgs/search.png
 )
 

example/about.qml

@@ -0,0 +1,46 @@
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Controls
+import RibbonUI
+
+RibbonWindow {
+    id: window
+    width: Math.max(content.width, content.height + title_bar.height, title_bar.minimumWidth) + content.anchors.margins * 2
+    minimumWidth: title_bar.minimumWidth
+    minimumHeight: content.height + title_bar.height
+    height: width
+    title: qsTr("About")
+    title_bar.show_darkmode_btn: false
+    title_bar.show_style_switch: false
+
+    ColumnLayout{
+        id: content
+        anchors{
+            centerIn: parent
+            margins: 10
+        }
+        spacing: 5
+        Image {
+            source: "qrc:/qt/qml/RibbonUI/resources/imgs/icon.png"
+            fillMode:Image.PreserveAspectFit
+            Layout.preferredHeight: 120
+            Layout.preferredWidth: height
+            Layout.alignment: Qt.AlignHCenter
+            layer.enabled: true
+            layer.effect: RibbonShadow{}
+        }
+        RibbonText{
+            Layout.alignment: Qt.AlignHCenter
+            text: "RibbonUI"
+            font.pixelSize: 16
+        }
+        RibbonText{
+            Layout.alignment: Qt.AlignHCenter
+            text: `©${new Date().getFullYear()} mentalfl0w`
+        }
+        RibbonText{
+            Layout.alignment: Qt.AlignHCenter
+            text: `Version: V${RibbonUI.version}`
+        }
+    }
+}

example/components/RibbonMessageListViewExample.qml

@@ -7,18 +7,6 @@ Item {
     id: root
     implicitHeight: layout.height + layout.anchors.margins * 2
     implicitWidth: 500
-    RibbonButton{
-        anchors{
-            top:parent.top
-            topMargin: 8
-            right: parent.right
-            rightMargin: anchors.topMargin
-        }
-        show_bg: false
-        show_hovered_bg: false
-        icon_source: RibbonIcons.Dismiss
-        onClicked: close_popup()
-    }
     ColumnLayout{
         id: layout
         width: parent.width - anchors.margins * 2

example/example.qml

@@ -8,6 +8,7 @@ RibbonWindow {
     width: 1200
     height: 800
     title: qsTr("RibbonUI APP")
+    comfirmed_quit: true
     property bool modern_style: RibbonTheme.modern_style
 
     RibbonTabBar {
@@ -432,7 +433,9 @@ RibbonWindow {
                     RibbonButton{
                         text: qsTr('Open Message List View')
                         icon_source: RibbonIcons.Open
-                        onClicked: root.show_popup("qrc:/qt/qml/RibbonUIAPP/components/RibbonMessageListViewExample.qml")
+                        onClicked: {
+                            Window.window.popup.show_content("qrc:/qt/qml/RibbonUIAPP/components/RibbonMessageListViewExample.qml")
+                        }
                     }
                 }
             }
@@ -691,6 +694,17 @@ RibbonWindow {
     title_bar.right_content:RowLayout{
         spacing: 1
         layoutDirection: Qt.RightToLeft
+        RibbonButton{
+            show_bg:false
+            icon_source: RibbonIcons.Info
+            icon_source_filled: RibbonIcons_Filled.Info
+            tip_text: qsTr("About")
+            hover_color: Qt.rgba(0,0,0, 0.3)
+            pressed_color: Qt.rgba(0,0,0, 0.4)
+            text_color: title_bar.title_text_color
+            text_color_reverse: false
+            onClicked: root.show_window(Qt.resolvedUrl("about.qml"))
+        }
         RibbonButton{
             show_bg:false
             icon_source: RibbonIcons.CalendarStar

example/resources/icon.rc

@@ -1,42 +0,0 @@
-#include <windows.h>
-
-IDI_ICON1 ICON "imgs/icon.ico"
-
-#define STR(x) #x
-#define VER_JOIN(a,b,c) STR(a.b.c)
-#define VER_JOIN_(x) VER_JOIN x
-#define VER_STR VER_JOIN_((RIBBONUIAPP_VERSION))
-
-VS_VERSION_INFO VERSIONINFO
-FILEVERSION     RIBBONUIAPP_VERSION
-PRODUCTVERSION  RIBBONUIAPP_VERSION
-FILEFLAGSMASK   0x3fL
-#ifdef _DEBUG
-FILEFLAGS       VS_FF_DEBUG
-#else
-FILEFLAGS       0x0L
-#endif
-FILEOS          VOS_NT_WINDOWS32
-FILETYPE        VFT_APP
-FILESUBTYPE     VFT2_UNKNOWN
-BEGIN
-    BLOCK "StringFileInfo"
-    BEGIN
-        BLOCK "040904b0"
-        BEGIN
-            VALUE "Comments",         "Made by Mentalflow."
-            VALUE "CompanyName",      "Mentalflow"
-            VALUE "FileDescription",  "RibbonUI APP"
-            VALUE "FileVersion",      VER_STR
-            VALUE "InternalName",     ""
-            VALUE "LegalCopyright",   "Copyright (C) 2023"
-            VALUE "OriginalFilename", ""
-            VALUE "ProductName",      "RibbonUI APP"
-            VALUE "ProductVersion",   VER_STR
-        END
-    END
-    BLOCK "VarFileInfo"
-    BEGIN
-        VALUE "Translation", 0x409, 1200
-    END
-END

lib_source/qml/RibbonPopup.qml

@@ -16,6 +16,10 @@ Popup {
     property alias target: blur.target
     property alias target_rect: blur.target_rect
     property alias radius: blur.radius
+    property string content_source: ""
+    property var content_items: undefined
+    property bool destroy_after_close: true
+
     enter: Transition {
         NumberAnimation {
             properties: "scale"
@@ -66,24 +70,47 @@ Popup {
             mask_opacity: blur_enabled ? 0.9 : 1
             mask_border.color: RibbonTheme.modern_style ?
                                    RibbonTheme.dark_mode ? "#7A7A7A" : "#2C59B7" :
-                                   RibbonTheme.dark_mode ? "#5C5D5D" : "#B5B4B5"
+            RibbonTheme.dark_mode ? "#5C5D5D" : "#B5B4B5"
             mask_border.width: 1
         }
     }
     contentItem: Item{
+        id: control
+        implicitHeight: container.height
+        implicitWidth: container.width
+        property var args
         RibbonButton{
             anchors{
                 top:parent.top
                 topMargin: 8
                 right:parent.right
-                rightMargin: topMargin
+                rightMargin: anchors.topMargin
             }
             show_bg: false
             show_hovered_bg: false
             icon_source: RibbonIcons.Dismiss
-            onClicked: close()
+            onClicked: popup.close_content()
             visible: show_close_btn
         }
+        Loader{
+            id: container
+            width: item ? item.implicitWidth : 0
+            height: item ? item.implicitHeight : 0
+            sourceComponent: content_source ? undefined : content_items
+            source: content_source
+            onLoaded: {
+                if (!control.args)
+                    return
+                else if(Object.keys(control.args).length){
+                    for (let arg in control.args){
+                        item[arg] = control.args[arg]
+                    }
+                }
+                else{
+                    console.error("RibbonPopup: Arguments error, please check.")
+                }
+            }
+        }
     }
     Overlay.modal:Rectangle{
         color:"transparent"
@@ -91,4 +118,29 @@ Popup {
     Overlay.modeless:Rectangle{
         color:"transparent"
     }
+    onClosed: free_content()
+    function show_content(content, args){
+        popup.contentItem.args = args
+        if (content instanceof Component)
+        {
+            content_items = content
+            content.parent = popup
+        }
+        else
+        {
+            content_source = content
+        }
+        open()
+    }
+    function close_content(){
+        free_content()
+        close()
+    }
+    function free_content(){
+        if (destroy_after_close)
+        {
+            content_source = ""
+            content_items = undefined
+        }
+    }
 }

lib_source/qml/RibbonTitleBar.qml

@@ -6,9 +6,11 @@ import RibbonUI
 Item {
     id: control
     height: 30
+    property int minimumWidth: title_text.implicitWidth + left_container.width + right_container.width + (Qt.platform.os === "osx" ? 65 : 0) + 40
     property string title: Window.window.title
     property bool show_style_switch: true
     property bool show_darkmode_btn: true
+    property bool show_pin_btn: true
     property bool dark_mode: RibbonTheme.dark_mode
     property bool modern_style: RibbonTheme.modern_style
     property string title_color: modern_style ? Qt.platform.os === "windows" ? dark_mode ? "#141414" : "#F5F5F5" :"transparent" : dark_mode ? "#282828" : "#2C59B7"
@@ -167,6 +169,7 @@ Item {
             text_color_reverse: false
             tip_text: qsTr("Stay on Top")
             onClicked: Window.window.flags ^= Qt.WindowStaysOnTopHint
+            visible: control.show_pin_btn
         }
     }
 }

lib_source/qml/RibbonWindow.qml

@@ -84,52 +84,79 @@ Window {
         target: window_items
         target_rect: Qt.rect(window_items.x + x, window_items.y + y, width, height)
         blur_enabled: true
-        onClosed: contentItem.destroy()
     }
+
     RibbonPopupDialog{
-        id: dialog
+        id: close_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")
-        message: "Do you want to quit the APP?"
+        message: qsTr("Do you want to close this window?")
-        title: "Please note"
+        title: qsTr("Please note")
         buttonFlags: RibbonPopupDialogType.NegativeButton | RibbonPopupDialogType.PositiveButton | RibbonPopupDialogType.NeutralButton
         onNeutralClicked: window.visibility =  Window.Minimized
         onPositiveClicked: {
-            comfirmed_quit = true
+            comfirmed_quit = false
             Qt.quit()
         }
     }
+
     onClosing:function(event){
         window.raise()
-        event.accepted = comfirmed_quit
+        event.accepted = !comfirmed_quit
-        if (!comfirmed_quit)
+        if (comfirmed_quit)
-            dialog.open()
+            close_dialog.open()
     }
 
-    function show_popup(content_url, argument)
+    Loader{
-    {
+        id: window_loader
-        let component = Qt.createComponent(content_url,pop)
+        property var args
+        onLoaded: {
+            item.onClosing.connect(function(){
+                window_loader.source = ""
+            })
+            if (!window_loader.args)
+                return
+            else if(Object.keys(window_loader.args).length){
+                for (let arg in window_loader.args){
+                    item[arg] = window_loader.args[arg]
+                }
+            }
+            else{
+                console.error("RibbonWindow: Arguments error, please check.")
+            }
+            item.show()
+        }
+    }
 
-        if (component.status === Component.Error) {
+    function show_window(window_url, args){
-            console.log(qsTr("Error loading component:"), component.errorString());
+        if (window_url === window_loader.source && window_loader.status === Loader.Ready)
-            return
+            window_loader.item.raise()
-        }
         else
+            window_loader.source = window_url
+        if (args !== window_loader.args && Object.keys(window_loader.args).length && window_loader.status === Loader.Ready)
         {
-            if (typeof(argument)!='undefined')
+            window_loader.args = args
-                pop.contentItem = component.createObject(pop,argument)
+            for (let arg in window_loader.args){
-            else
+                window_loader.item[arg] = window_loader.args[arg]
-                pop.contentItem = component.createObject(pop)
+            }
         }
-        pop.open()
+    }
+
+    function show_popup(content_url, arguments)
+    {
+        console.warn(qsTr("RibbonWindow: This \"show_popup()\" function is deprecated, please use RibbonPopup.open_content()"))
+        popup.show_close_btn = !popup.show_close_btn
+        popup.show_content(content_url, arguments)
     }
 
     function close_popup()
     {
-        pop.close()
+        console.warn(qsTr("RibbonWindow: This \"close_popup()\" function is deprecated, please use RibbonPopup.close_content()"))
+        popup.show_close_btn = !popup.show_close_btn
+        pop.close_content()
     }
 }