Salastil/DankMaterialShell
1
0
Fork 0
mirror of https://github.com/AvengeMedia/DankMaterialShell.git synced 2026-01-25 14:02:53 -05:00
Code Packages Releases Activity

desktop clock: general scaling and stylng fixes for digital variant

Browse Source
This commit is contained in:
bbedward
2026-01-25 13:30:11 -05:00
parent f7df3b2a68
commit 832807a217
3 changed files with 226 additions and 110 deletions
Download Patch File Download Diff File Expand all files Collapse all files

302
quickshell/Modules/BuiltinDesktopPlugins/DesktopClockWidget.qml
View File

@@ -22,9 +22,9 @@ Item {
case "analog":
return 200;
case "stacked":
return 160;
return 100;
default:
return 280;
return 160;
}
}
property real defaultHeight: {
@@ -32,9 +32,9 @@ Item {
case "analog":
return 200;
case "stacked":
return 220;
default:
return 160;
default:
return 70;
}
}
property real minWidth: {
@@ -42,9 +42,9 @@ Item {
case "analog":
return 120;
case "stacked":
return 100;
return 70;
default:
return 140;
return 100;
}
}
property real minHeight: {
@@ -52,9 +52,9 @@ Item {
case "analog":
return 120;
case "stacked":
return 140;
default:
return 100;
default:
return 45;
}
}
@@ -84,7 +84,8 @@ Item {
readonly property color backgroundColor: Theme.withAlpha(Theme.surface, root.transparency)
readonly property bool showAnalogSeconds: isInstance ? (cfg.showAnalogSeconds ?? true) : SettingsData.desktopClockShowAnalogSeconds
readonly property bool needsSeconds: clockStyle === "analog" ? showAnalogSeconds : SettingsData.showSeconds
readonly property bool showDigitalSeconds: isInstance ? (cfg.showDigitalSeconds ?? false) : false
readonly property bool needsSeconds: clockStyle === "analog" ? showAnalogSeconds : showDigitalSeconds
SystemClock {
id: systemClock
@@ -298,12 +299,25 @@ Item {
Item {
id: digitalRoot
property real baseSize: Math.max(28, height * 0.38)
property real smallSize: Math.max(12, baseSize * 0.32)
property bool hasDate: root.showDate
property bool hasAmPm: !SettingsData.use24HourClock
property real verticalScale: hasDate && hasAmPm ? 0.55 : (hasDate || hasAmPm ? 0.65 : 0.8)
property real baseSize: Math.min(height * verticalScale, width * 0.22)
property real digitWidth: baseSize * 0.62
property real smallSize: baseSize * 0.35
property string hoursStr: {
const hours = SettingsData.use24HourClock ? systemClock.date?.getHours() ?? 0 : ((systemClock.date?.getHours() ?? 0) % 12 || 12);
if (SettingsData.use24HourClock || SettingsData.padHours12Hour)
return String(hours).padStart(2, '0');
return String(hours);
}
property string minutesStr: String(systemClock.date?.getMinutes() ?? 0).padStart(2, '0')
property string secondsStr: String(systemClock.date?.getSeconds() ?? 0).padStart(2, '0')
Column {
anchors.centerIn: parent
spacing: 4
spacing: 0
StyledText {
visible: root.showDate
@@ -314,51 +328,86 @@ Item {
return systemClock.date?.toLocaleDateString(Qt.locale(), "ddd, MMM d") ?? "";
}
font.pixelSize: digitalRoot.smallSize
color: root.accentColor
}
StyledText {
anchors.horizontalCenter: parent.horizontalCenter
text: {
const hours = SettingsData.use24HourClock ? systemClock.date?.getHours() ?? 0 : ((systemClock.date?.getHours() ?? 0) % 12 || 12);
const minutes = String(systemClock.date?.getMinutes() ?? 0).padStart(2, '0');
return hours + ":" + minutes;
}
font.pixelSize: digitalRoot.baseSize
font.weight: Font.Normal
color: root.accentColor
color: Theme.withAlpha(root.accentColor, 0.7)
}
Row {
visible: !SettingsData.use24HourClock || SettingsData.showSeconds
anchors.horizontalCenter: parent.horizontalCenter
spacing: Theme.spacingS
Row {
visible: SettingsData.showSeconds
spacing: Theme.spacingXS
DankIcon {
name: "timer"
size: Math.max(10, digitalRoot.baseSize * 0.25)
color: root.subtleTextColor
anchors.verticalCenter: parent.verticalCenter
}
StyledText {
text: String(systemClock.date?.getSeconds() ?? 0).padStart(2, '0')
font.pixelSize: digitalRoot.smallSize
color: root.subtleTextColor
}
}
spacing: 0
StyledText {
visible: !SettingsData.use24HourClock
text: (systemClock.date?.getHours() ?? 0) >= 12 ? "PM" : "AM"
font.pixelSize: digitalRoot.smallSize
visible: digitalRoot.hoursStr.length > 1
width: digitalRoot.digitWidth
text: digitalRoot.hoursStr.charAt(0)
font.pixelSize: digitalRoot.baseSize
font.weight: Font.Medium
color: root.accentColor
horizontalAlignment: Text.AlignHCenter
}
StyledText {
width: digitalRoot.digitWidth
text: digitalRoot.hoursStr.length > 1 ? digitalRoot.hoursStr.charAt(1) : digitalRoot.hoursStr.charAt(0)
font.pixelSize: digitalRoot.baseSize
font.weight: Font.Medium
color: root.accentColor
horizontalAlignment: Text.AlignHCenter
}
StyledText {
text: ":"
font.pixelSize: digitalRoot.baseSize
font.weight: Font.Medium
color: root.accentColor
}
StyledText {
width: digitalRoot.digitWidth
text: digitalRoot.minutesStr.charAt(0)
font.pixelSize: digitalRoot.baseSize
font.weight: Font.Medium
color: root.accentColor
horizontalAlignment: Text.AlignHCenter
}
StyledText {
width: digitalRoot.digitWidth
text: digitalRoot.minutesStr.charAt(1)
font.pixelSize: digitalRoot.baseSize
font.weight: Font.Medium
color: root.accentColor
horizontalAlignment: Text.AlignHCenter
}
StyledText {
visible: root.showDigitalSeconds
text: ":"
font.pixelSize: digitalRoot.baseSize
font.weight: Font.Medium
color: Theme.withAlpha(root.accentColor, 0.7)
}
StyledText {
visible: root.showDigitalSeconds
width: digitalRoot.digitWidth
text: digitalRoot.secondsStr.charAt(0)
font.pixelSize: digitalRoot.baseSize
font.weight: Font.Medium
color: Theme.withAlpha(root.accentColor, 0.7)
horizontalAlignment: Text.AlignHCenter
}
StyledText {
visible: root.showDigitalSeconds
width: digitalRoot.digitWidth
text: digitalRoot.secondsStr.charAt(1)
font.pixelSize: digitalRoot.baseSize
font.weight: Font.Medium
color: Theme.withAlpha(root.accentColor, 0.7)
horizontalAlignment: Text.AlignHCenter
}
}
StyledText {
visible: !SettingsData.use24HourClock
anchors.horizontalCenter: parent.horizontalCenter
text: (systemClock.date?.getHours() ?? 0) >= 12 ? "PM" : "AM"
font.pixelSize: digitalRoot.smallSize
font.weight: Font.Medium
color: Theme.withAlpha(root.accentColor, 0.7)
}
}
}
@@ -370,78 +419,127 @@ Item {
Item {
id: stackedRoot
property real baseSize: Math.max(32, height * 0.32)
property real smallSize: Math.max(12, baseSize * 0.28)
property bool hasSeconds: root.showDigitalSeconds
property bool hasDate: root.showDate
property bool hasAmPm: !SettingsData.use24HourClock
property real extraContent: (hasSeconds ? 0.12 : 0) + (hasDate ? 0.08 : 0) + (hasAmPm ? 0.08 : 0)
property real baseSize: height * (0.42 - extraContent * 0.5)
property real digitWidth: baseSize * 0.58
property real smallSize: baseSize * 0.5
property real rowSpacing: -baseSize * 0.17
Column {
anchors.centerIn: parent
spacing: -baseSize * 0.1
spacing: 0
StyledText {
visible: root.showDate
Column {
spacing: stackedRoot.rowSpacing
anchors.horizontalCenter: parent.horizontalCenter
bottomPadding: Theme.spacingS
text: {
if (SettingsData.clockDateFormat && SettingsData.clockDateFormat.length > 0)
return systemClock.date?.toLocaleDateString(Qt.locale(), SettingsData.clockDateFormat) ?? "";
return systemClock.date?.toLocaleDateString(Qt.locale(), "ddd, MMM d") ?? "";
}
font.pixelSize: stackedRoot.smallSize
color: root.accentColor
}
StyledText {
anchors.horizontalCenter: parent.horizontalCenter
text: {
const hours = SettingsData.use24HourClock ? systemClock.date?.getHours() ?? 0 : ((systemClock.date?.getHours() ?? 0) % 12 || 12);
return String(hours).padStart(2, '0');
}
font.pixelSize: stackedRoot.baseSize
font.weight: Font.Normal
color: root.accentColor
lineHeight: 0.85
}
StyledText {
anchors.horizontalCenter: parent.horizontalCenter
text: String(systemClock.date?.getMinutes() ?? 0).padStart(2, '0')
font.pixelSize: stackedRoot.baseSize
font.weight: Font.Normal
color: root.accentColor
lineHeight: 0.85
}
Row {
visible: SettingsData.showSeconds || !SettingsData.use24HourClock
anchors.horizontalCenter: parent.horizontalCenter
topPadding: Theme.spacingXS
spacing: Theme.spacingS
Row {
visible: SettingsData.showSeconds
spacing: Theme.spacingXS
spacing: 0
anchors.horizontalCenter: parent.horizontalCenter
DankIcon {
name: "timer"
size: Math.max(10, stackedRoot.baseSize * 0.28)
color: root.subtleTextColor
anchors.verticalCenter: parent.verticalCenter
StyledText {
text: {
if (SettingsData.use24HourClock)
return String(systemClock.date?.getHours() ?? 0).padStart(2, '0').charAt(0);
const hours = systemClock.date?.getHours() ?? 0;
const display = hours === 0 ? 12 : hours > 12 ? hours - 12 : hours;
return String(display).padStart(2, '0').charAt(0);
}
font.pixelSize: stackedRoot.baseSize
font.weight: Font.Medium
color: root.accentColor
width: stackedRoot.digitWidth
horizontalAlignment: Text.AlignHCenter
}
StyledText {
text: String(systemClock.date?.getSeconds() ?? 0).padStart(2, '0')
font.pixelSize: stackedRoot.smallSize
color: root.subtleTextColor
text: {
if (SettingsData.use24HourClock)
return String(systemClock.date?.getHours() ?? 0).padStart(2, '0').charAt(1);
const hours = systemClock.date?.getHours() ?? 0;
const display = hours === 0 ? 12 : hours > 12 ? hours - 12 : hours;
return String(display).padStart(2, '0').charAt(1);
}
font.pixelSize: stackedRoot.baseSize
font.weight: Font.Medium
color: root.accentColor
width: stackedRoot.digitWidth
horizontalAlignment: Text.AlignHCenter
}
}
Row {
spacing: 0
anchors.horizontalCenter: parent.horizontalCenter
StyledText {
text: String(systemClock.date?.getMinutes() ?? 0).padStart(2, '0').charAt(0)
font.pixelSize: stackedRoot.baseSize
font.weight: Font.Medium
color: root.accentColor
width: stackedRoot.digitWidth
horizontalAlignment: Text.AlignHCenter
}
StyledText {
text: String(systemClock.date?.getMinutes() ?? 0).padStart(2, '0').charAt(1)
font.pixelSize: stackedRoot.baseSize
font.weight: Font.Medium
color: root.accentColor
width: stackedRoot.digitWidth
horizontalAlignment: Text.AlignHCenter
}
}
}
Row {
visible: stackedRoot.hasSeconds
spacing: 0
anchors.horizontalCenter: parent.horizontalCenter
StyledText {
visible: !SettingsData.use24HourClock
text: (systemClock.date?.getHours() ?? 0) >= 12 ? "PM" : "AM"
text: String(systemClock.date?.getSeconds() ?? 0).padStart(2, '0').charAt(0)
font.pixelSize: stackedRoot.smallSize
font.weight: Font.Medium
color: root.accentColor
color: Theme.withAlpha(root.accentColor, 0.7)
width: stackedRoot.smallSize * 0.58
horizontalAlignment: Text.AlignHCenter
}
StyledText {
text: String(systemClock.date?.getSeconds() ?? 0).padStart(2, '0').charAt(1)
font.pixelSize: stackedRoot.smallSize
font.weight: Font.Medium
color: Theme.withAlpha(root.accentColor, 0.7)
width: stackedRoot.smallSize * 0.58
horizontalAlignment: Text.AlignHCenter
}
}
Item {
width: 1
height: stackedRoot.baseSize * 0.1
visible: stackedRoot.hasDate
}
StyledText {
visible: stackedRoot.hasDate
anchors.horizontalCenter: parent.horizontalCenter
text: systemClock.date?.toLocaleDateString(Qt.locale(), "MMM dd") ?? ""
font.pixelSize: stackedRoot.smallSize * 0.7
color: Theme.withAlpha(root.accentColor, 0.7)
}
StyledText {
visible: stackedRoot.hasAmPm
anchors.horizontalCenter: parent.horizontalCenter
text: (systemClock.date?.getHours() ?? 0) >= 12 ? "PM" : "AM"
font.pixelSize: stackedRoot.smallSize * 0.7
font.weight: Font.Medium
color: Theme.withAlpha(root.accentColor, 0.7)
}
}
}

11
quickshell/Modules/Settings/DesktopWidgetSettings/ClockSettings.qml
View File

@@ -73,6 +73,17 @@ Column {
onToggled: checked => root.updateConfig("showAnalogSeconds", checked)
}
SettingsDivider {
visible: cfg.style === "digital" || cfg.style === "stacked"
}
SettingsToggleRow {
visible: cfg.style === "digital" || cfg.style === "stacked"
text: I18n.tr("Show Seconds")
checked: cfg.showDigitalSeconds ?? false
onToggled: checked => root.updateConfig("showDigitalSeconds", checked)
}
SettingsDivider {}
SettingsToggleRow {

23
quickshell/Modules/Settings/ThemeColorsTab.qml
View File

@@ -164,8 +164,7 @@ Item {
detection[item.id] = item.detected;
}
themeColorsTab.templateDetection = detection;
} catch (e) {
}
} catch (e) {}
}
}
}
@@ -1028,8 +1027,14 @@ Item {
height: 45
anchors.horizontalCenter: parent.horizontalCenter
model: [
{ "text": "Time", "icon": "access_time" },
{ "text": "Location", "icon": "place" }
{
"text": "Time",
"icon": "access_time"
},
{
"text": "Location",
"icon": "place"
}
]
Component.onCompleted: {
@@ -1104,7 +1109,8 @@ Item {
currentValue: SessionData.themeModeStartHour.toString()
options: {
var hours = [];
for (var i = 0; i < 24; i++) hours.push(i.toString());
for (var i = 0; i < 24; i++)
hours.push(i.toString());
return hours;
}
onValueChanged: value => {
@@ -1145,7 +1151,8 @@ Item {
currentValue: SessionData.themeModeEndHour.toString()
options: {
var hours = [];
for (var i = 0; i < 24; i++) hours.push(i.toString());
for (var i = 0; i < 24; i++)
hours.push(i.toString());
return hours;
}
onValueChanged: value => {
@@ -1356,7 +1363,7 @@ Item {
DankIcon {
name: SessionData.isLightMode ? "light_mode" : "dark_mode"
size: Theme.iconSizeMedium
size: Theme.iconSize
color: SessionData.isLightMode ? "#FFA726" : "#7E57C2"
anchors.verticalCenter: parent.verticalCenter
}
@@ -1392,7 +1399,7 @@ Item {
DankIcon {
name: "schedule"
size: Theme.iconSizeMedium
size: Theme.iconSize
color: Theme.primary
anchors.verticalCenter: parent.verticalCenter
}