RibbonProgressBar: Added.
This commit is contained in:
parent
2071679e40
commit
c9600ecb3c
GPG Key ID:
5AE68D4401A2EE71
|
|
@ -535,6 +535,84 @@ RibbonWindow {
|
|||
}
|
||||
}
|
||||
}
|
||||
RibbonTabPage{
|
||||
title: qsTr("Progress")
|
||||
RibbonTabGroup{
|
||||
width: progressbar_layout.width + 30
|
||||
text: qsTr("ProgressBar")
|
||||
RowLayout{
|
||||
id: progressbar_layout
|
||||
anchors.centerIn: parent
|
||||
height: parent.height
|
||||
spacing: 10
|
||||
ColumnLayout{
|
||||
RibbonProgressBar{
|
||||
barWidth: 100
|
||||
value: progressbar_slider.value / 100
|
||||
textLabelPosition: RibbonProgressBar.LabelPosition.Top
|
||||
}
|
||||
RibbonProgressBar{
|
||||
barWidth: 100
|
||||
value: progressbar_slider.value / 100
|
||||
textLabelPosition: RibbonProgressBar.LabelPosition.Left
|
||||
}
|
||||
RibbonProgressBar{
|
||||
barWidth: 100
|
||||
value: progressbar_slider.value / 100
|
||||
textLabelPosition: RibbonProgressBar.LabelPosition.Right
|
||||
}
|
||||
RibbonProgressBar{
|
||||
barWidth: 100
|
||||
value: progressbar_slider.value / 100
|
||||
textLabelPosition: RibbonProgressBar.LabelPosition.Bottom
|
||||
}
|
||||
}
|
||||
RibbonSlider{
|
||||
id: progressbar_slider
|
||||
Layout.alignment: Qt.AlignHCenter
|
||||
slideWidth: 40
|
||||
horizontal: false
|
||||
showButton: false
|
||||
value: 40
|
||||
}
|
||||
ColumnLayout{
|
||||
RibbonProgressBar{
|
||||
barWidth: 100
|
||||
indeterminate: true
|
||||
textLabelPosition: RibbonProgressBar.LabelPosition.Top
|
||||
}
|
||||
RibbonProgressBar{
|
||||
barWidth: 100
|
||||
indeterminate: true
|
||||
textLabelPosition: RibbonProgressBar.LabelPosition.Left
|
||||
}
|
||||
RibbonProgressBar{
|
||||
barWidth: 100
|
||||
indeterminate: true
|
||||
textLabelPosition: RibbonProgressBar.LabelPosition.Right
|
||||
}
|
||||
RibbonProgressBar{
|
||||
barWidth: 100
|
||||
indeterminate: true
|
||||
textLabelPosition: RibbonProgressBar.LabelPosition.Bottom
|
||||
}
|
||||
}
|
||||
ColumnLayout{
|
||||
RibbonProgressBar{
|
||||
barWidth: 100
|
||||
indeterminate: true
|
||||
showText: false
|
||||
}
|
||||
RibbonProgressBar{
|
||||
barWidth: 100
|
||||
indeterminate: false
|
||||
showText: false
|
||||
value: progressbar_slider.value / 100
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
RibbonTabPage{
|
||||
title: qsTr("Views")
|
||||
RibbonTabGroup{
|
||||
|
|
|
|||
|
|
@ -535,6 +535,84 @@ RibbonWindow {
|
|||
}
|
||||
}
|
||||
}
|
||||
RibbonTabPage{
|
||||
title: qsTr("Progress")
|
||||
RibbonTabGroup{
|
||||
width: progressbar_layout.width + 30
|
||||
text: qsTr("ProgressBar")
|
||||
RowLayout{
|
||||
id: progressbar_layout
|
||||
anchors.centerIn: parent
|
||||
height: parent.height
|
||||
spacing: 10
|
||||
ColumnLayout{
|
||||
RibbonProgressBar{
|
||||
barWidth: 100
|
||||
value: progressbar_slider.value / 100
|
||||
textLabelPosition: RibbonProgressBar.LabelPosition.Top
|
||||
}
|
||||
RibbonProgressBar{
|
||||
barWidth: 100
|
||||
value: progressbar_slider.value / 100
|
||||
textLabelPosition: RibbonProgressBar.LabelPosition.Left
|
||||
}
|
||||
RibbonProgressBar{
|
||||
barWidth: 100
|
||||
value: progressbar_slider.value / 100
|
||||
textLabelPosition: RibbonProgressBar.LabelPosition.Right
|
||||
}
|
||||
RibbonProgressBar{
|
||||
barWidth: 100
|
||||
value: progressbar_slider.value / 100
|
||||
textLabelPosition: RibbonProgressBar.LabelPosition.Bottom
|
||||
}
|
||||
}
|
||||
RibbonSlider{
|
||||
id: progressbar_slider
|
||||
Layout.alignment: Qt.AlignHCenter
|
||||
slideWidth: 40
|
||||
horizontal: false
|
||||
showButton: false
|
||||
value: 40
|
||||
}
|
||||
ColumnLayout{
|
||||
RibbonProgressBar{
|
||||
barWidth: 100
|
||||
indeterminate: true
|
||||
textLabelPosition: RibbonProgressBar.LabelPosition.Top
|
||||
}
|
||||
RibbonProgressBar{
|
||||
barWidth: 100
|
||||
indeterminate: true
|
||||
textLabelPosition: RibbonProgressBar.LabelPosition.Left
|
||||
}
|
||||
RibbonProgressBar{
|
||||
barWidth: 100
|
||||
indeterminate: true
|
||||
textLabelPosition: RibbonProgressBar.LabelPosition.Right
|
||||
}
|
||||
RibbonProgressBar{
|
||||
barWidth: 100
|
||||
indeterminate: true
|
||||
textLabelPosition: RibbonProgressBar.LabelPosition.Bottom
|
||||
}
|
||||
}
|
||||
ColumnLayout{
|
||||
RibbonProgressBar{
|
||||
barWidth: 100
|
||||
indeterminate: true
|
||||
showText: false
|
||||
}
|
||||
RibbonProgressBar{
|
||||
barWidth: 100
|
||||
indeterminate: false
|
||||
showText: false
|
||||
value: progressbar_slider.value / 100
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
RibbonTabPage{
|
||||
title: qsTr("Views")
|
||||
RibbonTabGroup{
|
||||
|
|
|
|||
|
|
@ -40,7 +40,7 @@ set(qml_files RibbonTabBar.qml RibbonTabButton.qml RibbonView.qml
|
|||
RibbonMessageListView.qml RibbonTour.qml RibbonTourContent.qml
|
||||
RibbonBackStageView.qml RibbonBackStagePage.qml RibbonBackStageGroup.qml
|
||||
RibbonRadioButton.qml RibbonBackStageMenuItem.qml RibbonTourItem.qml
|
||||
RibbonObject.qml)
|
||||
RibbonObject.qml RibbonProgressBar.qml)
|
||||
|
||||
set(qml_prefix "qml/Qt${QT_VERSION_MAJOR}/")
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,126 @@
|
|||
import QtQuick 2.15
|
||||
import QtQuick.Controls 2.15
|
||||
import QtGraphicalEffects 1.0
|
||||
import RibbonUI 1.0
|
||||
|
||||
Item{
|
||||
id: control
|
||||
implicitHeight: (textLabelPosition === RibbonProgressBar.LabelPosition.Top || textLabelPosition === RibbonProgressBar.LabelPosition.Bottom && showText ?
|
||||
(text_label.contentHeight + textLabelMargin + bar.implicitHeight) : showText ? Math.max(bar.implicitHeight, text_label.contentHeight) : bar.implicitHeight)
|
||||
implicitWidth: bar.implicitWidth + (textLabelPosition === RibbonProgressBar.LabelPosition.Left || textLabelPosition === RibbonProgressBar.LabelPosition.Right && showText ?
|
||||
(text_label.contentWidth + textLabelMargin) : 0)
|
||||
enum LabelPosition {
|
||||
Top,
|
||||
Left,
|
||||
Right,
|
||||
Bottom
|
||||
}
|
||||
property color indicatorColor: RibbonTheme.isDarkMode ? "#8AAAEB" : "#5DA3E8"
|
||||
property color bgColor: RibbonTheme.isDarkMode ? "#6C6C6C" : "#EFEFEF"
|
||||
property int barWidth: 200
|
||||
property int barHeight: 6
|
||||
property bool showText: true
|
||||
property int textLabelMargin: textLabelPosition === RibbonProgressBar.LabelPosition.Top || textLabelPosition === RibbonProgressBar.LabelPosition.Bottom ? 0 : 5
|
||||
property int animationDurarion: 800
|
||||
property int indeterminateWidth: barWidth * 0.25
|
||||
property int textLabelPosition: bar.mirrored ? RibbonProgressBar.LabelPosition.Left : RibbonProgressBar.LabelPosition.Right
|
||||
property string text: qsTr("Loading")
|
||||
property alias value: bar.value
|
||||
property alias visualPosition: bar.visualPosition
|
||||
property alias position: bar.position
|
||||
property alias indeterminate: bar.indeterminate
|
||||
property alias bar: bar
|
||||
|
||||
ProgressBar {
|
||||
id: bar
|
||||
clip: true
|
||||
implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
|
||||
implicitContentWidth + leftPadding + rightPadding)
|
||||
implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
|
||||
implicitContentHeight + topPadding + bottomPadding)
|
||||
anchors{
|
||||
left: textLabelPosition === RibbonProgressBar.LabelPosition.Right ? control.left : undefined
|
||||
right: textLabelPosition === RibbonProgressBar.LabelPosition.Left ? control.right : undefined
|
||||
bottom: textLabelPosition === RibbonProgressBar.LabelPosition.Top ? control.bottom : undefined
|
||||
top: textLabelPosition === RibbonProgressBar.LabelPosition.Bottom ? control.top : undefined
|
||||
verticalCenter: textLabelPosition === RibbonProgressBar.LabelPosition.Left ||
|
||||
textLabelPosition === RibbonProgressBar.LabelPosition.Right ?
|
||||
control.verticalCenter : undefined
|
||||
horizontalCenter: textLabelPosition === RibbonProgressBar.LabelPosition.Top ||
|
||||
textLabelPosition === RibbonProgressBar.LabelPosition.Bottom ?
|
||||
control.horizontalCenter : undefined
|
||||
}
|
||||
|
||||
contentItem: Item{
|
||||
id: item
|
||||
implicitHeight: barHeight
|
||||
implicitWidth: barWidth
|
||||
height: implicitHeight
|
||||
anchors.verticalCenter: bar.verticalCenter
|
||||
clip: true
|
||||
layer.enabled: true
|
||||
layer.effect: OpacityMask {
|
||||
maskSource: Rectangle{
|
||||
implicitWidth: item.width
|
||||
implicitHeight: item.height
|
||||
radius: item.height / 2
|
||||
}
|
||||
}
|
||||
Rectangle{
|
||||
x:0
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
implicitHeight: barHeight
|
||||
implicitWidth: {
|
||||
if(!indeterminate)
|
||||
{
|
||||
return barWidth * visualPosition
|
||||
}
|
||||
else
|
||||
return indeterminateWidth
|
||||
}
|
||||
radius: height / 2
|
||||
color: indicatorColor
|
||||
PropertyAnimation on x {
|
||||
running: indeterminate && visible
|
||||
from: -indeterminateWidth
|
||||
to:barWidth+indeterminateWidth
|
||||
loops: Animation.Infinite
|
||||
duration: animationDurarion
|
||||
easing.type: Easing.OutInQuad
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
background: Rectangle {
|
||||
implicitWidth: barWidth
|
||||
implicitHeight: barHeight
|
||||
height: barHeight
|
||||
radius: height / 2
|
||||
anchors.verticalCenter: bar.verticalCenter
|
||||
color: bgColor
|
||||
}
|
||||
}
|
||||
|
||||
RibbonText{
|
||||
id: text_label
|
||||
viewOnly: true
|
||||
text: indeterminate ? control.text : (visualPosition * 100).toFixed(0) + "%"
|
||||
visible: showText
|
||||
anchors{
|
||||
top: textLabelPosition === RibbonProgressBar.LabelPosition.Bottom ? bar.bottom : undefined
|
||||
topMargin: textLabelPosition === RibbonProgressBar.LabelPosition.Bottom ? textLabelMargin : 0
|
||||
right: textLabelPosition === RibbonProgressBar.LabelPosition.Left ? bar.left : undefined
|
||||
rightMargin: textLabelPosition === RibbonProgressBar.LabelPosition.Left ? textLabelMargin : 0
|
||||
left: textLabelPosition === RibbonProgressBar.LabelPosition.Right ? bar.right : undefined
|
||||
leftMargin: textLabelPosition === RibbonProgressBar.LabelPosition.Right ? textLabelMargin : 0
|
||||
bottom: textLabelPosition === RibbonProgressBar.LabelPosition.Top ? bar.top : undefined
|
||||
bottomMargin: textLabelPosition === RibbonProgressBar.LabelPosition.Top ? textLabelMargin : 0
|
||||
verticalCenter: textLabelPosition === RibbonProgressBar.LabelPosition.Left ||
|
||||
textLabelPosition === RibbonProgressBar.LabelPosition.Right ?
|
||||
bar.verticalCenter : undefined
|
||||
horizontalCenter: textLabelPosition === RibbonProgressBar.LabelPosition.Top ||
|
||||
textLabelPosition === RibbonProgressBar.LabelPosition.Bottom ?
|
||||
bar.horizontalCenter : undefined
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,126 @@
|
|||
import QtQuick
|
||||
import QtQuick.Controls
|
||||
import Qt5Compat.GraphicalEffects
|
||||
import RibbonUI
|
||||
|
||||
Item{
|
||||
id: control
|
||||
implicitHeight: (textLabelPosition === RibbonProgressBar.LabelPosition.Top || textLabelPosition === RibbonProgressBar.LabelPosition.Bottom && showText ?
|
||||
(text_label.contentHeight + textLabelMargin + bar.implicitHeight) : showText ? Math.max(bar.implicitHeight, text_label.contentHeight) : bar.implicitHeight)
|
||||
implicitWidth: bar.implicitWidth + (textLabelPosition === RibbonProgressBar.LabelPosition.Left || textLabelPosition === RibbonProgressBar.LabelPosition.Right && showText ?
|
||||
(text_label.contentWidth + textLabelMargin) : 0)
|
||||
enum LabelPosition {
|
||||
Top,
|
||||
Left,
|
||||
Right,
|
||||
Bottom
|
||||
}
|
||||
property color indicatorColor: RibbonTheme.isDarkMode ? "#8AAAEB" : "#5DA3E8"
|
||||
property color bgColor: RibbonTheme.isDarkMode ? "#6C6C6C" : "#EFEFEF"
|
||||
property int barWidth: 200
|
||||
property int barHeight: 6
|
||||
property bool showText: true
|
||||
property int textLabelMargin: textLabelPosition === RibbonProgressBar.LabelPosition.Top || textLabelPosition === RibbonProgressBar.LabelPosition.Bottom ? 0 : 5
|
||||
property int animationDurarion: 800
|
||||
property int indeterminateWidth: barWidth * 0.25
|
||||
property int textLabelPosition: bar.mirrored ? RibbonProgressBar.LabelPosition.Left : RibbonProgressBar.LabelPosition.Right
|
||||
property string text: qsTr("Loading")
|
||||
property alias value: bar.value
|
||||
property alias visualPosition: bar.visualPosition
|
||||
property alias position: bar.position
|
||||
property alias indeterminate: bar.indeterminate
|
||||
property alias bar: bar
|
||||
|
||||
ProgressBar {
|
||||
id: bar
|
||||
clip: true
|
||||
implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
|
||||
implicitContentWidth + leftPadding + rightPadding)
|
||||
implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
|
||||
implicitContentHeight + topPadding + bottomPadding)
|
||||
anchors{
|
||||
left: textLabelPosition === RibbonProgressBar.LabelPosition.Right ? control.left : undefined
|
||||
right: textLabelPosition === RibbonProgressBar.LabelPosition.Left ? control.right : undefined
|
||||
bottom: textLabelPosition === RibbonProgressBar.LabelPosition.Top ? control.bottom : undefined
|
||||
top: textLabelPosition === RibbonProgressBar.LabelPosition.Bottom ? control.top : undefined
|
||||
verticalCenter: textLabelPosition === RibbonProgressBar.LabelPosition.Left ||
|
||||
textLabelPosition === RibbonProgressBar.LabelPosition.Right ?
|
||||
control.verticalCenter : undefined
|
||||
horizontalCenter: textLabelPosition === RibbonProgressBar.LabelPosition.Top ||
|
||||
textLabelPosition === RibbonProgressBar.LabelPosition.Bottom ?
|
||||
control.horizontalCenter : undefined
|
||||
}
|
||||
|
||||
contentItem: Item{
|
||||
id: item
|
||||
implicitHeight: barHeight
|
||||
implicitWidth: barWidth
|
||||
height: implicitHeight
|
||||
anchors.verticalCenter: bar.verticalCenter
|
||||
clip: true
|
||||
layer.enabled: true
|
||||
layer.effect: OpacityMask {
|
||||
maskSource: Rectangle{
|
||||
implicitWidth: item.width
|
||||
implicitHeight: item.height
|
||||
radius: item.height / 2
|
||||
}
|
||||
}
|
||||
Rectangle{
|
||||
x:0
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
implicitHeight: barHeight
|
||||
implicitWidth: {
|
||||
if(!indeterminate)
|
||||
{
|
||||
return barWidth * visualPosition
|
||||
}
|
||||
else
|
||||
return indeterminateWidth
|
||||
}
|
||||
radius: height / 2
|
||||
color: indicatorColor
|
||||
PropertyAnimation on x {
|
||||
running: indeterminate && visible
|
||||
from: -indeterminateWidth
|
||||
to:barWidth+indeterminateWidth
|
||||
loops: Animation.Infinite
|
||||
duration: animationDurarion
|
||||
easing.type: Easing.OutInQuad
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
background: Rectangle {
|
||||
implicitWidth: barWidth
|
||||
implicitHeight: barHeight
|
||||
height: barHeight
|
||||
radius: height / 2
|
||||
anchors.verticalCenter: bar.verticalCenter
|
||||
color: bgColor
|
||||
}
|
||||
}
|
||||
|
||||
RibbonText{
|
||||
id: text_label
|
||||
viewOnly: true
|
||||
text: indeterminate ? control.text : (visualPosition * 100).toFixed(0) + "%"
|
||||
visible: showText
|
||||
anchors{
|
||||
top: textLabelPosition === RibbonProgressBar.LabelPosition.Bottom ? bar.bottom : undefined
|
||||
topMargin: textLabelPosition === RibbonProgressBar.LabelPosition.Bottom ? textLabelMargin : 0
|
||||
right: textLabelPosition === RibbonProgressBar.LabelPosition.Left ? bar.left : undefined
|
||||
rightMargin: textLabelPosition === RibbonProgressBar.LabelPosition.Left ? textLabelMargin : 0
|
||||
left: textLabelPosition === RibbonProgressBar.LabelPosition.Right ? bar.right : undefined
|
||||
leftMargin: textLabelPosition === RibbonProgressBar.LabelPosition.Right ? textLabelMargin : 0
|
||||
bottom: textLabelPosition === RibbonProgressBar.LabelPosition.Top ? bar.top : undefined
|
||||
bottomMargin: textLabelPosition === RibbonProgressBar.LabelPosition.Top ? textLabelMargin : 0
|
||||
verticalCenter: textLabelPosition === RibbonProgressBar.LabelPosition.Left ||
|
||||
textLabelPosition === RibbonProgressBar.LabelPosition.Right ?
|
||||
bar.verticalCenter : undefined
|
||||
horizontalCenter: textLabelPosition === RibbonProgressBar.LabelPosition.Top ||
|
||||
textLabelPosition === RibbonProgressBar.LabelPosition.Bottom ?
|
||||
bar.horizontalCenter : undefined
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue