new classic hand style , settings layout change (are there any better ways?)

This commit is contained in:
darksignal7
2025-10-05 20:02:20 +03:00
parent 8bd4bbe7ea
commit 692172d57b
3 changed files with 104 additions and 72 deletions
@@ -202,30 +202,22 @@ Item {
anchors.fill: parent
z: Config.options.background.clock.cookie.hourHandStyle === "fill" ? 3 : 1
rotation: -90 + (360 / 12) * (root.clockHour + root.clockMinute / 60)
// Using two different rectangle for animation. Can be used only one with border.color && border.width
Rectangle {
// fill
opacity: Config.options.background.clock.cookie.hourHandStyle === "fill" ? 1.0 : 0
opacity: Config.options.background.clock.cookie.hourHandStyle !== "hide" ? 1.0 : 0
anchors.verticalCenter: parent.verticalCenter
x: parent.width / 2 - hourHandWidth / 2
x: Config.options.background.clock.cookie.hourHandStyle === "classic" ? (parent.width / 2 - minuteHandWidth / 2) - 15 : parent.width / 2 - minuteHandWidth / 2
width: hourHandLength
height: hourHandWidth
radius: hourHandWidth / 2
color : root.colHourHand
height: Config.options.background.clock.cookie.hourHandStyle === "classic" ? 8 : hourHandWidth
radius: Config.options.background.clock.cookie.hourHandStyle === "classic" ? 2 : hourHandWidth / 2
color : Config.options.background.clock.cookie.hourHandStyle === "stroke" ? "transparent" : root.colHourHand
border.color: root.colHourHand
border.width: 4
Behavior on opacity {
animation: Appearance.animation.elementResize.numberAnimation.createObject(this)
}
}
Rectangle {
// border
anchors.verticalCenter: parent.verticalCenter
x: parent.width / 2 - hourHandWidth / 2
width: hourHandLength
height: hourHandWidth
radius: hourHandWidth / 2
color: "transparent"
border.color: root.colHourHand
border.width: 4
Behavior on x{
animation: Appearance.animation.elementResize.numberAnimation.createObject(this)
}
}
}
@@ -240,14 +232,17 @@ Item {
}
Rectangle {
anchors.verticalCenter: parent.verticalCenter
x: parent.width / 2 - minuteHandWidth / 2
x: Config.options.background.clock.cookie.minuteHandStyle === "classic" ? (parent.width / 2 - minuteHandWidth / 2) - 15 : parent.width / 2 - minuteHandWidth / 2
width: minuteHandLength
height: minuteHandWidth
radius: minuteHandWidth / 2
radius: Config.options.background.clock.cookie.minuteHandStyle === "classic" ? 2 : minuteHandWidth / 2
color: root.colMinuteHand
Behavior on height {
animation: Appearance.animation.elementResize.numberAnimation.createObject(this)
}
Behavior on x{
animation: Appearance.animation.elementResize.numberAnimation.createObject(this)
}
}
}
@@ -291,7 +286,7 @@ Item {
Item {
id: secondHand
z: Config.options.background.clock.cookie.secondHandStyle === "line" ? 2 : 3
opacity: Config.options.background.clock.cookie.secondHandStyle === "dot" || Config.options.background.clock.cookie.secondHandStyle === "line" ? 1.0 : 0 // Not using visible to allow smooth transition
opacity: Config.options.background.clock.cookie.secondHandStyle !== "hide" ? 1.0 : 0
rotation: (360 / 60 * clockSecond) + 90 // +90 degrees to align with minute hand
anchors.fill: parent
Behavior on opacity {
@@ -317,6 +312,22 @@ Item {
leftMargin: 10
}
}
Rectangle{
// Dot on the classic style
opacity: Config.options.background.clock.cookie.secondHandStyle === "classic" ? 1.0 : 0.0
implicitHeight: 14
implicitWidth: 14
color: root.colSeconds
radius: Appearance.rounding.small
anchors {
left: parent.left
verticalCenter: parent.verticalCenter
leftMargin: 40
}
Behavior on opacity {
animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this)
}
}
}
// Date (the rotating one with the second hand)
@@ -132,8 +132,8 @@ Singleton {
property int clockSides: 12
property JsonObject cookie: JsonObject {
property string dialNumberStyle: "dots" // Options: "dots" , "numbers", "full" , "none"
property string hourHandStyle: "fill" // Options: "fill", "stroke", "hide"
property string minuteHandStyle: "medium" // Options: "medium", "bold", "hide"
property string hourHandStyle: "fill" // Options: "classic", "fill", "stroke", "hide"
property string minuteHandStyle: "medium" // Options: "classic", "thin", "medium", "bold", "hide"
property string secondHandStyle: "dot" // Options: "dot", "line" , "none"
property string dateStyle: "rotating" // Options: "rotating", "square", "none"
property bool timeIndicators: true
@@ -115,37 +115,44 @@ ContentPage {
]
}
}
}
ContentSubsection {
enabled: Config.options.background.clock.style === "cookie"
title: Translation.tr("Seconds indicator style")
visible: Config.options.background.clock.style === "cookie"
title: Translation.tr("Hour hand style")
ConfigSelectionArray {
currentValue: Config.options.background.clock.cookie.secondHandStyle
currentValue: Config.options.background.clock.cookie.hourHandStyle
onSelected: newValue => {
Config.options.background.clock.cookie.secondHandStyle = newValue;
Config.options.background.clock.cookie.hourHandStyle = newValue;
}
options: [
{
displayName: Translation.tr("None"),
displayName: Translation.tr("Classic"),
icon: "radio",
value: "classic"
},
{
displayName: Translation.tr("Fill"),
icon: "stroke_full",
value: "fill"
},
{
displayName: Translation.tr("Stroke"),
icon: "stroke_partial",
value: "stroke"
},
{
displayName: Translation.tr("Hide"),
icon: "deselect",
value: "none"
},
{
displayName: Translation.tr("Dot"),
icon: "adjust",
value: "dot"
},
{
displayName: Translation.tr("Line"),
icon: "line_end",
value: "line"
value: "hide"
}
]
}
}
}
ConfigRow{
ContentSubsection {
enabled: Config.options.background.clock.style === "cookie"
visible: Config.options.background.clock.style === "cookie"
@@ -156,6 +163,11 @@ ContentPage {
Config.options.background.clock.cookie.minuteHandStyle = newValue;
}
options: [
{
displayName: Translation.tr("Classic"),
icon: "radio",
value: "classic"
},
{
displayName: Translation.tr("Thin"),
icon: "pen_size_1",
@@ -173,12 +185,50 @@ ContentPage {
},
{
displayName: Translation.tr("Hide"),
icon: "hide_image",
icon: "deselect",
value: "hide"
}
]
}
}
ContentSubsection {
enabled: Config.options.background.clock.style === "cookie"
title: Translation.tr("Seconds hand style")
visible: Config.options.background.clock.style === "cookie"
ConfigSelectionArray {
currentValue: Config.options.background.clock.cookie.secondHandStyle
onSelected: newValue => {
Config.options.background.clock.cookie.secondHandStyle = newValue;
}
options: [
{
displayName: Translation.tr("Classic"),
icon: "radio",
value: "classic"
},
{
displayName: Translation.tr("Line"),
icon: "line_end",
value: "line"
},
{
displayName: Translation.tr("Dot"),
icon: "adjust",
value: "dot"
},
{
displayName: Translation.tr("Hide"),
icon: "deselect",
value: "hide"
}
]
}
}
ContentSubsection {
enabled: Config.options.background.clock.style === "cookie" && Config.options.background.clock.cookie.dialNumberStyle === "none"
visible: Config.options.background.clock.style === "cookie"
@@ -207,36 +257,7 @@ ContentPage {
]
}
}
}
ContentSubsection {
enabled: Config.options.background.clock.style === "cookie"
visible: Config.options.background.clock.style === "cookie"
title: Translation.tr("Hour hand style")
ConfigSelectionArray {
currentValue: Config.options.background.clock.cookie.hourHandStyle
onSelected: newValue => {
Config.options.background.clock.cookie.hourHandStyle = newValue;
}
options: [
{
displayName: Translation.tr("Fill"),
icon: "stroke_full",
value: "fill"
},
{
displayName: Translation.tr("Stroke"),
icon: "stroke_partial",
value: "stroke"
},
{
displayName: Translation.tr("Hide"),
icon: "hide_image",
value: "hide"
}
]
}
}
ConfigSpinBox {
enabled: Config.options.background.clock.style === "cookie"