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{
|
RibbonTabPage{
|
||||||
title: qsTr("Views")
|
title: qsTr("Views")
|
||||||
RibbonTabGroup{
|
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{
|
RibbonTabPage{
|
||||||
title: qsTr("Views")
|
title: qsTr("Views")
|
||||||
RibbonTabGroup{
|
RibbonTabGroup{
|
||||||
|
|
|
||||||
|
|
@ -40,7 +40,7 @@ set(qml_files RibbonTabBar.qml RibbonTabButton.qml RibbonView.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 RibbonTourItem.qml
|
RibbonRadioButton.qml RibbonBackStageMenuItem.qml RibbonTourItem.qml
|
||||||
RibbonObject.qml)
|
RibbonObject.qml RibbonProgressBar.qml)
|
||||||
|
|
||||||
set(qml_prefix "qml/Qt${QT_VERSION_MAJOR}/")
|
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