forked from Shinonome/dots-hyprland
darksignal7
410 lines
14 KiB
QML
410 lines
14 KiB
QML
pragma ComponentBehavior: Bound
|
|
|
|
import qs
|
|
import qs.services
|
|
import qs.modules.common
|
|
import qs.modules.common.widgets
|
|
import qs.modules.common.functions
|
|
import QtQuick
|
|
import QtQuick.Layouts
|
|
import Quickshell
|
|
import Qt5Compat.GraphicalEffects
|
|
|
|
Item {
|
|
id: root
|
|
|
|
readonly property string clockStyle: Config.options.background.clock.style
|
|
readonly property bool showQuote: Config.options.background.showQuote && Config.options.background.quote.length > 0 && !GlobalStates.screenLocked
|
|
|
|
|
|
property real implicitSize: 230
|
|
property real hourHandLength: 72
|
|
property real hourHandWidth: 20
|
|
property real minuteHandLength: 95
|
|
property real minuteHandWidth: Config.options.background.clock.cookie.minuteHandStyle === "bold" ? hourHandWidth : 12
|
|
property real centerDotSize: 10
|
|
property real hourDotSize: 12
|
|
property real centerGlowSize: 135
|
|
property real secondDotSize: 20
|
|
property real secondsHandWidth: 2
|
|
property real secondsHandLength: 100
|
|
|
|
property real hourNumberSize: 36
|
|
|
|
|
|
property color colShadow: Appearance.colors.colShadow
|
|
property color colBackground: Appearance.colors.colSecondaryContainer
|
|
property color colOnBackground: ColorUtils.mix(Appearance.colors.colPrimary, Appearance.colors.colSecondaryContainer, 0.5)
|
|
property color colHourHand: Appearance.colors.colPrimary
|
|
property color colMinuteHand: Appearance.colors.colSecondaryActive
|
|
property color colOnHourHand: Appearance.colors.colOnPrimary
|
|
property color colTimeIndicators: Appearance.colors.colSecondaryContainerHover
|
|
property color colSeconds: Appearance.colors.colTertiary
|
|
readonly property list<string> clockNumbers: DateTime.time.split(/[: ]/)
|
|
readonly property int clockHour: parseInt(clockNumbers[0]) % 12
|
|
readonly property int clockMinute: parseInt(clockNumbers[1])
|
|
|
|
property int clockSecond: 0
|
|
|
|
Loader{
|
|
active: Config.option.background.clock.cookie.secondDot
|
|
sourceComponent: Timer {
|
|
interval: 1000
|
|
running: true;repeat: true
|
|
onTriggered: {
|
|
var now = new Date()
|
|
clockSecond = now.getSeconds()
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
|
|
implicitWidth: implicitSize
|
|
implicitHeight: implicitSize
|
|
|
|
DropShadow {
|
|
source: cookie
|
|
anchors.fill: source
|
|
horizontalOffset: 0
|
|
verticalOffset: 2
|
|
radius: 12
|
|
samples: radius * 2 + 1
|
|
color: root.colShadow
|
|
transparentBorder: true
|
|
}
|
|
DropShadow {
|
|
source: quoteBox
|
|
anchors.fill: source
|
|
horizontalOffset: 0
|
|
verticalOffset: 2
|
|
radius: 12
|
|
samples: radius * 2 + 1
|
|
color: root.colShadow
|
|
transparentBorder: true
|
|
}
|
|
|
|
MaterialCookie {
|
|
id: cookie
|
|
z: 0
|
|
implicitSize: root.implicitSize
|
|
amplitude: implicitSize / 70
|
|
sides: Config.options.background.clock.clockSides
|
|
color: root.colBackground
|
|
|
|
// 12 dots around the cookie
|
|
Repeater {
|
|
model: 12
|
|
Item {
|
|
opacity: Config.options.background.clock.cookie.dialNumberStyle === "dots" ? 1.0 : 0 // Not using visible to allow smooth transition
|
|
Behavior on opacity {
|
|
animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this)
|
|
}
|
|
required property int index
|
|
rotation: 360 / 12 * index
|
|
anchors.fill: parent
|
|
Rectangle {
|
|
anchors {
|
|
left: parent.left
|
|
verticalCenter: parent.verticalCenter
|
|
leftMargin: 10
|
|
}
|
|
implicitWidth: root.hourDotSize
|
|
implicitHeight: implicitWidth
|
|
radius: implicitWidth / 2
|
|
color: root.colOnBackground
|
|
opacity: 0.5
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Center glow behind the cookie
|
|
Rectangle {
|
|
id: glowLines
|
|
z: 1
|
|
anchors.centerIn: cookie
|
|
Repeater {
|
|
model: 12
|
|
Item {
|
|
opacity: Config.options.background.clock.cookie.centerGlow ? 1.0 : 0 // Not using visible to allow smooth transition
|
|
Behavior on opacity {
|
|
animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this)
|
|
}
|
|
required property int index
|
|
rotation: 360 / 12 * index
|
|
anchors.fill: parent
|
|
Rectangle {
|
|
anchors {
|
|
left: parent.left
|
|
verticalCenter: parent.verticalCenter
|
|
leftMargin: 50
|
|
}
|
|
implicitWidth: root.hourDotSize
|
|
implicitHeight: implicitWidth / 2
|
|
radius: implicitWidth / 2
|
|
color: root.colOnBackground
|
|
opacity: Config.options.background.clock.cookie.centerGlow ? 0.5 : 0
|
|
Behavior on opacity {
|
|
animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Numbers column
|
|
Column {
|
|
id: timeIndicators
|
|
z: 1
|
|
anchors.centerIn: cookie
|
|
spacing: -16
|
|
|
|
// Numbers
|
|
Repeater {
|
|
model: root.clockNumbers
|
|
delegate: StyledText {
|
|
required property string modelData
|
|
|
|
opacity: Config.options.background.clock.cookie.timeIndicators ? 1.0 : 0 // Not using visible to allow smooth transition
|
|
Behavior on opacity { // LOOK
|
|
animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this)
|
|
}
|
|
anchors.horizontalCenter: parent?.horizontalCenter
|
|
font {
|
|
// A better way to do this? probably yes, do i know : no
|
|
property real numberSizeWithoutGlow: modelData.match(/am|pm/i) ? 26 : 68
|
|
property real numberSizeWithGlow: modelData.match(/am|pm/i) ? 10 : 40
|
|
pixelSize: Config.options.background.clock.cookie.centerGlow ? numberSizeWithGlow : numberSizeWithoutGlow
|
|
Behavior on pixelSize {
|
|
animation: Appearance.animation.elementResize.numberAnimation.createObject(this)
|
|
}
|
|
family: Appearance.font.family.expressive
|
|
weight: Font.Bold
|
|
}
|
|
color: root.colOnBackground
|
|
text: modelData.padStart(2, "0")
|
|
}
|
|
}
|
|
}
|
|
|
|
// Hour hand
|
|
Item {
|
|
anchors.fill: parent
|
|
z: 2
|
|
rotation: -90 + (360 / 12) * (root.clockHour + root.clockMinute / 60)
|
|
Rectangle {
|
|
anchors.verticalCenter: parent.verticalCenter
|
|
x: parent.width / 2 - hourHandWidth / 2
|
|
width: hourHandLength
|
|
height: hourHandWidth
|
|
radius: hourHandWidth / 2
|
|
color: root.colHourHand
|
|
}
|
|
}
|
|
|
|
// Minute hand
|
|
Item {
|
|
anchors.fill: parent
|
|
z: 3
|
|
Behavior on rotation{
|
|
animation: Appearance.animation.elementResize.numberAnimation.createObject(this)
|
|
}
|
|
rotation: -90 + (360 / 60) * root.clockMinute
|
|
Rectangle {
|
|
Behavior on height {
|
|
animation: Appearance.animation.elementResize.numberAnimation.createObject(this)
|
|
}
|
|
anchors.verticalCenter: parent.verticalCenter
|
|
x: parent.width / 2 - minuteHandWidth / 2
|
|
width: minuteHandLength
|
|
height: minuteHandWidth
|
|
radius: minuteHandWidth / 2
|
|
color: root.colMinuteHand
|
|
}
|
|
}
|
|
|
|
// Center dot
|
|
Rectangle {
|
|
opacity: Config.options.background.clock.cookie.minuteHandStyle === "medium" ? 1.0 : 0 // Not using visible to allow smooth transition
|
|
Behavior on opacity {
|
|
animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this)
|
|
}
|
|
z: 4
|
|
color: root.colOnHourHand
|
|
anchors.centerIn: parent
|
|
implicitWidth: centerDotSize
|
|
implicitHeight: implicitWidth
|
|
radius: implicitWidth / 2
|
|
}
|
|
|
|
// Center glow
|
|
Rectangle {
|
|
visible: Config.options.background.clock.cookie.centerGlow
|
|
z: 0
|
|
color: root.colTimeIndicators
|
|
anchors.centerIn: parent
|
|
implicitWidth: centerGlowSize
|
|
implicitHeight: centerGlowSize
|
|
radius: implicitWidth / 2
|
|
}
|
|
|
|
|
|
// Second hand/ dot
|
|
Item {
|
|
id: secondHand
|
|
z: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
|
|
Behavior on opacity {
|
|
animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this)
|
|
}
|
|
Behavior on rotation{
|
|
animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this)
|
|
}
|
|
rotation: (360 / 60 * clockSecond) + 90 // +90 degrees to align with minute hand
|
|
anchors.fill: parent
|
|
Rectangle {
|
|
Behavior on implicitHeight {
|
|
animation: Appearance.animation.elementResize.numberAnimation.createObject(this)
|
|
}
|
|
Behavior on implicitWidth {
|
|
animation: Appearance.animation.elementResize.numberAnimation.createObject(this)
|
|
}
|
|
anchors {
|
|
left: parent.left
|
|
verticalCenter: parent.verticalCenter
|
|
leftMargin: 10
|
|
}
|
|
implicitWidth: Config.options.background.clock.cookie.secondHandStyle === "dot" ? root.secondDotSize : root.secondsHandLength
|
|
implicitHeight: Config.options.background.clock.cookie.secondHandStyle === "dot" ? implicitWidth : root.secondsHandWidth
|
|
radius: Config.options.background.clock.cookie.secondHandStyle === "dot" ? implicitWidth / 2 : root.secondsHandWidth / 2
|
|
color: colSeconds
|
|
}
|
|
}
|
|
|
|
// Date
|
|
Canvas {
|
|
width: cookie.width
|
|
height: cookie.height
|
|
rotation: secondHand.rotation + 45 // +45 degrees to align with minute hand
|
|
opacity: Config.options.background.clock.cookie.dateInClock ? 1.0 : 0
|
|
Behavior on opacity {
|
|
animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this)
|
|
}
|
|
onPaint: {
|
|
var ctx = getContext("2d");
|
|
ctx.clearRect(0,0,width,height);
|
|
ctx.font = "700 30px gabarito";
|
|
|
|
var text = DateTime.date.substring(0,3) + " " + DateTime.date.substring(4,7);
|
|
var radius = 78;
|
|
var angleStep = Math.PI / 2.35 / text.length;
|
|
|
|
for (var i=0; i<text.length; i++) {
|
|
var angle = i * angleStep - Math.PI/2;
|
|
var x = width/2 + radius * Math.cos(angle);
|
|
var y = height/2 + radius * Math.sin(angle);
|
|
|
|
ctx.save();
|
|
ctx.translate(x,y);
|
|
ctx.rotate(angle + Math.PI/2);
|
|
|
|
if (i >= 3)
|
|
ctx.fillStyle = root.colOnBackground;
|
|
else
|
|
ctx.fillStyle = Appearance.colors.colSecondaryHover;
|
|
|
|
ctx.fillText(text[i], 0, 0);
|
|
ctx.restore();
|
|
}
|
|
}
|
|
}
|
|
|
|
// Hour Indicator numbers
|
|
Repeater {
|
|
model: 4
|
|
Item {
|
|
opacity: Config.options.background.clock.cookie.dialNumberStyle === "numbers" ? 1.0 : 0 // Not using visible to allow smooth transition
|
|
Behavior on opacity {
|
|
animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this)
|
|
}
|
|
required property int index
|
|
rotation: 360 / 4 * index
|
|
anchors.fill: parent
|
|
Rectangle {
|
|
anchors {
|
|
left: parent.left
|
|
verticalCenter: parent.verticalCenter
|
|
leftMargin: 32
|
|
}
|
|
implicitWidth: root.hourNumberSize
|
|
implicitHeight: implicitWidth
|
|
//radius: implicitWidth / 2
|
|
color: "transparent"
|
|
//opacity: 0.5
|
|
StyledText{
|
|
|
|
color: root.colOnBackground
|
|
anchors.centerIn: parent
|
|
text: index === 0 ? "9" : index === 1 ? "12" : index === 2 ? "3" : "6"
|
|
rotation: index % 2 === 0 ? index * 90 : -index * 90 //A better way can be found to show texts on right angle
|
|
font {
|
|
family: Appearance.font.family.reading
|
|
pixelSize: 80
|
|
weight: 5000
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
// Quote
|
|
Rectangle{
|
|
id: quoteBox
|
|
anchors.horizontalCenter: parent.horizontalCenter
|
|
anchors.top: parent.bottom
|
|
anchors.topMargin: 24
|
|
|
|
implicitWidth: quoteText.width + quoteIcon.width + 16 // for spacing on both sides
|
|
implicitHeight: showQuote ? quoteText.height + 8 : 0
|
|
radius: Appearance.rounding.small
|
|
color: Appearance.colors.colSecondaryContainer
|
|
|
|
Behavior on implicitHeight {
|
|
animation: Appearance.animation.elementResize.numberAnimation.createObject(this)
|
|
}
|
|
Behavior on implicitWidth {
|
|
animation: Appearance.animation.elementResize.numberAnimation.createObject(this)
|
|
}
|
|
Behavior on opacity {
|
|
animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this)
|
|
}
|
|
|
|
RowLayout{
|
|
anchors.centerIn: parent
|
|
spacing: 4
|
|
|
|
MaterialSymbol{
|
|
id: quoteIcon
|
|
visible: showQuote > 0
|
|
iconSize: Appearance.font.pixelSize.huge
|
|
text: "comic_bubble"
|
|
}
|
|
StyledText{
|
|
id: quoteText
|
|
visible : showQuote > 0
|
|
Layout.fillWidth: true
|
|
horizontalAlignment: Text.AlignHCenter
|
|
text: Config.options.background.quote
|
|
font {
|
|
family: Appearance.font.family.main
|
|
pixelSize: Appearance.font.pixelSize.large
|
|
weight: Font.Normal
|
|
italic: true
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|