From e94e21f2590a937398fe8fe60ae0aae0279e002f Mon Sep 17 00:00:00 2001 From: Jin Liu Date: Wed, 27 Jul 2022 18:23:14 +0000 Subject: [PATCH] applets/digital-clock: add a font size setting This allows the user to choose between automatically determined font size (the default, and the current behavior), and completely manual font settings. The UI refactor and layout code changes necessary for this feature also happily fix a few bugs along the way. BUG: 413394 BUG: 421548 BUG: 395468 FIXED-IN: 5.26 --- .../package/contents/config/main.xml | 16 +++ .../package/contents/ui/DigitalClock.qml | 111 +++++++-------- .../package/contents/ui/configAppearance.qml | 127 +++++++++--------- 3 files changed, 134 insertions(+), 120 deletions(-) diff --git a/applets/digital-clock/package/contents/config/main.xml b/applets/digital-clock/package/contents/config/main.xml index eb86dd4a5..ae7ccd780 100644 --- a/applets/digital-clock/package/contents/config/main.xml +++ b/applets/digital-clock/package/contents/config/main.xml @@ -26,6 +26,10 @@ ddd d + + + true + @@ -38,6 +42,18 @@ false + + + 50 + + + + + + + + 10 + default diff --git a/applets/digital-clock/package/contents/ui/DigitalClock.qml b/applets/digital-clock/package/contents/ui/DigitalClock.qml index bdd6d5239..93a5fd78b 100644 --- a/applets/digital-clock/package/contents/ui/DigitalClock.qml +++ b/applets/digital-clock/package/contents/ui/DigitalClock.qml @@ -127,7 +127,7 @@ MouseArea { target: contentItem height: timeLabel.height + (main.showDate || timezoneLabel.visible ? 0.8 * timeLabel.height : 0) - width: Math.max(timeLabel.paintedWidth + (main.showDate ? timezoneLabel.paintedWidth : 0), + width: Math.max(timeLabel.width + (main.showDate ? timezoneLabel.paintedWidth : 0), timezoneLabel.paintedWidth, dateLabel.paintedWidth) + PlasmaCore.Units.smallSpacing * 2 } @@ -149,7 +149,7 @@ MouseArea { height: sizehelper.height width: sizehelper.contentWidth - font.pixelSize: timeLabel.height + fontSizeMode: Text.VerticalFit } PropertyChanges { @@ -158,7 +158,8 @@ MouseArea { height: main.showDate ? 0.7 * timeLabel.height : 0.8 * timeLabel.height width: main.showDate ? timezoneLabel.paintedWidth : timeLabel.width - font.pixelSize: timezoneLabel.height + font.pointSize: main.showDate ? 0.7 * timeLabel.font.pointSize : 0.8 * timeLabel.font.pointSize + fontSizeMode: main.showDate ? Text.VerticalFit : Text.Fit } PropertyChanges { @@ -168,7 +169,9 @@ MouseArea { width: dateLabel.paintedWidth verticalAlignment: Text.AlignVCenter - font.pixelSize: dateLabel.height + font.pointSize: 0.8 * timeLabel.font.pointSize + font.pixelSize: -1 + fontSizeMode: Text.VerticalFit } AnchorChanges { @@ -189,9 +192,9 @@ MouseArea { * and still fits well into the panel with all the applied margins. */ height: Math.min(main.showDate || timezoneLabel.visible ? main.height * 0.56 : main.height * 0.71, - 3 * PlasmaCore.Theme.defaultFont.pixelSize) + Plasmoid.configuration.autoFontAndSize ? 3 * PlasmaCore.Theme.defaultFont.pixelSize : 1024) - font.pixelSize: sizehelper.height + fontSizeMode: Text.VerticalFit } }, @@ -222,16 +225,36 @@ MouseArea { anchors.right: contentItem.right } + PropertyChanges { + target: timeLabel + + height: sizehelper.height + width: sizehelper.contentWidth + + fontSizeMode: Text.VerticalFit + } + + PropertyChanges { + target: timezoneLabel + + height: 0.7 * timeLabel.height + width: timezoneLabel.paintedWidth + + font.pointSize: 0.7 * timeLabel.font.pointSize + fontSizeMode: Text.VerticalFit + } + PropertyChanges { target: dateLabel height: timeLabel.height width: dateLabel.paintedWidth + PlasmaCore.Units.smallSpacing - font.pixelSize: 1024 verticalAlignment: Text.AlignVCenter anchors.rightMargin: labelsGrid.columnSpacing + font.pointSize: timeLabel.font.pointSize + font.pixelSize: -1 fontSizeMode: Text.VerticalFit } @@ -242,32 +265,12 @@ MouseArea { anchors.verticalCenter: labelsGrid.verticalCenter } - PropertyChanges { - target: timeLabel - - height: sizehelper.height - width: sizehelper.contentWidth - - fontSizeMode: Text.VerticalFit - } - - PropertyChanges { - target: timezoneLabel - - height: 0.7 * timeLabel.height - width: timezoneLabel.paintedWidth - - fontSizeMode: Text.VerticalFit - horizontalAlignment: Text.AlignHCenter - } - PropertyChanges { target: sizehelper - height: Math.min(main.height, 3 * PlasmaCore.Theme.defaultFont.pixelSize) + height: Math.min(main.height, Plasmoid.configuration.autoFontAndSize ? 3 * PlasmaCore.Theme.defaultFont.pixelSize : 1024) fontSizeMode: Text.VerticalFit - font.pixelSize: 3 * PlasmaCore.Theme.defaultFont.pixelSize } }, @@ -302,18 +305,17 @@ MouseArea { height: sizehelper.contentHeight width: main.width - font.pixelSize: Math.min(timeLabel.height, 3 * PlasmaCore.Theme.defaultFont.pixelSize) - fontSizeMode: Text.HorizontalFit + fontSizeMode: Text.VerticalFit } PropertyChanges { target: timezoneLabel - height: Math.max(0.7 * timeLabel.height, minimumPixelSize) + height: 0.7 * timeLabel.height width: main.width + font.pointSize: 0.7 * timeLabel.font.pointSize fontSizeMode: Text.Fit - minimumPixelSize: dateLabel.minimumPixelSize elide: Text.ElideRight } @@ -328,7 +330,8 @@ MouseArea { verticalAlignment: Text.AlignTop // Those magic numbers are purely what looks nice as maximum size, here we have it the smallest // between slightly bigger than the default font (1.4 times) and a bit smaller than the time font - font.pixelSize: Math.min(0.7 * timeLabel.height, PlasmaCore.Theme.defaultFont.pixelSize * 1.4) + font.pixelSize: Math.min(0.7 * timeLabel.height, Plasmoid.configuration.autoFontAndSize ? PlasmaCore.Theme.defaultFont.pixelSize * 1.4 : 1024) + font.pointSize: -1 elide: Text.ElideRight wrapMode: Text.WordWrap } @@ -343,10 +346,10 @@ MouseArea { PropertyChanges { target: sizehelper + height: Plasmoid.configuration.autoFontAndSize ? 3 * PlasmaCore.Theme.defaultFont.pixelSize : 1024 width: main.width - fontSizeMode: Text.HorizontalFit - font.pixelSize: 3 * PlasmaCore.Theme.defaultFont.pixelSize + fontSizeMode: Text.Fit } }, @@ -390,20 +393,20 @@ MouseArea { height: 0.7 * timeLabel.height width: main.width + font.pointSize: 0.7 * timeLabel.font.pointSize fontSizeMode: Text.Fit - minimumPixelSize: 1 } PropertyChanges { target: dateLabel height: 0.7 * timeLabel.height - font.pixelSize: 1024 width: Math.max(timeLabel.contentWidth, PlasmaCore.Units.gridUnit * 3) verticalAlignment: Text.AlignVCenter + font.pointSize: 0.7 * timeLabel.font.pointSize + font.pixelSize: -1 fontSizeMode: Text.Fit - minimumPixelSize: 1 wrapMode: Text.WordWrap } @@ -431,7 +434,6 @@ MouseArea { width: main.width fontSizeMode: Text.Fit - font.pixelSize: 1024 } } ] @@ -493,30 +495,27 @@ MouseArea { Components.Label { id: timeLabel - font { - family: Plasmoid.configuration.fontFamily || PlasmaCore.Theme.defaultFont.family - weight: Plasmoid.configuration.boldText ? Font.Bold : PlasmaCore.Theme.defaultFont.weight - italic: Plasmoid.configuration.italicText - pixelSize: 1024 - pointSize: -1 // Because we're setting the pixel size instead - // TODO: remove once this label is ported to PC3 - } + font.family: Plasmoid.configuration.autoFontAndSize ? PlasmaCore.Theme.defaultFont.family : Plasmoid.configuration.fontFamily + font.weight: Plasmoid.configuration.autoFontAndSize ? PlasmaCore.Theme.defaultFont.weight : Plasmoid.configuration.fontWeight + font.italic: Plasmoid.configuration.autoFontAndSize ? PlasmaCore.Theme.defaultFont.italic : Plasmoid.configuration.italicText + font.pointSize: Plasmoid.configuration.autoFontAndSize ? 1024 : Plasmoid.configuration.fontSize + minimumPointSize: 1 minimumPixelSize: 1 text: Qt.formatTime(main.getCurrentTime(), main.timeFormat) - verticalAlignment: Text.AlignVCenter horizontalAlignment: Text.AlignHCenter + verticalAlignment: Text.AlignVCenter } Components.Label { id: timezoneLabel + font.family: timeLabel.font.family font.weight: timeLabel.font.weight font.italic: timeLabel.font.italic - font.pixelSize: 1024 - font.pointSize: -1 // Because we're setting the pixel size instead - // TODO: remove once this label is ported to PC3 + font.pointSize: timeLabel.font.pointSize + minimumPointSize: 1 minimumPixelSize: 1 visible: text.length > 0 @@ -533,9 +532,8 @@ MouseArea { font.family: timeLabel.font.family font.weight: timeLabel.font.weight font.italic: timeLabel.font.italic - font.pixelSize: 1024 - font.pointSize: -1 // Because we're setting the pixel size instead - // TODO: remove once this label is ported to PC3 + font.pointSize: timeLabel.font.pointSize + minimumPointSize: 1 minimumPixelSize: 1 horizontalAlignment: Text.AlignHCenter @@ -553,7 +551,9 @@ MouseArea { font.family: timeLabel.font.family font.weight: timeLabel.font.weight font.italic: timeLabel.font.italic - minimumPixelSize: 1 + font.pointSize: timeLabel.font.pointSize + minimumPointSize: timeLabel.minimumPointSize + minimumPixelSize: timeLabel.minimumPixelSize visible: false } @@ -564,6 +564,7 @@ MouseArea { font.family: timeLabel.font.family font.weight: timeLabel.font.weight font.italic: timeLabel.font.italic + font.pointSize: timeLabel.font.pointSize } // Qt's QLocale does not offer any modular time creating like Klocale did diff --git a/applets/digital-clock/package/contents/ui/configAppearance.qml b/applets/digital-clock/package/contents/ui/configAppearance.qml index c59d2f5c6..2ae209e38 100644 --- a/applets/digital-clock/package/contents/ui/configAppearance.qml +++ b/applets/digital-clock/package/contents/ui/configAppearance.qml @@ -9,22 +9,31 @@ import QtQuick 2.0 import QtQuick.Controls 2.3 as QtControls import QtQuick.Layouts 1.0 as QtLayouts +import QtQuick.Dialogs 1.1 as QtDialogs import org.kde.plasma.plasmoid 2.0 import org.kde.plasma.core 2.0 as PlasmaCore import org.kde.plasma.workspace.calendar 2.0 as PlasmaCalendar import org.kde.kquickcontrolsaddons 2.0 // For KCMShell import org.kde.kirigami 2.5 as Kirigami + + QtLayouts.ColumnLayout { id: appearancePage - signal configurationChanged + property alias cfg_autoFontAndSize: autoFontAndSizeRadioButton.checked - property string cfg_fontFamily - property alias cfg_boldText: boldCheckBox.checked - property string cfg_timeFormat: "" - property alias cfg_italicText: italicCheckBox.checked + // boldText and fontStyleName are not used in DigitalClock.qml + // However, they are necessary to remember the exact font style chosen. + // Otherwise, when the user open the font dialog again, the style will be lost. + property alias cfg_fontFamily : fontDialog.fontChosen.family + property alias cfg_boldText : fontDialog.fontChosen.bold + property alias cfg_italicText : fontDialog.fontChosen.italic + property alias cfg_fontWeight : fontDialog.fontChosen.weight + property alias cfg_fontStyleName : fontDialog.fontChosen.styleName + property alias cfg_fontSize : fontDialog.fontChosen.pointSize + property string cfg_timeFormat: "" property alias cfg_showLocalTimezone: showLocalTimezone.checked property alias cfg_displayTimezoneFormat: displayTimezoneFormat.currentIndex property alias cfg_showSeconds: showSeconds.checked @@ -35,33 +44,6 @@ QtLayouts.ColumnLayout { property alias cfg_use24hFormat: use24hFormat.currentIndex property alias cfg_dateDisplayFormat: dateDisplayFormat.currentIndex - onCfg_fontFamilyChanged: { - // HACK by the time we populate our model and/or the ComboBox is finished the value is still undefined - if (cfg_fontFamily) { - for (var i = 0, j = fontsModel.count; i < j; ++i) { - if (fontsModel.get(i).value === cfg_fontFamily) { - fontFamilyComboBox.currentIndex = i - break - } - } - } - } - - ListModel { - id: fontsModel - Component.onCompleted: { - var arr = [] // use temp array to avoid constant binding stuff - arr.push({text: i18nc("Use default font", "Default"), value: ""}) - - var fonts = Qt.fontFamilies() - var foundIndex = 0 - for (var i = 0, j = fonts.length; i < j; ++i) { - arr.push({text: fonts[i], value: fonts[i]}) - } - append(arr) - } - } - Kirigami.FormLayout { QtLayouts.Layout.fillWidth: true @@ -232,55 +214,70 @@ QtLayouts.ColumnLayout { Kirigami.FormData.isSection: true } - QtLayouts.RowLayout { - QtLayouts.Layout.fillWidth: true + QtControls.ButtonGroup { + buttons: [autoFontAndSizeRadioButton, manualFontAndSizeRadioButton] + } - Kirigami.FormData.label: i18n("Font style:") + QtControls.RadioButton { + Kirigami.FormData.label: i18nc("@label:group", "Text display:") + id: autoFontAndSizeRadioButton + text: i18nc("@option:radio", "Automatic") + } - QtControls.ComboBox { - id: fontFamilyComboBox - QtLayouts.Layout.fillWidth: true - currentIndex: 0 - // ComboBox's sizing is just utterly broken - QtLayouts.Layout.minimumWidth: Kirigami.Units.gridUnit * 10 - model: fontsModel - // doesn't autodeduce from model because we manually populate it - textRole: "text" - - onCurrentIndexChanged: { - var current = model.get(currentIndex) - if (current) { - cfg_fontFamily = current.value - appearancePage.configurationChanged() + QtControls.Label { + text: i18nc("@label", "Text will follow the system font and expand to fill the available space.") + QtLayouts.Layout.fillWidth: true + wrapMode: Text.Wrap + font: PlasmaCore.Theme.smallestFont + } + + QtLayouts.RowLayout { + QtControls.RadioButton { + id: manualFontAndSizeRadioButton + text: i18nc("@option:radio setting for manually configuring the font settings", "Manual") + checked: !cfg_autoFontAndSize + onClicked: { + if (cfg_fontFamily === "") { + fontDialog.fontChosen = PlasmaCore.Theme.defaultFont } } } QtControls.Button { - id: boldCheckBox - QtControls.ToolTip { - text: i18n("Bold text") + text: i18nc("@action:button", "Choose Style…") + icon.name: "settings-configure" + enabled: manualFontAndSizeRadioButton.checked + onClicked: { + fontDialog.font = fontDialog.fontChosen + fontDialog.open() } - icon.name: "format-text-bold" - checkable: true - Accessible.name: QtControls.ToolTip.text } - QtControls.Button { - id: italicCheckBox - QtControls.ToolTip { - text: i18n("Italic text") - } - icon.name: "format-text-italic" - checkable: true - Accessible.name: QtControls.ToolTip.text - } + } + + QtControls.Label { + visible: manualFontAndSizeRadioButton.checked + text: i18nc("@info %1 is the font size, %2 is the font family", "%1pt %2", cfg_fontSize, fontDialog.fontChosen.family) + font: fontDialog.fontChosen } } + Item { QtLayouts.Layout.fillHeight: true } + QtDialogs.FontDialog { + id: fontDialog + title: i18nc("@title:window", "Choose a Font") + modality: Qt.WindowModal + + property font fontChosen: Qt.Font() + + onAccepted: { + fontChosen = font + } + } + Component.onCompleted: { if (!Plasmoid.configuration.showLocalTimezone) { showLocalTimeZoneWhenDifferent.checked = true;