From a0a675bc990cb3c93cece45f4f37411679c333e3 Mon Sep 17 00:00:00 2001 From: ruinivist Date: Sat, 23 May 2026 12:23:38 +0000 Subject: [PATCH] feat: add configurable text and separator spacing --- README.md | 10 ++++++ package/contents/config/main.xml | 20 ++++++++++++ package/contents/ui/Representation.qml | 35 ++++++++++++++------ package/contents/ui/configGeneral.qml | 45 ++++++++++++++++++++++++++ package/contents/ui/main.qml | 20 ++++++++++++ 5 files changed, 120 insertions(+), 10 deletions(-) diff --git a/README.md b/README.md index a854107..cccc0e0 100644 --- a/README.md +++ b/README.md @@ -92,6 +92,16 @@ Enable the repository pre-commit hook: make hooks-install ``` +## Customization + +The widget appearance can be tuned from the Plasma widget settings, including: + +- title/artist vertical spacing +- NOW/PLAYING label vertical spacing +- separator gap from labels +- separator gap from track text +- separator height percentage + ## Release Upload Required GitHub repository secrets: diff --git a/package/contents/config/main.xml b/package/contents/config/main.xml index 0f73b03..7733773 100644 --- a/package/contents/config/main.xml +++ b/package/contents/config/main.xml @@ -41,5 +41,25 @@ false + + + 5 + + + + 0 + + + + 4 + + + + 4 + + + + 90 + diff --git a/package/contents/ui/Representation.qml b/package/contents/ui/Representation.qml index 14ba7ee..7dd2dd5 100644 --- a/package/contents/ui/Representation.qml +++ b/package/contents/ui/Representation.qml @@ -15,6 +15,11 @@ MouseArea { property int configuredBackgroundRadius: 0 property string configuredForegroundColor: "white" property bool configuredTextShadowEnabled: false + property int configuredTrackTextVerticalSpacing: 5 + property int configuredLabelVerticalSpacing: 0 + property int configuredSeparatorGapLabel: 4 + property int configuredSeparatorGapTrack: 4 + property int configuredSeparatorHeight: 90 readonly property double buttonSize: 16 readonly property string effectiveLabelVisibilityMode: configuredLabelVisibilityMode === "always" || configuredLabelVisibilityMode === "never" ? configuredLabelVisibilityMode : "auto" readonly property bool labelsOnRight: configuredLabelPlacement === "right" @@ -22,10 +27,14 @@ MouseArea { readonly property bool usesCustomBackground: configuredBackgroundStyle === "custom" readonly property int hideModeHorizontalPadding: 8 readonly property int labelRailWidth: 100 - readonly property int separatorPadding: 4 readonly property string effectiveBackgroundColor: configuredBackgroundColor || "transparent" readonly property int effectiveBackgroundRadius: Math.max(0, configuredBackgroundRadius) readonly property string effectiveForegroundColor: configuredForegroundColor || "white" + readonly property int effectiveTrackTextVerticalSpacing: configuredTrackTextVerticalSpacing + readonly property int effectiveLabelVerticalSpacing: configuredLabelVerticalSpacing + readonly property int effectiveSeparatorGapLabel: Math.max(0, configuredSeparatorGapLabel) + readonly property int effectiveSeparatorGapTrack: Math.max(0, configuredSeparatorGapTrack) + readonly property int effectiveSeparatorHeight: Math.max(0, Math.min(100, configuredSeparatorHeight)) readonly property bool hasTrackInfo: player.ready && (((player.title || "").trim().length > 0) || ((player.artists || "").trim().length > 0)) readonly property bool nowPlayingLabelsVisible: { if (effectiveLabelVisibilityMode === "always") @@ -104,7 +113,7 @@ MouseArea { id: nowPlayingLabels Layout.alignment: mediaControlsMouseArea.labelsOnRight ? Qt.AlignLeft : Qt.AlignRight - spacing: 0 + spacing: mediaControlsMouseArea.effectiveLabelVerticalSpacing visible: mediaControlsMouseArea.nowPlayingLabelsVisible ShadowedLabel { @@ -218,19 +227,25 @@ MouseArea { } - Rectangle { - id: separator + Item { + id: separatorContainer visible: mediaControlsMouseArea.nowPlayingLabelsVisible && !mediaControlsMouseArea.hideNowPlayingArea Layout.fillHeight: true - Layout.leftMargin: visible ? mediaControlsMouseArea.separatorPadding : 0 - Layout.rightMargin: visible ? mediaControlsMouseArea.separatorPadding : 0 - Layout.topMargin: visible ? mediaControlsMouseArea.separatorPadding : 0 - Layout.bottomMargin: visible ? mediaControlsMouseArea.separatorPadding : 0 + Layout.leftMargin: visible ? mediaControlsMouseArea.effectiveSeparatorGapLabel : 0 + Layout.rightMargin: visible ? mediaControlsMouseArea.effectiveSeparatorGapTrack : 0 Layout.minimumWidth: visible ? 1 : 0 Layout.preferredWidth: visible ? 1 : 0 Layout.maximumWidth: visible ? 1 : 0 - color: mediaControlsMouseArea.effectiveForegroundColor + + Rectangle { + anchors.horizontalCenter: parent.horizontalCenter + anchors.verticalCenter: parent.verticalCenter + width: 1 + height: Math.round(parent.height * mediaControlsMouseArea.effectiveSeparatorHeight / 100) + color: mediaControlsMouseArea.effectiveForegroundColor + } + } ColumnLayout { @@ -240,6 +255,7 @@ MouseArea { Layout.minimumWidth: 0 Layout.leftMargin: mediaControlsMouseArea.hideNowPlayingArea ? mediaControlsMouseArea.hideModeHorizontalPadding : 0 Layout.rightMargin: mediaControlsMouseArea.hideNowPlayingArea ? mediaControlsMouseArea.hideModeHorizontalPadding : 0 + spacing: mediaControlsMouseArea.effectiveTrackTextVerticalSpacing ShadowedLabel { Layout.fillWidth: true @@ -255,7 +271,6 @@ MouseArea { } ShadowedLabel { - Layout.maximumWidth: 300 Layout.fillWidth: true Layout.alignment: mediaControlsMouseArea.labelsOnRight ? Qt.AlignRight : Qt.AlignLeft shadowEnabled: mediaControlsMouseArea.configuredTextShadowEnabled diff --git a/package/contents/ui/configGeneral.qml b/package/contents/ui/configGeneral.qml index 64ff334..bf8de6c 100644 --- a/package/contents/ui/configGeneral.qml +++ b/package/contents/ui/configGeneral.qml @@ -17,6 +17,11 @@ KCM.SimpleKCM { property alias cfg_backgroundRadius: backgroundRadiusSpinBox.value property alias cfg_foregroundColor: foregroundColorField.text property alias cfg_textShadowEnabled: textShadowCheckBox.checked + property alias cfg_trackTextVerticalSpacing: trackTextVerticalSpacingSpinBox.value + property alias cfg_labelVerticalSpacing: labelVerticalSpacingSpinBox.value + property alias cfg_separatorGapLabel: separatorGapLabelSpinBox.value + property alias cfg_separatorGapTrack: separatorGapTrackSpinBox.value + property alias cfg_separatorHeight: separatorHeightSpinBox.value readonly property var availableFonts: Qt.fontFamilies() readonly property var labelVisibilityOptions: [{ "text": i18n("Auto hide when idle"), @@ -187,6 +192,46 @@ KCM.SimpleKCM { text: i18n("Enable") } + QQC2.SpinBox { + id: trackTextVerticalSpacingSpinBox + + Kirigami.FormData.label: i18n("Title/artist spacing:") + from: -12 + to: 24 + } + + QQC2.SpinBox { + id: labelVerticalSpacingSpinBox + + Kirigami.FormData.label: i18n("NOW/PLAYING spacing:") + from: -12 + to: 24 + } + + QQC2.SpinBox { + id: separatorGapLabelSpinBox + + Kirigami.FormData.label: i18n("Separator gap from labels:") + from: 0 + to: 24 + } + + QQC2.SpinBox { + id: separatorGapTrackSpinBox + + Kirigami.FormData.label: i18n("Separator gap from track:") + from: 0 + to: 24 + } + + QQC2.SpinBox { + id: separatorHeightSpinBox + + Kirigami.FormData.label: i18n("Separator height (%):") + from: 0 + to: 100 + } + } Dialogs.ColorDialog { diff --git a/package/contents/ui/main.qml b/package/contents/ui/main.qml index 0bc2a18..16c0d28 100644 --- a/package/contents/ui/main.qml +++ b/package/contents/ui/main.qml @@ -27,6 +27,16 @@ PlasmoidItem { property string configuredForegroundColor: plasmoid.configuration.foregroundColor // qmllint disable missing-property property bool configuredTextShadowEnabled: plasmoid.configuration.textShadowEnabled + // qmllint disable missing-property + property int configuredTrackTextVerticalSpacing: plasmoid.configuration.trackTextVerticalSpacing + // qmllint disable missing-property + property int configuredLabelVerticalSpacing: plasmoid.configuration.labelVerticalSpacing + // qmllint disable missing-property + property int configuredSeparatorGapLabel: plasmoid.configuration.separatorGapLabel + // qmllint disable missing-property + property int configuredSeparatorGapTrack: plasmoid.configuration.separatorGapTrack + // qmllint disable missing-property + property int configuredSeparatorHeight: plasmoid.configuration.separatorHeight readonly property int resolvedBackgroundHints: { if (configuredBackgroundStyle === "default") return PlasmaCore.Types.DefaultBackground | PlasmaCore.Types.ConfigurableBackground; @@ -61,6 +71,11 @@ PlasmoidItem { configuredBackgroundRadius: root.configuredBackgroundRadius configuredForegroundColor: root.configuredForegroundColor configuredTextShadowEnabled: root.configuredTextShadowEnabled + configuredTrackTextVerticalSpacing: root.configuredTrackTextVerticalSpacing + configuredLabelVerticalSpacing: root.configuredLabelVerticalSpacing + configuredSeparatorGapLabel: root.configuredSeparatorGapLabel + configuredSeparatorGapTrack: root.configuredSeparatorGapTrack + configuredSeparatorHeight: root.configuredSeparatorHeight } compactRepresentation: Representation { @@ -76,6 +91,11 @@ PlasmoidItem { configuredBackgroundRadius: root.configuredBackgroundRadius configuredForegroundColor: root.configuredForegroundColor configuredTextShadowEnabled: root.configuredTextShadowEnabled + configuredTrackTextVerticalSpacing: root.configuredTrackTextVerticalSpacing + configuredLabelVerticalSpacing: root.configuredLabelVerticalSpacing + configuredSeparatorGapLabel: root.configuredSeparatorGapLabel + configuredSeparatorGapTrack: root.configuredSeparatorGapTrack + configuredSeparatorHeight: root.configuredSeparatorHeight } }