Clock: factorized many settings in a single combobox
This commit is contained in:
LemmyCook
parent
baafe54d13
commit
83fbb8f95d
4 changed files with 109 additions and 85 deletions
|
|
@ -142,9 +142,16 @@ Singleton {
|
|||
!== undefined ? widget.alwaysShowPercentage : adapter.bar.alwaysShowBatteryPercentage
|
||||
break
|
||||
case "Clock":
|
||||
widget.showDate = widget.showDate !== undefined ? widget.showDate : adapter.location.showDateWithClock
|
||||
widget.use12HourClock = widget.use12HourClock !== undefined ? widget.use12HourClock : adapter.location.use12HourClock
|
||||
widget.reverseDayMonth = widget.reverseDayMonth !== undefined ? widget.reverseDayMonth : adapter.location.reverseDayMonth
|
||||
if (widget.showDate !== undefined) {
|
||||
console.log("HELLLO")
|
||||
widget.displayFormat = "time-date"
|
||||
} else if (widget.showSeconds) {
|
||||
widget.displayFormat = "time-seconds"
|
||||
}
|
||||
delete widget.showDate
|
||||
delete widget.showSeconds
|
||||
break
|
||||
case "MediaMini":
|
||||
widget.showAlbumArt = widget.showAlbumArt !== undefined ? widget.showAlbumArt : adapter.audio.showMiniplayerAlbumArt
|
||||
|
|
@ -174,7 +181,7 @@ Singleton {
|
|||
}
|
||||
}
|
||||
|
||||
// Backup the widget definition before altering
|
||||
// Compare settings, to detect if something has been upgraded
|
||||
const widgetAfter = JSON.stringify(widget)
|
||||
return (widgetAfter !== widgetBefore)
|
||||
}
|
||||
|
|
@ -258,7 +265,7 @@ Singleton {
|
|||
JsonAdapter {
|
||||
id: adapter
|
||||
|
||||
property int settingsVersion: 1
|
||||
property int settingsVersion: 2
|
||||
|
||||
// bar
|
||||
property JsonObject bar: JsonObject {
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
import QtQuick
|
||||
import QtQuick.Layouts
|
||||
import Quickshell
|
||||
import qs.Commons
|
||||
import qs.Services
|
||||
|
|
@ -29,95 +30,106 @@ Rectangle {
|
|||
}
|
||||
|
||||
// Resolve settings: try user settings or defaults from BarWidgetRegistry
|
||||
readonly property bool showDate: widgetSettings.showDate !== undefined ? widgetSettings.showDate : widgetMetadata.showDate
|
||||
readonly property bool use12h: widgetSettings.use12HourClock !== undefined ? widgetSettings.use12HourClock : widgetMetadata.use12HourClock
|
||||
readonly property bool showSeconds: widgetSettings.showSeconds !== undefined ? widgetSettings.showSeconds : widgetMetadata.showSeconds
|
||||
readonly property bool reverseDayMonth: widgetSettings.reverseDayMonth
|
||||
!== undefined ? widgetSettings.reverseDayMonth : widgetMetadata.reverseDayMonth
|
||||
readonly property bool compactMode: widgetSettings.compactMode !== undefined ? widgetSettings.compactMode : widgetMetadata.compactMode
|
||||
readonly property string displayFormat: widgetSettings.displayFormat
|
||||
!== undefined ? widgetSettings.displayFormat : widgetMetadata.displayFormat
|
||||
|
||||
implicitWidth: (compactMode ? Math.max(timeText.implicitWidth,
|
||||
dateText.implicitWidth) : clock.width) + Style.marginM * 2 * scaling
|
||||
implicitHeight: compactMode ? (timeText.implicitHeight + dateText.implicitHeight + Math.round(
|
||||
Style.marginXS * scaling) + Math.round(Style.marginM * 2 * scaling)) : Math.round(
|
||||
Style.capsuleHeight * scaling)
|
||||
radius: Math.round(Style.radiusM * scaling)
|
||||
implicitWidth: Math.round(layout.implicitWidth + Style.marginM * 2 * scaling)
|
||||
implicitHeight: Math.round(Style.capsuleHeight * scaling)
|
||||
radius: Math.round(Style.radiusS * scaling)
|
||||
color: Color.mSurfaceVariant
|
||||
|
||||
// Clock with optional compact layout & attached calendar
|
||||
Item {
|
||||
id: clockContainer
|
||||
anchors.fill: parent
|
||||
anchors.margins: Math.round((compactMode ? Style.marginXS : Style.marginM) * scaling)
|
||||
anchors.margins: Style.marginXS * scaling
|
||||
|
||||
Column {
|
||||
id: compactColumn
|
||||
ColumnLayout {
|
||||
id: layout
|
||||
anchors.centerIn: parent
|
||||
spacing: compactMode ? 0 : Math.round(Style.marginXXS * scaling)
|
||||
visible: compactMode
|
||||
spacing: -3 * scaling
|
||||
|
||||
// First line
|
||||
NText {
|
||||
id: timeText
|
||||
readonly property bool showSeconds: (displayFormat === "time-seconds")
|
||||
readonly property bool inlineDate: (displayFormat === "time-date")
|
||||
|
||||
text: {
|
||||
const now = Time.date
|
||||
const timeFormat = use12h ? (showSeconds ? "h:mm:ss AP" : "h:mm AP") : (showSeconds ? "HH:mm:ss" : "HH:mm")
|
||||
return Qt.formatDateTime(now, timeFormat)
|
||||
let timeStr = ""
|
||||
|
||||
if (use12h) {
|
||||
// 12-hour format with proper padding and consistent spacing
|
||||
const hours = now.getHours()
|
||||
const displayHours = hours === 0 ? 12 : (hours > 12 ? hours - 12 : hours)
|
||||
const paddedHours = displayHours.toString().padStart(2, '0')
|
||||
const minutes = now.getMinutes().toString().padStart(2, '0')
|
||||
const ampm = hours < 12 ? 'AM' : 'PM'
|
||||
|
||||
if (showSeconds) {
|
||||
const seconds = now.getSeconds().toString().padStart(2, '0')
|
||||
timeStr = `${paddedHours}:${minutes}:${seconds} ${ampm}`
|
||||
} else {
|
||||
timeStr = `${paddedHours}:${minutes} ${ampm}`
|
||||
}
|
||||
} else {
|
||||
// 24-hour format with padding
|
||||
const hours = now.getHours().toString().padStart(2, '0')
|
||||
const minutes = now.getMinutes().toString().padStart(2, '0')
|
||||
|
||||
if (showSeconds) {
|
||||
const seconds = now.getSeconds().toString().padStart(2, '0')
|
||||
timeStr = `${hours}:${minutes}:${seconds}`
|
||||
} else {
|
||||
timeStr = `${hours}:${minutes}`
|
||||
}
|
||||
}
|
||||
|
||||
// Add inline date if needed
|
||||
if (inlineDate) {
|
||||
let dayName = now.toLocaleDateString(Qt.locale(), "ddd")
|
||||
dayName = dayName.charAt(0).toUpperCase() + dayName.slice(1)
|
||||
const day = now.getDate().toString().padStart(2, '0')
|
||||
let month = now.toLocaleDateString(Qt.locale(), "MMM")
|
||||
timeStr += " - " + (reverseDayMonth ? `${dayName}, ${month} ${day}` : `${dayName}, ${day} ${month}`)
|
||||
}
|
||||
|
||||
return timeStr
|
||||
}
|
||||
font.pointSize: Style.fontSizeS * scaling
|
||||
|
||||
//font.family: Settings.data.ui.fontFixed
|
||||
font.pointSize: Style.fontSizeXS * scaling
|
||||
font.weight: Style.fontWeightBold
|
||||
color: Color.mPrimary
|
||||
horizontalAlignment: Text.AlignHCenter
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
|
||||
}
|
||||
|
||||
// Second line
|
||||
NText {
|
||||
id: dateText
|
||||
visible: compactMode || showDate
|
||||
visible: (displayFormat === "time-date-short")
|
||||
text: {
|
||||
const now = Time.date
|
||||
const day = now.getDate()
|
||||
const month = now.getMonth() + 1
|
||||
const dd = (day < 10 ? "0" + day : "" + day)
|
||||
const mm = (month < 10 ? "0" + month : "" + month)
|
||||
return reverseDayMonth ? `${mm}/${dd}` : `${dd}/${mm}`
|
||||
const day = now.getDate().toString().padStart(2, '0')
|
||||
const month = (now.getMonth() + 1).toString().padStart(2, '0')
|
||||
return reverseDayMonth ? `${month}/${day}` : `${day}/${month}`
|
||||
}
|
||||
font.pointSize: Math.max(Style.fontSizeXXS, Style.fontSizeXXS * scaling)
|
||||
|
||||
// Enable fixed-width font for consistent spacing
|
||||
//font.family: Settings.data.ui.fontFixed
|
||||
font.pointSize: Style.fontSizeXXS * scaling
|
||||
font.weight: Style.fontWeightRegular
|
||||
color: Color.mPrimary
|
||||
horizontalAlignment: Text.AlignHCenter
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
|
||||
}
|
||||
}
|
||||
|
||||
// Non-compact single-line text
|
||||
NText {
|
||||
id: clock
|
||||
visible: !compactMode
|
||||
text: {
|
||||
const now = Time.date
|
||||
const timeFormat = use12h ? (showSeconds ? "h:mm:ss AP" : "h:mm AP") : (showSeconds ? "HH:mm:ss" : "HH:mm")
|
||||
const timeString = Qt.formatDateTime(now, timeFormat)
|
||||
|
||||
if (showDate) {
|
||||
let dayName = now.toLocaleDateString(Qt.locale(), "ddd")
|
||||
dayName = dayName.charAt(0).toUpperCase() + dayName.slice(1)
|
||||
let day = now.getDate()
|
||||
let month = now.toLocaleDateString(Qt.locale(), "MMM")
|
||||
return timeString + " - " + (reverseDayMonth ? `${dayName}, ${month} ${day}` : `${dayName}, ${day} ${month}`)
|
||||
}
|
||||
return timeString
|
||||
}
|
||||
anchors.centerIn: parent
|
||||
font.pointSize: Style.fontSizeS * scaling
|
||||
font.weight: Style.fontWeightBold
|
||||
color: Color.mPrimary
|
||||
}
|
||||
}
|
||||
|
||||
NTooltip {
|
||||
id: tooltip
|
||||
text: `${Time.formatDate(reverseDayMonth)}.`
|
||||
target: clock
|
||||
target: clockContainer
|
||||
positionAbove: Settings.data.bar.position === "bottom"
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -14,32 +14,45 @@ ColumnLayout {
|
|||
property var widgetMetadata: null
|
||||
|
||||
// Local state
|
||||
property bool valueShowDate: widgetData.showDate !== undefined ? widgetData.showDate : widgetMetadata.showDate
|
||||
property string valueDisplayFormat: widgetData.displayFormat !== undefined ? widgetData.displayFormat : widgetMetadata.displayFormat
|
||||
property bool valueUse12h: widgetData.use12HourClock !== undefined ? widgetData.use12HourClock : widgetMetadata.use12HourClock
|
||||
property bool valueShowSeconds: widgetData.showSeconds !== undefined ? widgetData.showSeconds : widgetMetadata.showSeconds
|
||||
property bool valueReverseDayMonth: widgetData.reverseDayMonth !== undefined ? widgetData.reverseDayMonth : widgetMetadata.reverseDayMonth
|
||||
property bool valueCompactMode: widgetData.compactMode !== undefined ? widgetData.compactMode : widgetMetadata.compactMode
|
||||
|
||||
function saveSettings() {
|
||||
var settings = Object.assign({}, widgetData || {})
|
||||
settings.showDate = valueShowDate
|
||||
settings.displayFormat = valueDisplayFormat
|
||||
settings.use12HourClock = valueUse12h
|
||||
settings.showSeconds = valueShowSeconds
|
||||
settings.reverseDayMonth = valueReverseDayMonth
|
||||
settings.compactMode = valueCompactMode
|
||||
console.log(JSON.stringify(settings))
|
||||
return settings
|
||||
}
|
||||
|
||||
NToggle {
|
||||
label: "Show date"
|
||||
checked: valueShowDate
|
||||
onToggled: checked => valueShowDate = checked
|
||||
}
|
||||
|
||||
NToggle {
|
||||
label: "Compact clock (date under time)"
|
||||
checked: valueCompactMode
|
||||
onToggled: checked => valueCompactMode = checked
|
||||
NComboBox {
|
||||
label: "Display Format"
|
||||
model: ListModel {
|
||||
ListElement {
|
||||
key: "time"
|
||||
name: "HH:mm"
|
||||
}
|
||||
ListElement {
|
||||
key: "time-seconds"
|
||||
name: "HH:mm:ss"
|
||||
}
|
||||
ListElement {
|
||||
key: "time-date"
|
||||
name: "HH:mm - Date"
|
||||
}
|
||||
ListElement {
|
||||
key: "time-date-short"
|
||||
name: "HH:mm - Short Date"
|
||||
}
|
||||
}
|
||||
currentKey: valueDisplayFormat
|
||||
onSelected: key => {
|
||||
valueDisplayFormat = key
|
||||
console.log(key)
|
||||
}
|
||||
minimumWidth: 230 * scaling
|
||||
}
|
||||
|
||||
NToggle {
|
||||
|
|
@ -48,12 +61,6 @@ ColumnLayout {
|
|||
onToggled: checked => valueUse12h = checked
|
||||
}
|
||||
|
||||
NToggle {
|
||||
label: "Show seconds"
|
||||
checked: valueShowSeconds
|
||||
onToggled: checked => valueShowSeconds = checked
|
||||
}
|
||||
|
||||
NToggle {
|
||||
label: "Reverse day and month"
|
||||
checked: valueReverseDayMonth
|
||||
|
|
|
|||
|
|
@ -52,11 +52,9 @@ Singleton {
|
|||
},
|
||||
"Clock": {
|
||||
"allowUserSettings": true,
|
||||
"showDate": false,
|
||||
"displayFormat": "time-date-short",
|
||||
"use12HourClock": false,
|
||||
"showSeconds": false,
|
||||
"reverseDayMonth": true,
|
||||
"compactMode": false
|
||||
"reverseDayMonth": true
|
||||
},
|
||||
"CustomButton": {
|
||||
"allowUserSettings": true,
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue