From 423fb9026611c9fbff5aa4b7767a0dd5e3e74812 Mon Sep 17 00:00:00 2001 From: end-4 <97237370+end-4@users.noreply.github.com> Date: Tue, 12 Aug 2025 23:38:33 +0700 Subject: [PATCH] bar: make circular progresses of filled style --- .config/quickshell/ii/modules/bar/Media.qml | 30 +++--- .../quickshell/ii/modules/bar/Resource.qml | 28 ++++-- .../widgets/ClippedFilledCircularProgress.qml | 98 +++++++++++++++++++ .../ii/modules/common/widgets/RoundCorner.qml | 3 +- 4 files changed, 135 insertions(+), 24 deletions(-) create mode 100644 .config/quickshell/ii/modules/common/widgets/ClippedFilledCircularProgress.qml diff --git a/.config/quickshell/ii/modules/bar/Media.qml b/.config/quickshell/ii/modules/bar/Media.qml index 2ce02aee6..6187dd109 100644 --- a/.config/quickshell/ii/modules/bar/Media.qml +++ b/.config/quickshell/ii/modules/bar/Media.qml @@ -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 { diff --git a/.config/quickshell/ii/modules/bar/Resource.qml b/.config/quickshell/ii/modules/bar/Resource.qml index 9b675cbcc..cb6427028 100644 --- a/.config/quickshell/ii/modules/bar/Resource.qml +++ b/.config/quickshell/ii/modules/bar/Resource.qml @@ -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()}` } } diff --git a/.config/quickshell/ii/modules/common/widgets/ClippedFilledCircularProgress.qml b/.config/quickshell/ii/modules/common/widgets/ClippedFilledCircularProgress.qml new file mode 100644 index 000000000..f4b1fcab8 --- /dev/null +++ b/.config/quickshell/ii/modules/common/widgets/ClippedFilledCircularProgress.qml @@ -0,0 +1,98 @@ +import qs.modules.common +import qs.modules.common.functions +import QtQuick +import QtQuick.Shapes +import Qt5Compat.GraphicalEffects + +Item { + id: root + + property int implicitSize: 18 + property int lineWidth: 2 + property real value: 0 + property color colPrimary: Appearance?.colors.colOnSecondaryContainer ?? "#685496" + property color colSecondary: ColorUtils.transparentize(colPrimary, 0.4) ?? "#F1D3F9" + property real gapAngle: 360 / 18 + property bool fill: true + property int fillOverflow: 2 + property bool enableAnimation: true + property int animationDuration: 800 + property var easingType: Easing.OutCubic + default property Item textMask: Item { + width: implicitSize + height: implicitSize + StyledText { + anchors.centerIn: parent + text: Math.round(root.value * 100) + font.pixelSize: 12 + font.weight: Font.Medium + } + } + + implicitWidth: implicitSize + implicitHeight: implicitSize + + // property real degree: value * 360 + property real degree: 0.65 * 360 + property real centerX: root.width / 2 + property real centerY: root.height / 2 + property real arcRadius: root.implicitSize / 2 - root.lineWidth + property real startAngle: -90 + + Behavior on degree { + enabled: root.enableAnimation + NumberAnimation { + duration: root.animationDuration + easing.type: root.easingType + } + + } + + Rectangle { + id: contentItem + anchors.fill: parent + radius: implicitSize / 2 + color: root.colSecondary + visible: false + layer.enabled: true + layer.smooth: true + + Shape { + anchors.fill: parent + preferredRendererType: Shape.CurveRenderer + + ShapePath { + id: primaryPath + pathHints: ShapePath.PathSolid & ShapePath.PathNonIntersecting + strokeColor: root.colPrimary + strokeWidth: root.lineWidth + capStyle: ShapePath.RoundCap + fillColor: root.colPrimary + + startX: root.centerX + startY: root.centerY + + PathAngleArc { + moveToStart: false + centerX: root.centerX + centerY: root.centerY + radiusX: root.arcRadius + radiusY: root.arcRadius + startAngle: root.startAngle + sweepAngle: root.degree + } + PathLine { + x: primaryPath.startX + y: primaryPath.startY + } + } + } + } + + OpacityMask { + anchors.fill: parent + source: contentItem + invert: true + maskSource: root.textMask + } +} diff --git a/.config/quickshell/ii/modules/common/widgets/RoundCorner.qml b/.config/quickshell/ii/modules/common/widgets/RoundCorner.qml index 9cda87ca5..6ef0498fc 100644 --- a/.config/quickshell/ii/modules/common/widgets/RoundCorner.qml +++ b/.config/quickshell/ii/modules/common/widgets/RoundCorner.qml @@ -22,8 +22,9 @@ Item { ShapePath { id: shapePath strokeWidth: 0 - fillColor: root.color + pathHints: ShapePath.PathSolid & ShapePath.PathNonIntersecting + startX: switch (root.corner) { case RoundCorner.CornerEnum.TopLeft: return 0; case RoundCorner.CornerEnum.TopRight: return root.implicitSize;