From a8eb914fc9303c89cd445b6b172fcc8aa4f532fc Mon Sep 17 00:00:00 2001 From: Hangman Date: Mon, 23 Mar 2026 22:38:42 +0100 Subject: [PATCH] Add configurable font settings for Day/Date/Time labels (#1) * Add configurable font families for day, date, and time * Use font dialogs and refresh font rendering on apply * Replace FontDialog usage with compatible font picker dialog * Refresh displayed fonts when plasmoid configuration is applied --- package/contents/config/main.xml | 9 +++ package/contents/ui/configAppearance.qml | 89 +++++++++++++++++++++++- package/contents/ui/main.qml | 47 ++++++++----- 3 files changed, 127 insertions(+), 18 deletions(-) diff --git a/package/contents/config/main.xml b/package/contents/config/main.xml index af9d50e..dd80f26 100644 --- a/package/contents/config/main.xml +++ b/package/contents/config/main.xml @@ -9,6 +9,9 @@ 72 + + Anurati + 17 @@ -18,6 +21,9 @@ 19 + + Poppins + 3 @@ -30,6 +36,9 @@ 19 + + Poppins + 3 diff --git a/package/contents/ui/configAppearance.qml b/package/contents/ui/configAppearance.qml index d331b67..6789213 100644 --- a/package/contents/ui/configAppearance.qml +++ b/package/contents/ui/configAppearance.qml @@ -1,19 +1,22 @@ import QtQuick 2.15 import QtQuick.Layouts 1.0 import QtQuick.Controls 2.0 -import QtQuick.Dialogs import org.kde.kirigami 2.4 as Kirigami Kirigami.ScrollablePage { id: appearancePage + property var activeFontField // properties property alias cfg_show_day: showDay.checked property alias cfg_show_date: showDate.checked property alias cfg_show_time: showTime.checked property alias cfg_day_font_size: dayFontSize.value + property alias cfg_day_font_family: dayFontFamily.text property alias cfg_date_font_size: dateFontSize.value + property alias cfg_date_font_family: dateFontFamily.text property alias cfg_time_font_size: timeFontSize.value + property alias cfg_time_font_family: timeFontFamily.text property alias cfg_day_letter_spacing: dayLetterSpacing.value property alias cfg_day_font_color: dayFontColor.color property alias cfg_date_letter_spacing: dateLetterSpacing.value @@ -24,6 +27,22 @@ Kirigami.ScrollablePage { property alias cfg_date_format: dateFormat.text property alias cfg_date_font_color: dateFontColor.color + function openFontPicker(targetField, dialogTitle) { + activeFontField = targetField + fontPicker.title = dialogTitle + var availableFonts = Qt.fontFamilies() + fontFamilyCombo.model = availableFonts + var selectedIndex = 0 + for (var i = 0; i < availableFonts.length; i++) { + if (availableFonts[i] === targetField.text) { + selectedIndex = i + break + } + } + fontFamilyCombo.currentIndex = selectedIndex + fontPicker.open() + } + Kirigami.FormLayout { Title { title: i18n("Day") @@ -40,6 +59,20 @@ Kirigami.ScrollablePage { id: dayFontSize label: i18n("Font Size") } + RowLayout { + Label { + text: i18n("Font Family") + } + TextField { + id: dayFontFamily + readOnly: true + Layout.fillWidth: true + } + Button { + text: i18n("Choose…") + onClicked: appearancePage.openFontPicker(dayFontFamily, i18n("Select day font")) + } + } NumberField { id: dayLetterSpacing label: i18n("Letter Spacing") @@ -63,6 +96,20 @@ Kirigami.ScrollablePage { id: dateFontSize label: i18n("Font Size") } + RowLayout { + Label { + text: i18n("Font Family") + } + TextField { + id: dateFontFamily + readOnly: true + Layout.fillWidth: true + } + Button { + text: i18n("Choose…") + onClicked: appearancePage.openFontPicker(dateFontFamily, i18n("Select date font")) + } + } NumberField { id: dateLetterSpacing label: i18n("Letter Spacing") @@ -95,6 +142,20 @@ Kirigami.ScrollablePage { id: timeFontSize label: i18n("Font Size") } + RowLayout { + Label { + text: i18n("Font Family") + } + TextField { + id: timeFontFamily + readOnly: true + Layout.fillWidth: true + } + Button { + text: i18n("Choose…") + onClicked: appearancePage.openFontPicker(timeFontFamily, i18n("Select time font")) + } + } NumberField { id: timeLetterSpacing label: i18n("Letter Spacing") @@ -121,4 +182,30 @@ Kirigami.ScrollablePage { color: cfg_time_font_color } } + + Dialog { + id: fontPicker + modal: true + standardButtons: Dialog.Ok | Dialog.Cancel + width: 400 + + contentItem: ColumnLayout { + spacing: Kirigami.Units.smallSpacing + + Label { + text: i18n("Choose an installed font family") + } + + ComboBox { + id: fontFamilyCombo + Layout.fillWidth: true + } + } + + onAccepted: { + if (activeFontField) { + activeFontField.text = fontFamilyCombo.currentText + } + } + } } diff --git a/package/contents/ui/main.qml b/package/contents/ui/main.qml index d298c2d..8bd97ed 100644 --- a/package/contents/ui/main.qml +++ b/package/contents/ui/main.qml @@ -8,6 +8,11 @@ import org.kde.plasma.plasma5support as Plasma5Support PlasmoidItem { id: root + + function resolvedFontFamily(configuredFamily, fallbackFamily) { + var family = (configuredFamily || "").trim() + return family.length > 0 ? family : fallbackFamily + } // setting background as transparent with a drop shadow @@ -27,6 +32,19 @@ PlasmoidItem { // setting preferred size preferredRepresentation: fullRepresentation fullRepresentation: Item { + function updateDisplay() { + var time_format = plasmoid.configuration.use_24_hour_format ? "hh:mm" : "hh:mm AP" + var curDate = dataSource.data["Local"]["DateTime"] + if (!curDate) { + curDate = new Date() + } + display_day.text = Qt.formatDate(curDate, "dddd").toUpperCase() + display_date.text = Qt.formatDate(curDate, plasmoid.configuration.date_format).toUpperCase() + display_time.text = plasmoid.configuration.time_character + " " + Qt.formatTime(curDate, time_format) + " " + plasmoid.configuration.time_character + display_day.font.family = root.resolvedFontFamily(plasmoid.configuration.day_font_family, font_anurati.name) + display_date.font.family = root.resolvedFontFamily(plasmoid.configuration.date_font_family, font_poppins.name) + display_time.font.family = root.resolvedFontFamily(plasmoid.configuration.time_font_family, font_poppins.name) + } // applet default size Layout.minimumWidth: container.implicitWidth @@ -42,25 +60,23 @@ PlasmoidItem { intervalAlignment: Plasma5Support.Types.AlignToMinute interval: 60000 - property bool use24HourFormat: plasmoid.configuration.use_24_hour_format - property string timeCharacter: plasmoid.configuration.time_character - property string dateFormat: plasmoid.configuration.date_format - - onUse24HourFormatChanged: dataChanged() - onTimeCharacterChanged: dataChanged() - onDateFormatChanged: dataChanged() - onDataChanged: { - var time_format = use24HourFormat ? "hh:mm" : "hh:mm AP" - var curDate = dataSource.data["Local"]["DateTime"] - display_day.text = Qt.formatDate(curDate, "dddd").toUpperCase() - display_date.text = Qt.formatDate(curDate, dateFormat).toUpperCase() - display_time.text = timeCharacter + " " + Qt.formatTime(curDate, time_format) + " " + timeCharacter + updateDisplay() } + } - + Connections { + target: plasmoid.configuration + function onValueChanged(key, value) { + if (key === "day_font_family" || key === "date_font_family" || key === "time_font_family" || + key === "date_format" || key === "time_character" || key === "use_24_hour_format") { + updateDisplay() + } + } } + Component.onCompleted: updateDisplay() + // Main Content Column { id: container @@ -79,7 +95,6 @@ PlasmoidItem { // font settings font.pixelSize: plasmoid.configuration.day_font_size font.letterSpacing: plasmoid.configuration.day_letter_spacing - font.family: font_anurati.name color: plasmoid.configuration.day_font_color anchors.horizontalCenter: parent.horizontalCenter horizontalAlignment: Text.AlignHCenter @@ -95,7 +110,6 @@ PlasmoidItem { // font settings font.pixelSize: plasmoid.configuration.date_font_size font.letterSpacing: plasmoid.configuration.date_letter_spacing - font.family: font_poppins.name color: plasmoid.configuration.date_font_color horizontalAlignment: Text.AlignHCenter anchors.horizontalCenter: parent.horizontalCenter @@ -110,7 +124,6 @@ PlasmoidItem { // font settings font.pixelSize: plasmoid.configuration.time_font_size - font.family: font_poppins.name color: plasmoid.configuration.time_font_color font.letterSpacing: plasmoid.configuration.time_letter_spacing horizontalAlignment: Text.AlignHCenter