RibbonTour and RibbonTourContent: Added.
This commit is contained in:
parent
8cd8b65f49
commit
38d5ca8d89
GPG Key ID:
5AE68D4401A2EE71
|
|
@ -0,0 +1,340 @@
|
|||
import QtQuick
|
||||
import QtQuick.Layouts
|
||||
import QtQuick.Controls
|
||||
import QtQuick.Window
|
||||
import RibbonUI
|
||||
import Qt5Compat.GraphicalEffects
|
||||
|
||||
Popup {
|
||||
id: popup
|
||||
parent: Overlay.overlay
|
||||
property var targetList: []
|
||||
property bool blur_enabled: false
|
||||
property alias target: blur.target
|
||||
property alias target_rect: blur.target_rect
|
||||
property alias radius: blur.radius
|
||||
property string content_source: "RibbonTourContent.qml"
|
||||
property var content_items: undefined
|
||||
property bool destroy_after_close: true
|
||||
property var currentTarget: targetList ? targetList[0].target : parent
|
||||
property int currentIndex: 0
|
||||
property bool preferShowAbove: true
|
||||
property bool useHighlightOrRect: true
|
||||
property real contentEdgeMargin: 10
|
||||
property alias content_args: control.args
|
||||
property alias alwaysNotAutoPopup: always_hide_ckbox.checked
|
||||
modal: true
|
||||
margins: 0
|
||||
padding: 0
|
||||
topInset: 0
|
||||
leftInset: 0
|
||||
rightInset: 0
|
||||
bottomInset: 0
|
||||
closePolicy: Popup.NoAutoClose
|
||||
Overlay.modal:Rectangle{
|
||||
color: !RibbonTheme.dark_mode ? Qt.alpha("white", 0.5) : Qt.alpha("black", 0.5)
|
||||
}
|
||||
Overlay.modeless:Rectangle{
|
||||
color:"transparent"
|
||||
}
|
||||
background: Item{
|
||||
RectangularGlow {
|
||||
id: effect
|
||||
anchors.fill: blur
|
||||
anchors.margins: blur.mask_border.width
|
||||
glowRadius: 10
|
||||
spread: 0
|
||||
color: RibbonTheme.dark_mode ? Qt.rgba(0,0,0,0.7) : Qt.rgba(0,0,0,0.45)
|
||||
cornerRadius: blur.radius + glowRadius + 10
|
||||
}
|
||||
RibbonBlur{
|
||||
implicitHeight: parent.height
|
||||
implicitWidth: parent.width
|
||||
id: blur
|
||||
radius: 10
|
||||
mask_opacity: blur_enabled ? 0.9 : 1
|
||||
mask_border.color: RibbonTheme.modern_style ?
|
||||
RibbonTheme.dark_mode ? "#7A7A7A" : "#2C59B7" :
|
||||
RibbonTheme.dark_mode ? "#5C5D5D" : "#B5B4B5"
|
||||
mask_border.width: 1
|
||||
}
|
||||
}
|
||||
contentItem: Item{
|
||||
id: control
|
||||
x:0
|
||||
y:0
|
||||
implicitHeight: container.height
|
||||
implicitWidth: container.width
|
||||
property var args
|
||||
RibbonButton{
|
||||
anchors{
|
||||
top:parent.top
|
||||
topMargin: 8
|
||||
right:parent.right
|
||||
rightMargin: anchors.topMargin
|
||||
}
|
||||
show_bg: false
|
||||
show_hovered_bg: false
|
||||
icon_source: RibbonIcons.Dismiss
|
||||
onClicked: popup.close()
|
||||
}
|
||||
ColumnLayout{
|
||||
id: container
|
||||
spacing: 10
|
||||
Loader{
|
||||
width: item ? item.implicitWidth : 50
|
||||
height: item ? item.implicitHeight : 50
|
||||
sourceComponent: content_source ? undefined : content_items
|
||||
source: content_source
|
||||
onLoaded: {
|
||||
if (!control.args)
|
||||
return
|
||||
else if(Object.keys(control.args).length){
|
||||
for (let arg in control.args){
|
||||
item[arg] = control.args[arg]
|
||||
}
|
||||
}
|
||||
else{
|
||||
console.error("RibbonTour: Arguments error, please check.")
|
||||
}
|
||||
}
|
||||
}
|
||||
RowLayout{
|
||||
Layout.leftMargin: 10
|
||||
Layout.rightMargin: Layout.leftMargin
|
||||
Layout.bottomMargin: Layout.leftMargin
|
||||
spacing: 20
|
||||
RibbonCheckBox{
|
||||
id: always_hide_ckbox
|
||||
show_tooltip: false
|
||||
text: qsTr("Don't auto pop up")
|
||||
}
|
||||
RibbonButton{
|
||||
id: previous_btn
|
||||
text: qsTr("Previous")
|
||||
show_tooltip: false
|
||||
enabled: popup.currentIndex
|
||||
onClicked: {
|
||||
if(popup.targetList[popup.currentIndex].exit_func)
|
||||
popup.targetList[popup.currentIndex].exit_func()
|
||||
popup.currentIndex--
|
||||
popup.currentTarget = popup.targetList[popup.currentIndex].target
|
||||
}
|
||||
}
|
||||
RibbonButton{
|
||||
id: next_btn
|
||||
text: (popup.currentIndex + 1) === popup.targetList.length ? qsTr("Finish") : qsTr("Next")
|
||||
show_tooltip: false
|
||||
onClicked: {
|
||||
if ((popup.currentIndex + 1) === popup.targetList.length)
|
||||
{
|
||||
popup.close()
|
||||
}
|
||||
else
|
||||
{
|
||||
if(popup.targetList[popup.currentIndex].exit_func)
|
||||
popup.targetList[popup.currentIndex].exit_func()
|
||||
popup.currentIndex++
|
||||
popup.currentTarget = popup.targetList[popup.currentIndex].target
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Popup{
|
||||
id: rec
|
||||
parent: Overlay.overlay
|
||||
margins: 0
|
||||
padding: 0
|
||||
topInset: 0
|
||||
leftInset: 0
|
||||
rightInset: 0
|
||||
bottomInset: 0
|
||||
closePolicy: Popup.NoAutoClose
|
||||
property int borderWidth: popup.useHighlightOrRect ? 0 : 3
|
||||
Overlay.modal:Rectangle{
|
||||
color:"transparent"
|
||||
}
|
||||
Overlay.modeless:Rectangle{
|
||||
color:"transparent"
|
||||
}
|
||||
background: Item{}
|
||||
contentItem:Rectangle{
|
||||
color: 'transparent'
|
||||
border.width: rec.borderWidth
|
||||
border.color: RibbonTheme.dark_mode ? "#3B69DA" : "#2C59B7"
|
||||
radius: 5
|
||||
ShaderEffectSource {
|
||||
anchors.centerIn: parent
|
||||
width: currentTarget.width
|
||||
height: currentTarget.height
|
||||
sourceRect: Qt.rect(0, 0, currentTarget.width, currentTarget.height)
|
||||
sourceItem: currentTarget
|
||||
visible: popup.useHighlightOrRect
|
||||
}
|
||||
}
|
||||
Behavior on x {
|
||||
enabled: !popup.useHighlightOrRect
|
||||
NumberAnimation {
|
||||
id: ani
|
||||
duration: 300
|
||||
easing.type: Easing.OutSine
|
||||
}
|
||||
}
|
||||
Behavior on y {
|
||||
enabled: !popup.useHighlightOrRect
|
||||
NumberAnimation {
|
||||
duration: 300
|
||||
easing.type: Easing.OutSine
|
||||
}
|
||||
}
|
||||
Behavior on contentWidth {
|
||||
enabled: !popup.useHighlightOrRect
|
||||
NumberAnimation {
|
||||
duration: 300
|
||||
easing.type: Easing.OutSine
|
||||
}
|
||||
}
|
||||
Behavior on contentHeight {
|
||||
enabled: !popup.useHighlightOrRect
|
||||
NumberAnimation {
|
||||
duration: 300
|
||||
easing.type: Easing.OutSine
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
onCurrentTargetChanged: {
|
||||
Qt.callLater(function() {
|
||||
popup.update()
|
||||
if(popup.targetList[popup.currentIndex].enter_func)
|
||||
popup.targetList[popup.currentIndex].enter_func()
|
||||
})
|
||||
}
|
||||
|
||||
Behavior on x {
|
||||
NumberAnimation {
|
||||
duration: 300
|
||||
easing.type: Easing.OutSine
|
||||
}
|
||||
}
|
||||
|
||||
Behavior on y {
|
||||
NumberAnimation {
|
||||
duration: 300
|
||||
easing.type: Easing.OutSine
|
||||
}
|
||||
}
|
||||
|
||||
onAboutToHide: {
|
||||
rec.close()
|
||||
if(popup.targetList[popup.currentIndex].exit_func)
|
||||
popup.targetList[popup.currentIndex].exit_func()
|
||||
}
|
||||
|
||||
onAboutToShow: {
|
||||
rec.open()
|
||||
currentTarget = targetList[0].target
|
||||
currentIndex = 0
|
||||
}
|
||||
|
||||
enter: Transition {
|
||||
NumberAnimation {
|
||||
properties: "scale"
|
||||
from:0.5
|
||||
to:1
|
||||
duration: 100
|
||||
easing.type: Easing.OutSine
|
||||
}
|
||||
NumberAnimation {
|
||||
property: "opacity"
|
||||
duration: 100
|
||||
from:0
|
||||
to:1
|
||||
easing.type: Easing.OutSine
|
||||
}
|
||||
}
|
||||
exit:Transition {
|
||||
NumberAnimation {
|
||||
properties: "scale"
|
||||
from:1
|
||||
to:0.5
|
||||
duration: 100
|
||||
easing.type: Easing.OutSine
|
||||
}
|
||||
NumberAnimation {
|
||||
property: "opacity"
|
||||
duration: 100
|
||||
from:1
|
||||
to:0
|
||||
easing.type: Easing.OutSine
|
||||
}
|
||||
}
|
||||
|
||||
Timer{
|
||||
id: refresh_timer
|
||||
interval: 200
|
||||
repeat: false
|
||||
triggeredOnStart: false
|
||||
onTriggered: Qt.callLater(()=>{
|
||||
popup.update()
|
||||
rec.visible = true
|
||||
})
|
||||
}
|
||||
|
||||
function getX()
|
||||
{
|
||||
let targetX = currentTarget.mapToGlobal(0,0).x
|
||||
let showX = (targetX + currentTarget.width/2) - (width/2)
|
||||
showX = Overlay.overlay.mapFromGlobal(showX,0).x
|
||||
if(showX < contentEdgeMargin)
|
||||
return contentEdgeMargin
|
||||
if((showX + width + contentEdgeMargin) >Overlay.overlay.width)
|
||||
return Overlay.overlay.width - width - contentEdgeMargin
|
||||
return showX
|
||||
}
|
||||
|
||||
function getY()
|
||||
{
|
||||
let targetY = currentTarget.mapToGlobal(0,0).y
|
||||
let showY = targetY + (preferShowAbove ? - height - contentEdgeMargin : currentTarget.height + contentEdgeMargin)
|
||||
let sub_showY = targetY + (preferShowAbove ? currentTarget.height + contentEdgeMargin : - height - contentEdgeMargin)
|
||||
showY = Overlay.overlay.mapFromGlobal(0,showY).y
|
||||
sub_showY = Overlay.overlay.mapFromGlobal(0,sub_showY).y
|
||||
if(showY < 30)
|
||||
{
|
||||
if (sub_showY < 30)
|
||||
return 30
|
||||
else
|
||||
return sub_showY
|
||||
}
|
||||
if((showY + height + contentEdgeMargin) > Overlay.overlay.height)
|
||||
{
|
||||
if ((sub_showY + height + contentEdgeMargin) > Overlay.overlay.height)
|
||||
return Overlay.overlay.height - height - contentEdgeMargin
|
||||
else
|
||||
return sub_showY
|
||||
}
|
||||
return showY
|
||||
}
|
||||
|
||||
function refresh(delay)
|
||||
{
|
||||
rec.visible = false
|
||||
if(typeof(delay) != 'undefined')
|
||||
refresh_timer.interval = delay
|
||||
refresh_timer.start()
|
||||
}
|
||||
|
||||
function update()
|
||||
{
|
||||
popup.x = getX()
|
||||
popup.y = getY()
|
||||
rec.x = Overlay.overlay.mapFromGlobal(currentTarget.mapToGlobal(0,0).x,0).x - rec.borderWidth*2
|
||||
rec.y = Overlay.overlay.mapFromGlobal(0, currentTarget.mapToGlobal(0,0).y).y - rec.borderWidth*2
|
||||
rec.contentWidth = currentTarget.width + rec.borderWidth*4
|
||||
rec.contentHeight = currentTarget.height + rec.borderWidth*4
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
import QtQuick
|
||||
import QtQuick.Layouts
|
||||
import QtQuick.Controls
|
||||
import QtQuick.Window
|
||||
import RibbonUI
|
||||
|
||||
Item {
|
||||
id:control
|
||||
implicitHeight: layout.implicitHeight
|
||||
implicitWidth: 300
|
||||
property real content_margins: 20
|
||||
|
||||
ColumnLayout{
|
||||
id:layout
|
||||
anchors.centerIn: parent
|
||||
width: parent.width
|
||||
RibbonText{
|
||||
Layout.preferredWidth: parent.width - leftPadding - rightPadding
|
||||
font.pixelSize: 22
|
||||
text: popup.targetList[popup.currentIndex].title
|
||||
view_only: true
|
||||
topPadding: content_margins * 3 / 4
|
||||
leftPadding: content_margins
|
||||
rightPadding: content_margins
|
||||
wrapMode: Text.WrapAtWordBoundaryOrAnywhere
|
||||
color: RibbonTheme.modern_style ?
|
||||
dark_mode ? '#8AAAEB' : '#2C59B7' :
|
||||
dark_mode ? "white" : "black"
|
||||
verticalAlignment: Text.AlignVCenter
|
||||
}
|
||||
RibbonText{
|
||||
Layout.preferredWidth: parent.width - leftPadding - rightPadding
|
||||
font.pixelSize: 13
|
||||
wrapMode: Text.WrapAtWordBoundaryOrAnywhere
|
||||
verticalAlignment: Text.AlignVCenter
|
||||
text: popup.targetList[popup.currentIndex].text
|
||||
view_only: true
|
||||
topPadding: content_margins * 3 / 4
|
||||
leftPadding: content_margins
|
||||
rightPadding: content_margins
|
||||
bottomPadding: content_margins * 3 / 4
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue