nosignal/nosignal-shell
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

background: redesign desktop clock and allow positioning (#1092)

Browse source 
* background(desktop clock): Redesigned the Desktop Clock and allow positioning and scaling

* desktopClock: initial fix for contrast and added debug tool

* fix properties

* fix BackgroundConfig.qml for desktopClock

* removed debugging tool and applied maintainer suggestions

* added invert colors, opacity, and fix positioning

* added blur, fix layout, allow invert colors

* added implicitWidth behavior and small change
This commit is contained in:
Ezekiel Gonzales 2026-01-17 22:19:53 +08:00 • committed by GitHub
parent a48abd216a
commit fd1165f153
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 291 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
README.md
View file

@ -303,7 +303,20 @@ default, you must create it manually.
},
"background": {
"desktopClock": {
"enabled": false
"enabled": false,
"scale": 1.0,
"position": "bottom-right",
"shadow": {
"enabled": true,
"opacity": 0.7,
"blur": 0.4
},
"background": {
"enabled": false,
"opacity": 0.7,
"blur": true
},
"invertColors": false
},
"enabled": true,
"visualiser": {

17
config/BackgroundConfig.qml
View file

@ -7,6 +7,23 @@ JsonObject {
component DesktopClock: JsonObject {
property bool enabled: false
property real scale: 1.0
property string position: "bottom-right"
property bool invertColors: false
property DesktopClockBackground background: DesktopClockBackground {}
property DesktopClockShadow shadow: DesktopClockShadow {}
}
component DesktopClockBackground: JsonObject {
property bool enabled: false
property real opacity: 0.7
property bool blur: true
}
component DesktopClockShadow: JsonObject {
property bool enabled: true
property real opacity: 0.7
property real blur: 0.4
}
component Visualiser: JsonObject {

117
modules/background/Background.qml
View file

@ -30,24 +30,117 @@ Loader {
anchors.left: true
anchors.right: true
Wallpaper {
id: wallpaper
Item {
id: behindClock
anchors.fill: parent
Wallpaper {
id: wallpaper
}
Visualiser {
anchors.fill: parent
screen: win.modelData
wallpaper: wallpaper
}
}
Visualiser {
anchors.fill: parent
screen: win.modelData
wallpaper: wallpaper
}
Loader {
anchors.right: parent.right
anchors.bottom: parent.bottom
anchors.margins: Appearance.padding.large
id: clockLoader
active: Config.background.desktopClock.enabled
source: "DesktopClock.qml"
anchors.margins: Appearance.padding.large * 2
anchors.leftMargin: Appearance.padding.large * 2 + Config.bar.sizes.innerWidth + Math.max(Appearance.padding.smaller, Config.border.thickness)
state: Config.background.desktopClock.position
states: [
State {
name: "top-left"
AnchorChanges {
target: clockLoader
anchors.top: parent.top
anchors.left: parent.left
}
},
State {
name: "top-center"
AnchorChanges {
target: clockLoader
anchors.top: parent.top
anchors.horizontalCenter: parent.horizontalCenter
}
},
State {
name: "top-right"
AnchorChanges {
target: clockLoader
anchors.top: parent.top
anchors.right: parent.right }
},
State {
name: "middle-left"
AnchorChanges {
target: clockLoader
anchors.verticalCenter: parent.verticalCenter
anchors.left: parent.left
}
},
State {
name: "middle-center"
AnchorChanges {
target: clockLoader
anchors.verticalCenter: parent.verticalCenter
anchors.horizontalCenter: parent.horizontalCenter
}
},
State {
name: "middle-right"
AnchorChanges {
target: clockLoader
anchors.verticalCenter: parent.verticalCenter
anchors.right: parent.right
}
},
State {
name: "bottom-left"
AnchorChanges {
target: clockLoader
anchors.bottom: parent.bottom
anchors.left: parent.left
}
},
State {
name: "bottom-center"
AnchorChanges {
target: clockLoader
anchors.bottom: parent.bottom
anchors.horizontalCenter: parent.horizontalCenter
}
},
State {
name: "bottom-right"
AnchorChanges {
target: clockLoader
anchors.bottom: parent.bottom
anchors.right: parent.right
}
}
]
transitions: Transition {
AnchorAnimation {
duration: Appearance.anim.durations.expressiveDefaultSpatial
easing.bezierCurve: Appearance.anim.curves.expressiveDefaultSpatial
}
}
sourceComponent: DesktopClock {
wallpaper: behindClock
absX: clockLoader.x
absY: clockLoader.y
}
}
}
}

165
modules/background/DesktopClock.qml
View file

@ -1,19 +1,164 @@
pragma ComponentBehavior: Bound
import qs.components
import qs.services
import qs.config
import QtQuick
import QtQuick.Layouts
import QtQuick.Effects
Item {
implicitWidth: timeText.implicitWidth + Appearance.padding.large * 2
implicitHeight: timeText.implicitHeight + Appearance.padding.large * 2
id: root
StyledText {
id: timeText
required property Item wallpaper
required property real absX
required property real absY
anchors.centerIn: parent
text: Time.format(Config.services.useTwelveHourClock ? "hh:mm:ss A" : "hh:mm:ss")
font.family: Appearance.font.family.clock
font.pointSize: Appearance.font.size.extraLarge
font.bold: true
property real scale: Config.background.desktopClock.scale
readonly property bool bgEnabled: Config.background.desktopClock.background.enabled
readonly property bool blurEnabled: bgEnabled && Config.background.desktopClock.background.blur
readonly property bool invertColors: Config.background.desktopClock.invertColors
readonly property bool useLightSet: Colours.light ? !invertColors : invertColors
readonly property color safePrimary: useLightSet ? Colours.palette.m3primaryContainer : Colours.palette.m3primary
readonly property color safeSecondary: useLightSet ? Colours.palette.m3secondaryContainer : Colours.palette.m3secondary
readonly property color safeTertiary: useLightSet ? Colours.palette.m3tertiaryContainer : Colours.palette.m3tertiary
implicitWidth: layout.implicitWidth + (Appearance.padding.large * 4 * root.scale)
implicitHeight: layout.implicitHeight + (Appearance.padding.large * 2 * root.scale)
Item {
id: clockContainer
anchors.fill: parent
layer.enabled: Config.background.desktopClock.shadow.enabled
layer.effect: MultiEffect {
shadowEnabled: true
shadowColor: Colours.palette.m3shadow
shadowOpacity: Config.background.desktopClock.shadow.opacity
shadowBlur: Config.background.desktopClock.shadow.blur
}
Loader {
anchors.fill: parent
active: root.blurEnabled
sourceComponent: MultiEffect {
source: ShaderEffectSource {
sourceItem: root.wallpaper
sourceRect: Qt.rect(root.absX, root.absY, root.width, root.height)
}
maskSource: backgroundPlate
maskEnabled: true
blurEnabled: true
blur: 1
blurMax: 64
autoPaddingEnabled: false
}
}
StyledRect {
id: backgroundPlate
visible: root.bgEnabled
anchors.fill: parent
radius: Appearance.rounding.large * root.scale
opacity: Config.background.desktopClock.background.opacity
color: Colours.palette.m3surface
layer.enabled: root.blurEnabled
}
RowLayout {
id: layout
anchors.centerIn: parent
spacing: Appearance.spacing.larger * root.scale
RowLayout {
spacing: Appearance.spacing.small
StyledText {
text: Time.format(Config.services.useTwelveHourClock ? "hh" : "HH")
font.pointSize: Appearance.font.size.extraLarge * 3 * root.scale
font.weight: Font.Bold
color: root.safePrimary
}
StyledText {
text: ":"
font.pointSize: Appearance.font.size.extraLarge * 3 * root.scale
color: root.safeTertiary
opacity: 0.8
Layout.topMargin: -Appearance.padding.large * 1.5 * root.scale
}
StyledText {
text: Time.format("mm")
font.pointSize: Appearance.font.size.extraLarge * 3 * root.scale
font.weight: Font.Bold
color: root.safeSecondary
}
StyledText {
visible: Config.services.useTwelveHourClock
text: Time.format("A")
font.pointSize: Appearance.font.size.large * root.scale
color: root.safeSecondary
Layout.alignment: Qt.AlignTop
Layout.topMargin: Appearance.padding.large * 1.4 * root.scale
}
}
StyledRect {
Layout.fillHeight: true
Layout.preferredWidth: 4 * root.scale
Layout.topMargin: Appearance.spacing.larger * root.scale
Layout.bottomMargin: Appearance.spacing.larger * root.scale
radius: Appearance.rounding.full
color: root.safePrimary
opacity: 0.8
}
ColumnLayout {
spacing: 0
StyledText {
text: Time.format("MMMM").toUpperCase()
font.pointSize: Appearance.font.size.large * root.scale
font.letterSpacing: 4
font.weight: Font.Bold
color: root.safeSecondary
}
StyledText {
text: Time.format("dd")
font.pointSize: Appearance.font.size.extraLarge * root.scale
font.letterSpacing: 2
font.weight: Font.Medium
color: root.safePrimary
}
StyledText {
text: Time.format("dddd")
font.pointSize: Appearance.font.size.larger * root.scale
font.letterSpacing: 2
color: root.safeSecondary
}
}
}
}
}
Behavior on scale {
Anim {
duration: Appearance.anim.durations.expressiveDefaultSpatial
easing.bezierCurve: Appearance.anim.curves.expressiveDefaultSpatial
}
}
Behavior on implicitWidth {
Anim {
duration: Appearance.anim.durations.small
}
}
}