Compare commits

...

3 Commits

28 changed files with 647 additions and 293 deletions

View File

@ -1,5 +1,6 @@
import QtQuick 2.15 import QtQuick 2.15
import QtQuick.Layouts 1.11 import QtQuick.Layouts 1.11
import QtQuick.Controls 2.15
import RibbonUI 1.0 import RibbonUI 1.0
RibbonWindow { RibbonWindow {

View File

@ -13,81 +13,79 @@ RibbonWindow {
property bool modernStyle: RibbonTheme.modernStyle property bool modernStyle: RibbonTheme.modernStyle
RibbonTour{ RibbonTour{
id: tour id: tour
targetList: [ RibbonTourItem{
{ title: qsTr("Tab Bar")
title: qsTr("Tab Bar"), text: qsTr("A tab bar for window, let user choose the controllers.")
text: qsTr("A tab bar for window, let user choose the controllers."), target: tab_bar
target: tab_bar, enterFunc: ()=>{
enter_func: ()=>{
tab_bar.folded = false tab_bar.folded = false
tour.refresh(300) // Use it if has animation tour.refresh(300) // Use it if has animation
} }
}, }
{ RibbonTourItem{
title: qsTr("Tab Bar Buttons"), title: qsTr("Tab Bar Buttons")
text: qsTr("Tool buttons at the top of tab bar."), text: qsTr("Tool buttons at the top of tab bar.")
target: tab_bar_tool target: tab_bar_tool
}, }
{ RibbonTourItem{
title: qsTr("Sliders"), title: qsTr("Sliders")
text: qsTr("Vertical/Horizental sliders with/without buttons."), text: qsTr("Vertical/Horizental sliders with/without buttons.")
target: slider_layout, target: slider_layout
enter_func: ()=>{ enterFunc: ()=>{
tab_bar.setPage(0) tab_bar.setPage(0)
slider_with_btn.value = 70 slider_with_btn.value = 70
slider_without_btn.value = 70 slider_without_btn.value = 70
tour.refresh(500) tour.refresh(500)
}, }
exit_func: ()=>{ exitFunc: ()=>{
slider_with_btn.value = 50 slider_with_btn.value = 50
slider_without_btn.value = 50 slider_without_btn.value = 50
} }
}, }
{ RibbonTourItem{
title: qsTr("Switch Buttons"), title: qsTr("Switch Buttons")
text: qsTr("Switch buttons with/without background color or grabber text."), text: qsTr("Switch buttons with/without background color or grabber text.")
target: switch_layout, target: switch_layout
enter_func: ()=>btn_with_color_and_grabberText.checked = true, enterFunc: ()=>btn_with_color_and_grabberText.checked = true
exit_func: ()=>btn_with_color_and_grabberText.checked = false exitFunc: ()=>btn_with_color_and_grabberText.checked = false
}, }
{ RibbonTourItem{
title: qsTr("CheckBoxs"), title: qsTr("CheckBoxs")
text: qsTr("CheckBoxs with colorful background or with/without label text."), text: qsTr("CheckBoxs with colorful background or with/without label text.")
target: checkbox_layout target: checkbox_layout
}, }
{ RibbonTourItem{
title: qsTr("Buttons"), title: qsTr("Buttons")
text: qsTr("Buttons with/without background or label text."), text: qsTr("Buttons with/without background or label text.")
target: button_layout, target: button_layout
enter_func: ()=>btn_without_bg_and_label.checked = true, enterFunc: ()=>btn_without_bg_and_label.checked = true
exit_func: ()=>btn_without_bg_and_label.checked = false exitFunc: ()=>btn_without_bg_and_label.checked = false
}, }
{ RibbonTourItem{
title: qsTr("Push Buttons"), title: qsTr("Push Buttons")
text: qsTr("Push buttons with/without sub menu."), text: qsTr("Push buttons with/without sub menu.")
target: pushbutton_layout target: pushbutton_layout
}, }
{ RibbonTourItem{
title: qsTr("Line Edits"), title: qsTr("Line Edits")
text: qsTr("Line edits with/without icon."), text: qsTr("Line edits with/without icon.")
target: lineedit_layout, target: lineedit_layout
enter_func: ()=>{ enterFunc: ()=>{
tab_bar.setPage(1) tab_bar.setPage(1)
lineedit_with_icon.text = "Line Edit with icon." lineedit_with_icon.text = "Line Edit with icon."
tour.refresh(300) tour.refresh(300)
}, }
exit_func: ()=>{ exitFunc: ()=>{
tab_bar.setPage(0) tab_bar.setPage(0)
lineedit_with_icon.clear() lineedit_with_icon.clear()
tour.refresh(400) tour.refresh(400)
} }
}, }
{ RibbonTourItem{
title: qsTr("Bottom Bar"), title: qsTr("Bottom Bar")
text: qsTr("A bottom bar for window."), text: qsTr("A bottom bar for window.")
target: bottom_bar target: bottom_bar
}, }
]
target: windowItems target: windowItems
blurEnabled: true blurEnabled: true
targetRect: Qt.rect(windowItems.x + x, windowItems.y + y, width, height) targetRect: Qt.rect(windowItems.x + x, windowItems.y + y, width, height)
@ -652,8 +650,6 @@ RibbonWindow {
RibbonPaperView{ RibbonPaperView{
id: view id: view
anchors.fill: parent anchors.fill: parent
topPadding: tab_bar.height
bottomPadding: bottom_bar.height
pageWidth: (page_slider.value / 100.0) * width pageWidth: (page_slider.value / 100.0) * width
spacing: 0 spacing: 0
ColumnLayout{ ColumnLayout{
@ -866,11 +862,46 @@ RibbonWindow {
blurEnabled: true blurEnabled: true
blurTarget: root.windowItems blurTarget: root.windowItems
radius: borderRadius radius: borderRadius
pageModel: [{"menu_text":"Home", "menu_icon":RibbonIcons.Home, "type":RibbonBackStageView.MenuItemLocation.Head, "sourceComponent":t_content, "sourceArgs":{'pageName':"Home"}}, RibbonBackStageMenuItem{
{"menu_text":"File", "menu_icon":RibbonIcons.Document, "type":RibbonBackStageView.MenuItemLocation.Head, "sourceComponent":t_content, "sourceArgs":{'pageName':"File"}}, menuText: "Home"
{"menu_text":"Search", "menu_icon":RibbonIcons.Search, "type":RibbonBackStageView.MenuItemLocation.Body, "sourceComponent":t_content, "sourceArgs":{'pageName':"Search"}}, menuIcon: RibbonIcons.Home
{"menu_text":"Account", "menu_icon":RibbonIcons.PersonAccounts, "type":RibbonBackStageView.MenuItemLocation.Tail, "clickOnly":true, "clickFunc": ()=>console.log("Menu Account clicked")}, type: RibbonBackStageView.MenuItemLocation.Head
{"menu_text":"About", "menu_icon":RibbonIcons.Info, "type":RibbonBackStageView.MenuItemLocation.Tail, "clickOnly":true, "clickFunc": ()=>root.showWindow(Qt.resolvedUrl("about.qml"))}, sourceComponent: t_content
{"menu_text":"Settings", "menu_icon":RibbonIcons.Settings, "type":RibbonBackStageView.MenuItemLocation.Tail, "sourceUrl":Qt.resolvedUrl("pages/SettingsMenuPage.qml")}] 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")
}
} }
} }

View File

@ -1,6 +1,7 @@
import QtQuick 2.15 import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.11 import QtQuick.Layouts 1.11
import QtQuick.Controls 2.15
import QtQuick.Window 2.15
import RibbonUI 1.0 import RibbonUI 1.0
RibbonBackStagePage{ RibbonBackStagePage{
@ -87,5 +88,25 @@ RibbonBackStagePage{
} }
} }
} }
RibbonBackStageGroup{
Layout.alignment: Qt.AlignTop
Layout.preferredHeight: render_btn.height + 40
Layout.fillWidth: true
groupName: qsTr("TitleBar")
RowLayout{
RibbonText{
text: qsTr("Show TitleBar Icon: ")
}
RibbonSwitchButton{
text: "Icon"
grabberText: RibbonTheme.nativeText ? "Show" : "Hide"
checked: true
Layout.alignment: Qt.AlignHCenter
onClicked: {
Window.window.titleBar.titleIcon.visible = checked
}
}
}
}
} }
} }

