bar: make circular progresses of filled style

This commit is contained in:
end-4
2025-08-12 23:38:33 +07:00
parent 67d1d73845
commit 423fb90266
4 changed files with 135 additions and 24 deletions
+17 -13
View File
@@ -48,24 +48,28 @@ Item {
spacing: 4
anchors.fill: parent
CircularProgress {
ClippedFilledCircularProgress {
id: mediaCircProg
Layout.alignment: Qt.AlignVCenter
Layout.leftMargin: rowLayout.spacing
lineWidth: 2
value: activePlayer?.position / activePlayer?.length
implicitSize: 26
colSecondary: Appearance.colors.colSecondaryContainer
colPrimary: Appearance.m3colors.m3onSecondaryContainer
lineWidth: Appearance.rounding.unsharpen
value: percentage
implicitSize: 22
colPrimary: Appearance.colors.colOnSecondaryContainer
enableAnimation: false
MaterialSymbol {
Item {
anchors.centerIn: parent
fill: 1
text: activePlayer?.isPlaying ? "pause" : "music_note"
iconSize: Appearance.font.pixelSize.normal
color: Appearance.m3colors.m3onSecondaryContainer
width: mediaCircProg.implicitSize
height: mediaCircProg.implicitSize
MaterialSymbol {
anchors.centerIn: parent
fill: 1
text: activePlayer?.isPlaying ? "pause" : "music_note"
iconSize: Appearance.font.pixelSize.normal
color: Appearance.m3colors.m3onSecondaryContainer
}
}
}
StyledText {
+18 -10
View File
@@ -35,21 +35,27 @@ Item {
spacing: 2
x: shown ? 0 : -resourceRowLayout.width
CircularProgress {
ClippedFilledCircularProgress {
id: resourceCircProg
Layout.alignment: Qt.AlignVCenter
lineWidth: 2
lineWidth: Appearance.rounding.unsharpen
value: percentage
implicitSize: 26
colSecondary: Appearance.colors.colSecondaryContainer
colPrimary: Appearance.m3colors.m3onSecondaryContainer
implicitSize: 22
colPrimary: Appearance.colors.colOnSecondaryContainer
enableAnimation: false
MaterialSymbol {
Item {
anchors.centerIn: parent
fill: 1
text: iconName
iconSize: Appearance.font.pixelSize.large
color: Appearance.m3colors.m3onSecondaryContainer
width: resourceCircProg.implicitSize
height: resourceCircProg.implicitSize
MaterialSymbol {
anchors.centerIn: parent
fill: 1
text: iconName
iconSize: Appearance.font.pixelSize.normal
color: Appearance.m3colors.m3onSecondaryContainer
}
}
}
@@ -61,12 +67,14 @@ Item {
TextMetrics {
id: fullPercentageTextMetrics
text: "100"
font.pixelSize: Appearance.font.pixelSize.small
}
StyledText {
id: percentageText
anchors.centerIn: parent
color: Appearance.colors.colOnLayer1
font.pixelSize: Appearance.font.pixelSize.small
text: `${Math.round(percentage * 100).toString()}`
}
}