Skip to content

Add support for custom fonts #22

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Hangman wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Add support for custom fonts #22

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 9 additions & 0 deletions package/contents/config/main.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,9 @@
<entry name="day_font_size" type="Int">
<default>72</default>
</entry>
<entry name="day_font_family" type="String">
<default>Anurati</default>
</entry>
<entry name="day_letter_spacing" type="Int">
<default>17</default>
</entry>
Expand All @@ -18,6 +21,9 @@
<entry name="date_font_size" type="Int">
<default>19</default>
</entry>
<entry name="date_font_family" type="String">
<default>Poppins</default>
</entry>
<entry name="date_letter_spacing" type="Int">
<default>3</default>
</entry>
Expand All @@ -30,6 +36,9 @@
<entry name="time_font_size" type="Int">
<default>19</default>
</entry>
<entry name="time_font_family" type="String">
<default>Poppins</default>
</entry>
<entry name="time_letter_spacing" type="Int">
<default>3</default>
</entry>
Expand Down
89 changes: 88 additions & 1 deletion package/contents/ui/configAppearance.qml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
Expand All @@ -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")
Expand All @@ -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")
Expand All @@ -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")
Expand Down Expand Up @@ -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")
Expand All @@ -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
}
}
}
}
47 changes: 30 additions & 17 deletions package/contents/ui/main.qml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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
Expand All @@ -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
Expand All @@ -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
Expand All @@ -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
Expand All @@ -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
Expand Down