View File

@ -1,7 +1,7 @@
import QtQuick import QtQuick
import QtQuick.Window
import QtQuick.Layouts
import QtQuick.Controls import QtQuick.Controls
import QtQuick.Layouts
import QtQuick.Window
import RibbonUI import RibbonUI
RibbonWindow { RibbonWindow {
@ -13,81 +13,79 @@ RibbonWindow {
property bool modernStyle: RibbonTheme.modernStyle property bool modernStyle: RibbonTheme.modernStyle
RibbonTour{ RibbonTour{
id: tour id: tour
targetList: [ RibbonTourItem{
{ title: qsTr("Tab Bar")
title: qsTr("Tab Bar"), text: qsTr("A tab bar for window, let user choose the controllers.")
text: qsTr("A tab bar for window, let user choose the controllers."), target: tab_bar
target: tab_bar, enterFunc: ()=>{
enter_func: ()=>{
tab_bar.folded = false tab_bar.folded = false
tour.refresh(300) // Use it if has animation tour.refresh(300) // Use it if has animation
} }
}, }
{ RibbonTourItem{
title: qsTr("Tab Bar Buttons"), title: qsTr("Tab Bar Buttons")
text: qsTr("Tool buttons at the top of tab bar."), text: qsTr("Tool buttons at the top of tab bar.")
target: tab_bar_tool target: tab_bar_tool
}, }
{ RibbonTourItem{
title: qsTr("Sliders"), title: qsTr("Sliders")
text: qsTr("Vertical/Horizental sliders with/without buttons."), text: qsTr("Vertical/Horizental sliders with/without buttons.")
target: slider_layout, target: slider_layout
enter_func: ()=>{ enterFunc: ()=>{
tab_bar.setPage(0) tab_bar.setPage(0)
slider_with_btn.value = 70 slider_with_btn.value = 70
slider_without_btn.value = 70 slider_without_btn.value = 70
tour.refresh(500) tour.refresh(500)
}, }
exit_func: ()=>{ exitFunc: ()=>{
slider_with_btn.value = 50 slider_with_btn.value = 50
slider_without_btn.value = 50 slider_without_btn.value = 50
} }
}, }
{ RibbonTourItem{
title: qsTr("Switch Buttons"), title: qsTr("Switch Buttons")
text: qsTr("Switch buttons with/without background color or grabber text."), text: qsTr("Switch buttons with/without background color or grabber text.")
target: switch_layout, target: switch_layout
enter_func: ()=>btn_with_color_and_grabberText.checked = true, enterFunc: ()=>btn_with_color_and_grabberText.checked = true
exit_func: ()=>btn_with_color_and_grabberText.checked = false exitFunc: ()=>btn_with_color_and_grabberText.checked = false
}, }
{ RibbonTourItem{
title: qsTr("CheckBoxs"), title: qsTr("CheckBoxs")
text: qsTr("CheckBoxs with colorful background or with/without label text."), text: qsTr("CheckBoxs with colorful background or with/without label text.")
target: checkbox_layout target: checkbox_layout
}, }
{ RibbonTourItem{
title: qsTr("Buttons"), title: qsTr("Buttons")
text: qsTr("Buttons with/without background or label text."), text: qsTr("Buttons with/without background or label text.")
target: button_layout, target: button_layout
enter_func: ()=>btn_without_bg_and_label.checked = true, enterFunc: ()=>btn_without_bg_and_label.checked = true
exit_func: ()=>btn_without_bg_and_label.checked = false exitFunc: ()=>btn_without_bg_and_label.checked = false
}, }
{ RibbonTourItem{
title: qsTr("Push Buttons"), title: qsTr("Push Buttons")
text: qsTr("Push buttons with/without sub menu."), text: qsTr("Push buttons with/without sub menu.")
target: pushbutton_layout target: pushbutton_layout
}, }
{ RibbonTourItem{
title: qsTr("Line Edits"), title: qsTr("Line Edits")
text: qsTr("Line edits with/without icon."), text: qsTr("Line edits with/without icon.")
target: lineedit_layout, target: lineedit_layout
enter_func: ()=>{ enterFunc: ()=>{
tab_bar.setPage(1) tab_bar.setPage(1)
lineedit_with_icon.text = "Line Edit with icon." lineedit_with_icon.text = "Line Edit with icon."
tour.refresh(300) tour.refresh(300)
}, }
exit_func: ()=>{ exitFunc: ()=>{
tab_bar.setPage(0) tab_bar.setPage(0)
lineedit_with_icon.clear() lineedit_with_icon.clear()
tour.refresh(400) tour.refresh(400)
} }
}, }
{ RibbonTourItem{
title: qsTr("Bottom Bar"), title: qsTr("Bottom Bar")
text: qsTr("A bottom bar for window."), text: qsTr("A bottom bar for window.")
target: bottom_bar target: bottom_bar
}, }
]
target: windowItems target: windowItems
blurEnabled: true blurEnabled: true
targetRect: Qt.rect(windowItems.x + x, windowItems.y + y, width, height) targetRect: Qt.rect(windowItems.x + x, windowItems.y + y, width, height)
@ -652,8 +650,6 @@ RibbonWindow {
RibbonPaperView{ RibbonPaperView{
id: view id: view
anchors.fill: parent anchors.fill: parent
topPadding: tab_bar.height
bottomPadding: bottom_bar.height
pageWidth: (page_slider.value / 100.0) * width pageWidth: (page_slider.value / 100.0) * width
spacing: 0 spacing: 0
ColumnLayout{ ColumnLayout{
@ -866,11 +862,46 @@ RibbonWindow {
blurEnabled: true blurEnabled: true
blurTarget: root.windowItems blurTarget: root.windowItems
radius: borderRadius radius: borderRadius
pageModel: [{"menu_text":"Home", "menu_icon":RibbonIcons.Home, "type":RibbonBackStageView.MenuItemLocation.Head, "sourceComponent":t_content, "sourceArgs":{'pageName':"Home"}}, RibbonBackStageMenuItem{
{"menu_text":"File", "menu_icon":RibbonIcons.Document, "type":RibbonBackStageView.MenuItemLocation.Head, "sourceComponent":t_content, "sourceArgs":{'pageName':"File"}}, menuText: "Home"
{"menu_text":"Search", "menu_icon":RibbonIcons.Search, "type":RibbonBackStageView.MenuItemLocation.Body, "sourceComponent":t_content, "sourceArgs":{'pageName':"Search"}}, menuIcon: RibbonIcons.Home
{"menu_text":"Account", "menu_icon":RibbonIcons.PersonAccounts, "type":RibbonBackStageView.MenuItemLocation.Tail, "clickOnly":true, "clickFunc": ()=>console.log("Menu Account clicked")}, type: RibbonBackStageView.MenuItemLocation.Head
{"menu_text":"About", "menu_icon":RibbonIcons.Info, "type":RibbonBackStageView.MenuItemLocation.Tail, "clickOnly":true, "clickFunc": ()=>root.showWindow(Qt.resolvedUrl("about.qml"))}, sourceComponent: t_content
{"menu_text":"Settings", "menu_icon":RibbonIcons.Settings, "type":RibbonBackStageView.MenuItemLocation.Tail, "sourceUrl":Qt.resolvedUrl("pages/SettingsMenuPage.qml")}] 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")
}
} }
} }

View File

@ -1,6 +1,7 @@
import QtQuick import QtQuick
import QtQuick.Layouts import QtQuick.Layouts
import QtQuick.Controls import QtQuick.Controls
import QtQuick.Window
import RibbonUI import RibbonUI
RibbonBackStagePage{ RibbonBackStagePage{
@ -87,5 +88,25 @@ RibbonBackStagePage{
} }
} }
} }
RibbonBackStageGroup{
Layout.alignment: Qt.AlignTop
Layout.preferredHeight: render_btn.height + 40
Layout.fillWidth: true
groupName: qsTr("TitleBar")
RowLayout{
RibbonText{
text: qsTr("Show TitleBar Icon: ")
}
RibbonSwitchButton{
text: "Icon"
grabberText: RibbonTheme.nativeText ? "Show" : "Hide"
checked: true
Layout.alignment: Qt.AlignHCenter
onClicked: {
Window.window.titleBar.titleIcon.visible = checked
}
}
}
}
} }
} }

