From 403344e120a170776813b428ee9628cfeaf3f90c Mon Sep 17 00:00:00 2001 From: end-4 <97237370+end-4@users.noreply.github.com> Date: Thu, 30 Oct 2025 12:24:10 +0100 Subject: [PATCH] make materialcookie use rounded polygons --- .../background/cookieClock/CookieClock.qml | 176 +++++++++--------- .../cookieClock/minuteMarks/MinuteMarks.qml | 10 +- .../modules/common/widgets/MaterialCookie.qml | 75 +++----- 3 files changed, 121 insertions(+), 140 deletions(-) diff --git a/dots/.config/quickshell/ii/modules/background/cookieClock/CookieClock.qml b/dots/.config/quickshell/ii/modules/background/cookieClock/CookieClock.qml index d08056909..8ad1d921b 100644 --- a/dots/.config/quickshell/ii/modules/background/cookieClock/CookieClock.qml +++ b/dots/.config/quickshell/ii/modules/background/cookieClock/CookieClock.qml @@ -86,118 +86,124 @@ Item { DropShadow { source: cookie anchors.fill: source - horizontalOffset: 0 - verticalOffset: 1 radius: 8 samples: radius * 2 + 1 color: root.colShadow transparentBorder: true + + RotationAnimation on rotation { + running: Config.options.background.clock.cookie.constantlyRotate + duration: 30000 + easing.type: Easing.Linear + loops: Animation.Infinite + from: 360 + to: 0 + } } MaterialCookie { id: cookie z: 0 + visible: false // The DropShadow already draws it implicitSize: root.implicitSize - amplitude: implicitSize / 70 sides: Config.options.background.clock.cookie.sides color: root.colBackground - constantlyRotate: Config.options.background.clock.cookie.constantlyRotate - - // Hour/minutes numbers/dots/lines - MinuteMarks { - anchors.fill: parent + } + + // Hour/minutes numbers/dots/lines + MinuteMarks { + anchors.fill: parent + color: root.colOnBackground + } + + // Stupid extra hour marks in the middle + FadeLoader { + id: hourMarksLoader + anchors.centerIn: parent + shown: Config.options.background.clock.cookie.hourMarks + sourceComponent: HourMarks { + implicitSize: 135 * (1.75 - 0.75 * hourMarksLoader.opacity) color: root.colOnBackground + colOnBackground: ColorUtils.mix(root.colBackgroundInfo, root.colOnBackground, 0.5) + } + } + + // Number column in the middle + FadeLoader { + id: timeColumnLoader + anchors.centerIn: parent + shown: Config.options.background.clock.cookie.timeIndicators + scale: 1.4 - 0.4 * timeColumnLoader.shown + Behavior on scale { + animation: Appearance.animation.elementResize.numberAnimation.createObject(this) } - // Stupid extra hour marks in the middle - FadeLoader { - id: hourMarksLoader - anchors.centerIn: parent - shown: Config.options.background.clock.cookie.hourMarks - sourceComponent: HourMarks { - implicitSize: 135 * (1.75 - 0.75 * hourMarksLoader.opacity) - color: root.colOnBackground - colOnBackground: ColorUtils.mix(root.colBackgroundInfo, root.colOnBackground, 0.5) - } + sourceComponent: TimeColumn { + color: root.colBackgroundInfo } + } - // Number column in the middle - FadeLoader { - id: timeColumnLoader - anchors.centerIn: parent - shown: Config.options.background.clock.cookie.timeIndicators - scale: 1.4 - 0.4 * timeColumnLoader.shown - Behavior on scale { - animation: Appearance.animation.elementResize.numberAnimation.createObject(this) - } - - sourceComponent: TimeColumn { - color: root.colBackgroundInfo - } + // Hour hand + FadeLoader { + anchors.fill: parent + z: 1 + shown: Config.options.background.clock.cookie.hourHandStyle !== "hide" + sourceComponent: HourHand { + clockHour: root.clockHour + clockMinute: root.clockMinute + style: Config.options.background.clock.cookie.hourHandStyle + color: root.colHourHand } + } - // Hour hand - FadeLoader { + // Minute hand + FadeLoader { + anchors.fill: parent + z: 2 + shown: Config.options.background.clock.cookie.minuteHandStyle !== "hide" + sourceComponent: MinuteHand { anchors.fill: parent - z: 1 - shown: Config.options.background.clock.cookie.hourHandStyle !== "hide" - sourceComponent: HourHand { - clockHour: root.clockHour - clockMinute: root.clockMinute - style: Config.options.background.clock.cookie.hourHandStyle - color: root.colHourHand - } + clockMinute: root.clockMinute + style: Config.options.background.clock.cookie.minuteHandStyle + color: root.colMinuteHand } + } - // Minute hand - FadeLoader { - anchors.fill: parent - z: 2 - shown: Config.options.background.clock.cookie.minuteHandStyle !== "hide" - sourceComponent: MinuteHand { - anchors.fill: parent - clockMinute: root.clockMinute - style: Config.options.background.clock.cookie.minuteHandStyle - color: root.colMinuteHand - } + // Second hand + FadeLoader { + id: secondHandLoader + z: (Config.options.background.clock.cookie.secondHandStyle === "line") ? 2 : 3 + shown: Config.options.time.secondPrecision && Config.options.background.clock.cookie.secondHandStyle !== "hide" + anchors.fill: parent + sourceComponent: SecondHand { + id: secondHand + clockSecond: root.clockSecond + style: Config.options.background.clock.cookie.secondHandStyle + color: root.colSecondHand } + } - // Second hand - FadeLoader { - id: secondHandLoader - z: (Config.options.background.clock.cookie.secondHandStyle === "line") ? 2 : 3 - shown: Config.options.time.secondPrecision && Config.options.background.clock.cookie.secondHandStyle !== "hide" - anchors.fill: parent - sourceComponent: SecondHand { - id: secondHand - clockSecond: root.clockSecond - style: Config.options.background.clock.cookie.secondHandStyle - color: root.colSecondHand - } + // Center dot + FadeLoader { + z: 4 + anchors.centerIn: parent + shown: Config.options.background.clock.cookie.minuteHandStyle !== "bold" + sourceComponent: Rectangle { + color: Config.options.background.clock.cookie.minuteHandStyle === "medium" ? root.colBackground : root.colMinuteHand + implicitWidth: 6 + implicitHeight: implicitWidth + radius: width / 2 } + } - // Center dot - FadeLoader { - z: 4 - anchors.centerIn: parent - shown: Config.options.background.clock.cookie.minuteHandStyle !== "bold" - sourceComponent: Rectangle { - color: Config.options.background.clock.cookie.minuteHandStyle === "medium" ? root.colBackground : root.colMinuteHand - implicitWidth: 6 - implicitHeight: implicitWidth - radius: width / 2 - } - } + // Date + FadeLoader { + anchors.fill: parent + shown: Config.options.background.clock.cookie.dateStyle !== "hide" - // Date - FadeLoader { - anchors.fill: parent - shown: Config.options.background.clock.cookie.dateStyle !== "hide" - - sourceComponent: DateIndicator { - color: root.colBackgroundInfo - style: Config.options.background.clock.cookie.dateStyle - } + sourceComponent: DateIndicator { + color: root.colBackgroundInfo + style: Config.options.background.clock.cookie.dateStyle } } } diff --git a/dots/.config/quickshell/ii/modules/background/cookieClock/minuteMarks/MinuteMarks.qml b/dots/.config/quickshell/ii/modules/background/cookieClock/minuteMarks/MinuteMarks.qml index be0389677..07cf0dc5e 100644 --- a/dots/.config/quickshell/ii/modules/background/cookieClock/minuteMarks/MinuteMarks.qml +++ b/dots/.config/quickshell/ii/modules/background/cookieClock/minuteMarks/MinuteMarks.qml @@ -14,7 +14,10 @@ Item { // 12 Dots FadeLoader { id: dotsLoader - anchors.fill: parent + anchors { + fill: parent + margins: 10 + } shown: root.style === "dots" sourceComponent: Dots { color: root.color @@ -37,7 +40,10 @@ Item { // Lines FadeLoader { id: linesLoader - anchors.fill: parent + anchors { + fill: parent + margins: 10 + } shown: root.style === "full" sourceComponent: Lines { color: root.color diff --git a/dots/.config/quickshell/ii/modules/common/widgets/MaterialCookie.qml b/dots/.config/quickshell/ii/modules/common/widgets/MaterialCookie.qml index 79048ca63..88bc0b50e 100644 --- a/dots/.config/quickshell/ii/modules/common/widgets/MaterialCookie.qml +++ b/dots/.config/quickshell/ii/modules/common/widgets/MaterialCookie.qml @@ -2,69 +2,38 @@ import QtQuick import QtQuick.Shapes import Quickshell import qs.modules.common +import qs.modules.common.widgets.shapes +import "shapes/geometry/offset.js" as Offset +import "shapes/shapes/corner-rounding.js" as CornerRounding +import "shapes/shapes/rounded-polygon.js" as RoundedPolygon +import "shapes/material-shapes.js" as MaterialShapes Item { id: root - - property real sides: 12 + property int sides: 12 property int implicitSize: 100 - property real amplitude: implicitSize / 50 - property int renderPoints: 360 - property color color: "#605790" - property alias strokeWidth: shapePath.strokeWidth - property bool constantlyRotate: false + property alias color: shapeCanvas.color implicitWidth: implicitSize implicitHeight: implicitSize - property real shapeRotation: 0 + property var cornerRounding: new CornerRounding.CornerRounding(1.1 / Math.max(sides, 1)) - Loader { - active: constantlyRotate - sourceComponent: FrameAnimation { - running: true - onTriggered: { - shapeRotation += 0.05 - } - } - } - - Behavior on sides { - animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this) - } - - Shape { - id: shape + ShapeCanvas { + id: shapeCanvas anchors.fill: parent - preferredRendererType: Shape.CurveRenderer - - ShapePath { - id: shapePath - strokeWidth: 0 - fillColor: root.color - pathHints: ShapePath.PathSolid & ShapePath.PathNonIntersecting - - PathPolyline { - property var pointsList: { - var points = [] - var cx = shape.width / 2 // center x - var cy = shape.height / 2 // center y - var steps = root.renderPoints - var radius = root.implicitSize / 2 - root.amplitude - for (var i = 0; i <= steps; i++) { - var angle = (i / steps) * 2 * Math.PI - var rotatedAngle = angle * root.sides + Math.PI/2 + (root.shapeRotation * root.constantlyRotate) - var wave = Math.sin(rotatedAngle) * root.amplitude - var x = Math.cos(angle) * (radius + wave) + cx - var y = Math.sin(angle) * (radius + wave) + cy - points.push(Qt.point(x, y)) - } - return points - } - - path: pointsList - } - + roundedPolygon: switch(sides) { + case 0: return MaterialShapes.getCircle(); + case 1: return MaterialShapes.getCircle(); + case 4: return MaterialShapes.getCookie4Sided(); + case 6: return MaterialShapes.getCookie6Sided(); + case 7: return MaterialShapes.getCookie7Sided(); + case 9: return MaterialShapes.getCookie9Sided(); + case 12: return MaterialShapes.getCookie12Sided(); + default: return RoundedPolygon.RoundedPolygon.star(sides, 1, 0.8, root.cornerRounding) + .transformed((x, y) => MaterialShapes.rotate30.map(new Offset.Offset(x, y))) + .normalized(); } } } +