Mentalflow
/
RibbonUI
mirror of https://github.com/mentalfl0w/RibbonUI.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

RibbonTour and exmaple: Add RibbonTourItem for convenient use and add titleBar icon switch for example's settings.

This commit is contained in:
Mentalflow 2024-06-23 02:19:09 +08:00
parent 2c13c9c26b
commit 8a88080f4d
Signed by: Mentalflow
GPG Key ID: 5AE68D4401A2EE71
10 changed files with 301 additions and 179 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
example/qml/Qt5/about.qml
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 {

148
example/qml/Qt5/example.qml
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, enterFunc: ()=>{
enter_func: ()=>{ 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) }
}, exitFunc: ()=>{
exit_func: ()=>{ 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, enterFunc: ()=>btn_with_color_and_grabberText.checked = true
enter_func: ()=>btn_with_color_and_grabberText.checked = true, exitFunc: ()=>btn_with_color_and_grabberText.checked = false
exit_func: ()=>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, enterFunc: ()=>btn_without_bg_and_label.checked = true
enter_func: ()=>btn_without_bg_and_label.checked = true, exitFunc: ()=>btn_without_bg_and_label.checked = false
exit_func: ()=>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, enterFunc: ()=>{
enter_func: ()=>{ 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) }
}, exitFunc: ()=>{
exit_func: ()=>{ 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)

23
example/qml/Qt5/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
}
}
}
}
} }
} }

148
example/qml/Qt6/example.qml
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, enterFunc: ()=>{
enter_func: ()=>{ 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) }
}, exitFunc: ()=>{
exit_func: ()=>{ 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, enterFunc: ()=>btn_with_color_and_grabberText.checked = true
enter_func: ()=>btn_with_color_and_grabberText.checked = true, exitFunc: ()=>btn_with_color_and_grabberText.checked = false
exit_func: ()=>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, enterFunc: ()=>btn_without_bg_and_label.checked = true
enter_func: ()=>btn_without_bg_and_label.checked = true, exitFunc: ()=>btn_without_bg_and_label.checked = false
exit_func: ()=>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, enterFunc: ()=>{
enter_func: ()=>{ 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) }
}, exitFunc: ()=>{
exit_func: ()=>{ 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)

21
example/qml/Qt6/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
}
}
}
}
} }
} }

3
lib_source/CMakeLists.txt
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 RibbonBackStageMenuItem.qml RibbonObject.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}/")

57
lib_source/qml/Qt5/RibbonTour.qml
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
} }

12
lib_source/qml/Qt5/RibbonTourItem.qml Normal file
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']
}

55
lib_source/qml/Qt6/RibbonTour.qml
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
} }

12
lib_source/qml/Qt6/RibbonTourItem.qml Normal file
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']
}