View File

@ -39,7 +39,8 @@ set(qml_files RibbonTabBar.qml RibbonTabButton.qml RibbonView.qml
RibbonScrollBar.qml RibbonWindow.qml RibbonMessage.qml RibbonScrollBar.qml RibbonWindow.qml RibbonMessage.qml
RibbonMessageListView.qml RibbonTour.qml RibbonTourContent.qml RibbonMessageListView.qml RibbonTour.qml RibbonTourContent.qml
RibbonBackStageView.qml RibbonBackStagePage.qml RibbonBackStageGroup.qml RibbonBackStageView.qml RibbonBackStagePage.qml RibbonBackStageGroup.qml
RibbonRadioButton.qml) RibbonRadioButton.qml RibbonBackStageMenuItem.qml RibbonTourItem.qml
RibbonObject.qml)
set(qml_prefix "qml/Qt${QT_VERSION_MAJOR}/") set(qml_prefix "qml/Qt${QT_VERSION_MAJOR}/")

View File

@ -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']
}

View File

@ -21,7 +21,7 @@ Popup {
property string backText: qsTr("Back") property string backText: qsTr("Back")
property int radius: 0 property int radius: 0
property var pageModel: [] property var pageModel: []
default property alias data: data_container.data
signal backBtnClicked() signal backBtnClicked()
background: Item{} 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() onPageModelChanged: refreshModel()
onAboutToShow: show() onAboutToShow: show()
onBackBtnClicked: hide() onBackBtnClicked: hide()
Item{
id: data_container
}
RibbonBlur{ RibbonBlur{
id: blur_bg id: blur_bg
anchors.fill: parent anchors.fill: parent
@ -204,18 +221,18 @@ Popup {
RibbonIcon{ RibbonIcon{
id :rib_icon id :rib_icon
iconSource: typeof(model.menu_icon) === "number" ? model.menu_icon : 0 iconSource: typeof(model.menuIcon) === "number" ? model.menuIcon : 0
iconSourceFilled: typeof(model.menu_icon_filled) === "number" ? model.menu_icon_filled : iconSource iconSourceFilled: typeof(model.menuIconFilled) === "number" ? model.menuIconFilled : iconSource
iconSize: menu_label.visible ? menu_label.contentHeight : 16 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 Layout.alignment: Qt.AlignVCenter
filled: item_bg.view.currentIndex === index && item_bg.isCurrentMenu 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 { Image {
id: pic_icon id: pic_icon
source: typeof(model.menu_icon) === "string" ? model.menu_icon : "" source: typeof(model.menuIcon) === "string" ? model.menuIcon : ""
visible: typeof(model.menu_icon) === "string" visible: typeof(model.menuIcon) === "string"
fillMode:Image.PreserveAspectFit fillMode:Image.PreserveAspectFit
mipmap: true mipmap: true
autoTransform: true autoTransform: true
@ -225,7 +242,7 @@ Popup {
} }
Text{ Text{
id: menu_label 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 color: !mouse.containsMouse && RibbonTheme.modernStyle && item_bg.view.currentIndex === index && item_bg.isCurrentMenu ? RibbonTheme.isDarkMode ? "#779CDB" : "#5882BB" : back_btn.textColor
Layout.alignment: Qt.AlignVCenter Layout.alignment: Qt.AlignVCenter
verticalAlignment: Text.AlignVCenter verticalAlignment: Text.AlignVCenter
@ -241,7 +258,7 @@ Popup {
w += (rib_icon.visible || pic_icon.visible) && menu_label.text ? item.spacing : 0 w += (rib_icon.visible || pic_icon.visible) && menu_label.text ? item.spacing : 0
return item_bg.width - w - item_bg.margins * 4 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 model: control.pageModel
Loader { Loader {
active: SwipeView.isCurrentItem || SwipeView.isNextItem || SwipeView.isPreviousItem 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 sourceComponent: typeof(control.pageModel[modelData.globalIndex].sourceComponent) !== 'undefined' && typeof(modelData.sourceUrl) === 'undefined' ? control.pageModel[modelData.globalIndex].sourceComponent : undefined
onLoaded: { onLoaded: {
if (typeof(modelData.sourceArgs) === 'undefined') if (typeof(modelData.sourceArgs) === 'undefined')

View File

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

View File

@ -1,5 +1,6 @@
import QtQuick 2.15 import QtQuick 2.15
import QtQuick.Layouts 1.11 import QtQuick.Layouts 1.11
import QtQuick.Window 2.15
import RibbonUI 1.0 import RibbonUI 1.0
Item { Item {
@ -13,7 +14,8 @@ Item {
property bool modernStyle: RibbonTheme.modernStyle property bool modernStyle: RibbonTheme.modernStyle
property bool isDarkMode: RibbonTheme.isDarkMode property bool isDarkMode: RibbonTheme.isDarkMode
property bool showVersion: true 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{ anchors{
left: parent.left left: parent.left
@ -21,6 +23,25 @@ Item {
bottom: parent.bottom 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{ Rectangle{
visible: !modernStyle visible: !modernStyle
color: "#3D3D3D" color: "#3D3D3D"
@ -84,4 +105,6 @@ Item {
onClicked: Qt.openUrlExternally("https://github.com/mentalfl0w/RibbonUI") onClicked: Qt.openUrlExternally("https://github.com/mentalfl0w/RibbonUI")
} }
} }
Component.onCompleted: Window.window.bottomBar = root
} }

View File

@ -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]]
}
}
}
}

View File

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

View File

@ -1,6 +1,7 @@
import QtQuick 2.15 import QtQuick 2.15
import QtQuick.Controls 2.15 import QtQuick.Controls 2.15
import QtQuick.Layouts 1.11 import QtQuick.Layouts 1.11
import QtQuick.Window 2.15
import QtGraphicalEffects 1.0 import QtGraphicalEffects 1.0
import RibbonUI 1.0 import RibbonUI 1.0
@ -20,10 +21,12 @@ Item{
property bool modernStyle: RibbonTheme.modernStyle property bool modernStyle: RibbonTheme.modernStyle
property bool isDarkMode: RibbonTheme.isDarkMode property bool isDarkMode: RibbonTheme.isDarkMode
property string bgColor: isDarkMode ? "#2D2D2D" : "#F4F5F3" 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 string borderColor: isDarkMode ? "black" : "#CCCCCC"
property bool showSettingsBtn: true property bool showSettingsBtn: true
property alias count: bar.count property alias count: bar.count
property bool blurEnabled: typeof Window.window.viewItems !== "undefined"
property real modernMargin: modernStyle ? 10 : 0
signal settingsBtnClicked() signal settingsBtnClicked()
@ -57,20 +60,24 @@ Item{
left: parent.left left: parent.left
right: parent.right 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 clip: true
opacity:bgOpacity
Rectangle{ RibbonBlur{
id: blur
anchors.fill: parent anchors.fill: parent
color: bgColor maskColor: bgColor
opacity:bgOpacity maskOpacity: bgOpacity
useSolidBg: true
radius: modernStyle ? 10 :0 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 { ColorAnimation {
duration: 60 duration: 60
easing.type: Easing.OutSine easing.type: Easing.OutSine
@ -278,6 +285,7 @@ Item{
onTriggered: folded = false onTriggered: folded = false
} }
Component.onCompleted: Window.window.tabBar = root
//onModern_styleChanged: refresh() //onModern_styleChanged: refresh()
function addPage(content, is_highlight) function addPage(content, is_highlight)

View File

@ -15,13 +15,14 @@ Popup {
property string contentSource: "RibbonTourContent.qml" property string contentSource: "RibbonTourContent.qml"
property var contentItems: undefined property var contentItems: undefined
property bool destroyAfterClose: true property bool destroyAfterClose: true
property var currentTarget: targetList ? targetList[0].target : parent property var currentTarget: targetList.length ? targetList[0].target : parent
property int currentIndex: 0 property int currentIndex: 0
property bool preferShowAbove: true property bool preferShowAbove: true
property bool useHighlightOrRect: true property bool useHighlightOrRect: true
property real contentEdgeMargin: 10 property real contentEdgeMargin: 10
property alias contentArgs: control.args property alias contentArgs: control.args
property alias alwaysNotAutoPopup: always_hide_ckbox.checked property alias alwaysNotAutoPopup: always_hide_ckbox.checked
default property alias data: data_container.data
modal: true modal: true
margins: 0 margins: 0
padding: 0 padding: 0
@ -33,7 +34,7 @@ Popup {
y: (Overlay.overlay.height - height) / 2 y: (Overlay.overlay.height - height) / 2
closePolicy: Popup.NoAutoClose closePolicy: Popup.NoAutoClose
Overlay.modal:Rectangle{ Overlay.modal:Rectangle{
color: !RibbonTheme.isDarkMode ? Qt.rgba(255,255,255,0.5) : Qt.rgba(0,0,0,0.5) color: !RibbonTheme.isDarkMode ? Qt.alpha("white", 0.5) : Qt.alpha("black", 0.5)
} }
Overlay.modeless:Rectangle{ Overlay.modeless:Rectangle{
color:"transparent" color:"transparent"
@ -85,7 +86,7 @@ Popup {
Loader{ Loader{
id: loader id: loader
sourceComponent: contentSource ? undefined : contentItems sourceComponent: contentSource ? undefined : contentItems
source: contentSource source: targetList.length ? contentSource : ""
onLoaded: { onLoaded: {
if (!control.args) if (!control.args)
return return
@ -115,8 +116,8 @@ Popup {
showTooltip: false showTooltip: false
enabled: popup.currentIndex enabled: popup.currentIndex
onClicked: { onClicked: {
if(popup.targetList[popup.currentIndex].exit_func) if(popup.targetList[popup.currentIndex].exitFunc)
popup.targetList[popup.currentIndex].exit_func() popup.targetList[popup.currentIndex].exitFunc()
popup.currentIndex-- popup.currentIndex--
popup.currentTarget = popup.targetList[popup.currentIndex].target popup.currentTarget = popup.targetList[popup.currentIndex].target
} }
@ -132,8 +133,8 @@ Popup {
} }
else else
{ {
if(popup.targetList[popup.currentIndex].exit_func) if(popup.targetList[popup.currentIndex].exitFunc)
popup.targetList[popup.currentIndex].exit_func() popup.targetList[popup.currentIndex].exitFunc()
popup.currentIndex++ popup.currentIndex++
popup.currentTarget = popup.targetList[popup.currentIndex].target popup.currentTarget = popup.targetList[popup.currentIndex].target
} }
@ -143,6 +144,24 @@ Popup {
} }
} }
Item{
id: data_container
}
Component.onCompleted: {
for(let index = targetList.length; index < data_container.resources.length; index++)
{
if(data_container.resources[index] instanceof RibbonTourItem)
{
let item = data_container.resources[index]
item.getPropertiesReady()
targetList.push(item.properties)
}
}
if(targetList.length)
targetListChanged()
}
Popup{ Popup{
id: rec id: rec
parent: Overlay.overlay parent: Overlay.overlay
@ -168,8 +187,8 @@ Popup {
radius: 5 radius: 5
ShaderEffectSource { ShaderEffectSource {
anchors.centerIn: parent anchors.centerIn: parent
width: currentTarget.width width: currentTarget ? currentTarget.width : 0
height: currentTarget.height height: currentTarget ? currentTarget.height : 0
sourceRect: Qt.rect(0, 0, currentTarget.width, currentTarget.height) sourceRect: Qt.rect(0, 0, currentTarget.width, currentTarget.height)
sourceItem: currentTarget sourceItem: currentTarget
visible: popup.useHighlightOrRect visible: popup.useHighlightOrRect
@ -208,9 +227,13 @@ Popup {
onCurrentTargetChanged: { onCurrentTargetChanged: {
Qt.callLater(function() { Qt.callLater(function() {
if(targetList.length<=0){
popup.close()
return
}
popup.update() popup.update()
if(popup.targetList[popup.currentIndex].enter_func) if(popup.targetList[popup.currentIndex].enterFunc)
popup.targetList[popup.currentIndex].enter_func() popup.targetList[popup.currentIndex].enterFunc()
}) })
} }
@ -229,18 +252,24 @@ Popup {
} }
onAboutToHide: { onAboutToHide: {
if(targetList.length<=0){
return
}
rec.close() rec.close()
if(popup.targetList[popup.currentIndex].exit_func) if(popup.targetList[popup.currentIndex].exitFunc)
popup.targetList[popup.currentIndex].exit_func() popup.targetList[popup.currentIndex].exitFunc()
loader.sourceComponent = undefined loader.sourceComponent = undefined
loader.source = "" loader.source = ""
} }
onAboutToShow: { onAboutToShow: {
if(targetList.length<=0){
return
}
loader.sourceComponent = contentSource ? undefined : contentItems loader.sourceComponent = contentSource ? undefined : contentItems
loader.source = contentSource loader.source = contentSource
rec.open() rec.open()
currentTarget = targetList[0].target currentTarget = targetList.length ? targetList[0].target : parent
currentIndex = 0 currentIndex = 0
} }

View File

@ -0,0 +1,12 @@
import QtQuick 2.15
import RibbonUI 1.0
RibbonObject {
id: control
required property string title
property string text
property var target
property var enterFunc
property var exitFunc
property_names: ['title','text','target','enterFunc','exitFunc']
}

View File

@ -1,6 +1,7 @@
import QtQuick 2.15 import QtQuick 2.15
import QtQuick.Controls 2.15 import QtQuick.Controls 2.15
import QtQuick.Layouts 1.11 import QtQuick.Layouts 1.11
import QtQuick.Window 2.15
import QtGraphicalEffects 1.0 import QtGraphicalEffects 1.0
import RibbonUI 1.0 import RibbonUI 1.0
@ -10,8 +11,6 @@ Item {
property bool modernStyle: RibbonTheme.modernStyle property bool modernStyle: RibbonTheme.modernStyle
property bool isDarkMode: RibbonTheme.isDarkMode property bool isDarkMode: RibbonTheme.isDarkMode
property int spacing: 5 property int spacing: 5
property int topPadding: 0
property int bottomPadding: 0
property alias bgColor: bg.color property alias bgColor: bg.color
property alias bgVisible: bg.visible property alias bgVisible: bg.visible
z:-2 z:-2
@ -25,27 +24,21 @@ Item {
visible: !modernStyle visible: !modernStyle
} }
RibbonBlur{ Item{
id: top_mask id: top_border
anchors{ anchors{
left: parent.left left: parent.left
right: parent.right right: parent.right
top: parent.top 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{ Item{
id: clipper id: clipper
anchors.horizontalCenter: parent.horizontalCenter 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 implicitWidth: parent.width
clip: true clip: true
ColumnLayout{ ColumnLayout{
@ -59,19 +52,15 @@ Item {
} }
} }
RibbonBlur{ Item{
id: bottom_mask id: bottom_border
anchors{ anchors{
left: parent.left left: parent.left
right: parent.right right: parent.right
bottom: parent.bottom 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
} }

View File

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

View File

@ -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']
}

View File

@ -21,7 +21,7 @@ Popup {
property string backText: qsTr("Back") property string backText: qsTr("Back")
property int radius: 0 property int radius: 0
property var pageModel: [] property var pageModel: []
default property alias data: data_container.data
signal backBtnClicked() signal backBtnClicked()
background: Item{} 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() onPageModelChanged: refreshModel()
onAboutToShow: show() onAboutToShow: show()
onBackBtnClicked: hide() onBackBtnClicked: hide()
Item{
id: data_container
}
RibbonBlur{ RibbonBlur{
id: blur_bg id: blur_bg
anchors.fill: parent anchors.fill: parent
@ -204,18 +221,18 @@ Popup {
RibbonIcon{ RibbonIcon{
id :rib_icon id :rib_icon
iconSource: typeof(model.menu_icon) === "number" ? model.menu_icon : 0 iconSource: typeof(model.menuIcon) === "number" ? model.menuIcon : 0
iconSourceFilled: typeof(model.menu_icon_filled) === "number" ? model.menu_icon_filled : iconSource iconSourceFilled: typeof(model.menuIconFilled) === "number" ? model.menuIconFilled : iconSource
iconSize: menu_label.visible ? menu_label.contentHeight : 16 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 Layout.alignment: Qt.AlignVCenter
filled: item_bg.view.currentIndex === index && item_bg.isCurrentMenu 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 { Image {
id: pic_icon id: pic_icon
source: typeof(model.menu_icon) === "string" ? model.menu_icon : "" source: typeof(model.menuIcon) === "string" ? model.menuIcon : ""
visible: typeof(model.menu_icon) === "string" visible: typeof(model.menuIcon) === "string"
fillMode:Image.PreserveAspectFit fillMode:Image.PreserveAspectFit
mipmap: true mipmap: true
autoTransform: true autoTransform: true
@ -225,7 +242,7 @@ Popup {
} }
Text{ Text{
id: menu_label 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 color: !mouse.containsMouse && RibbonTheme.modernStyle && item_bg.view.currentIndex === index && item_bg.isCurrentMenu ? RibbonTheme.isDarkMode ? "#779CDB" : "#5882BB" : back_btn.textColor
Layout.alignment: Qt.AlignVCenter Layout.alignment: Qt.AlignVCenter
verticalAlignment: Text.AlignVCenter verticalAlignment: Text.AlignVCenter
@ -241,7 +258,7 @@ Popup {
w += (rib_icon.visible || pic_icon.visible) && menu_label.text ? item.spacing : 0 w += (rib_icon.visible || pic_icon.visible) && menu_label.text ? item.spacing : 0
return item_bg.width - w - item_bg.margins * 4 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 model: control.pageModel
Loader { Loader {
active: SwipeView.isCurrentItem || SwipeView.isNextItem || SwipeView.isPreviousItem 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 sourceComponent: typeof(control.pageModel[modelData.globalIndex].sourceComponent) !== 'undefined' && typeof(modelData.sourceUrl) === 'undefined' ? control.pageModel[modelData.globalIndex].sourceComponent : undefined
onLoaded: { onLoaded: {
if (typeof(modelData.sourceArgs) === 'undefined') if (typeof(modelData.sourceArgs) === 'undefined')

View File

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

View File

@ -1,5 +1,6 @@
import QtQuick import QtQuick
import QtQuick.Layouts import QtQuick.Layouts
import QtQuick.Window
import RibbonUI import RibbonUI
Item { Item {
@ -13,7 +14,8 @@ Item {
property bool modernStyle: RibbonTheme.modernStyle property bool modernStyle: RibbonTheme.modernStyle
property bool isDarkMode: RibbonTheme.isDarkMode property bool isDarkMode: RibbonTheme.isDarkMode
property bool showVersion: true 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{ anchors{
left: parent.left left: parent.left
@ -21,6 +23,25 @@ Item {
bottom: parent.bottom 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{ Rectangle{
visible: !modernStyle visible: !modernStyle
color: "#3D3D3D" color: "#3D3D3D"
@ -84,4 +105,6 @@ Item {
onClicked: Qt.openUrlExternally("https://github.com/mentalfl0w/RibbonUI") onClicked: Qt.openUrlExternally("https://github.com/mentalfl0w/RibbonUI")
} }
} }
Component.onCompleted: Window.window.bottomBar = root
} }

View File

@ -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]]
}
}
}
}

View File

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

View File

@ -1,6 +1,7 @@
import QtQuick import QtQuick
import QtQuick.Controls import QtQuick.Controls
import QtQuick.Layouts import QtQuick.Layouts
import QtQuick.Window
import Qt5Compat.GraphicalEffects import Qt5Compat.GraphicalEffects
import RibbonUI import RibbonUI
@ -20,10 +21,12 @@ Item{
property bool modernStyle: RibbonTheme.modernStyle property bool modernStyle: RibbonTheme.modernStyle
property bool isDarkMode: RibbonTheme.isDarkMode property bool isDarkMode: RibbonTheme.isDarkMode
property string bgColor: isDarkMode ? "#2D2D2D" : "#F4F5F3" 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 string borderColor: isDarkMode ? "black" : "#CCCCCC"
property bool showSettingsBtn: true property bool showSettingsBtn: true
property alias count: bar.count property alias count: bar.count
property bool blurEnabled: typeof Window.window.viewItems !== "undefined"
property real modernMargin: modernStyle ? 10 : 0
signal settingsBtnClicked() signal settingsBtnClicked()
@ -57,20 +60,24 @@ Item{
left: parent.left left: parent.left
right: parent.right 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 clip: true
opacity:bgOpacity
Rectangle{ RibbonBlur{
id: blur
anchors.fill: parent anchors.fill: parent
color: bgColor maskColor: bgColor
opacity:bgOpacity maskOpacity: bgOpacity
useSolidBg: true
radius: modernStyle ? 10 :0 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 { ColorAnimation {
duration: 60 duration: 60
easing.type: Easing.OutSine easing.type: Easing.OutSine
@ -278,6 +285,8 @@ Item{
onTriggered: folded = false onTriggered: folded = false
} }
Component.onCompleted: Window.window.tabBar = root
//onModern_styleChanged: refresh() //onModern_styleChanged: refresh()
function addPage(content, is_highlight) function addPage(content, is_highlight)

View File

@ -16,13 +16,14 @@ Popup {
property string contentSource: "RibbonTourContent.qml" property string contentSource: "RibbonTourContent.qml"
property var contentItems: undefined property var contentItems: undefined
property bool destroyAfterClose: true property bool destroyAfterClose: true
property var currentTarget: targetList ? targetList[0].target : parent property var currentTarget: targetList.length ? targetList[0].target : parent
property int currentIndex: 0 property int currentIndex: 0
property bool preferShowAbove: true property bool preferShowAbove: true
property bool useHighlightOrRect: true property bool useHighlightOrRect: true
property real contentEdgeMargin: 10 property real contentEdgeMargin: 10
property alias contentArgs: control.args property alias contentArgs: control.args
property alias alwaysNotAutoPopup: always_hide_ckbox.checked property alias alwaysNotAutoPopup: always_hide_ckbox.checked
default property alias data: data_container.data
modal: true modal: true
margins: 0 margins: 0
padding: 0 padding: 0
@ -86,7 +87,7 @@ Popup {
Loader{ Loader{
id: loader id: loader
sourceComponent: contentSource ? undefined : contentItems sourceComponent: contentSource ? undefined : contentItems
source: contentSource source: targetList.length ? contentSource : ""
onLoaded: { onLoaded: {
if (!control.args) if (!control.args)
return return
@ -116,8 +117,8 @@ Popup {
showTooltip: false showTooltip: false
enabled: popup.currentIndex enabled: popup.currentIndex
onClicked: { onClicked: {
if(popup.targetList[popup.currentIndex].exit_func) if(popup.targetList[popup.currentIndex].exitFunc)
popup.targetList[popup.currentIndex].exit_func() popup.targetList[popup.currentIndex].exitFunc()
popup.currentIndex-- popup.currentIndex--
popup.currentTarget = popup.targetList[popup.currentIndex].target popup.currentTarget = popup.targetList[popup.currentIndex].target
} }
@ -133,8 +134,8 @@ Popup {
} }
else else
{ {
if(popup.targetList[popup.currentIndex].exit_func) if(popup.targetList[popup.currentIndex].exitFunc)
popup.targetList[popup.currentIndex].exit_func() popup.targetList[popup.currentIndex].exitFunc()
popup.currentIndex++ popup.currentIndex++
popup.currentTarget = popup.targetList[popup.currentIndex].target popup.currentTarget = popup.targetList[popup.currentIndex].target
} }
@ -144,6 +145,24 @@ Popup {
} }
} }
Item{
id: data_container
}
Component.onCompleted: {
for(let index = targetList.length; index < data_container.resources.length; index++)
{
if(data_container.resources[index] instanceof RibbonTourItem)
{
let item = data_container.resources[index]
item.getPropertiesReady()
targetList.push(item.properties)
}
}
if(targetList.length)
targetListChanged()
}
Popup{ Popup{
id: rec id: rec
parent: Overlay.overlay parent: Overlay.overlay
@ -169,8 +188,8 @@ Popup {
radius: 5 radius: 5
ShaderEffectSource { ShaderEffectSource {
anchors.centerIn: parent anchors.centerIn: parent
width: currentTarget.width width: currentTarget ? currentTarget.width : 0
height: currentTarget.height height: currentTarget ? currentTarget.height : 0
sourceRect: Qt.rect(0, 0, currentTarget.width, currentTarget.height) sourceRect: Qt.rect(0, 0, currentTarget.width, currentTarget.height)
sourceItem: currentTarget sourceItem: currentTarget
visible: popup.useHighlightOrRect visible: popup.useHighlightOrRect
@ -209,9 +228,13 @@ Popup {
onCurrentTargetChanged: { onCurrentTargetChanged: {
Qt.callLater(function() { Qt.callLater(function() {
if(targetList.length<=0){
popup.close()
return
}
popup.update() popup.update()
if(popup.targetList[popup.currentIndex].enter_func) if(popup.targetList[popup.currentIndex].enterFunc)
popup.targetList[popup.currentIndex].enter_func() popup.targetList[popup.currentIndex].enterFunc()
}) })
} }
@ -230,18 +253,24 @@ Popup {
} }
onAboutToHide: { onAboutToHide: {
if(targetList.length<=0){
return
}
rec.close() rec.close()
if(popup.targetList[popup.currentIndex].exit_func) if(popup.targetList[popup.currentIndex].exitFunc)
popup.targetList[popup.currentIndex].exit_func() popup.targetList[popup.currentIndex].exitFunc()
loader.sourceComponent = undefined loader.sourceComponent = undefined
loader.source = "" loader.source = ""
} }
onAboutToShow: { onAboutToShow: {
if(targetList.length<=0){
return
}
loader.sourceComponent = contentSource ? undefined : contentItems loader.sourceComponent = contentSource ? undefined : contentItems
loader.source = contentSource loader.source = contentSource
rec.open() rec.open()
currentTarget = targetList[0].target currentTarget = targetList.length ? targetList[0].target : parent
currentIndex = 0 currentIndex = 0
} }

View File

@ -0,0 +1,12 @@
import QtQuick
import RibbonUI
RibbonObject {
id: control
required property string title
property string text
property var target
property var enterFunc
property var exitFunc
property_names: ['title','text','target','enterFunc','exitFunc']
}

View File

@ -1,6 +1,7 @@
import QtQuick import QtQuick
import QtQuick.Controls import QtQuick.Controls
import QtQuick.Layouts import QtQuick.Layouts
import QtQuick.Window
import Qt5Compat.GraphicalEffects import Qt5Compat.GraphicalEffects
import RibbonUI import RibbonUI
@ -10,8 +11,6 @@ Item {
property bool modernStyle: RibbonTheme.modernStyle property bool modernStyle: RibbonTheme.modernStyle
property bool isDarkMode: RibbonTheme.isDarkMode property bool isDarkMode: RibbonTheme.isDarkMode
property int spacing: 5 property int spacing: 5
property int topPadding: 0
property int bottomPadding: 0
property alias bgColor: bg.color property alias bgColor: bg.color
property alias bgVisible: bg.visible property alias bgVisible: bg.visible
z:-2 z:-2
@ -25,27 +24,21 @@ Item {
visible: !modernStyle visible: !modernStyle
} }
RibbonBlur{ Item{
id: top_mask id: top_border
anchors{ anchors{
left: parent.left left: parent.left
right: parent.right right: parent.right
top: parent.top 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{ Item{
id: clipper id: clipper
anchors.horizontalCenter: parent.horizontalCenter 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 implicitWidth: parent.width
clip: true clip: true
ColumnLayout{ ColumnLayout{
@ -59,19 +52,15 @@ Item {
} }
} }
RibbonBlur{ Item{
id: bottom_mask id: bottom_border
anchors{ anchors{
left: parent.left left: parent.left
right: parent.right right: parent.right
bottom: parent.bottom 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
} }

View File

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