contents/ui/configAppearance.qml

0001 /*
0002     SPDX-FileCopyrightText: 2013 Bhushan Shah <bhush94@gmail.com>
0003     SPDX-FileCopyrightText: 2013 Sebastian Kügler <sebas@kde.org>
0004     SPDX-FileCopyrightText: 2015 Kai Uwe Broulik <kde@privat.broulik.de>
0005     SPDX-FileCopyrightText: 2023 ivan tkachenko <me@ratijas.tk>
0006
0007     SPDX-License-Identifier: GPL-2.0-only OR GPL-3.0-only OR LicenseRef-KDE-Accepted-GPL
0008 */
0009
0010 import QtQuick 2.15
0011 import QtQuick.Controls 2.15 as QQC2
0012 import QtQuick.Layouts 1.15
0013 import QtQuick.Dialogs 6.3 as QtDialogs
0014 import org.kde.plasma.plasmoid 2.0
0015 import org.kde.plasma.core as PlasmaCore
0016 import org.kde.kcmutils // For KCMLauncher
0017 import org.kde.config // For KAuthorized
0018 import org.kde.kirigami 2.20 as Kirigami
0019
0020 SimpleKCM {
0021     id: appearancePage
0022     property alias cfg_autoFontAndSize: autoFontAndSizeRadioButton.checked
0023
0024     // boldText and fontStyleName are not used in DigitalClock.qml
0025     // However, they are necessary to remember the exact font style chosen.
0026     // Otherwise, when the user open the font dialog again, the style will be lost.
0027     property alias cfg_fontFamily : fontDialog.fontChosen.family
0028     property alias cfg_boldText : fontDialog.fontChosen.bold
0029     property alias cfg_italicText : fontDialog.fontChosen.italic
0030     property alias cfg_fontWeight : fontDialog.fontChosen.weight
0031     property alias cfg_fontStyleName : fontDialog.fontChosen.styleName
0032     property alias cfg_fontSize : fontDialog.fontChosen.pointSize
0033
0034     property string cfg_timeFormat: ""
0035     property alias cfg_showLocalTimezone: showLocalTimezone.checked
0036     property alias cfg_displayTimezoneFormat: displayTimezoneFormat.currentIndex
0037     property alias cfg_showSeconds: showSecondsComboBox.currentIndex
0038
0039     property alias cfg_showDate: showDate.checked
0040     property string cfg_dateFormat: "shortDate"
0041     property alias cfg_customDateFormat: customDateFormat.text
0042     property alias cfg_use24hFormat: use24hFormat.currentIndex
0043     property alias cfg_dateDisplayFormat: dateDisplayFormat.currentIndex
0044
0045     Kirigami.FormLayout {
0046
0047         RowLayout {
0048             Kirigami.FormData.label: i18n("Information:")
0049
0050             QQC2.CheckBox {
0051                 id: showDate
0052                 text: i18n("Show date")
0053             }
0054
0055             QQC2.ComboBox {
0056                 id: dateDisplayFormat
0057                 enabled: showDate.checked
0058                 visible: Plasmoid.formFactor !== PlasmaCore.Types.Vertical
0059                 model: [
0060                     i18n("Adaptive location"),
0061                     i18n("Always beside time"),
0062                     i18n("Always below time"),
0063                 ]
0064                 onActivated: cfg_dateDisplayFormat = currentIndex
0065             }
0066         }
0067
0068         QQC2.ComboBox {
0069             id: showSecondsComboBox
0070             Kirigami.FormData.label: i18n("Show seconds:")
0071             model: [
0072                 i18nc("@option:check", "Never"),
0073                 i18nc("@option:check", "Only in the tooltip"),
0074                 i18n("Always"),
0075             ]
0076             onActivated: cfg_showSeconds = currentIndex;
0077         }
0078
0079         Item {
0080             Kirigami.FormData.isSection: true
0081         }
0082
0083         ColumnLayout {
0084             Kirigami.FormData.label: i18n("Show time zone:")
0085             Kirigami.FormData.buddyFor: showLocalTimeZoneWhenDifferent
0086
0087             QQC2.RadioButton {
0088                 id: showLocalTimeZoneWhenDifferent
0089                 text: i18n("Only when different from local time zone")
0090             }
0091
0092             QQC2.RadioButton {
0093                 id: showLocalTimezone
0094                 text: i18n("Always")
0095             }
0096         }
0097
0098         Item {
0099             Kirigami.FormData.isSection: true
0100         }
0101
0102         RowLayout {
0103             Kirigami.FormData.label: i18n("Display time zone as:")
0104
0105             QQC2.ComboBox {
0106                 id: displayTimezoneFormat
0107                 model: [
0108                     i18n("Code"),
0109                     i18n("City"),
0110                     i18n("Offset from UTC time"),
0111                 ]
0112                 onActivated: cfg_displayTimezoneFormat = currentIndex
0113             }
0114         }
0115
0116         Item {
0117             Kirigami.FormData.isSection: true
0118         }
0119
0120         RowLayout {
0121             Layout.fillWidth: true
0122             Kirigami.FormData.label: i18n("Time display:")
0123
0124             QQC2.ComboBox {
0125                 id: use24hFormat
0126                 model: [
0127                     i18n("12-Hour"),
0128                     i18n("Use Region Defaults"),
0129                     i18n("24-Hour")
0130                 ]
0131                 onCurrentIndexChanged: cfg_use24hFormat = currentIndex
0132             }
0133
0134             QQC2.Button {
0135                 visible: KAuthorized.authorizeControlModule("kcm_regionandlang")
0136                 text: i18n("Change Regional Settings…")
0137                 icon.name: "preferences-desktop-locale"
0138                 onClicked: KCMLauncher.openSystemSettings("kcm_regionandlang")
0139             }
0140         }
0141
0142         Item {
0143             Kirigami.FormData.isSection: true
0144         }
0145
0146         RowLayout {
0147             Kirigami.FormData.label: i18n("Date format:")
0148             enabled: showDate.checked
0149
0150             QQC2.ComboBox {
0151                 id: dateFormat
0152                 textRole: "label"
0153                 model: [
0154                     {
0155                         label: i18n("Long Date"),
0156                         name: "longDate",
0157                         format: Locale.LongFormat
0158                     },
0159                     {
0160                         label: i18n("Short Date"),
0161                         name: "shortDate",
0162                         format: Locale.ShortFormat
0163                     },
0164                     {
0165                         label: i18n("ISO Date"),
0166                         name: "isoDate",
0167                         format: Qt.ISODate
0168                     },
0169                     {
0170                         label: i18nc("custom date format", "Custom"),
0171                         name: "custom"
0172                     }
0173                 ]
0174                 onCurrentIndexChanged: cfg_dateFormat = model[currentIndex]["name"];
0175
0176                 Component.onCompleted: {
0177                     const isConfiguredDateFormat = item => item["name"] === Plasmoid.configuration.dateFormat;
0178                     currentIndex = model.findIndex(isConfiguredDateFormat);
0179                 }
0180             }
0181
0182             QQC2.Label {
0183                 Layout.fillWidth: true
0184                 textFormat: Text.PlainText
0185                 text: {
0186                     if (cfg_dateFormat === "shortDate" || cfg_dateFormat === "longDate") {
0187                         return Qt.formatDate(new Date(), Qt.locale(), dateFormat.model[dateFormat.currentIndex].format);
0188                     } else if (cfg_dateFormat === "custom") {
0189                         return Qt.formatDate(new Date(), customDateFormat.text);
0190                     } else {
0191                         return Qt.formatDate(new Date(), dateFormat.model[dateFormat.currentIndex].format);
0192                     }
0193                 }
0194             }
0195         }
0196
0197         QQC2.TextField {
0198             id: customDateFormat
0199             Layout.fillWidth: true
0200             enabled: showDate.checked
0201             visible: cfg_dateFormat === "custom"
0202         }
0203
0204         QQC2.Label {
0205             text: i18n("<a href=\"https://doc.qt.io/qt-6/qml-qtqml-qt.html#formatDateTime-method\">Time Format Documentation</a>")
0206             enabled: showDate.checked
0207             visible: cfg_dateFormat === "custom"
0208             wrapMode: Text.Wrap
0209
0210             Layout.preferredWidth: Layout.maximumWidth
0211             Layout.maximumWidth: Kirigami.Units.gridUnit * 16
0212
0213             HoverHandler {
0214                 cursorShape: parent.hoveredLink ? Qt.PointingHandCursor : undefined
0215             }
0216
0217             onLinkActivated: link => Qt.openUrlExternally(link)
0218         }
0219
0220         Item {
0221             Kirigami.FormData.isSection: true
0222         }
0223
0224         QQC2.ButtonGroup {
0225             buttons: [autoFontAndSizeRadioButton, manualFontAndSizeRadioButton]
0226         }
0227
0228         QQC2.RadioButton {
0229             Kirigami.FormData.label: i18nc("@label:group", "Text display:")
0230             id: autoFontAndSizeRadioButton
0231             text: i18nc("@option:radio", "Automatic")
0232         }
0233
0234         QQC2.Label {
0235             text: i18nc("@label", "Text will follow the system font and expand to fill the available space.")
0236             textFormat: Text.PlainText
0237             Layout.fillWidth: true
0238             wrapMode: Text.Wrap
0239             font: Kirigami.Theme.smallFont
0240         }
0241
0242         RowLayout {
0243             QQC2.RadioButton {
0244                 id: manualFontAndSizeRadioButton
0245                 text: i18nc("@option:radio setting for manually configuring the font settings", "Manual")
0246                 checked: !cfg_autoFontAndSize
0247                 onClicked: {
0248                     if (cfg_fontFamily === "") {
0249                         fontDialog.fontChosen = Kirigami.Theme.defaultFont
0250                     }
0251                 }
0252             }
0253
0254             QQC2.Button {
0255                 text: i18nc("@action:button", "Choose Style…")
0256                 icon.name: "settings-configure"
0257                 enabled: manualFontAndSizeRadioButton.checked
0258                 onClicked: {
0259                     fontDialog.selectedFont = fontDialog.fontChosen
0260                     fontDialog.open()
0261                 }
0262             }
0263
0264         }
0265
0266         QQC2.Label {
0267             visible: manualFontAndSizeRadioButton.checked
0268             text: i18nc("@info %1 is the font size, %2 is the font family", "%1pt %2", cfg_fontSize, fontDialog.fontChosen.family)
0269             textFormat: Text.PlainText
0270             font: fontDialog.fontChosen
0271         }
0272     }
0273
0274     QtDialogs.FontDialog {
0275         id: fontDialog
0276         title: i18nc("@title:window", "Choose a Font")
0277         modality: Qt.WindowModal
0278         parentWindow: appearancePage.Window.window
0279
0280         property font fontChosen: Qt.font()
0281
0282         onAccepted: {
0283             fontChosen = selectedFont
0284         }
0285     }
0286
0287     Component.onCompleted: {
0288         if (!Plasmoid.configuration.showLocalTimezone) {
0289             showLocalTimeZoneWhenDifferent.checked = true;
0290         }
0291     }
0292 }