Salastil/DankMaterialShell
1
0
Fork 0
mirror of https://github.com/AvengeMedia/DankMaterialShell.git synced 2026-01-30 00:12:50 -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": case "analog":
return 200; return 200;
case "stacked": case "stacked":
return 160; return 100;
default: default:
return 280; return 160;
} }
} }
property real defaultHeight: { property real defaultHeight: {
@@ -32,9 +32,9 @@ Item {
case "analog": case "analog":
return 200; return 200;
case "stacked": case "stacked":
return 220;
default:
return 160; return 160;
default:
return 70;
} }
} }
property real minWidth: { property real minWidth: {
@@ -42,9 +42,9 @@ Item {
case "analog": case "analog":
return 120; return 120;
case "stacked": case "stacked":
return 100; return 70;
default: default:
return 140; return 100;
} }
} }
property real minHeight: { property real minHeight: {
@@ -52,9 +52,9 @@ Item {
case "analog": case "analog":
return 120; return 120;
case "stacked": case "stacked":
return 140;
default:
return 100; return 100;
default:
return 45;
} }
} }
@@ -84,7 +84,8 @@ Item {
readonly property color backgroundColor: Theme.withAlpha(Theme.surface, root.transparency) readonly property color backgroundColor: Theme.withAlpha(Theme.surface, root.transparency)
readonly property bool showAnalogSeconds: isInstance ? (cfg.showAnalogSeconds ?? true) : SettingsData.desktopClockShowAnalogSeconds 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 { SystemClock {
id: systemClock id: systemClock
@@ -298,12 +299,25 @@ Item {
Item { Item {
id: digitalRoot id: digitalRoot
property real baseSize: Math.max(28, height * 0.38) property bool hasDate: root.showDate
property real smallSize: Math.max(12, baseSize * 0.32) 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 { Column {
anchors.centerIn: parent anchors.centerIn: parent
spacing: 4 spacing: 0
StyledText { StyledText {
visible: root.showDate visible: root.showDate
@@ -314,51 +328,86 @@ Item {
return systemClock.date?.toLocaleDateString(Qt.locale(), "ddd, MMM d") ?? ""; return systemClock.date?.toLocaleDateString(Qt.locale(), "ddd, MMM d") ?? "";
} }
font.pixelSize: digitalRoot.smallSize font.pixelSize: digitalRoot.smallSize
color: root.accentColor color: Theme.withAlpha(root.accentColor, 0.7)
}
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
} }
Row { Row {
visible: !SettingsData.use24HourClock || SettingsData.showSeconds
anchors.horizontalCenter: parent.horizontalCenter anchors.horizontalCenter: parent.horizontalCenter
spacing: Theme.spacingS spacing: 0
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
}
}
StyledText { StyledText {
visible: !SettingsData.use24HourClock visible: digitalRoot.hoursStr.length > 1
text: (systemClock.date?.getHours() ?? 0) >= 12 ? "PM" : "AM" width: digitalRoot.digitWidth
font.pixelSize: digitalRoot.smallSize 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 font.weight: Font.Medium
color: root.accentColor 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 { Item {
id: stackedRoot id: stackedRoot
property real baseSize: Math.max(32, height * 0.32) property bool hasSeconds: root.showDigitalSeconds
property real smallSize: Math.max(12, baseSize * 0.28) 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 { Column {
anchors.centerIn: parent anchors.centerIn: parent
spacing: -baseSize * 0.1 spacing: 0
StyledText { Column {
visible: root.showDate spacing: stackedRoot.rowSpacing
anchors.horizontalCenter: parent.horizontalCenter 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 { Row {
visible: SettingsData.showSeconds spacing: 0
spacing: Theme.spacingXS anchors.horizontalCenter: parent.horizontalCenter
DankIcon { StyledText {
name: "timer" text: {
size: Math.max(10, stackedRoot.baseSize * 0.28) if (SettingsData.use24HourClock)
color: root.subtleTextColor return String(systemClock.date?.getHours() ?? 0).padStart(2, '0').charAt(0);
anchors.verticalCenter: parent.verticalCenter 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 { StyledText {
text: String(systemClock.date?.getSeconds() ?? 0).padStart(2, '0') text: {
font.pixelSize: stackedRoot.smallSize if (SettingsData.use24HourClock)
color: root.subtleTextColor 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 { StyledText {
visible: !SettingsData.use24HourClock text: String(systemClock.date?.getSeconds() ?? 0).padStart(2, '0').charAt(0)
text: (systemClock.date?.getHours() ?? 0) >= 12 ? "PM" : "AM"
font.pixelSize: stackedRoot.smallSize font.pixelSize: stackedRoot.smallSize
font.weight: Font.Medium 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) 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 {} SettingsDivider {}
SettingsToggleRow { SettingsToggleRow {

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

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