mirror of
https://github.com/zoriya/noctalia-shell.git
synced 2026-05-25 07:34:39 +00:00
Lock Screen also uses this clock
This commit is contained in:
@@ -5,6 +5,8 @@ import Quickshell
|
||||
|
||||
Item {
|
||||
property var now
|
||||
property color backgroundColor: Color.mPrimary
|
||||
property color clockColor: Color.mOnPrimary
|
||||
anchors.fill: parent
|
||||
|
||||
Canvas {
|
||||
@@ -17,8 +19,8 @@ Item {
|
||||
property real markAlpha: 0.7
|
||||
property color secondHandColor: {
|
||||
var defaultColor = Color.mError
|
||||
var backgroundL = Color.mPrimary.hslLightness
|
||||
var hourMarkL = (Color.mOnPrimary.hslLightness * markAlpha) + (backgroundL *(1.0-markAlpha))
|
||||
var backgroundL = backgroundColor.hslLightness
|
||||
var hourMarkL = (clockColor.hslLightness * markAlpha) + (backgroundL *(1.0-markAlpha))
|
||||
|
||||
var bestWorstContrast = -1
|
||||
var bestColor = defaultColor
|
||||
@@ -54,7 +56,7 @@ Item {
|
||||
var radius = Math.min(width, height) / 2
|
||||
|
||||
// Hour marks
|
||||
ctx.strokeStyle = Qt.alpha(Color.mOnPrimary, markAlpha)
|
||||
ctx.strokeStyle = Qt.alpha(clockColor, markAlpha)
|
||||
ctx.lineWidth = 2 * Style.uiScaleRatio
|
||||
var scaleFactor = 0.7
|
||||
|
||||
@@ -76,7 +78,7 @@ Item {
|
||||
ctx.save()
|
||||
var hourAngle = (hours % 12 + minutes / 60) * Math.PI / 6
|
||||
ctx.rotate(hourAngle)
|
||||
ctx.strokeStyle = Color.mOnPrimary
|
||||
ctx.strokeStyle = clockColor
|
||||
ctx.lineWidth = 3 * Style.uiScaleRatio
|
||||
ctx.lineCap = "round"
|
||||
ctx.beginPath()
|
||||
@@ -89,7 +91,7 @@ Item {
|
||||
ctx.save()
|
||||
var minuteAngle = (minutes + seconds / 60) * Math.PI / 30
|
||||
ctx.rotate(minuteAngle)
|
||||
ctx.strokeStyle = Color.mOnPrimary
|
||||
ctx.strokeStyle = clockColor
|
||||
ctx.lineWidth = 2 * Style.uiScaleRatio
|
||||
ctx.lineCap = "round"
|
||||
ctx.beginPath()
|
||||
@@ -114,7 +116,7 @@ Item {
|
||||
// Center dot
|
||||
ctx.beginPath()
|
||||
ctx.arc(0, 0, 3 * Style.uiScaleRatio, 0, 2 * Math.PI)
|
||||
ctx.fillStyle = Color.mOnPrimary
|
||||
ctx.fillStyle = clockColor
|
||||
ctx.fill()
|
||||
}
|
||||
|
||||
|
||||
@@ -7,6 +7,8 @@ Item {
|
||||
id: clockRoot
|
||||
|
||||
property var now
|
||||
property color backgroundColor: Color.mPrimary
|
||||
property color clockColor: Color.mOnPrimary
|
||||
|
||||
height: Math.round((Style.fontSizeXXXL * 1.9) / 2 * Style.uiScaleRatio) * 2
|
||||
width: clockRoot.height
|
||||
@@ -20,6 +22,8 @@ Item {
|
||||
onLoaded: {
|
||||
// Bind the loaded item's 'now' property to *this* component's 'now' property
|
||||
item.now = Qt.binding(function() { return clockRoot.now })
|
||||
item.backgroundColor = Qt.binding(function() { return clockRoot.backgroundColor })
|
||||
item.clockColor = Qt.binding(function() { return clockRoot.clockColor })
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -5,6 +5,8 @@ import Quickshell
|
||||
|
||||
Item {
|
||||
property var now
|
||||
property color backgroundColor: Color.mPrimary
|
||||
property color clockColor: Color.mOnPrimary
|
||||
anchors.fill: parent
|
||||
|
||||
// Digital clock's seconds circular progress
|
||||
@@ -32,14 +34,14 @@ Item {
|
||||
ctx.beginPath()
|
||||
ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI)
|
||||
ctx.lineWidth = 2.5
|
||||
ctx.strokeStyle = Qt.alpha(Color.mOnPrimary, 0.15)
|
||||
ctx.strokeStyle = Qt.alpha(clockColor, 0.15)
|
||||
ctx.stroke()
|
||||
|
||||
// Progress arc
|
||||
ctx.beginPath()
|
||||
ctx.arc(centerX, centerY, radius, -Math.PI / 2, -Math.PI / 2 + progress * 2 * Math.PI)
|
||||
ctx.lineWidth = 2.5
|
||||
ctx.strokeStyle = Color.mOnPrimary
|
||||
ctx.strokeStyle = clockColor
|
||||
ctx.lineCap = "round"
|
||||
ctx.stroke()
|
||||
}
|
||||
@@ -59,7 +61,7 @@ Item {
|
||||
|
||||
pointSize: Style.fontSizeXS
|
||||
font.weight: Style.fontWeightBold
|
||||
color: Color.mOnPrimary
|
||||
color: clockColor
|
||||
family: Settings.data.ui.fontFixed
|
||||
Layout.alignment: Qt.AlignHCenter
|
||||
}
|
||||
@@ -68,7 +70,7 @@ Item {
|
||||
text: Qt.formatTime(now, "mm")
|
||||
pointSize: Style.fontSizeXXS
|
||||
font.weight: Style.fontWeightBold
|
||||
color: Color.mOnPrimary
|
||||
color: clockColor
|
||||
family: Settings.data.ui.fontFixed
|
||||
Layout.alignment: Qt.AlignHCenter
|
||||
}
|
||||
|
||||
@@ -12,6 +12,7 @@ import qs.Commons
|
||||
import qs.Services
|
||||
import qs.Widgets
|
||||
import qs.Modules.Audio
|
||||
import qs.Modules.Bar.Calendar
|
||||
|
||||
Loader {
|
||||
id: lockScreen
|
||||
@@ -363,81 +364,48 @@ Loader {
|
||||
Layout.fillWidth: true
|
||||
}
|
||||
|
||||
Item {
|
||||
// Clock
|
||||
ClockLoader {
|
||||
// The 'now' property is available as Time.date
|
||||
now: Time.date
|
||||
|
||||
// Apply layout properties from the old Item
|
||||
Layout.preferredWidth: 70
|
||||
Layout.preferredHeight: 70
|
||||
Layout.alignment: Qt.AlignVCenter
|
||||
|
||||
// Seconds circular progress
|
||||
Canvas {
|
||||
id: secondsProgress
|
||||
anchors.fill: parent
|
||||
|
||||
property real progress: Time.date.getSeconds() / 60
|
||||
onProgressChanged: requestPaint()
|
||||
|
||||
Connections {
|
||||
target: Time
|
||||
function onDateChanged() {
|
||||
const total = Time.date.getSeconds() * 1000 + Time.date.getMilliseconds()
|
||||
secondsProgress.progress = total / 60000
|
||||
}
|
||||
}
|
||||
|
||||
onPaint: {
|
||||
var ctx = getContext("2d")
|
||||
var centerX = width / 2
|
||||
var centerY = height / 2
|
||||
var radius = Math.min(width, height) / 2 - 3
|
||||
|
||||
ctx.reset()
|
||||
|
||||
// Background circle
|
||||
ctx.beginPath()
|
||||
ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI)
|
||||
ctx.lineWidth = 2.5
|
||||
ctx.strokeStyle = Qt.alpha(Color.mOnSurface, 0.15)
|
||||
ctx.stroke()
|
||||
|
||||
// Progress arc
|
||||
ctx.beginPath()
|
||||
ctx.arc(centerX, centerY, radius, -Math.PI / 2, -Math.PI / 2 + progress * 2 * Math.PI)
|
||||
ctx.lineWidth = 2.5
|
||||
ctx.strokeStyle = Color.mPrimary
|
||||
ctx.lineCap = "round"
|
||||
ctx.stroke()
|
||||
}
|
||||
}
|
||||
|
||||
// Digital clock
|
||||
ColumnLayout {
|
||||
anchors.centerIn: parent
|
||||
spacing: 0
|
||||
|
||||
NText {
|
||||
text: {
|
||||
var t = Settings.data.location.use12hourFormat ? Qt.locale().toString(Time.date, "hh AP") : Qt.locale().toString(Time.date, "HH")
|
||||
return t
|
||||
}
|
||||
pointSize: Style.fontSizeM
|
||||
font.weight: Style.fontWeightBold
|
||||
family: Settings.data.ui.fontFixed
|
||||
color: Color.mOnSurface
|
||||
horizontalAlignment: Text.AlignHCenter
|
||||
Layout.alignment: Qt.AlignHCenter
|
||||
}
|
||||
|
||||
NText {
|
||||
text: Qt.formatTime(Time.date, "mm")
|
||||
pointSize: Style.fontSizeM
|
||||
font.weight: Style.fontWeightBold
|
||||
family: Settings.data.ui.fontFixed
|
||||
color: Color.mOnSurfaceVariant
|
||||
horizontalAlignment: Text.AlignHCenter
|
||||
Layout.alignment: Qt.AlignHCenter
|
||||
}
|
||||
}
|
||||
// *** Override the colors to match the LockScreen style ***
|
||||
backgroundColor: Color.mSurface
|
||||
clockColor: Color.mOnSurface
|
||||
}
|
||||
// ColumnLayout {
|
||||
// anchors.centerIn: parent
|
||||
// spacing: 0
|
||||
//
|
||||
// NText {
|
||||
// text: {
|
||||
// var t = Settings.data.location.use12hourFormat ? Qt.locale().toString(Time.date, "hh AP") : Qt.locale().toString(Time.date, "HH")
|
||||
// return t
|
||||
// }
|
||||
// pointSize: Style.fontSizeM
|
||||
// font.weight: Style.fontWeightBold
|
||||
// family: Settings.data.ui.fontFixed
|
||||
// color: Color.mOnSurface
|
||||
// horizontalAlignment: Text.AlignHCenter
|
||||
// Layout.alignment: Qt.AlignHCenter
|
||||
// }
|
||||
//
|
||||
// NText {
|
||||
// text: Qt.formatTime(Time.date, "mm")
|
||||
// pointSize: Style.fontSizeM
|
||||
// font.weight: Style.fontWeightBold
|
||||
// family: Settings.data.ui.fontFixed
|
||||
// color: Color.mOnSurfaceVariant
|
||||
// horizontalAlignment: Text.AlignHCenter
|
||||
// Layout.alignment: Qt.AlignHCenter
|
||||
// }
|
||||
// }
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user