From 2c13c9c26b9e13eade3cf0e492c7236e8e38a0a7 Mon Sep 17 00:00:00 2001 From: Mentalflow <312902918@qq.com> Date: Sun, 23 Jun 2024 02:12:49 +0800 Subject: [PATCH] RibbonBackStageView: Add RibbonBackStageMenuItem for convenient use. --- example/qml/Qt5/example.qml | 47 ++++++++++++++++--- example/qml/Qt6/example.qml | 47 ++++++++++++++++--- lib_source/CMakeLists.txt | 2 +- .../qml/Qt5/RibbonBackStageMenuItem.qml | 17 +++++++ lib_source/qml/Qt5/RibbonBackStageView.qml | 39 ++++++++++----- lib_source/qml/Qt5/RibbonObject.qml | 17 +++++++ .../qml/Qt6/RibbonBackStageMenuItem.qml | 17 +++++++ lib_source/qml/Qt6/RibbonBackStageView.qml | 41 +++++++++++----- lib_source/qml/Qt6/RibbonObject.qml | 17 +++++++ 9 files changed, 208 insertions(+), 36 deletions(-) create mode 100644 lib_source/qml/Qt5/RibbonBackStageMenuItem.qml create mode 100644 lib_source/qml/Qt5/RibbonObject.qml create mode 100644 lib_source/qml/Qt6/RibbonBackStageMenuItem.qml create mode 100644 lib_source/qml/Qt6/RibbonObject.qml diff --git a/example/qml/Qt5/example.qml b/example/qml/Qt5/example.qml index 041d4d2..3d2e508 100644 --- a/example/qml/Qt5/example.qml +++ b/example/qml/Qt5/example.qml @@ -864,11 +864,46 @@ RibbonWindow { blurEnabled: true blurTarget: root.windowItems radius: borderRadius - pageModel: [{"menu_text":"Home", "menu_icon":RibbonIcons.Home, "type":RibbonBackStageView.MenuItemLocation.Head, "sourceComponent":t_content, "sourceArgs":{'pageName':"Home"}}, - {"menu_text":"File", "menu_icon":RibbonIcons.Document, "type":RibbonBackStageView.MenuItemLocation.Head, "sourceComponent":t_content, "sourceArgs":{'pageName':"File"}}, - {"menu_text":"Search", "menu_icon":RibbonIcons.Search, "type":RibbonBackStageView.MenuItemLocation.Body, "sourceComponent":t_content, "sourceArgs":{'pageName':"Search"}}, - {"menu_text":"Account", "menu_icon":RibbonIcons.PersonAccounts, "type":RibbonBackStageView.MenuItemLocation.Tail, "clickOnly":true, "clickFunc": ()=>console.log("Menu Account clicked")}, - {"menu_text":"About", "menu_icon":RibbonIcons.Info, "type":RibbonBackStageView.MenuItemLocation.Tail, "clickOnly":true, "clickFunc": ()=>root.showWindow(Qt.resolvedUrl("about.qml"))}, - {"menu_text":"Settings", "menu_icon":RibbonIcons.Settings, "type":RibbonBackStageView.MenuItemLocation.Tail, "sourceUrl":Qt.resolvedUrl("pages/SettingsMenuPage.qml")}] + RibbonBackStageMenuItem{ + menuText: "Home" + menuIcon: RibbonIcons.Home + type: RibbonBackStageView.MenuItemLocation.Head + sourceComponent: t_content + sourceArgs:{'pageName':"Home"} + } + RibbonBackStageMenuItem{ + menuText: "File" + menuIcon: RibbonIcons.Document + type: RibbonBackStageView.MenuItemLocation.Head + sourceComponent: t_content + sourceArgs:{'pageName':"File"} + } + RibbonBackStageMenuItem{ + menuText: "Search" + menuIcon: RibbonIcons.Search + type: RibbonBackStageView.MenuItemLocation.Body + sourceComponent: t_content + sourceArgs:{'pageName':"Search"} + } + RibbonBackStageMenuItem{ + menuText: "Account" + menuIcon: RibbonIcons.PersonAccounts + type: RibbonBackStageView.MenuItemLocation.Tail + clickOnly: true + clickFunc: ()=>console.log("Menu Account clicked") + } + RibbonBackStageMenuItem{ + menuText: "About" + menuIcon: RibbonIcons.Info + type: RibbonBackStageView.MenuItemLocation.Tail + clickOnly: true + clickFunc: ()=>root.showWindow(Qt.resolvedUrl("about.qml")) + } + RibbonBackStageMenuItem{ + menuText: "Settings" + menuIcon: RibbonIcons.Settings + type: RibbonBackStageView.MenuItemLocation.Tail + sourceUrl: Qt.resolvedUrl("pages/SettingsMenuPage.qml") + } } } diff --git a/example/qml/Qt6/example.qml b/example/qml/Qt6/example.qml index df9374b..d27c9d4 100644 --- a/example/qml/Qt6/example.qml +++ b/example/qml/Qt6/example.qml @@ -864,11 +864,46 @@ RibbonWindow { blurEnabled: true blurTarget: root.windowItems radius: borderRadius - pageModel: [{"menu_text":"Home", "menu_icon":RibbonIcons.Home, "type":RibbonBackStageView.MenuItemLocation.Head, "sourceComponent":t_content, "sourceArgs":{'pageName':"Home"}}, - {"menu_text":"File", "menu_icon":RibbonIcons.Document, "type":RibbonBackStageView.MenuItemLocation.Head, "sourceComponent":t_content, "sourceArgs":{'pageName':"File"}}, - {"menu_text":"Search", "menu_icon":RibbonIcons.Search, "type":RibbonBackStageView.MenuItemLocation.Body, "sourceComponent":t_content, "sourceArgs":{'pageName':"Search"}}, - {"menu_text":"Account", "menu_icon":RibbonIcons.PersonAccounts, "type":RibbonBackStageView.MenuItemLocation.Tail, "clickOnly":true, "clickFunc": ()=>console.log("Menu Account clicked")}, - {"menu_text":"About", "menu_icon":RibbonIcons.Info, "type":RibbonBackStageView.MenuItemLocation.Tail, "clickOnly":true, "clickFunc": ()=>root.showWindow(Qt.resolvedUrl("about.qml"))}, - {"menu_text":"Settings", "menu_icon":RibbonIcons.Settings, "type":RibbonBackStageView.MenuItemLocation.Tail, "sourceUrl":Qt.resolvedUrl("pages/SettingsMenuPage.qml")}] + RibbonBackStageMenuItem{ + menuText: "Home" + menuIcon: RibbonIcons.Home + type: RibbonBackStageView.MenuItemLocation.Head + sourceComponent: t_content + sourceArgs:{'pageName':"Home"} + } + RibbonBackStageMenuItem{ + menuText: "File" + menuIcon: RibbonIcons.Document + type: RibbonBackStageView.MenuItemLocation.Head + sourceComponent: t_content + sourceArgs:{'pageName':"File"} + } + RibbonBackStageMenuItem{ + menuText: "Search" + menuIcon: RibbonIcons.Search + type: RibbonBackStageView.MenuItemLocation.Body + sourceComponent: t_content + sourceArgs:{'pageName':"Search"} + } + RibbonBackStageMenuItem{ + menuText: "Account" + menuIcon: RibbonIcons.PersonAccounts + type: RibbonBackStageView.MenuItemLocation.Tail + clickOnly: true + clickFunc: ()=>console.log("Menu Account clicked") + } + RibbonBackStageMenuItem{ + menuText: "About" + menuIcon: RibbonIcons.Info + type: RibbonBackStageView.MenuItemLocation.Tail + clickOnly: true + clickFunc: ()=>root.showWindow(Qt.resolvedUrl("about.qml")) + } + RibbonBackStageMenuItem{ + menuText: "Settings" + menuIcon: RibbonIcons.Settings + type: RibbonBackStageView.MenuItemLocation.Tail + sourceUrl: Qt.resolvedUrl("pages/SettingsMenuPage.qml") + } } } diff --git a/lib_source/CMakeLists.txt b/lib_source/CMakeLists.txt index 3ffc40d..a2c01ad 100644 --- a/lib_source/CMakeLists.txt +++ b/lib_source/CMakeLists.txt @@ -39,7 +39,7 @@ set(qml_files RibbonTabBar.qml RibbonTabButton.qml RibbonView.qml RibbonScrollBar.qml RibbonWindow.qml RibbonMessage.qml RibbonMessageListView.qml RibbonTour.qml RibbonTourContent.qml RibbonBackStageView.qml RibbonBackStagePage.qml RibbonBackStageGroup.qml - RibbonRadioButton.qml) + RibbonRadioButton.qml RibbonBackStageMenuItem.qml RibbonObject.qml) set(qml_prefix "qml/Qt${QT_VERSION_MAJOR}/") diff --git a/lib_source/qml/Qt5/RibbonBackStageMenuItem.qml b/lib_source/qml/Qt5/RibbonBackStageMenuItem.qml new file mode 100644 index 0000000..b4ac76f --- /dev/null +++ b/lib_source/qml/Qt5/RibbonBackStageMenuItem.qml @@ -0,0 +1,17 @@ +import QtQuick 2.15 +import RibbonUI 1.0 + +RibbonObject { + id: control + required property string menuText + property var menuIcon + property var menuIconFilled + required property var type + property var sourceComponent + property var sourceArgs + property bool clickOnly: false + property var sourceUrl + property var clickFunc + property int propertyCount: 0 + property_names: ['menuText','menuIcon','menuIconFilled','type','sourceComponent','sourceArgs','clickOnly','sourceUrl','clickFunc'] +} diff --git a/lib_source/qml/Qt5/RibbonBackStageView.qml b/lib_source/qml/Qt5/RibbonBackStageView.qml index a37848f..5d1bcaf 100644 --- a/lib_source/qml/Qt5/RibbonBackStageView.qml +++ b/lib_source/qml/Qt5/RibbonBackStageView.qml @@ -21,7 +21,7 @@ Popup { property string backText: qsTr("Back") property int radius: 0 property var pageModel: [] - + default property alias data: data_container.data signal backBtnClicked() background: Item{} @@ -35,11 +35,28 @@ Popup { } } - Component.onCompleted: refreshModel() + Component.onCompleted: { + for(let index = pageModel.length; index < data_container.resources.length; index++) + { + if(data_container.resources[index] instanceof RibbonBackStageMenuItem) + { + let item = data_container.resources[index] + item.getPropertiesReady() + pageModel.push(item.properties) + } + } + if(pageModel.length) + pageModelChanged() + refreshModel() + } onPageModelChanged: refreshModel() onAboutToShow: show() onBackBtnClicked: hide() + Item{ + id: data_container + } + RibbonBlur{ id: blur_bg anchors.fill: parent @@ -204,18 +221,18 @@ Popup { RibbonIcon{ id :rib_icon - iconSource: typeof(model.menu_icon) === "number" ? model.menu_icon : 0 - iconSourceFilled: typeof(model.menu_icon_filled) === "number" ? model.menu_icon_filled : iconSource + iconSource: typeof(model.menuIcon) === "number" ? model.menuIcon : 0 + iconSourceFilled: typeof(model.menuIconFilled) === "number" ? model.menuIconFilled : iconSource iconSize: menu_label.visible ? menu_label.contentHeight : 16 - visible: typeof(model.menu_icon) === "number" && model.menu_icon + visible: typeof(model.menuIcon) === "number" && model.menuIcon Layout.alignment: Qt.AlignVCenter filled: item_bg.view.currentIndex === index && item_bg.isCurrentMenu - color: model.menu_iconColor ? model.menu_iconColor : back_btn.textColor + color: model.menuIconColor ? model.menuIconColor : back_btn.textColor } Image { id: pic_icon - source: typeof(model.menu_icon) === "string" ? model.menu_icon : "" - visible: typeof(model.menu_icon) === "string" + source: typeof(model.menuIcon) === "string" ? model.menuIcon : "" + visible: typeof(model.menuIcon) === "string" fillMode:Image.PreserveAspectFit mipmap: true autoTransform: true @@ -225,7 +242,7 @@ Popup { } Text{ id: menu_label - text: model.menu_text + text: model.menuText color: !mouse.containsMouse && RibbonTheme.modernStyle && item_bg.view.currentIndex === index && item_bg.isCurrentMenu ? RibbonTheme.isDarkMode ? "#779CDB" : "#5882BB" : back_btn.textColor Layout.alignment: Qt.AlignVCenter verticalAlignment: Text.AlignVCenter @@ -241,7 +258,7 @@ Popup { w += (rib_icon.visible || pic_icon.visible) && menu_label.text ? item.spacing : 0 return item_bg.width - w - item_bg.margins * 4 } - Layout.leftMargin: (!model.menu_icon && model.menu_text) ? menu_label.contentHeight + item.spacing : 0 + Layout.leftMargin: (!model.menuIcon && model.menuText) ? menu_label.contentHeight + item.spacing : 0 } } @@ -417,7 +434,7 @@ Popup { model: control.pageModel Loader { active: SwipeView.isCurrentItem || SwipeView.isNextItem || SwipeView.isPreviousItem - source: typeof(modelData.sourceUrl) !== 'undefined' ? modelData.sourceUrl : "" + source: typeof(modelData.sourceUrl) !== 'undefined' && modelData.sourceUrl !== ""? modelData.sourceUrl : "" sourceComponent: typeof(control.pageModel[modelData.globalIndex].sourceComponent) !== 'undefined' && typeof(modelData.sourceUrl) === 'undefined' ? control.pageModel[modelData.globalIndex].sourceComponent : undefined onLoaded: { if (typeof(modelData.sourceArgs) === 'undefined') diff --git a/lib_source/qml/Qt5/RibbonObject.qml b/lib_source/qml/Qt5/RibbonObject.qml new file mode 100644 index 0000000..ea9e484 --- /dev/null +++ b/lib_source/qml/Qt5/RibbonObject.qml @@ -0,0 +1,17 @@ +import QtQuick 2.15 + +QtObject { + id: control + property var properties: ({}) + property var property_names: [] + + function getPropertiesReady(){ + properties = {} + for (let i = 0; i < property_names.length; i++){ + if(typeof control[property_names[i]] !== 'undefined') + { + properties[property_names[i]] = control[property_names[i]] + } + } + } +} diff --git a/lib_source/qml/Qt6/RibbonBackStageMenuItem.qml b/lib_source/qml/Qt6/RibbonBackStageMenuItem.qml new file mode 100644 index 0000000..d19f086 --- /dev/null +++ b/lib_source/qml/Qt6/RibbonBackStageMenuItem.qml @@ -0,0 +1,17 @@ +import QtQuick +import RibbonUI + +RibbonObject { + id: control + required property string menuText + property var menuIcon + property var menuIconFilled + required property var type + property var sourceComponent + property var sourceArgs + property bool clickOnly: false + property var sourceUrl + property var clickFunc + property int propertyCount: 0 + property_names: ['menuText','menuIcon','menuIconFilled','type','sourceComponent','sourceArgs','clickOnly','sourceUrl','clickFunc'] +} diff --git a/lib_source/qml/Qt6/RibbonBackStageView.qml b/lib_source/qml/Qt6/RibbonBackStageView.qml index 5e142fc..0bc253b 100644 --- a/lib_source/qml/Qt6/RibbonBackStageView.qml +++ b/lib_source/qml/Qt6/RibbonBackStageView.qml @@ -21,7 +21,7 @@ Popup { property string backText: qsTr("Back") property int radius: 0 property var pageModel: [] - + default property alias data: data_container.data signal backBtnClicked() background: Item{} @@ -35,11 +35,28 @@ Popup { } } - Component.onCompleted: refreshModel() + Component.onCompleted: { + for(let index = pageModel.length; index < data_container.resources.length; index++) + { + if(data_container.resources[index] instanceof RibbonBackStageMenuItem) + { + let item = data_container.resources[index] + item.getPropertiesReady() + pageModel.push(item.properties) + } + } + if(pageModel.length) + pageModelChanged() + refreshModel() + } onPageModelChanged: refreshModel() onAboutToShow: show() onBackBtnClicked: hide() + Item{ + id: data_container + } + RibbonBlur{ id: blur_bg anchors.fill: parent @@ -204,18 +221,18 @@ Popup { RibbonIcon{ id :rib_icon - iconSource: typeof(model.menu_icon) === "number" ? model.menu_icon : 0 - iconSourceFilled: typeof(model.menu_icon_filled) === "number" ? model.menu_icon_filled : iconSource + iconSource: typeof(model.menuIcon) === "number" ? model.menuIcon : 0 + iconSourceFilled: typeof(model.menuIconFilled) === "number" ? model.menuIconFilled : iconSource iconSize: menu_label.visible ? menu_label.contentHeight : 16 - visible: typeof(model.menu_icon) === "number" && model.menu_icon + visible: typeof(model.menuIcon) === "number" && model.menuIcon Layout.alignment: Qt.AlignVCenter filled: item_bg.view.currentIndex === index && item_bg.isCurrentMenu - color: model.menu_iconColor ? model.menu_iconColor : back_btn.textColor + color: model.menuIconColor ? model.menuIconColor : back_btn.textColor } Image { id: pic_icon - source: typeof(model.menu_icon) === "string" ? model.menu_icon : "" - visible: typeof(model.menu_icon) === "string" + source: typeof(model.menuIcon) === "string" ? model.menuIcon : "" + visible: typeof(model.menuIcon) === "string" fillMode:Image.PreserveAspectFit mipmap: true autoTransform: true @@ -225,7 +242,7 @@ Popup { } Text{ id: menu_label - text: model.menu_text + text: model.menuText color: !mouse.containsMouse && RibbonTheme.modernStyle && item_bg.view.currentIndex === index && item_bg.isCurrentMenu ? RibbonTheme.isDarkMode ? "#779CDB" : "#5882BB" : back_btn.textColor Layout.alignment: Qt.AlignVCenter verticalAlignment: Text.AlignVCenter @@ -241,14 +258,14 @@ Popup { w += (rib_icon.visible || pic_icon.visible) && menu_label.text ? item.spacing : 0 return item_bg.width - w - item_bg.margins * 4 } - Layout.leftMargin: (!model.menu_icon && model.menu_text) ? menu_label.contentHeight + item.spacing : 0 + Layout.leftMargin: (!model.menuIcon && model.menuText) ? menu_label.contentHeight + item.spacing : 0 } } RibbonToolTip{ id: tooltip visible: mouse.containsMouse && typeof(model.showTooltip) != "undefined" ? model.showTooltip : false - && typeof(model.tool_text) != "undefined" ? model.tool_text : false + && typeof(model.tool_text) != "undefined" ? model.tool_text : false text: model.tool_text ? model.tool_text : "" } @@ -417,7 +434,7 @@ Popup { model: control.pageModel Loader { active: SwipeView.isCurrentItem || SwipeView.isNextItem || SwipeView.isPreviousItem - source: typeof(modelData.sourceUrl) !== 'undefined' ? modelData.sourceUrl : "" + source: typeof(modelData.sourceUrl) !== 'undefined' && modelData.sourceUrl !== ""? modelData.sourceUrl : "" sourceComponent: typeof(control.pageModel[modelData.globalIndex].sourceComponent) !== 'undefined' && typeof(modelData.sourceUrl) === 'undefined' ? control.pageModel[modelData.globalIndex].sourceComponent : undefined onLoaded: { if (typeof(modelData.sourceArgs) === 'undefined') diff --git a/lib_source/qml/Qt6/RibbonObject.qml b/lib_source/qml/Qt6/RibbonObject.qml new file mode 100644 index 0000000..e632c93 --- /dev/null +++ b/lib_source/qml/Qt6/RibbonObject.qml @@ -0,0 +1,17 @@ +import QtQuick + +QtObject { + id: control + property var properties: ({}) + property var property_names: [] + + function getPropertiesReady(){ + properties = {} + for (let i = 0; i < property_names.length; i++){ + if(typeof control[property_names[i]] !== 'undefined') + { + properties[property_names[i]] = control[property_names[i]] + } + } + } +}