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

applets/digital-clock/package/contents/config/main.xml

@@ -26,6 +26,10 @@
       <label>Custom date format string.</label>
       <default>ddd d</default>
     </entry>
+    <entry name="autoFontAndSize" type="Bool">
+      <label>Use Plasma default font and automatically determine font size.</label>
+      <default>true</default>
+    </entry>
     <entry name="fontFamily" type="string">
       <label>Font family. e.g "arial". The system font is used if this is not set.</label>
       <default></default>
@@ -38,6 +42,18 @@
       <label>Sets the font to italic.</label>
       <default>false</default>
     </entry>
+    <entry name="fontWeight" type="Int">
+      <label>Sets font weight.</label>
+      <default>50</default>
+    </entry>
+    <entry name="fontStyleName" type="string">
+      <label>Sets font style </label>
+      <default></default>
+    </entry>
+    <entry name="fontSize" type="Int">
+      <label>Sets font size.</label>
+      <default>10</default>
+    </entry>
     <entry name="timeFormat" type="string">
       <default>default</default>
     </entry>

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.VerticalFit
-                fontSizeMode: Text.HorizontalFit
             }
 
             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
+                fontSizeMode: Text.Fit
-                font.pixelSize: 3 * PlasmaCore.Theme.defaultFont.pixelSize
             }
         },
 
@@ -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 {
+                font.family: Plasmoid.configuration.autoFontAndSize ? PlasmaCore.Theme.defaultFont.family : Plasmoid.configuration.fontFamily
-                    family: Plasmoid.configuration.fontFamily || PlasmaCore.Theme.defaultFont.family
+                font.weight: Plasmoid.configuration.autoFontAndSize ? PlasmaCore.Theme.defaultFont.weight : Plasmoid.configuration.fontWeight
-                    weight: Plasmoid.configuration.boldText ? Font.Bold : PlasmaCore.Theme.defaultFont.weight
+                font.italic: Plasmoid.configuration.autoFontAndSize ? PlasmaCore.Theme.defaultFont.italic : Plasmoid.configuration.italicText
-                    italic: Plasmoid.configuration.italicText
+                font.pointSize: Plasmoid.configuration.autoFontAndSize ? 1024 : Plasmoid.configuration.fontSize
-                    pixelSize: 1024
+                minimumPointSize: 1
-                    pointSize: -1 // Because we're setting the pixel size instead
-                                  // TODO: remove once this label is ported to PC3
-                }
                 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: timeLabel.font.pointSize
-                font.pointSize: -1 // Because we're setting the pixel size instead
+                minimumPointSize: 1
-                                   // TODO: remove once this label is ported to PC3
                 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: timeLabel.font.pointSize
-            font.pointSize: -1 // Because we're setting the pixel size instead
+            minimumPointSize: 1
-                               // TODO: remove once this label is ported to PC3
             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

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
+    // boldText and fontStyleName are not used in DigitalClock.qml
-    property alias cfg_boldText: boldCheckBox.checked
+    // However, they are necessary to remember the exact font style chosen.
-    property string cfg_timeFormat: ""
+    // Otherwise, when the user open the font dialog again, the style will be lost.
-    property alias cfg_italicText: italicCheckBox.checked
+    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 {
+        QtControls.ButtonGroup {
-            QtLayouts.Layout.fillWidth: true
+            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 {
+        QtControls.Label {
-                id: fontFamilyComboBox
+            text: i18nc("@label", "Text will follow the system font and expand to fill the available space.")
-                QtLayouts.Layout.fillWidth: true
+            QtLayouts.Layout.fillWidth: true
-                currentIndex: 0
+            wrapMode: Text.Wrap
-                // ComboBox's sizing is just utterly broken
+            font: PlasmaCore.Theme.smallestFont
-                QtLayouts.Layout.minimumWidth: Kirigami.Units.gridUnit * 10
+        }
-                model: fontsModel
+
-                // doesn't autodeduce from model because we manually populate it
+        QtLayouts.RowLayout {
-                textRole: "text"
+            QtControls.RadioButton {
-
+                id: manualFontAndSizeRadioButton
-                onCurrentIndexChanged: {
+                text: i18nc("@option:radio setting for manually configuring the font settings", "Manual")
-                    var current = model.get(currentIndex)
+                checked: !cfg_autoFontAndSize
-                    if (current) {
+                onClicked: {
-                        cfg_fontFamily = current.value
+                    if (cfg_fontFamily === "") {
-                        appearancePage.configurationChanged()
+                        fontDialog.fontChosen = PlasmaCore.Theme.defaultFont
                     }
                 }
             }
 
             QtControls.Button {
-                id: boldCheckBox
+                text: i18nc("@action:button", "Choose Style…")
-                QtControls.ToolTip {
+                icon.name: "settings-configure"
-                    text: i18n("Bold text")
+                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 {
+        QtControls.Label {
-                    text: i18n("Italic text")
+            visible: manualFontAndSizeRadioButton.checked
-                }
+            text: i18nc("@info %1 is the font size, %2 is the font family", "%1pt %2", cfg_fontSize, fontDialog.fontChosen.family)
-                icon.name: "format-text-italic"
+            font: fontDialog.fontChosen
-                checkable: true
-                Accessible.name: QtControls.ToolTip.text
-            }
         }
     }
+
     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;